.work{
  position: relative;
}
.site {
  background: #FCFAF8;
}
/* =====================
  Work detail layout
===================== */
/* 全体の記事 */
.workDetail{
  max-width: 640px;
  margin: 0 auto;
  position: relative;
}

/* =========================
   Hero 全体レイアウト
   ========================= */
.workHero {
  position: relative;
  padding: 16px 20px 32px;
}

/* 戻るボタン（Back文字を見せない） */
.workHero__back {
  position: fixed;
  top: 8px;
  left: 8px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(251, 253, 255, 0.80);
  backdrop-filter: blur(2px);
  box-shadow: 0 4px 4px 0 rgba(255, 255, 255, 0.25) inset, 0 -3px 8px 0 rgba(209, 212, 220, 0.25) inset, 0 4px 16px 0 rgba(177, 192, 198, 0.35);
  z-index: 999;
}
.workHero__back{
  position: fixed;
  top: 40px;
  left: 50%;
  transform: translateX(calc(25% + 8px));
  width: 40px;
  height: 40px;
  border: none;
  padding: 0;
  border-radius: 999px;
  background: rgba(251, 253, 255, 0.80);
  backdrop-filter: blur(2px);
  box-shadow: 0 4px 4px 0 rgba(255, 255, 255, 0.25) inset, 0 -3px 8px 0 rgba(209, 212, 220, 0.25) inset, 0 4px 16px 0 rgba(177, 192, 198, 0.35);
  z-index: 999;
}



.workHero__backIcon {
  position: relative;
  right: -2px;
}

