/* --------------------------------------------------
   インスタ・YouTube の横スライド（トップとブログトップで共通）
   置き方：<div class="esns"></div> ＋ /css/eichi-sns-data.js → /css/eichi-sns.js
   中身（投稿の並び）は eichi-sns.js が組む。色はサイトの変数があればそれを使う。
   -------------------------------------------------- */
.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}

/* 記事一覧のグリッドの中に差し込むとき（ブログトップ）：横いっぱいに1段 */
.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}
.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-media{flex:1 1 auto;min-height:0;position:relative;background:#14100e}
/* 枠の中身は1.5倍の大きさで読み、2/3に縮めて見せる（インスタの埋め込みは幅326px未満だと崩れるため。2026-10-07 全体を2/3に） */
.esns-media iframe{position:absolute;left:0;top:0;width:150%;height:150%;border:0;display:block;transform:scale(.6667);transform-origin:0 0}
.esns-card.ig .esns-media{background:#fff}
/* 横長の動画：上に16:9、下に題名 */
.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-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}

/* PC：画面に4枚がちょうど並ぶ大きさにし、間を少し広げる（2026-10-08 ユーザー指定）。
   縦横の比（200:374）は保ったまま、幅から高さを決める */
@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:52px 16px 56px;--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}
}