.wg {
  width:100%;
  position:relative;
  z-index:10;
  font-weight:300
}
.wg button,.wg-dialog button {
  font:inherit;
  letter-spacing:inherit;
  cursor:pointer
}
.wg button:focus-visible,.wg a:focus-visible,.wg-dialog :focus-visible {
  outline:2px solid var(--yl-accent,#e63946);
  outline-offset:5px
}
.wg-intro {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  text-align:center;
  padding:72px 24px 96px
}
.wg-thread {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0
}
.wg-intro-content {
  position:relative;
  z-index:1
}
.wg-eyebrow {
  font-size:12px;
  letter-spacing:.4em;
  color:#777;
  display:block;
  margin-bottom:16px
}
.wg-intro h1 {
  font-size:clamp(22px,3.2vw,32px);
  font-weight:300;
  letter-spacing:.24em;
  line-height:2;
  margin:0 0 32px
}
.wg-intro p {
  font-size:14px;
  color:#555;
  margin:auto;
  max-width:560px
}
.wg-underline {
  position:relative;
  display:inline-block
}
.wg-underline:after {
  content:"";
  position:absolute;
  left:-5%;
  bottom:4px;
  width:110%;
  height:1px;
  background:#333;
  transform:rotate(-.5deg);
  transform-origin:left;
  animation:wg-line 1.2s .4s both
}
@keyframes wg-line {
  from {
  transform:rotate(-.5deg) scaleX(0)
}
to {
  transform:rotate(-.5deg) scaleX(1)
}

}

.wg-gallery {
  background:#f2f2f2;
  padding:96px 24px 128px
}
.wg-inner {
  max-width:1120px;
  margin:auto
}
.wg-filters {
  display:flex;
  flex-direction:column;
  gap:18px;
  border-bottom:1px solid #ddd;
  padding-bottom:32px;
  margin-bottom:56px
}
.wg-filter-row {
  display:flex;
  align-items:flex-start;
  gap:28px
}
.wg-filter-row>span {
  font-size:11px;
  letter-spacing:.3em;
  color:#777;
  min-width:72px;
  font-style:italic;
  padding-top:6px
}
.wg-chips,.wg-tags {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.wg-chips button,.wg-toolbar button,.wg-device-switch button {
  font-size:12px;
  letter-spacing:.15em;
  padding:4px 16px;
  border:1px solid #d6d6d6;
  border-radius:999px;
  background:#fff;
  color:#555;
  transition:background .35s,color .35s;
  line-height:1.8
}
.wg-chips button:hover {
  border-color:#333
}
.wg button[aria-pressed=true],.wg-dialog button[aria-pressed=true] {
  background:#1a1c23;
  border-color:#1a1c23;
  color:#fff
}
.wg-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px
}
.wg-toolbar>div {
  display:flex;
  gap:8px
}
#wg-count {
  font-size:14px;
  color:#555;
  white-space:nowrap
}
.wg-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));
  gap:56px 40px
}
.wg-card {
  min-width:0;
  animation:wg-fade .65s ease-out both
}
@keyframes wg-fade {
  from {
  opacity:0;
  transform:translateY(12px)
}
to {
  opacity:1;
  transform:none
}

}
.wg-shot {
  display:block;
  position:relative;
  text-align:left;
  width:100%;
  background:#fff;
  padding:10px 10px 12px;
  overflow:hidden;
  transition:transform .6s,box-shadow .6s;
  border:1px solid #333;
  border-radius:255px 12px 225px 12px / 12px 225px 12px 255px
}
.wg-shot:hover {
  transform:translateY(-6px) rotate(-.4deg);
  box-shadow:0 18px 40px #0001
}
.wg-dots {
  display:block;
  font-size:10px;
  line-height:1;
  padding:2px 4px 9px;
  color:#aaa;
  letter-spacing:2px
}
.wg-screenshot {
  display:block;
  width:100%;
  aspect-ratio:16/10;
  object-fit:contain;
  background:#fff6f3;
  cursor:zoom-in
}
.wg-placeholder {
  display:grid;
  place-items:center;
  aspect-ratio:16/10;
  color:#777
}
.wg-zoom {
  position:absolute;
  bottom:20px;
  right:20px;
  font-size:11px;
  line-height:2;
  background:#fffffff0;
  border:1px solid #333;
  border-radius:999px;
  padding:2px 14px;
  opacity:0;
  transition:opacity .4s
}
.wg-shot:hover .wg-zoom,.wg-shot:focus-visible .wg-zoom {
  opacity:1
}
.wg-meta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin:22px 4px 8px;
  font-size:11px;
  letter-spacing:.2em;
  color:#777
}
.wg-meta>span:first-child {
  white-space:nowrap
}
.wg-meta .wg-tags {
  justify-content:flex-end;
  gap:4px
}
.wg-tag {
  font-size:10px;
  letter-spacing:.1em;
  border:1px solid #d9d9d9;
  padding:0 10px;
  border-radius:999px;
  line-height:1.9;
  color:#666;
  background:#ffffff99;
  display:inline-block
}
.wg-card h3 {
  font-size:17px;
  font-weight:300;
  letter-spacing:.14em;
  line-height:1.8;
  margin:0 4px
}
.wg-card h3 button {
  text-align:left
}
.wg-client {
  font-size:12px;
  color:#777;
  margin:6px 4px 0
}
.wg-more {
  display:inline-block;
  margin:14px 4px 0;
  font-size:12px;
  letter-spacing:.2em;
  border-bottom:1px solid #aaa;
  padding-bottom:4px
}
.wg-more:hover {
  border-color:var(--yl-accent,#e63946)
}
.wg-issue {
  display:none;
  font-size:13px;
  color:#666;
  margin:16px 4px
}
.wg-empty {
  text-align:center;
  padding:80px 0;
  color:#666;
  font-size:14px;
  grid-column:1/-1
}
.wg-live {
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:#fff;
  min-width:0
}
.wg-live iframe {
  position:absolute;
  top:0;
  left:0;
  border:0;
  transform-origin:0 0;
  background:#fff
}
.wg-shot .wg-live {
  pointer-events:none
}
.wg-shot .wg-live:after {
  content:"";
  position:absolute;
  inset:0
}
.wg-grid.wg-list {
  grid-template-columns:1fr;
  gap:72px
}
.wg-list .wg-card {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:56px;
  align-items:center
}
.wg-list .wg-card:nth-child(even) {
  grid-template-columns:1fr 1.25fr
}
.wg-list .wg-card:nth-child(even) .wg-shot {
  order:2
}
.wg-list .wg-card h3 {
  font-size:22px
}
.wg-list .wg-issue {
  display:block
}
.wg-channel {
  grid-column:1/-1;
  justify-self:center;
  margin-top:40px;
  padding:12px 36px;
  background:#fff;
  border:1px solid #333;
  font-size:13px
}
.wg-channel:hover {
  background:#1a1c23;
  color:#fff
}
.wg-video-thumb {
  position:relative;
  display:block;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#111
}
.wg-video-thumb img,.wg-photo-shot img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s
}
.wg-shot:hover img {
  transform:scale(1.04)
}
.wg-play {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  color:#fff;
  background:#1a1c2366;
  border:1px solid #fff;
  border-radius:50%
}
.wg-shot:hover .wg-play {
  background:#e63946
}
.wg-youtube {
  position:absolute;
  left:20px;
  bottom:20px;
  font-size:10px;
  color:#fff;
  background:#0009;
  border-radius:999px;
  padding:0 10px
}
.wg-photo-shot {
  aspect-ratio:4/3;
  cursor:zoom-in
}
.wg-photo-shot img {
  display:block
}
.wg-cta {
  background:#f9f9f9;
  text-align:center;
  padding:128px 24px
}
.wg-cta h2 {
  font-size:clamp(18px,2.2vw,24px);
  font-weight:300;
  line-height:2
}
.wg-cta p {
  font-size:14px;
  color:#666;
  margin:24px 0 32px
}
.wg-cta a {
  display:inline-block;
  padding:16px 48px;
  border:1px solid #333;
  background:#fff
}

