/* =====================
  FV Slider
===================== */

.fv{
  position: sticky;
  top: 0;
  height: 80svh;
  overflow: hidden;
  z-index: 0;
  transition: opacity 0.6s ease;
  will-change: opacity;
}
.fv.is-hidden{
  opacity: 0;
  pointer-events: none; /* 念のため */
}

.fvSpacer{
  height: 100svh;
  min-height: 560px;
}
/* PC：FVを固定高さ 720px にする */
@media (min-width: 550px) {
  .fv {
    height: 720px !important;
    min-height: 720px !important;
  }
}

.fv img {
  -webkit-user-drag: none;
}

.fv__track{
  position: relative;
  height: 100%;
  transition: none;
  transform: none;
  display: block;
}

/* 1スライド */
.fv__slide {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: opacity 1.0s ease;
  will-change: opacity;
  opacity: 0;
}


/* 表示中 */
.fv__slide.is-active{
  opacity: 1;
  z-index: 1;
}

/* 画像 */
.fv__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 6s ease; /* 切り替え間隔より少し長めが上品 */
  will-change: transform;
}

/* アクティブなスライドだけ拡大 */
.fv__slide.is-active img {
  transform: scale(1.1);
}

/* 作品メタ情報 */
.fv__meta {
  position: absolute;
  bottom: 8px;
  color: #fff;
}

.fv__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fv__nav--prev { left: 0; }
.fv__nav--next { right: 0; }


.works{
  margin-top: -96px;   /* 被せ量（好みで -64〜-120） */
  padding-top: 96px;   /* 余白で相殺 */
  border-radius: 24px 24px 0 0;
  z-index: 3;
}

.fv__ui {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 120px;
  z-index: 10;
  color: #fff;
}

.fv__indicator {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  pointer-events: auto;
}

.fv__title {
  font-size: 16px;
  font-weight: 300;
}

.fv__tags {
  font-size: 10px;
  opacity: .9;
  margin-top: 4px;
}

.fv__year {
  font-size: 10px;
  margin-top: 8px;
  opacity: .7;
}

/* =====================
  Gauge Indicator
===================== */

.fv__indicator {
  display: flex;
  gap: 4px;
}

.fv__gauge {
  position: relative;
  flex: 1;
  height: 2px;
  background: rgba(255,255,255,.25);
  overflow: hidden;
}

.fv__gauge span {
  position: absolute;
  inset: 0;
  width: 0%;
  background: rgba(255,255,255,.9);
}

.fv::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;

  /* 下から上へのグラデーション */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.0) 100%
  );
}

.fv__track { position: relative; z-index: 1; }
.fv__ui { position: absolute; z-index: 5; }

.fv__nav {
  position: absolute;
  top: 0;
  width: 10%;
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  z-index: 5;
  cursor: pointer;
}

.fv__nav--prev { left: 0; }
.fv__nav--next { right: 0; }

.fv__ui .fv__meta {
  position: static;
}
/* =====================
  FV Bubble (top)
===================== */

/* バブル：最大幅 */
.fv__bubble{
  position: absolute;
  top: 4px;
  left: 8px;
  right: 8px;
  width: auto;
  z-index: 6;

  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}
.fv__bubble.is-hidden{
  opacity: 0;
}

/* icon */
.fv__avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 999px;
  overflow: hidden;
  will-change: transform;
}

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

/* text */
.fv__speech-text {
  font-size: 13px;
  line-height: 1;
  color: #223;
  white-space: nowrap;
}


.fv__tail{
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.fv__bubble:active {
  transform: scale(0.99);
}

.fv__speech-wrap{
  position: relative;  /* tail基準が必要なら */
  flex: 1;
  min-width: 0;

  opacity: 1;
  transition: opacity .35s ease;
  will-change: opacity;
}


.fv__speech-wrap.is-hidden{
  opacity: 0;
}

.fv__speech{
  height: 42px;
  border-radius: 8px;
  background: #FCFAF8;
  display: flex;
  align-items: center;
  padding: 0 12px;
  overflow: visible;
}


.fv__marquee {
  width: 100%;
  overflow: hidden;
}

.fv__marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  will-change: transform;
  transform: translate3d(0,0,0);
}

.fv__marquee-item{
  white-space: nowrap;
  line-height: 1;
  text-decoration: none;
  color: #343746;
  font-size: 14px;
}

