.esns {
  --esns-ink:var(--ink,#3a2a21);
  --esns-sub:var(--ink-2,#6e5b4e);
  --esns-gold:var(--gold,#a98b5d);
  --esns-line:var(--line,#ddd0bb);
  --esns-paper:var(--paper,#f4efe6);
  --esns-card:#fff;
  --esns-w:200px;
  --esns-h:374px;
  max-width: var(--wrap,1120px);
  margin: 0 auto;
  padding: 72px 32px 80px;
  color: var(--esns-ink);
}
.esns-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.esns-eyebrow {
  margin: 0;
  font-size: 13px;
  letter-spacing: .32em;
  color: var(--esns-gold);
}
.esns-head h2 {
  margin: 6px 0 0;
  font-family: var(--mincho,"Hiragino Mincho ProN",serif);
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.45;
  letter-spacing: .06em;
}
.esns-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.esns-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border: 1px solid var(--esns-gold);
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--esns-ink);
  background: rgba(255, 255, 255, .6);
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), background .5s cubic-bezier(.22, .61, .36, 1);
}
.esns-links a:hover {
  transform: translateY(-2px);
  background: #fff;
}
.esns-links svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.esns.in-grid {
  grid-column: 1/-1;
  max-width: none;
  width: 100%;
  min-width: 0;
  padding: 34px 0 6px;
}
.esns-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 2px 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.esns-track::-webkit-scrollbar {
  display: none;
}
.esns-card {
  flex: 0 0 var(--esns-w);
  height: var(--esns-h);
  scroll-snap-align: start;
  background: var(--esns-card);
  border: 1px solid var(--esns-line);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .5s cubic-bezier(.22, .61, .36, 1);
}
.esns-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(58, 42, 33, .14);
}
.esns-card.is-wide {
  flex-basis: calc(var(--esns-w) * 1.6);
}
.esns-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--esns-sub);
  border-bottom: 1px solid var(--esns-line);
  flex: 0 0 auto;
}
.esns-tag b {
  color: var(--esns-ink);
  font-weight: 700;
  letter-spacing: .04em;
}
.esns-tag svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--esns-gold);
}
.esns-tag .d {
  margin-left: auto;
}
.esns-card.ig .esns-tag {
  background:
    linear-gradient(
      90deg,
      #e1306c,
      #c13584);
  border-bottom-color: transparent;
  color: #fff;
}
.esns-card.yt .esns-tag {
  background: #0f0f0f;
  border-bottom-color: transparent;
  color: #fff;
}
.esns-card.ig .esns-tag b,
.esns-card.yt .esns-tag b {
  color: #fff;
}
.esns-card.ig .esns-tag svg {
  color: #fff;
}
.esns-card.yt .esns-tag svg {
  color: #ff0000;
}
.esns-media {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  background: #14100e;
}
.esns-media {
  display: block;
}
.esns-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.esns-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: rgba(20, 16, 14, .55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .5s cubic-bezier(.22, .61, .36, 1);
}
.esns-play svg {
  width: 24px;
  height: 24px;
  margin-left: 3px;
}
.esns-card:hover .esns-play {
  background: rgba(20, 16, 14, .75);
}
.esns-card.yt-wide .esns-media {
  flex: 0 0 auto;
  aspect-ratio: 16/9;
}
.esns-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}
.esns-body .t {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 700;
}
.esns-body .more {
  margin-top: auto;
  align-self: flex-start;
  font-size: 14px;
  color: var(--esns-gold);
  border-bottom: 1px solid currentColor;
  line-height: 1.5;
}
.esns-bar {
  position: relative;
  height: 6px;
  margin: 18px 2px 0;
  background: var(--esns-line);
  border-radius: 999px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}
.esns-bar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  bottom: -10px;
}
.esns-bar-thumb {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--esns-gold);
  border-radius: 999px;
  cursor: grab;
  transition: background .3s ease;
}
.esns-bar:hover .esns-bar-thumb,
.esns-bar.is-drag .esns-bar-thumb {
  background: #8a6e44;
}
.esns-bar.is-drag .esns-bar-thumb {
  cursor: grabbing;
}
.esns-next {
  margin: 44px 0 0;
  padding-top: 30px;
  border-top: 1px solid var(--esns-line);
  font-family: var(--mincho,"Hiragino Mincho ProN",serif);
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.5;
  letter-spacing: .08em;
  color: var(--esns-ink);
}
.esns-note {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--esns-sub);
  line-height: 1.6;
}
@media (min-width: 1024px) {
  .esns-track {
    gap: 28px;
  }
  .esns-card {
    flex: 0 0 calc((100% - 3 * 28px) / 4);
    height: auto;
    aspect-ratio: 200 / 374;
  }
}
@media (max-width: 640px) {
  .esns {
    padding: 32px 16px 32px;
    --esns-w:min(200px,56vw);
    --esns-h:374px;
  }
  .esns-card.is-wide {
    flex-basis: min(320px, 86vw);
  }
}
@media (prefers-reduced-motion: reduce) {
  .esns-track {
    scroll-behavior: auto;
  }
}