.wg-dialog {
  border:0;
  padding:0;
  width:calc(100% - 40px);
  max-width:1080px;
  max-height:calc(100dvh - 80px);
  overflow:auto;
  color:var(--yl-text,#2c2c2c);
  background:#fff;
  font-weight:300
}
.wg-dialog::backdrop {
  background:#fcfcfcf0;
  backdrop-filter:blur(8px)
}
.wg-dialog-box {
  position:relative;
  padding:56px 56px 64px
}
.wg-close {
  position:absolute;
  right:14px;
  top:12px;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  background:transparent;
  border:0;
  font-size:30px!important;
  z-index:2;
  line-height:1
}
.wg-detail-meta {
  font-size:12px;
  color:#777;
  letter-spacing:.2em;
  border-bottom:1px solid #eee;
  padding:0 40px 16px 0;
  margin-bottom:28px
}
.wg-dialog h2 {
  font-size:clamp(20px,2.4vw,26px);
  font-weight:300;
  letter-spacing:.16em;
  line-height:1.8;
  margin:0 0 6px
}
.wg-dialog .wg-client {
  margin-bottom:32px
}
.wg-preview-tools {
  display:flex;
  gap:16px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:20px
}
.wg-device-switch {
  display:inline-flex;
  gap:4px;
  background:#fafafa;
  border:1px solid #ddd;
  border-radius:999px;
  padding:3px
}
.wg-device-switch button {
  border:0;
  font-size:11px;
  padding:4px 18px
}
.wg-stage {
  display:flex;
  gap:28px;
  justify-content:center;
  align-items:flex-end;
  background:#f2f2f2;
  padding:40px 32px
}
.wg-pc {
  width:100%;
  max-width:760px;
  background:#fff;
  border:1px solid #333;
  border-radius:6px;
  padding:8px;
  min-width:0
}
.wg-sp {
  flex-shrink:0;
  width:250px;
  border:1px solid #333;
  border-radius:32px;
  padding:12px;
  background:#fff
}
.wg-sp .wg-live,.wg-sp .wg-screenshot {
  aspect-ratio:9/19;
  border-radius:22px
}
.wg-stage[data-device-view=both] .wg-sp {
  width:190px
}
.wg-stage[data-device-view=pc] .wg-sp,.wg-stage[data-device-view=sp] .wg-pc {
  display:none
}
.wg-hint {
  font-size:11px;
  font-style:italic;
  color:#777;
  margin-top:12px
}
.wg-detail-columns {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:56px;
  margin-top:48px
}
.wg-story {
  display:flex;
  flex-direction:column;
  gap:14px;
  font-size:14px;
  color:#555;
  line-height:1.9
}
.wg-story p {
  background:#fcfcfc;
  border-left:1px solid #ccc;
  padding:16px 20px
}
.wg-story strong {
  font-weight:400
}
.wg-facts {
  font-size:13px
}
.wg-facts h3 {
  font-size:11px;
  letter-spacing:.3em;
  color:#777;
  margin:0 0 12px;
  font-style:italic;
  font-weight:300
}
.wg-facts p,.wg-facts>.wg-tags {
  margin-bottom:24px
}
.wg-site-link {
  display:inline-block;
  padding:12px 28px;
  border:1px solid #333
}
.wg-site-link:hover {
  background:#1a1c23;
  color:#fff
}
.wg-pagination {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid #eee;
  padding-top:28px;
  margin-top:48px;
  font-size:12px
}
.wg-viewer {
  width:calc(100% - 48px);
  max-width:1200px;
  background:#1a1c23;
  color:#eee
}
.wg-viewer::backdrop {
  background:#1a1c23ef
}
.wg-viewer-box {
  position:relative;
  padding:64px 24px 24px
}
.wg-viewer h2 {
  font-size:13px;
  padding-right:32px;
  margin-bottom:24px
}
.wg-enlarged {
  max-width:100%;
  max-height:75dvh;
  margin:auto;
  object-fit:contain;
  display:block
}
.wg-player {
  display:block;
  width:100%;
  aspect-ratio:16/9;
  border:0;
  background:#000
}
.wg-external {
  font-size:12px;
  display:inline-block;
  margin-top:16px;
  border-bottom:1px solid #aaa
}
.wg-full-frame {
  width:100%;
  margin:20px auto 0
}
.wg-full-frame .wg-live {
  height:65dvh;
  aspect-ratio:auto
}
.wg-full-frame[data-full-view=sp] {
  max-width:390px
}
.wg-full-frame[data-full-view=sp] .wg-live {
  border-radius:24px
}
.site-header a[aria-current=page] {
  border-bottom:1px solid var(--yl-accent,#e63946)
}

@media(max-width:820px) {
  .wg-intro {
  padding:48px 24px 64px
}
.wg-gallery {
  padding:64px 20px 80px
}
.wg-filter-row {
  flex-direction:column;
  gap:10px
}
.wg-grid {
  gap:40px
}
.wg-list .wg-card,.wg-list .wg-card:nth-child(even) {
  grid-template-columns:1fr;
  gap:8px
}
.wg-list .wg-card:nth-child(even) .wg-shot {
  order:0
}
.wg-list .wg-card h3 {
  font-size:18px
}
.wg-dialog {
  width:calc(100% - 24px);
  max-height:calc(100dvh - 24px)
}
.wg-dialog-box {
  padding:56px 22px 40px
}
.wg-stage {
  padding:24px 12px
}
.wg-stage[data-device-view=both] .wg-sp {
  display:none
}
.wg-detail-columns {
  grid-template-columns:1fr;
  gap:32px
}
.wg-dialog h2 {
  font-size:20px
}
.wg-preview-tools {
  gap:8px
}
.wg-cta {
  padding:80px 24px
}
.wg-viewer-box {
  padding:64px 12px 20px
}
.wg-sp {
  max-width:100%
}
.wg-zoom {
  opacity:1;
  font-size:10px
}
.wg-meta {
  letter-spacing:.1em
}

}

@media(prefers-reduced-motion:reduce) {
  .wg *,.wg *:before,.wg *:after,.wg-dialog * {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important
}

}


.wg-image-open { display: block; width: 100%; }
.wg-story p { white-space: pre-line; }
.wg-card-text, .wg-detail-columns > * { min-width: 0; }
.wg-client, .wg-story p, .wg-facts p, .wg-dialog h2 { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .wg-intro { padding: 40px 20px 48px; }
  .wg-intro h1 { margin-bottom: 24px; letter-spacing: .16em; line-height: 1.9; }
  .wg-intro p { font-size: 13px; line-height: 2; }
  .wg-gallery { padding: 44px 16px 64px; }
  .wg-filters { margin-bottom: 32px; padding-bottom: 24px; gap: 16px; }
  .wg-filter-row { gap: 8px; }
  .wg-chips { gap: 6px; }
  .wg-chips button, .wg-toolbar button { min-height: 36px; padding: 6px 12px; line-height: 1.6; }
  .wg-toolbar { gap: 8px; }
  .wg-toolbar > div { gap: 6px; }
  .wg-meta { flex-wrap: wrap; align-items: flex-start; row-gap: 6px; }
  .wg-meta > span:first-child { white-space: normal; }
  .wg-meta .wg-tags { justify-content: flex-start; }
  .wg-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
  .wg-dialog-box { padding: 56px 16px 28px; }
  .wg-device-switch { max-width: 100%; gap: 2px; }
  .wg-device-switch button { min-height: 36px; padding: 4px 12px; font-size: 10px; }
  .wg-stage { padding: 20px 10px; }
  .wg-pagination { gap: 12px; }
  .wg-viewer-box { padding: 56px 12px 20px; }
}