:root {
 --line: #e5e5e5;
 --padX: 50px;
 --padY: 24px;
}

/* セクションは白背景のまま */
.works {
 background: #fff;
 height: auto;
 padding: 160px 0 0;
}

.works__intro {
 max-width: 680px;
 margin: 0 60px 40px;
 line-height: 1.7;
 font-size: 17px;
}
.works__intro p {
 margin: 0;
}

/* ===== 横幅100%の“表”グリッド ===== */
.worksrow-grid {
 width: 100%; /* 横幅いっぱい */
 margin: 0;
 display: flex;
 flex-direction: column;
 gap: 0;
 border-top: 1px solid var(--line);
 border-left: 1px solid var(--line);
 background-color: #edefeb;
 margin-top: 20px;
}

.workrow {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 0;
 align-items: stretch;
}

/* 偶数行は左右反転（PCのみ） */
.workrow:nth-child(even) .workcell:first-child {
 order: 2;
}

.workrow:nth-child(even) .workcell:last-child {
 order: 1;
}

/* 各セル */
.workcell {
 position: relative;
 display: block;
 text-decoration: none;
 color: inherit;
 border-right: 1px solid var(--line);
 border-bottom: 1px solid var(--line);
 background-color: #edefeb;
}

/* 画像側 */
.photo-aspect {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 width: 100%;
 height: 100%;
}
/* 16:9 */
.workcell--photo img {
 display: block;
 object-fit: cover;
 object-position: 50% 50%;
 font-family: "object-fit: cover;";
 width: 100%;
 height: 100%;
}

.workcell__label {
 position: absolute;
 left: 14px;
 bottom: 12px;
 background: rgba(0, 0, 0, 0.55);
 color: #fff;

 letter-spacing: 0.4px;
 padding: 6px 12px;
 border-radius: 999px;
 font-size: 0.95rem;
 pointer-events: none;
}

/* テキスト側 */
.workcell--list {
 display: flex;
 align-items: center;
 position: relative;
 overflow: hidden;
}

.workcell--list::after {
 content: "";
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 width: 50%; /* 右半分に表示 */
 background-repeat: no-repeat;
 background-position: right center;
 background-size: contain;
 opacity: 0.1; /* 薄さ調整 */
 pointer-events: none;
}

/* 個別背景 */
.workcell--list--merchandise::after {
 background-image: url("/img/merchandise_w.png");
 background-image: url("https://tagger-web-fkaqeuevg3fkegfk.eastasia-01.azurewebsites.net/img/merchandise_w.png"); /*あとで消す*/
}

.workcell--list--event::after {
 background-image: url("/img/event_w.png");
 background-image: url("https://tagger-web-fkaqeuevg3fkegfk.eastasia-01.azurewebsites.net/img/event_w.png"); /*あとで消す*/
}

.workcell--list--licence::after {
 background-image: url("/img/licence_w.png");
 background-image: url("https://tagger-web-fkaqeuevg3fkegfk.eastasia-01.azurewebsites.net/img/licence_w.png"); /*あとで消す*/
}

.workcell--list--media::after {
 background-image: url("/img/media_w.png");
 background-image: url("https://tagger-web-fkaqeuevg3fkegfk.eastasia-01.azurewebsites.net/img/media_w.png"); /*あとで消す*/
}

.vm-wrap-work {
 margin-left: 8px;
}

.worklist {
 width: 100%;
 padding-block: calc((50 / 1360) * 100cqw);
 padding-inline: calc((60 / 1360) * 100cqw);
 position: relative;
}

.worklist::before {
 content: none;
 position: absolute;
 left: calc(var(--padX) - 20px); /* テキストの左揃えにする */
 top: var(--padY); /* ← タイトル上端に揃う */
 bottom: var(--padY); /* ← リスト全体の下端まで伸ばす */
 width: 12px;
 background: rgba(57, 57, 57, 0.3);
}

.worklist__title {
 margin: 0 0 12px;
 font-size: 26px;
 font-weight: 700;

 letter-spacing: 0.6px;
 color: #393939;
}

.worklist__ul {
 margin: 14px 0 100px;
 padding-left: 18px;
 line-height: 1.7;
 color: #393939;
}

.worklist__ul li + li {
 margin-top: 6px;
}

/* タイトル＆目的の2段表示 */
.cs-title {
 color: #222;
 line-height: 1.55;
}

.cs-purpose {
 margin-top: 2px;
 font-size: 0.92rem;
 color: #666;
 line-height: 1.6;
 word-break: break-word;
}

/* etc.（少し余白を詰める） */
.worklist__ul li.etc {
 margin-top: 6px;
}

@media (max-width: 1400px) {
 .worklist__ul {
  margin: 14px 0 30px;
 }
}

/* ===== レスポンシブ ===== */
@media (max-width: 1024px) {
 :root {
  --padX: 22px;
  --padY: 20px;
 }
}

/* タブレット */
@media (max-width: 768px) {
 .works__intro {
  max-width: unset;
  font-size: 16px;
  margin: 0 30px 40px;
 }
 .workcell--photo {
  height: 50vw;
 }
 .workrow {
  grid-template-columns: 1fr;
 }
 .workrow:nth-child(even) .workcell:first-child {
  order: 1;
 }
 .workrow:nth-child(even) .workcell:last-child {
  order: 2;
 }
 .worklist {
  padding-block: calc((50 / 768) * 100cqw);
  padding-inline: calc((60 / 768) * 100cqw);
  position: relative;
 }
 .worklist__ul li + li {
  font-size: 16px;
 }
}

/* スマホ */
@media (max-width: 600px) {
 .works {
  padding: 120px 0 0;
 }
 .works__intro {
  font-size: min(15.7px, 4.18vw);
  margin: 0 20px 20px;
 }
 .worklist {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px 20px;
 }
 .worklist__title {
  margin: 0 0 15px;
  font-size: 22px;
  letter-spacing: 0;
 }
 .worklist__ul {
  margin: 10px 0;
  font-size: min(17px, 4.53vw);
 }
 .cs-purpose {
  margin-top: 5px;
  font-size: min(15px, 4vw);
 }
 .vm-wrap-work {
  align-self: flex-end;
 }
}