/* Back 文字は視覚的には非表示 */
.workHero__backLabel {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================
   トップ画像
   ========================= */
.workHero__media {
  margin: 0;
}

.workHero__media img {
  display: block;
  width: 100%;
  aspect-ratio: 18 / 19;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 4px 16px 0 rgba(177, 192, 198, 0.35);
}

/* =========================
   テキスト周り
   ========================= */
.workHero__meta {
  margin-top: 12px;
}

.workHero__metaHead {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    justify-content: space-between;
    flex-direction: column;
}

/* タイトル群のラッパー */
.workHero__titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* タグ */
.workHero__tags {
  margin: 0 0 0 auto;
  color: #343746;
  font-family: "Hanken Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(10px, 2vw, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 1.4px;
  text-align: right;
}

.workHero__tags span + span {
  margin-left: 8px;
}

/* =========================
   タイトルの共通スタイル
   ========================= */

/* 英字大タイトル */
.workTitle--enLg {
  color: #343746;
  font-family: "Hanken Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(40px, 9vw, 48px);
  font-style: italic;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: 1.6px;
  margin: 0;
}

/* 日本字大タイトル（今回は未使用だが他案件用に用意） */
.workTitle--jaLg {
  color: #343746;
  font-family: "Zen Kaku Gothic New", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(28px, 6vw, 34px);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  padding: 0;
  letter-spacing: 1.12px;
}

/* 英字小タイトル */
.workTitle--enSm {
  color: #343746;
  font-family: "Hanken Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(12px, 3vw, 14px);
  font-style: italic;
  font-weight: 600;
  line-height: 160%;
  letter-spacing: 0.48px;
  text-transform: capitalize;
  margin: 0;
}

/* 日本字小タイトル */
.workTitle--jaSm {
  color: #343746;
  font-family: "Zen Kaku Gothic New", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(12px, 3vw, 14px);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  letter-spacing: 0.48px;
  margin: 0;
}

/* 今回の会社名に適用 */
.workHero__titleJa {
  margin: 0;  
}

/* 概要文章 */
.workHero__lead {
  margin-top: 16px;
  color: var(--343746, #343746);
  font-family: "Zen Kaku Gothic New", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(14px, 3vw, 16px);
;
  font-style: normal;
  font-weight: 500;
  line-height: 180%; /* 25.2px */
  letter-spacing: 0.56px;
}


/* =====================
  Sections
===================== */

.workSection{
  margin: 64px 0px;
  display: flex;
  gap: 16px;
  flex-direction: column;
  padding: 0 20px;
}

.workSection__header{
  margin-bottom: 12px;
}

.workSection__eyebrow{
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #999AA1;
  margin-bottom: 4px;
}

.company__title{
  font-size: clamp(14px, 3vw, 16px);
  font-weight: 600;
  line-height: 160%;
  align-self: stretch;
  margin: 0;
}

.workSection__body{
  color: #343746;
  font-family: "Zen Kaku Gothic New";
  font-size: clamp(14px, 3vw, 16px);
  font-style: normal;
  font-weight: 500;
  line-height: 180%; /* 25.2px */
  letter-spacing: 0.56px;
  position: relative;
}
.workSection__text{
  color: #343746;
  font-family: "Zen Kaku Gothic New";
  font-size: clamp(14px, 3vw, 16px);
  font-style: normal;
  font-weight: 500;
  line-height: 180%; /* 25.2px */
  letter-spacing: 0.56px;
  position: relative;
  margin: 0 0 16px 0;
}

.workSection__span{
  font-size: 10px;
  line-height: 120%;
}

/* 会社紹介カード */
.company__card{
  display: flex;
  padding: 16px;
  margin: 0 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid var(--343746, #343746);
  font-size: 13px;
  line-height: 1.8;
  color: #343746;
}

.workSection__card p + p{
  margin: 0;
  font-family: "Zen Kaku Gothic New";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%; /* 19.2px */
  letter-spacing: 0.48px;
  display: flex;
  gap: 8px;
  flex-direction: column;
}

/* =====================
  Galleries
===================== */

.workSection__title{
  color: #343746;
  font-family: "Zen Kaku Gothic New";
  font-size: clamp(18px, 3.5vw, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  letter-spacing: 0.72px;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.workSection__year {
  color: #343746;
  font-family: "Zen Kaku Gothic New";
  font-size: clamp(12px, 2vw, 14px);
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  letter-spacing: 0.48px;
}

.workGallery{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.workGallery__item{
  border-radius: 8px;
  overflow: hidden;
  background: #E4E7EE;
  margin: 0;
}
.workGallery__item img{
  display: block;
  width: 100%;
  height: auto;
}

.workGallery__item video{
  display: block;
  width: 100%;
  height: auto;
}

/* grid版 */
.workGallery--grid{
  display: grid;
  gap: 12px;
}
.workGallery--grid .workGallery__item:first-child{
  grid-column: 1 / -1;
}

/* サイトプレビュー */
.workPreview{
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.workPreview__item-group{
  margin: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.workPreview__item{
  border-radius: 8px;
  overflow: hidden;
  margin: 0;
}
.workPreview__label{
color: #B4B4B4;
font-family: "Zen Kaku Gothic New";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 160%;
letter-spacing: 0.56px;
margin-bottom: 8px;
}
.workPreview__item img{
  display: block;
  width: 100%;
  height: auto;
}

/* プレイリスト導線メモ */
.workSection--playlist .workSection__note{
  margin-top: 8px;
  font-size: 12px;
  color: #666975;
}

.pcLayout__guide {
  display: none;
}

/* ちょっとだけPC幅調整（中央に寄せるだけ） */
@media (max-width: 900px){
.workHero__back {
    top: 8px;
    left: 0px;
}
}
/* ちょっとだけPC幅調整（中央に寄せるだけ） */
@media (900px <= width <= 1200px ) {
.workHero__back{
  left: 16px;
  top: 20px;
}
}

.viewlink{
  color: #343746;
  text-decoration: none;
  display: flex;
  padding: 16px;
  align-items: center;
  gap: 16px;
  border-radius: 30px;
  border: 1px solid #343746;
  width: fit-content;
}

.viewlink svg{
  width: 16px;
  height: 16px;
}


/* Site Preview 本体 */
.sitePreview{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #ECE7E1;
}

.sitePreview-head{
  background: #343746;
  padding: 4px 12px;
  color: #FCFAF8;
  font-family: "Zen Kaku Gothic New";
  font-size: 12px;
  font-weight: 500;
  line-height: 180%;
  letter-spacing: 0.48px;
}

.sitePreview-group {
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 16px;
  position: relative;
}

/* メイン表示エリア（縦スクロール可能） */
.sitePreview__main{
  width: 100%;
}

.sitePreview__window{
  border-radius: 4px;
  overflow: hidden;
  height: clamp(240px, 60vw, 400px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #FFFFFF;
}

.sitePreview__image{
  display: block;
  width: 100%;
  height: auto;
}

/* サムネイルスライダー（横に並んでスライド） */
.sitePreview__thumbs{
  display: flex;
  gap: clamp(8px, 2vw, 16px);
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.sitePreview__thumb{
  flex: 0 0 28%;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
}

/* 中身のラッパー */
.sitePreview__thumbInner{
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

/* 選択中の暗転オーバーレイ */
.sitePreview__thumbInner::before{
  content: "";
  position: absolute;
  inset: 0 -160px;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  border-radius: inherit;
}

.sitePreview__thumb.is-active .sitePreview__thumbInner::before{
  opacity: 1;
}

/* ベースのサムネ画像（上側だけ見せる） */
.sitePreview__thumbInner img:first-child{
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: top center;
}

/* wav.gif オーバーレイ（スクリーン合成） */
.sitePreview__thumbWave{
  width: 200%;
  opacity: 0;
  pointer-events: none;
}

.sitePreview__thumb.is-active .sitePreview__thumbWave{
  opacity: 1;
  position: absolute;
  top: 0;
  right: 0;
  mix-blend-mode: screen;
}



.sheet__footer {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  color: #343746 !important;
  padding: 8px;
  margin-bottom: 32px;
}

.sheet__footer .sheet__list{
  height: 100px;
}

.sitePreview__tip {
      position: absolute;
    top: 11px;
    right: -80px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #343746;
    background: #FCFAF8;
    padding: 4px 8px;
    border-radius: 999px;
    line-height: 120%;
    padding: 8px 12px;
    box-shadow: 0 4px 16px 0 rgba(177, 192, 198, 0.35);
    z-index: 999;
}

.workSection__min-title {
    color: #343746;
    font-family: "Zen Kaku Gothic New";
    font-size: clamp(14px, 3vw, 16px);
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 25.2px */
    letter-spacing: 0.56px;
    margin: 0 0 12px 0;
}

.concept__card {
  display: flex;
  padding: 16px;
  margin-bottom: 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid #343746;
  font-size: 13px;
  line-height: 1.8;
  color: #343746;
}

.concept__title {
  font-size: clamp(14px, 3vw, 16px);
  font-weight: 600;
  line-height: 160%;
  align-self: stretch;
  margin: 0;
}

.concept__text {
  color: #343746;
  font-family: "Zen Kaku Gothic New";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%; /* 22.4px */
  letter-spacing: 1.2px;
  margin: 0;
  align-self: stretch;
}

.concept__min-text {
  color: #343746;
  font-family: "Zen Kaku Gothic New";
  font-size: clamp(12px, 2vw, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: 160%; /* 22.4px */
  letter-spacing: 0.56px;
  margin: 0;
  align-self: stretch;
}

.min-concept__card{
  display: flex;
  margin-bottom: 16px;
  align-items: center;
  border-radius: 32px;
  border: 1px solid #343746;
  padding: 24px 24px 24px 16px;
  justify-content: center;
  align-items: center;
  gap: 24px;
  align-self: stretch;
}
.min-concept__images{
  width: 120px;
  border-radius: 24px;
  margin: 0;
  overflow: hidden;
}


.min-concept__images img{
  display: block;
  width: 100%;
  height: auto;
}

.min-concept__textWrap{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: calc(100% - 120px);
}
.min-concept__title{
  margin: 0;
  color: #343746;
  font-family: "Zen Kaku Gothic New";
  font-size: clamp(16px, 4vw, 18px);
  font-style: normal;
  font-weight: 700;
  line-height: 160%; /* 22.4px */
  letter-spacing: 0.56px;
}
.min-concept__text{
  margin: 0;
  color: #343746;
  font-family: "Zen Kaku Gothic New";
  font-size: clamp(14px, 3vw, 16px);
  font-style: normal;
  font-weight: 500;
  line-height: 160%; /* 25.2px */
  letter-spacing: 0.56px;
}

.sheet__footer {
  margin-top: 40px;
  padding: 20px 16px 16px;
  border-radius: 20px;
  background: #FCFAF8;
  position: relative;
}

/* 内部スクロールは禁止 */
.sheet__footer .sheet__list {
  max-height: none;
  overflow: visible;
}

/* 閉じ時：7件目以降を隠す */
.sheet__footer--collapsed .sheet__list .sheetItem:nth-child(n+7) {
  display: none;
}

/* 展開時：全件表示 */
.sheet__footer--expanded .sheet__list .sheetItem {
  display: flex;
}

/* ▼ グラデーション（ここ重要） */
.sheet__footer--collapsed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 48px; /* ボタンの高さを避ける */
  height: 120px;
  background: linear-gradient(
    180deg,
    rgba(252, 250, 248, 0.00) 0%,
    #FCFAF8 72%
  );
  pointer-events: none;
  z-index: 1;
}

.sheet__footer--expanded::after {
  content: none;
}

/* ▼ トグルボタン */
.sheetFooterToggle {
  position: relative;
  z-index: 2; /* gradientより前に出す */
  width: 100%;
  border: 0;
  background: none;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  letter-spacing: 0.8px;
}

/* テキスト切り替え */
.sheetFooterToggle__more {
  position: relative;
  display: inline;
  color: #E5483E;
  padding: 4px 32px;
  border-radius: 8px;
  border-right: 2px solid #E2332C;
  border-left: 2px solid #E2332C;
  top: -20px;
}

/* テキスト切り替え */
.sheetFooterToggle__less {
  display: none;
  color: #343746;
  padding: 4px 32px;
  border-radius: 8px;
  border-right: 2px solid #343746;
  border-left: 2px solid #343746;
  letter-spacing: 0.8px;
}

.sheet__footer--expanded .sheetFooterToggle__more {
  display: none;
}
.sheet__footer--expanded .sheetFooterToggle__less {
  display: inline;
}


/* 作品詳細の動画ブロック全体 */
.workVideo {
  margin: 32px auto;           /* 上下余白＋中央寄せ */
  max-width: 640px;            /* 作品カラムより少し広めでもOK。サイトに合わせて調整 */
  width: 100%;
}

/* 内側ラッパー（背景や余白の調整用） */
.workVideo__inner {
  border-radius: 8px;
  overflow: hidden;            /* 角丸に沿って iframe をクリップ */
}

/* アスペクト比 16:9 を維持するためのラッパー */
.workVideo__frame {
  position: relative;
  width: 100%;
  /* 16:9 = 9 / 16 * 100 = 56.25% */
  padding-top: 56.25%;
}

/* YouTube iframe 本体をラッパーいっぱいに広げる */
.workVideo__frame iframe {
  position: absolute;
  inset: 0;        /* top:0; right:0; bottom:0; left:0; のショートハンド */
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* PC で少しだけ余白を広げたい場合 */
@media (min-width: 768px) {
  .workVideo {
    margin: 0 0 40px 0;
    max-width: 720px;          /* サイトの中央カラム幅に合わせて調整 */
  }

  .workVideo__inner {
    border-radius: 0px;
  }
}

.videoPreview__main{
  width: 100%;
}

.videoPreview__main .workVideo__inner:nth-child(2) {
  margin-top: 16px;
}
.videoPreview__main .workVideo__inner:nth-child(3) {
  margin-top: 16px;
}

/* 共通枠（site preview の雰囲気に合わせたフレーム） ------------------- */
.mediaFrame {
  margin-top: 32px;
  border-radius: 20px;
  background: #f3eee3; /* 既存site previewの色に合わせて調整してOK */
  padding: 12px 12px 16px;
}

/* スマホ幅に馴染ませる */
.mediaFrame__header {
  border-radius: 14px;
  background: #343746;
  padding: 6px 10px;
  margin-bottom: 10px;
}

.mediaFrame__title {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
}

.mediaFrame__body {
  padding: 8px;
}


/* =====================
   Site Preview：縦サムネ版
   .sitePreview--sideThumbs を付けたときだけ有効
===================== */

/* ベース：モバイルは今まで通り「上：メイン／下：横スライドサムネ」 */
.sitePreview--sideThumbs {
  /* 既存の .sitePreview と同じ padding / background でOK */
}

  .sitePreview--sideThumbs {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: stretch;
  height: clamp(320px, 80vw, 480px);
  }

  /* 左側のメイン画面を大きく広げる */
  .sitePreview--sideThumbs .sitePreview__main {
    flex: 1 1 auto;
  }

  /* 右側のサムネリストを縦並び＆縦スクロールに */
  .sitePreview--sideThumbs .sitePreview__thumbs {
  flex: 0 0 80px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 0;
  -webkit-overflow-scrolling: touch;

  /* ▼ ここから追加分 ▼ */
  overscroll-behavior-y: contain;  /* サムネ列の端でページにスクロールを渡さない */
  overscroll-behavior: contain;    /* 念のため全方向 */
  touch-action: pan-y;             /* 縦方向のスクロール操作を優先して受ける */
  }

  /* 縦リスト用に、サムネの挙動を少し調整 */
  .sitePreview--sideThumbs .sitePreview__thumb {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0;
  background: none;
  cursor: pointer;
  }
.sitePreview--sideThumbs .sitePreview__window {
  height: clamp(320px, 80vw, 480px);
  }

  /* workページ：右上シャッフルボタン */
.workShuffle{
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 50;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  height: 40px;
  padding: 0 16px;
  border-radius: 999px;

  border: 1px solid rgba(252, 250, 248, 0.65);
background: rgba(251, 253, 255, 0.80); box-shadow: 0 4px 4px 0 rgba(255, 255, 255, 0.25) inset, 0 -3px 8px 0 rgba(209, 212, 220, 0.25) inset, 0 4px 16px 0 rgba(177, 192, 198, 0.35);
  backdrop-filter: blur(6px);

  color: #FCFAF8;
  font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.workShuffle:active{
  transform: translateY(1px);
}

.workShuffle__icon{
  display: block;
  height: 14px;
  width: auto;
  flex-shrink: 0;
}

.workShuffle__label{
  line-height: 1;
  color: var(--343746, #343746);
leading-trim: both;
text-edge: cap;
font-family: "Zen Kaku Gothic New";
font-size: 11px;
font-style: normal;
font-weight: 500;
line-height: normal;
}

/* =========================
   workページ：右上シャッフル（PC位置調整）
   中央カラム(max 640px)の右端に合わせる
========================= */
@media (min-width: 1200px){
  .workShuffle{
    top: 40px; /* 戻るボタンと揃えるなら 40px。好みで 20px でもOK */
    right: max(12px, calc(50% - 320px + -238px));
    /* 50% - 320px = 中央からカラム右端までの距離(640/2)
       +12px = 右端からの余白 */
  }
}


/* =========================================================
   Work Footer : Pick Up
========================================================= */

.pickUp{
  padding: 16px 16px 96px 16px;
  color: #FCFAF8;
  background: linear-gradient(223deg, #5D254C 0.54%, #62435B 35.68%, #685E67 72.69%, #29304B 100.58%);
  border-radius: 20px 20px 0 0; /* 画像の雰囲気に合わせて上だけ丸め */
}

/* 中身をスマホ枠に収めたい場合（あなたのサイトの幅に合わせる） */
.pickUp__inner{
  max-width: 560px;
  margin: 0 auto;
}

.pickUp__title{
  margin: 10px 4px 14px;
  font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
letter-spacing: 0.64px;
}

/* 2枚横並び（カルーセル無し） */
.pickUp__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* カード */
.pickUpCard{
  display: grid;
  grid-template-rows: auto 1fr;
  text-decoration: none;
  color: inherit;
}

/* 画像は「画面幅に合わせて伸縮」＝幅100% + aspect-ratio */
.pickUpCard__thumb{
  width: 100%;
  aspect-ratio: 1 / 1; /* ほぼ正方形（画像の見え方が近い） */
  border-radius: 8px;
  overflow: hidden;
  background: rgba(252, 250, 248, 0.08);
  box-shadow: 0 10px 28px rgba(10, 10, 20, 0.18);
}

.pickUpCard__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* テキスト */
.pickUpCard__body{
  padding: 10px 2px 0;
}

.pickUpCard__name{
  margin: 0 0 6px;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: #FCFAF8;

  /* 1行制限 + … */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pickUpCard__tags{
  margin: 0 0 10px;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 1.2px;
  color: rgba(252, 250, 248, 0.86);

  /* 1行制限 + … */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pickUpCard__year{
  margin: 0;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 1.6px;
  color: rgba(252, 250, 248, 0.78);

  /* 1行制限 + … */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* シャッフルボタン（画像の雰囲気に合わせてフチ白＋透明） */
.pickUp__shuffle{
  width: 100%;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  border-radius: 999px;
  border: 1px solid rgba(252, 250, 248, 0.55);
  background: transparent;
  color: #FCFAF8;

  font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.pickUp__shuffle .dock__icon{
  width: 18px;
  height: 18px;
  display: block;
  /* svgが黒想定なら白くしたいが、いまはそのまま */
}

.pickUp__copy{
  margin: 16px 0 0;
  text-align: center;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 13px;
  color: rgba(252, 250, 248, 0.78);
}

/* 画面が狭い時は1列に落とす（任意） */
@media (max-width: 360px){
  .pickUp__grid{
    grid-template-columns: 1fr;
  }
}