/* ===== Works Section ===== */
.works{
  position: relative;
  padding: 48px 16px 40px;
  background: linear-gradient(180deg, #FCFAF8 0%, #FCFAF8 50%, rgba(252, 250, 248, 0.00) 80%);
  border-radius: 16px 16px 0 0;
}

.works__head{
  padding: 0 0 18px;
}

.works__eyebrow{
  color: var(--343746, #343746);

  font-family: "Hanken Grotesk", sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.52px;
  text-transform: capitalize;
  margin: 0 0 4px;
}

.works__title{
  color: var(--343746, #343746);

  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.52px;
  margin: 0;
}

.works__rule{
  display: inline-block;
  width: 96px;
  height: 1px;
  background: rgba(52,55,70,.3);

}

/* 上：大きいカードの縦並び */
.works__stack{
  display: grid;
  gap: 18px;
  margin-top: 10px;
}

/* 下：2カラムグリッド */
.works__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 24px;
  margin-top: 20px;
}

/* ===== Card ===== */
.workCard{
  display: block;
  text-decoration: none;
  color: inherit;
}

/* 影なし＆固定フレーム */
.workCard__media{
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: none !important;
}

.workCard__parallax{
  width: 100%;
  height: 100%;
  will-change: transform;
  transition: transform 0s; /* JSで動かすので */
}

/* ベース：枠外が見えないよう少し拡大 */
.workCard__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.08);
  transition: transform 420ms ease;
  will-change: transform;
}

.workCard--lg{
  padding-bottom: 16px;
}

/* 大きいカードのサムネ比率 */
.workCard--lg .workCard__media{
  aspect-ratio: 368 / 180;
  margin: 0;
}

.workCard__media--lg {
  margin: 0 8px;
}

/* 小さいカードのサムネ比率 */
.workCard--sm .workCard__media{
  aspect-ratio: 1 / 1;
  margin: 0;
}

/* テキスト */
.workCard__body{
  padding: 12px 0 0 0;
}

.workCard__name{
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: #343746;
}

.workCard__tags{
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 100;
  line-height: 1.6;
  letter-spacing: 1.4px;
  margin: 4px 0 12px 0;
  color: #343746;
}

.workCard__year{
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-top: 4px;
  margin-bottom: 0;
  color: #343746;
}

.workCard__name--en{
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.6;        /* 160% */
  letter-spacing: 0.64px;
}

.workCard__name--jp{
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.6;        /* 160% */
  letter-spacing: 0.56px;

  /* Figma指定（対応ブラウザのみ有効） */
  leading-trim: both;
  text-edge: cap;
}

/* hover：画像だけ拡大（パララックスと干渉しない） */
@media (hover: hover){
  .workCard:hover .workCard__media img{
    transform: scale(1.14);
  }
}

/* 画面が広いときの余白 */
@media (min-width: 550px){
  .works{
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ===== Designer Section ===== */
.designer{
  position: relative;
  padding: 128px 0 64px;
background: transparent;
}

.designer__inner{
  max-width: 900px;
  margin: 0 auto;
}

/* header */
.designer__header{
  margin: 0 20px 0 20px;
}

.designer__eyebrow{
  font-family: "Hanken Grotesk";
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.52px;
}

.designer__lead{
  margin-top: 4px;
  font-family: "Zen Kaku Gothic New";
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.52px;
}

.designer__rule{
  display: block;
  width: 96px;
  height: 1px;
  margin-top: 12px;
  background: #FCFAF8;
}

/* right image */
.designer__image{
    width: clamp(150px, 40vw, 320px);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin: 0;
    position: absolute;
    top: clamp(-218px, -28vw, -109px);
    left: clamp(180px, 45vw, 380px);
}

.designer__image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* name */
.designer__name{
  margin-top: 32px;
  margin: 0 20px 0 20px;
  position: relative;
}

.designer__name-en{
    font-family: "Hanken Grotesk";
    font-size: clamp(56px, 14vw, 126px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 3.24px;
    text-transform: uppercase;
    margin: 96px 0 0 0;
}

.designer__name-jp{
  margin-top: 12px;
  font-family: "Zen Kaku Gothic New";
  font-size: clamp(20px, 4vw, 36px);
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  margin: 0;
}

/* profile text */
.designer__profile{
  margin-top: 16px;
  padding: 0 20px 0 20px;
  font-family: "Zen Kaku Gothic New";
  font-size: clamp(12px, 2.5vw, 14px);
  line-height: 1.8;
  letter-spacing: 0.52px;
}

.designer__birth{
  margin-bottom: 16px;
}
/* ===== Designer slider（1枚ずつ横スライド） ===== */
.designer__slider{
  margin-top: 0px;
  padding: 40px 20px;
  overflow: hidden;
}

.designer__track{
  display: flex;
  gap: 16px; /* ★今回の変更点 */
  will-change: transform;
  transform: translateX(0);
  transition: transform 1750ms cubic-bezier(0.83, 0, 0.17, 1);
}

.designer__slide{
  flex-shrink: 0;
  width: 180px;
  height: auto;
  object-fit: cover;
  display: block;

  /* othersは完全透過100%のまま */
  opacity: 1;

  /* ちょい小さめ */
  transform: scale(0.9);
  transform-origin: center center;

  transition: transform 1750ms cubic-bezier(0.83, 0, 0.17, 1);
}

.designer__slide.is-active{
  transform: scale(1.1); /* ★強すぎない拡大 */
}

/* ===== Global BG crossfade layers ===== */
body{
  background: #FCFAF8;
  color: #343746;
}

/* レイヤーは2枚（赤 / 青） */
body::before,
body::after{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 400ms ease-in-out;
  will-change: opacity;
}

/* 赤（Designer） */
body::before{
  background: linear-gradient(
    185deg,
    #D1181E 4.12%,
    #FB5B42 80.06%,
    rgba(249, 205, 197, 0.00) 101.03%
  );
}

/* 青（Summary） */
body::after{
  background:
    linear-gradient(185deg, #0C2467 4.12%, #086984 74.01%, #0C082A 101.03%),
    linear-gradient(185deg, #181823 4.12%, #656177 74.01%, #353749 101.03%);
}

/* 表示トグル（opacityだけ変える） */
body.is-designer-bg::before{ opacity: 1; }
body.is-summary-bg::after{ opacity: 1; }

/* 中身を背景より上に */
main{
  position: relative;
  z-index: 2;
}

/* 暗い背景のときは白文字 */
body.is-designer-bg,
body.is-summary-bg{
  color: #FCFAF8;
}

/* ===== Summary section ===== */
.summary{
  padding: 128px 16px 72px;
  background: transparent; /* 全体背景を見せる */
}

.summary__inner{
  max-width: 900px;
  margin: 0 auto;
}

.summary__eyebrow{
  margin: 0;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .52px;
  text-transform: capitalize;
  color: inherit;
}

.summary__title{
  margin: 4px 0 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .52px;
  color: inherit;
}

.summary__rule{
  display: block;
  width: 56px;
  height: 1px;
  margin-top: 12px;
  background: rgba(252,250,248,.55);
}

.summary__intro{
  margin: 18px 0 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: .52px;
  opacity: .9;
}

/* ===== Year block ===== */
.summaryYear{
  margin-top: 72px;
  position: relative;
}

.summaryYear__row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.summaryYear__year{
  margin: 0;
  color: #FCFAF8;
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.96px;
  text-transform: uppercase;
}

.summaryYear__note{
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .4px;
  opacity: .9;
  margin-left: 6px;
}

/* list */
.summaryList{
  margin: 14px 0 0;
  padding: 0 8px 0 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: clamp(12px, 2.5vw, 14px);
  line-height: 1.9;
  letter-spacing: .52px;
  list-style: none;
}

.summaryList li{
  position: relative;
  padding-left: 10px;
}

.summaryList li::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 0.55em;
  transform: translateY(-50%);
  font-size: 8px;
  opacity: .7;
}

/* speech balloon */
.summaryYear__balloon{
  max-width: 188px;
  background: #FCFAF8;
  color: #343746;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .2px;
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
  position: relative;
  flex: 0 0 auto;
}

.summaryYear__balloon{
  position: absolute;
  right: 0;
  top: -16px;
}


.summaryYear__balloon--green{
  background: #E8FFB6;
  color: #1A2B22;
}
.summaryYear__balloon--green::after{
  background: #E8FFB6;
}

/* image card */
.summaryCard{
  margin: 24px 0 0;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
}

.summaryCard figcaption{
  padding: 10px 12px 14px;
}

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

.summaryCard figcaption{
  padding: 12px 14px 14px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .52px;
  color: inherit;
}

.summaryCard small{
  display: block;
  opacity: .85;
  margin-top: 4px;
  font-size: 11px;
}


/* =====================
  PC layout (Guide left / Phone right)
===================== */

/* SPは通常（ガイド非表示、全幅） */
.pcLayout__guide{ display: none; }
.site{ width: 100%; }

/* PCだけ 2カラム */
@media (min-width: 900px){
  .pcLayout{
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(260px, 420px) 560px; /* 左ガイド / 右スマホ */
    gap: 32px;
    justify-content: center; /* 全体を中央寄せ */
    padding: 32px;
  }

  /* 左ガイド：表示して固定 */
  .pcLayout__guide{
    display: block;
    position: sticky;
    top: 64px;
    align-self: start;
    z-index: 2;
    padding: 12px;
    border-radius: 24px;
    background: #343746;
    background: linear-gradient(180deg, rgb(135 155 165 / 90%) 0%, rgba(73, 84, 139, 0.90) 100%);
    box-shadow: 0 4px 4px 0 rgba(135, 163, 229, 0.25) inset, 0 -3px 8px 0 rgba(209, 212, 220, 0.25) inset, 0 4px 16px 0 rgba(45, 43, 64, 0.35);
    backdrop-filter: blur(2px);
  }

.guideBox{
  border-radius: 20px;
  background: rgba(52,55,70,.04);
  border: 1px solid rgba(52,55,70,.12);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

  .guideBox__title{
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
  }

  .guideBox__desc{
    margin: 0;
    font-size: 12px;
    opacity: .8;
    line-height: 1.6;
  }

  /* 右：スマホ画面を固定幅で */
  .site{
    width: 560px;              /* 〜550pxのイメージなら 550でもOK */
    justify-self: end;         /* 左ガイドの右側にピタ */
    border-radius: 18px;
    overflow: hidden;
    background: #FCFAF8;
    box-shadow:
      0 18px 60px rgba(0,0,0,.10),
      0 6px 18px rgba(0,0,0,.08);
  }
.designer__name-en {
  font-size: 72px;
}
.designer__image {
  width: 260px;
  top: -190px;
  left: 214px;
}

}

/* もう少し広いPCで余白を増やす（任意） */
@media (min-width: 1200px){
  .pcLayout{
    gap: 160px;
  }
}


/* =====================
  Work thumbnail 3D (no shadow / image-only)
===================== */

/* 枠（影なし） */
.workCard__media{
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 900px;

  /* 影は付けない */
  box-shadow: none !important;
  transition: transform 240ms ease;
  will-change: transform;
}

/* 画像を少し拡大して、枠外が見えないように */
.workCard__media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

  transform: scale(1.08); /* ← はみ出し対策 */
  will-change: transform;
  transition: transform 240ms ease;
}

/* “影なしでも立体に見える” 光のレイヤー（マウス追従はJSで） */
.workCard__media::before{
  content:"";
  position:absolute;
  inset: -20%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms ease;
  background: radial-gradient(
    220px 160px at var(--mx, 50%) var(--my, 40%),
    rgba(255,255,255,.28),
    rgba(255,255,255,0) 60%
  );
}

/* hover対応端末だけ光を出す */
@media (hover: hover){
  .workCard__media:hover::before{
    opacity: 1;
  }

  /* hover中は少しだけズームを強く（影なしでも立体感） */
  .workCard__media:hover img{
    transform: scale(1.12);
  }
}

:root{
  --dock-max: 550px;
  --dock-text: #343746;
  --dock-pill-bg: rgba(236, 236, 238, 0.88);
  --dock-pill-stroke: rgba(255,255,255,0.55);

  --ease: cubic-bezier(.2,.7,.2,1);
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Dock base */
.dock{
  position: fixed;
  left: 50%;
  bottom: calc(10px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(var(--dock-max), calc(100vw - 24px));
  z-index: 80;
  pointer-events: none;
}
.dock__inner{
  display:flex;
  align-items:center;
  gap: 8px; /* 画像の余白感 */
  pointer-events: auto;
}

/* Pill */
.dock__pill{
  flex: 1;
  height: 32px;                 /* ← 画像のサイズ感寄せ */
  padding: 8px 16px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 4px 16px 0 rgba(177, 192, 198, 0.35), 0 4px 4px 0 rgba(255, 255, 255, 0.25) inset, 0 -3px 8px 0 rgba(209, 212, 220, 0.25) inset;
  border-radius: 999px;
  background: var(--dock-pill-bg);
  border: 1px solid var(--dock-pill-stroke);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.dock__now{
  flex: 1;
  width: 140px;
  padding: 0;
}
.dock__nowTitle{
  overflow: hidden;
  color: var(--dock-text);
  text-overflow: ellipsis;
  white-space: nowrap;

  font-family: "Zen Kaku Gothic New", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  margin-bottom: 2px;
  letter-spacing: 0.56px;
}
.dock__nowMeta{
  opacity: .7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-family: "Zen Kaku Gothic New", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 10px;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 0.56px;
  color: var(--dock-text);
}

/* Buttons */
.dock__btn{
  width: 24px;
  height: 100%;
  padding: 0px;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 0px;
  text-decoration: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--dock-text);
}

.dock__btn svg{ width: 26px; height: 26px; opacity: .9; }
.dock__btnLabel{ 
  font-family: "Zen Kaku Gothic New", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 10px;
  font-weight: 300;
  line-height: 160%;
  letter-spacing: 0.56px; 
}

.dock__icon{
  width: 18px;
  height: 18px;
  display:block;
}

.dock__btn:focus-visible{
  outline: 2px solid rgba(52,55,70,.25);
  outline-offset: 2px;
}

.dock__menuBtn{
  width: 48px;
  height: 48px;
  border: 0;
  cursor: pointer;

  border-radius: 38px;
  background: linear-gradient(180deg,
    rgba(50, 52, 63, 0.90) 0%,
    rgba(73, 84, 139, 0.90) 100%);
  box-shadow:
    0 4px 4px 0 rgba(135, 163, 229, 0.25) inset,
    0 -3px 8px 0 rgba(209, 212, 220, 0.25) inset,
    0 4px 16px 0 rgba(45, 43, 64, 0.35);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  position: relative;
}
/* 2本バー（=）→ 開いたら× */
.dock__menuGlyph{
  position:absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 18px;
  transform: translate(-50%, -50%);
}

.dock__menuGlyph::before,
.dock__menuGlyph::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  transition: transform 220ms var(--ease), top 220ms var(--ease), opacity 220ms var(--ease);
}

.dock__menuGlyph::before{ top: 2px; }
.dock__menuGlyph::after{ top: 13px; }

/* open状態（×に変形） */
.dock__menuBtn.is-open .dock__menuGlyph::before{
  top: 8px;
  transform: rotate(45deg);
}
.dock__menuBtn.is-open .dock__menuGlyph::after{
  top: 8px;
  transform: rotate(-45deg);
}

/* SR only */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.hamburger{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
}
.hamburger i{
  display:block;
  width: 28px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  opacity: .92;
}
.hamburger i:nth-child(2){ margin-top: 8px; }
.hamburger i:nth-child(3){ margin-top: 8px; }

/* ===== Sheet ===== */
.sheet{
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}
.sheet[aria-hidden="false"]{ pointer-events: auto; }

.sheet__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 220ms var(--ease);
}
.sheet[aria-hidden="false"] .sheet__backdrop{ opacity: 1; }

.sheet[aria-hidden="false"] .sheet__panel{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.sheet__tip{
  position: absolute;
  right: 12px;
  top: 12px;
  background: #AFAFB1;
  color: #fff;
  font-size: 11px;
  padding: 6px 8px;
  border-radius: 999px;
}
.sheet__tipArrow{
    position: absolute;
    right: 58px;
    bottom: -10px;
    width: 16px;
    height: 12px;
}

.sheet__label{
  font-size: 14px;
  opacity: .7;
  letter-spacing: .08em;
}
.sheet__heading{
  margin: 6px 0 0;
  font-size: 22px;
  letter-spacing: .02em;
}
.sheet__ctrl{
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 6px;
  padding: 8px 6px;
  border-radius: 14px;
  min-width: 62px;
  font-size: 14px;
}
.sheet__ctrl svg{ width: 26px; height: 26px; opacity: .85; }

.sheet__list{
  padding: 8px 10px 18px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  max-height: calc(min(78vh, 720px) - 90px);
}

.sheetItem{
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 14px 12px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}
.sheetItem + .sheetItem{
  border-top: 1px solid rgba(47,51,64,.06);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.sheetItem__thumb img{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
}
.sheetItem__body{ flex:1; min-width:0; }
.sheetItem__name{
  font-size: 22px;
  letter-spacing: .02em;
  font-weight: 600;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.sheetItem__actions{
  display:flex;
  align-items:center;
  gap: 14px;
  opacity: .7;
}
.sheet__close{
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(140,140,140,0.28);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #fff;
  cursor: pointer;
  font-size: 30px;
  line-height: 1;
}

/* open中は背後を触れない */
body.is-menu-open{
  /* Lenisがいるので overflow hidden は保険程度 */
  overflow: hidden;
}

/* motion配慮 */
@media (prefers-reduced-motion: reduce){
  .sheet__backdrop,
  .sheet__panel{ transition: none; }
}

/* Dock thumbnail (32px square, r=8) */
.dock__thumb{
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

/* base image */
.dock__thumbImg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* dim layer (#000 40%) */
.dock__thumbDim{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.40);
}

/* wav gif layer (top) */
.dock__thumbWav{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  /* “映像の上に乗ってる感”をちょい上品に */
  opacity: .95;
  mix-blend-mode: screen; /* 強すぎるなら消してOK */
}

/* --- Sheet controls: img icon --- */
.sheet__ctrlIcon{
  width: 24px;
  height: 24px;
  display:block;
}

/* --- Playlist list tuned --- */
.sheet__list{
  padding: 8px 0 18px; /* 画像っぽく左右0に寄せる */
}

.sheetItem + .sheetItem{
  border-top: 1px solid rgba(52,55,70,.10); /* 画像の薄い区切り */
}

.sheetItem__name{
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .02em;
}

.sheetItem__meta{
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .52px;
  opacity: .78;
}

/* right side: star + circular arrow */
.sheetItem__actions{
  margin-left: 8px;
  gap: 14px;
  opacity: 1;
}

/* star (filled for data-fav="1", outline otherwise) */
.sheetItem__star{
  width: 18px;
  height: 18px;
  display:inline-block;
  position: relative;
}
.sheetItem__star::before{
  content:"";
  position:absolute;
  inset:0;
  background: currentColor;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.3 18.2 21l-1.7-7.1L22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2l5.5 4.7L5.8 21 12 17.3z"/></svg>') center/contain no-repeat;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.3 18.2 21l-1.7-7.1L22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2l5.5 4.7L5.8 21 12 17.3z"/></svg>') center/contain no-repeat;
  opacity: .1;
}
.sheetItem[data-fav="1"] .sheetItem__star::before{
  color: #F1B12B;  /* 画像の黄色寄り */
  opacity: 1;
}

.sheetItem__go{
  width: 22px;
  height: 22px;
  display:inline-block;
  border-radius: 999px;
  background: rgba(52,55,70,.12);
  position: relative;
}
.sheetItem__go::before{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-45%,-50%);
  background: #FCFAF8;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
  opacity: .95;
}

/* ===== Sheet Frame (panel + close) ===== */
.sheet__frame{
  position:absolute;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(18px);
  width: min(var(--dock-max), calc(100vw - 24px));
  max-height: min(78vh, 720px);
  opacity: 0;
  transition: transform 260ms var(--ease), opacity 260ms var(--ease);
  overflow: visible; /* ←×を外に出すため */
}

.sheet[aria-hidden="false"] .sheet__frame{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  padding-bottom: 72px;
}

/* panel本体は“見た目だけ”にする */
.sheet__panel{
    height: 72vh;
    max-height: 760px;
    min-height: 420px;
    width: 100%;
    border-radius: 16px;
    background: var(--sheet-bg);
    border: 1px solid rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    color: var(--sheet-text);
    overflow: hidden;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .10), 0 6px 18px rgba(0, 0, 0, .08);
}

/* close button outside playlist */
.sheet__close{
  position:absolute;
  right: -10px;
  bottom: -10px;

  width: 76px;
  height: 76px;
  border: 0;
  cursor: pointer;

  border-radius: 38px;
  background: linear-gradient(180deg, rgba(50, 52, 63, 0.90) 0%, rgba(73, 84, 139, 0.90) 100%);
  box-shadow:
    0 4px 4px 0 rgba(135, 163, 229, 0.25) inset,
    0 -3px 8px 0 rgba(209, 212, 220, 0.25) inset,
    0 4px 16px 0 rgba(45, 43, 64, 0.35);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* X glyph (2 bars) */
.sheet__closeGlyph{
  position:absolute;
  left: 50%;
  top: 50%;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
}
.sheet__closeGlyph::before,
.sheet__closeGlyph::after{
  content:"";
  position:absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  transform-origin: 50% 50%;
}
.sheet__closeGlyph::before{ transform: translateY(-50%) rotate(45deg); }
.sheet__closeGlyph::after{  transform: translateY(-50%) rotate(-45deg); }

/* =========================
   Playlist(Sheet) fixes
   ========================= */

/* 1) スマホ枠(.site)の中心に寄せるための共通X */
.dock,
.sheet__panel{
  left: var(--site-center-x, 50%);
}

/* 2) Sheetは白背景＋文字色固定（bodyの色変化の影響を受けない） */
.sheet__panel{
  background: #FFFFFF !important;
  color: #343746 !important;
}

/* 3) プレイリスト内だけスクロールできるように（既にoverflow:autoだが保険） */
.sheet__list{
  overscroll-behavior: contain;
}

/* 4) プレイリストを開いている間は、通常のスライダー（CSSアニメ）を止める */
body.is-menu-open .designer__track{
  animation-play-state: paused;
}

/* もし他にもCSSアニメのスライドがあるなら追加で止める（必要なら） */
/* body.is-menu-open .yourSliderTrack{ animation-play-state: paused; } */

/* 5) 開いている時、dockは見せたままでも操作不可にしたい場合（上品） */
body.is-menu-open .dock{
  pointer-events: none;
}
body.is-menu-open .dock__menuBtn{
  pointer-events: auto; /* 右ボタンだけは閉じられる */
}

/* =========================
   Sheet layout FINAL FIX
   - frameが位置決め（中心合わせ）
   - panelはframe内で相対配置（2重センタリングを潰す）
   - ×（=ボタン）は常に最前面で押せる
========================= */

/* 1) .site の中心に寄せる（dockとsheet frameを同じ基準に） */
.dock,
.sheet__frame{
  left: var(--site-center-x, 50%) !important;
}

/* 2) sheet__frame が “見た目の位置決め” を担当 */
.sheet__frame{
  position: absolute;
  bottom: calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(18px);
  width: min(var(--dock-max), calc(100vw - 24px));
  max-height: min(78vh, 720px);
  opacity: 0;
  transition: transform 260ms var(--ease), opacity 260ms var(--ease);
  overflow: visible; /* ボタンを外に出す */
}

/* 3) panelはframe内で普通にレイアウト（viewport基準のabsoluteを解除） */
.sheet__panel{
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  /* 指定：白背景＆文字色固定（スクロールでの文字色変更の影響を受けない） */
  background: #FFFFFF !important;
  color: #343746 !important;

  overflow: hidden; /* 中身だけ切る */
}

/* 4) リスト内だけスクロール（背後は固定する前提） */
.sheet__list{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* 5) 開いてる間はdockの右ボタンだけ触れる（他は触れない） */
body.is-menu-open .dock{
  z-index: 120;           /* sheet(90)より上へ */
  pointer-events: none;
}
body.is-menu-open .dock__menuBtn{
  pointer-events: auto;   /* 右ボタンだけ閉じられる */
}

/* 6) 右ボタンは常に最前面（“レイヤー的に押せない”問題を潰す） */
.dock__menuBtn{
  position: relative;
  z-index: 130;
}

/* 7) シート自体はそのまま背面（dockより下） */
.sheet{
  z-index: 90;
}

/* panelを縦レイアウトにして、listをスクロール領域にする */
.sheet__panel{
  display: flex;
  flex-direction: column;
}

/* listが伸びてスクロールできるようにする */
.sheet__list{
  flex: 1;
  min-height: 0;        /* ←これが超重要（これないとPCでスクロール死ぬこと多い） */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* =========================
   Playlist Layout / Typography (Spec)
========================= */

/* プレイリスト全体の大きさ */
.sheet__panel{
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  background: #fff !important;
  color: #343746 !important;
}

/* 見出し：works__head と同じスケールに寄せる
   既存のworks__headの見た目を壊さず、sheet内でも同じ雰囲気にする */
.sheet__header{
  width: 92%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 48px;
  margin-bottom: 8px;
}

/* "List" */
.sheet__label{
    color: var(--343746, #343746);
    font-family: "Hanken Grotesk", sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.52px;
    text-transform: capitalize;
    margin: 0 0 4px;
}

/* "デザインプレイリスト" */
.sheet__heading{
    color: var(--343746, #343746);
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.52px;
    margin: 0;
}

/* 下線（works__rule 相当） */
.sheet__rule{
  width: 100%;
  height: 1px;
  background: rgba(52, 55, 70, 0.18);
  border-radius: 999px;
}

/* controls（次へ/前へ/シャッフル）は dock__btn のサイズ感寄せ */
.sheet__controls{
  display: flex;
  justify-content: center;
  gap: 28px;
}

.sheet__ctrl{
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;

  width: 78px;     /* dock__btn 参考 */
  height: 74px;
  border-radius: 18px;
  color: #343746;
}

.sheet__ctrlIcon{
  width: 28px;
  height: 28px;
  display: block;
}

.sheet__ctrl span{
  font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 160%;
  letter-spacing: 0.56px;
  color: #343746;
}

/* リスト領域：残り高さをスクロール */
.sheet__list{
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* 行UI：左右の余白と区切り */
.sheetItem{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 8px;
  text-decoration: none;
  border-radius: 0;
}

.sheetItem + .sheetItem{
  border-top: 1px solid rgba(52, 55, 70, 0.10);
}

/* 作品番号 */
.sheetItem__idx{
  width: 12px;
  text-align: center;

  font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  text-transform: uppercase;
  color: #343746;
  opacity: 1;
}

/* サムネ：今のままでOKなら触らない。必要なら微調整 */
.sheetItem__thumb{
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(52, 55, 70, 0.06);
}

/* タイトル/年代/タグのレイアウト */
.sheetItem__body{
  flex: 1;
  min-width: 0;
}

/* 作品タイトル文字（指定） */
.sheetItem__name{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: #343746;
  font-family: "Zen Kaku Gothic New";
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.64px;
}

/* 年代（指定：同じ） */
.sheetItem__year{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: #343746;
  font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.64px;
}

/* タグ（指定） */
.sheetItem__tags{
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: #343746;
  font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  opacity: 1;
}

/* 右側アイコン */
.sheetItem__actions{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 星：12px */
.sheetItem__star{
  width: 12px;
  height: 12px;
  aspect-ratio: 1/1;
  display: inline-block;
}

/* go：12px / #343746 */
.sheetItem__go{
  width: 12px;
  height: 12px;
  display: inline-block;
  background: #343746;
}

/* 星の見た目（既存のmask方式を使うならこれでもOK）
   - data-fav="1" のときだけ色を出す */
.sheetItem__star{
  background: #343746;
  opacity: .1;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.3 18.2 21l-1.7-7.1L22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2l5.5 4.7L5.8 21 12 17.3z"/></svg>') center/contain no-repeat;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.3 18.2 21l-1.7-7.1L22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2l5.5 4.7L5.8 21 12 17.3z"/></svg>') center/contain no-repeat;
}

.sheetItem[data-fav="1"] .sheetItem__star{
  background: #F1B12B;
  opacity: 1;
}

/* 既存の sheet__title / sheet__label / heading 構造に rule を追加したい場合
   HTML側で <span class="sheet__rule"></span> を見出し下に追加してOK */


   /* =========================
   Playlist controls = dock buttons
========================= */

/* dock__btn は既存を使う。プレイリスト内では色を固定（背景切替の影響排除） */
.sheet__controls .dock__btn{
  color: #343746;
}

/* shuffle：dock__btn “基準に近い”サイズ感 */
.sheet__shuffleBtn{
  border: 0;
  background: transparent;
  cursor: pointer;

  /* dock__btnを基準に近づける */
  width: 78px;
  height: 74px;
  border-radius: 18px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;

  color: #343746;
}

.sheet__shuffleIcon{
  width: 28px;
  height: 28px;
  display: block;
}

.sheet__shuffleLabel{
  font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 160%;
  letter-spacing: 0.56px;
  color: #343746;
}


.pcLayout__wrapper {
background: linear-gradient(144deg, #cbd8e6 8.61%, #dfe1ec 20.11%, #dae2ef 25.11%, #dce9ff 94.15%);
}

.footer {
  display: flex;
padding: 16px 20px 96px 20px;
flex-direction: column;
align-items: flex-start;
gap: 16px;
border-radius: 16px 16px 0 0;
background: #343746;
color:#FCFAF8;
font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 220%; /* 26.4px */
letter-spacing: 0.48px;
z-index: 10;
}

.footer-p {
  display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
align-self: stretch;
margin: 0;
}

@keyframes siteLoaderSpin {
  to { transform: rotate(360deg); }
}

/* 動きを減らすユーザー設定への配慮（あれば） */
@media (prefers-reduced-motion: reduce) {
  .siteLoader__spinner {
    animation: none;
  }
}

/* JSがまだ動いていない間だけ、1枚目を表示しておく */
body:not(.is-fv-ready) .fv__slide:first-child {
  opacity: 1;
  z-index: 1;
}


/* FV右下のボタン群 */
.fvControls{
  position: absolute;
  right: 14px;
  bottom: 130px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 20; /* FV内で前面に */
}

/* ピルボタン */
.fvControls__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;

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

  border: 1px solid rgba(252, 250, 248, 0.65);
  background: rgba(52, 55, 70, 0.18);
  backdrop-filter: blur(6px);

  color: #FCFAF8;
  font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;

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

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

.fvControls__icon{
  line-height: 1;
  font-size: 14px;
  opacity: 0.95;
}

.fvControls__label{
  line-height: 1;
}


.fvControls { pointer-events: auto; }


/* =========================================================
   Top Footer : All Designs
========================================================= */
.allDesigns{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 大きい角丸カード */
.allDesigns__card{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;background: linear-gradient(180deg, #E7E7E7 83.73%, #D8D8DC 92.27%, #29304B 101.12%);
  border-radius: 20px 20px 0 0;
  padding: 32px 16px 96px 16px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: 0 -5px 16px 0 rgba(177, 192, 198, 0.35);
}

.allDesigns__title{
  margin: 0 0 16px;
  font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #343746;
  letter-spacing: 0.02em;
}

/* carousel */
.allDesigns__carousel{
  width: 100%;
  overflow: hidden;
}

/* 横スクロール＋スナップ */
.allDesigns__list{
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0 2px 12px;
  list-style: none;

  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.allDesigns__list::-webkit-scrollbar{
  display: none;
}

.allDesigns__item{
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 140px;
}

.allDesigns__link{
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}

/* サムネ：140x140 固定 */
.allDesigns__thumb{
  width: 140px;
  height: 140px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,0.55);
  box-shadow:
    0 2px 10px rgba(20, 24, 40, 0.08);
}

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

.allDesigns__name{
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #343746;
  line-height: 1.2;
}

.allDesigns__meta{
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 14px;
  color: rgba(52, 55, 70, 0.78);
  line-height: 1.2;
}

/* shuffle button */
.allDesigns__shuffle{
  margin: 16px auto 8px;
  width: 100%;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  border-radius: 999px;
  border: 1px solid rgba(52, 55, 70, 0.45);
  background: transparent;
  color: #343746;

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

  cursor: pointer;
}

.allDesigns__shuffle .dock__icon{
  width: 18px;
  height: 18px;
  display: block;
}

.allDesigns__copyright{
  margin: 8px 0 0;
  text-align: center;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 13px;
  color: rgba(52, 55, 70, 0.72);
}

/* PCでも“スマホ枠っぽく”中央寄せにしたい場合 */
@media (min-width: 960px){
  .allDesigns{
    max-width: 560px;
    margin: 0 auto;
  }
}

.allDesigns__card .workCard__name,
.allDesigns__card .workCard__tags,
.allDesigns__card .workCard__year{
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}