/*!
 * Siam Works — トップページ（HomeSticker.dc.html の忠実な移植）
 *
 * カンプのインラインスタイルを1対1でクラスに写したもの。数値・比率・
 * アニメーションはカンプの値をそのまま使っている。トップページでだけ読み込む。
 *
 * --vw は home.js が window.innerWidth を書き込む（カンプと同じ）。
 * JS が動かない場合は 1440 として計算され、幅が 83% に落ちるだけで壊れない。
 */

.sw-home {
  --y-cut-top: min(78px, max(0px, (940px - 100vw) * 1000));
  --y-cut-bottom: min(136px, max(0px, (940px - 100vw) * 1000));
}

/* 1200px 幅の器。カンプの calc((1200 / var(--vw)) * 100%) をそのまま */
.sw-w {
  width: calc((1200 / var(--vw, 1440)) * 100%);
  max-width: calc(100% - 28px);
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   キーフレーム（カンプの <helmet> から転記）
   ========================================================= */

@keyframes sw-heroPlane {
  0%   { clip-path: polygon(0 30%, 100% 2%, 100% 100%, 46% 100%, 0 62%); }
  35%  { clip-path: polygon(0 8%, 100% 22%, 100% 100%, 38% 100%, 0 72%); }
  70%  { clip-path: polygon(0 22%, 100% 6%, 100% 100%, 52% 100%, 0 56%); }
  100% { clip-path: polygon(0 30%, 100% 2%, 100% 100%, 46% 100%, 0 62%); }
}
@keyframes sw-heroMorphA {
  0%   { clip-path: polygon(50% 0%, 100% 100%, 0% 100%, 0% 100%); border-radius: 0; transform: translate(0, 0) rotate(0deg) scale(1); }
  22%  { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); border-radius: 14%; transform: translate(-22%, -16%) rotate(84deg) scale(1.16); }
  44%  { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); border-radius: 0; transform: translate(-38%, 10%) rotate(163deg) scale(.88); }
  67%  { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); border-radius: 50%; transform: translate(-16%, 22%) rotate(246deg) scale(1.12); }
  85%  { clip-path: polygon(10% 4%, 96% 26%, 74% 98%, 2% 66%); border-radius: 0; transform: translate(6%, 8%) rotate(308deg) scale(.98); }
  100% { clip-path: polygon(50% 0%, 100% 100%, 0% 100%, 0% 100%); border-radius: 0; transform: translate(0, 0) rotate(360deg) scale(1); }
}
@keyframes sw-heroMorphB {
  0%   { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); border-radius: 50%; transform: translate(0, 0) rotate(0deg) scale(1); }
  26%  { clip-path: polygon(50% 0%, 100% 100%, 0% 100%, 0% 100%); border-radius: 0; transform: translate(40%, 26%) rotate(-96deg) scale(1.34); }
  50%  { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); border-radius: 22%; transform: translate(64%, -10%) rotate(-176deg) scale(.86); }
  74%  { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); border-radius: 0; transform: translate(28%, -26%) rotate(-262deg) scale(1.18); }
  100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); border-radius: 50%; transform: translate(0, 0) rotate(-360deg) scale(1); }
}
@keyframes sw-heroMorphC {
  0%   { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); transform: translate(0, 0) rotate(0deg) scale(1); }
  30%  { clip-path: polygon(50% 0%, 100% 100%, 0% 100%, 0% 100%); transform: translate(-30%, 18%) rotate(122deg) scale(1.24); }
  58%  { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transform: translate(14%, 34%) rotate(214deg) scale(.9); }
  100% { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); transform: translate(0, 0) rotate(360deg) scale(1); }
}
@keyframes sw-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes sw-heroSweep {
  0%   { transform: translate(-30%, 0) rotate(8deg); opacity: .5; }
  50%  { transform: translate(40%, -6%) rotate(8deg); opacity: .85; }
  100% { transform: translate(-30%, 0) rotate(8deg); opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-home * { animation: none !important; }
}

/* =========================================================
   ヒーロー（sticky の全画面レイヤー）
   ========================================================= */

.sw-hero {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--greige-000);
}
.sw-hero__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sw-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sw-hero__plane {
  position: absolute;
  inset: 0;
  background: var(--greige-200);
  clip-path: polygon(0 30%, 100% 2%, 100% 100%, 46% 100%, 0 62%);
  animation: sw-heroPlane 9s ease-in-out infinite;
}
.sw-hero__sweep {
  position: absolute;
  left: -6%;
  top: 6%;
  width: min(46vw, 560px);
  aspect-ratio: 2.4;
  background: var(--greige-100);
  border-radius: 50%;
  filter: blur(46px);
  animation: sw-heroSweep 11s ease-in-out infinite;
}
.sw-hero__blob { position: absolute; aspect-ratio: 1; }
.sw-hero__blob > i { display: block; width: 100%; height: 100%; }
.sw-hero__blob--a { right: 15%; top: 36%; width: min(17vw, 208px); filter: url(#swRound); }
.sw-hero__blob--a > i { background: var(--blue-500); animation: sw-heroMorphA 13s cubic-bezier(.55, .06, .42, .96) infinite; }
.sw-hero__blob--b { left: 12%; top: 18%; width: min(7vw, 84px); filter: url(#swRoundSm); }
.sw-hero__blob--b > i { background: var(--blue-300); animation: sw-heroMorphB 9.5s cubic-bezier(.42, .02, .5, 1) infinite; }
.sw-hero__blob--c { right: 34%; bottom: 16%; width: min(5vw, 62px); opacity: .55; filter: url(#swRoundSm); }
.sw-hero__blob--c > i { background: var(--greige-400); animation: sw-heroMorphC 17s cubic-bezier(.36, .1, .5, .94) infinite; }

.sw-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: clamp(92px, 12vh, 132px) clamp(16px, 2vw, 36px) clamp(30px, 6vh, 64px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(20px, 4vh, 40px);
}
.sw-hero__title {
  font-family: var(--font-family-grotesk);
  font-weight: 700;
  font-size: clamp(2.75rem, 10.2vw, 13rem);
  line-height: .92;
  letter-spacing: -.045em;
  color: var(--blue-500);
  margin: 0;
  max-width: none;
}
.sw-hero__vert {
  position: absolute;
  right: clamp(14px, 3vw, 44px);
  top: clamp(112px, 17vh, 190px);
  z-index: 1;
  writing-mode: vertical-rl;
  font-family: var(--type-display-family);
  font-weight: 900;
  font-size: var(--text-lg);
  letter-spacing: .24em;
  color: var(--blue-500);
}

/* =========================================================
   浮遊パネル（スタンス）と NEWS パネル
   ========================================================= */

.sw-glass {
  position: relative;
  z-index: 1;
  background-color: rgba(255, 255, 255, .7);
  backdrop-filter: blur(4px) saturate(1.15);
  -webkit-backdrop-filter: blur(4px) saturate(1.15);
  border: 1px solid #fff;
  overflow: hidden;
}
.sw-glass__blob-wrap { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.sw-glass__blob {
  position: absolute;
  bottom: -28%;
  right: -6%;
  width: 46%;
  aspect-ratio: 1.3;
  border-radius: 50%;
  background: rgba(216, 206, 195, .5);
  filter: blur(64px);
}

.sw-stance-panel {
  margin: 0 auto clamp(24px, 5vh, 56px);
  border-radius: clamp(28px, 3vw, 48px);
  box-shadow: 0 30px 70px rgba(23, 24, 26, .1);
}
.sw-stance {
  position: relative;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: var(--band-y) clamp(20px, 8.3%, 100px);
}
.sw-sticker {
  display: inline-block;
  background: var(--blue-500);
  color: #fff;
  border: 1px solid var(--border-hairline);
  padding: 6px 14px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .1em;
  transform: rotate(2deg);
  margin-bottom: 30px;
}
.sw-stance__title {
  font-family: var(--type-display-family);
  font-weight: 900;
  font-size: var(--type-statement-size);
  line-height: 1.35;
  letter-spacing: -.01em;
  margin: 0 0 28px;
  max-width: 24em;
}
.sw-stance__body {
  margin: 0 0 40px; /* カンプは本文の下に空のグリッドが残り、この 40px が帯の高さに効く */
  font-size: var(--type-body-size);
  line-height: var(--leading-body);
  font-weight: 500;
  color: var(--ink-800);
  max-width: 42em;
}

.sw-news-panel {
  border-top-left-radius: clamp(28px, 3vw, 48px);
  border-top-right-radius: clamp(28px, 3vw, 48px);
}
.sw-news-panel .sw-glass__blob { bottom: -24%; right: -4%; width: 40%; }
.sw-news { position: relative; z-index: 1; padding: var(--band-y) 0; }

/* セクション見出し（NEWS） */
.sw-sechead { margin-bottom: var(--stack-y); }
.sw-sechead__jp {
  font-family: var(--type-display-family);
  font-size: var(--type-statement-size);
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.25;
  margin: 0 0 12px;
}
.sw-sechead__latin {
  font-family: var(--font-family-grotesk);
  font-size: var(--type-index-size);
  font-weight: var(--type-index-weight);
  letter-spacing: var(--type-index-tracking);
  text-transform: uppercase;
  color: var(--ink-600);
}
.sw-sechead__lead {
  margin: 18px 0 0;
  font-size: var(--type-body-size);
  line-height: var(--leading-body);
  color: var(--ink-700);
  max-width: 44em;
}

/* 共通の小物 */
.sw-tagrow { display: flex; flex-wrap: wrap; gap: 8px; }
.sw-tagrow--tight { gap: 7px; }
.sw-tagx { font-size: var(--text-xs); color: var(--ink-700); border: 1px solid var(--ink-400); padding: 5px 11px; }
.sw-tagx--sm { padding: 4px 10px; }
.sw-mono { font-family: var(--font-family-mono); font-size: var(--type-meta-size); letter-spacing: .05em; color: var(--ink-500); }
.sw-circ {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--blue-400);
  color: var(--blue-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  flex: none;
}
.sw-circ--fill { background: var(--blue-500); color: #fff; border-color: var(--blue-500); }
.sw-pill-ink {
  background: var(--ink-900);
  color: #fff;
  border-radius: 999px;
  padding: 8px 20px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .1em;
}
.sw-thumb-note {
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-family: var(--font-family-mono);
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-index);
  color: var(--ink-600);
}
.sw-thumb-note--light { color: rgba(255, 255, 255, .78); }

/* PICK UP */
.sw-pickup { position: relative; margin-bottom: var(--stack-y); }
.sw-pickup__badge {
  position: absolute;
  top: clamp(-26px, calc(-26px + (1240px - 100vw) * 0.07), 10px);
  left: clamp(-26px, calc(-26px + (1240px - 100vw) * 0.07), 10px);
  z-index: 2;
  width: clamp(70px, 8vw, 88px);
  height: clamp(70px, 8vw, 88px);
  background: #ffe14f;
  clip-path: polygon(50.0% 0.0%,53.8% 1.5%,57.1% 5.1%,59.9% 8.9%,62.7% 11.0%,66.2% 10.9%,70.7% 9.5%,75.4% 8.5%,79.4% 9.5%,81.6% 13.0%,82.2% 17.8%,82.2% 22.5%,83.2% 25.9%,86.1% 27.9%,90.5% 29.3%,95.0% 31.4%,97.6% 34.5%,97.3% 38.6%,94.9% 42.9%,92.2% 46.7%,91.0% 50.0%,92.2% 53.3%,94.9% 57.1%,97.3% 61.4%,97.6% 65.5%,95.0% 68.6%,90.5% 70.7%,86.1% 72.1%,83.2% 74.1%,82.2% 77.5%,82.2% 82.2%,81.6% 87.0%,79.4% 90.5%,75.4% 91.5%,70.7% 90.5%,66.2% 89.1%,62.7% 89.0%,59.9% 91.1%,57.1% 94.9%,53.8% 98.5%,50.0% 100.0%,46.2% 98.5%,42.9% 94.9%,40.1% 91.1%,37.3% 89.0%,33.8% 89.1%,29.3% 90.5%,24.6% 91.5%,20.6% 90.5%,18.4% 87.0%,17.8% 82.2%,17.8% 77.5%,16.8% 74.1%,13.9% 72.1%,9.5% 70.7%,5.0% 68.6%,2.4% 65.5%,2.7% 61.4%,5.1% 57.1%,7.8% 53.3%,9.0% 50.0%,7.8% 46.7%,5.1% 42.9%,2.7% 38.6%,2.4% 34.5%,5.0% 31.4%,9.5% 29.3%,13.9% 27.9%,16.8% 25.9%,17.8% 22.5%,17.8% 17.8%,18.4% 13.0%,20.6% 9.5%,24.6% 8.5%,29.3% 9.5%,33.8% 10.9%,37.3% 11.0%,40.1% 8.9%,42.9% 5.1%,46.2% 1.5%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--type-display-family);
  font-size: var(--text-sm);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: .04em;
  transform: rotate(-8deg);
}
.sw-pickup__card {
  text-decoration: none;
  color: inherit;
  position: relative;
  display: block;
  background: var(--greige-000);
  border: 1px solid var(--border-hairline);
  border-radius: clamp(20px, 2.4vw, 32px);
  padding: clamp(30px, 3.6vw, 52px);
  transition: box-shadow .3s cubic-bezier(.2, 0, .2, 1);
}
.sw-pickup__card:hover { box-shadow: var(--shadow-card); color: inherit; }
.sw-pickup__cat { display: flex; justify-content: flex-end; margin-bottom: 24px; }
.sw-pickup__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
.sw-pickup__latin { font-family: var(--font-family-grotesk); font-size: var(--text-xs); font-weight: 700; letter-spacing: .02em; color: var(--blue-600); margin-bottom: 14px; }
.sw-pickup__title { font-family: var(--type-display-family); font-size: var(--type-heading-size); font-weight: 900; line-height: 1.4; letter-spacing: .01em; margin: 0 0 26px; }
.sw-pickup__sub { font-family: var(--type-display-family); font-size: var(--type-body-size); font-weight: 900; margin: 0 0 14px; }
.sw-pickup__body { margin: 0 0 26px; font-size: var(--type-ui-size); line-height: var(--leading-body); color: var(--ink-700); }
.sw-pickup__date { margin-top: 22px; }
.sw-pickup__thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border-hairline);
  border-radius: clamp(14px, 1.6vw, 20px);
  background: var(--blue-500);
  overflow: hidden;
}
.sw-pickup__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sw-pickup__more { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 32px; }
.sw-pickup__more span:first-child {
  font-family: var(--font-family-grotesk);
  font-size: var(--type-index-size);
  font-weight: var(--type-index-weight);
  letter-spacing: var(--type-index-tracking);
  color: var(--blue-600);
}

/* 3 枚のカード */
.sw-newsslider { position: relative; }
.sw-newsgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); gap: 28px; }
.sw-ncard {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  background: var(--greige-000);
  border: 1px solid var(--border-hairline);
  border-radius: clamp(16px, 1.8vw, 24px);
  padding: 22px;
  transition: box-shadow .3s cubic-bezier(.2, 0, .2, 1);
}
.sw-ncard:hover { box-shadow: var(--shadow-card); color: inherit; }
.sw-ncard__thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--border-hairline);
  border-radius: 12px;
  background: var(--greige-300);
  overflow: hidden;
  margin-bottom: 20px;
}
.sw-ncard__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sw-ncard__cat {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--ink-900);
  color: #fff;
  padding: 5px 12px;
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: var(--tracking-index);
}
/* カンプの3枚は色違い。画像が無いときの地色とバッジ色を順番に変える */
.sw-ncard:nth-child(3n+2) .sw-ncard__thumb { background: var(--blue-200); }
.sw-ncard:nth-child(3n+2) .sw-ncard__cat { background: var(--blue-500); }
.sw-ncard:nth-child(3n+2) .sw-thumb-note { color: var(--ink-700); }
.sw-ncard:nth-child(3n) .sw-ncard__thumb { background: var(--ink-900); }
.sw-ncard:nth-child(3n) .sw-ncard__cat { background: var(--greige-000); color: var(--ink-900); }
.sw-ncard:nth-child(3n) .sw-thumb-note { color: rgba(255, 255, 255, .7); }
.sw-ncard__latin { font-family: var(--font-family-grotesk); font-size: var(--text-sm); font-weight: 700; color: var(--blue-600); margin-bottom: 8px; }
.sw-ncard__title { font-family: var(--type-display-family); font-size: var(--text-lg); font-weight: 900; line-height: 1.5; margin: 0 0 16px; }
.sw-ncard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 22px; }

.sw-news__all { display: flex; justify-content: center; margin-top: var(--stack-y); }

/* モバイルのスワイプ（940px 未満） */
.sw-news-arrow {
  position: absolute;
  top: 38%;
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-hairline);
  background: #fff;
  color: var(--blue-500);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: var(--shadow-card);
  transition: opacity .2s;
}
.sw-news-arrow--prev { left: -4px; }
.sw-news-arrow--next { right: -4px; }
.sw-news-arrow[disabled] { opacity: .32; pointer-events: none; }
.sw-news-progress { display: none; align-items: center; gap: 14px; margin-top: 26px; padding: 0 4px; }
.sw-news-progress__cur { font-family: var(--font-family-mono); font-size: var(--type-meta-size); letter-spacing: .08em; color: var(--ink-700); }
.sw-news-progress__total { font-family: var(--font-family-mono); font-size: var(--type-meta-size); letter-spacing: .08em; color: var(--ink-500); }
.sw-news-progress__bar { position: relative; flex: 1; height: 3px; border-radius: 999px; background: var(--greige-300); }
.sw-news-progress__fill { position: absolute; inset: 0 auto 0 0; width: 33%; border-radius: 999px; background: var(--blue-500); transition: width .3s cubic-bezier(.16, 1, .3, 1); }
.sw-news-progress__thumb { position: absolute; top: 50%; left: 33%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--blue-500); transition: left .3s cubic-bezier(.16, 1, .3, 1); }

@media (max-width: 939px) {
  .sw-newsgrid {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .sw-newsgrid::-webkit-scrollbar { display: none; }
  .sw-ncard { flex: 0 0 auto; width: 82%; min-width: 82%; scroll-snap-align: center; }
  .sw-news-arrow { display: flex; }
  .sw-news-progress { display: flex; }
}

/* 空の状態 */
.sw-empty-box {
  background: var(--greige-000);
  border: 1px dashed var(--border-hairline);
  padding: 56px 28px;
  text-align: center;
}
.sw-empty-box__title { font-family: var(--type-display-family); font-size: var(--text-xl); font-weight: 900; margin: 0 0 14px; }
.sw-empty-box__body { margin: 0 auto 26px; font-size: var(--type-ui-size); line-height: var(--leading-body); color: var(--ink-700); max-width: 34em; }
.sw-empty-box__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* =========================================================
   PRODUCTS（青帯・sticky の背景・マーキー・ピル・パネル）
   ========================================================= */

.sw-products { position: relative; z-index: 1; background: var(--blue-500); padding: 0; overflow: clip; }
.sw-products__bg {
  width: 100%;
  height: 100vh;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.sw-products__c1 { position: absolute; top: -14%; right: -6%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.sw-products__c2 { position: absolute; bottom: -22%; left: -4%; width: 30%; aspect-ratio: 1.4; border-radius: 50%; background: rgba(255, 255, 255, .06); filter: blur(40px); }

.sw-marquee { height: min(12vw, 150px); overflow: hidden; position: absolute; bottom: min(2vw, 25px); left: 0; right: 0; transform: translateZ(0); }
.sw-marquee__row { display: flex; align-items: center; width: 100%; height: 100%; }
.sw-marquee__track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: fit-content;
  height: 100%;
  animation: sw-marquee 50s linear infinite;
  font-family: var(--font-family-grotesk);
  font-size: min(12vw, 150px);
  font-weight: 700;
  line-height: .92;
  letter-spacing: .04em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, .18);
}
.sw-marquee__track span { padding-right: .28em; }

.sw-products__body { position: relative; z-index: 2; margin-top: -100vh; }
.sw-products__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }

.sw-products__head-m { display: none; flex: 0 0 auto; width: 100%; padding: clamp(64px, 12vh, 110px) 0 4px; }
.sw-products__title {
  font-family: var(--type-display-family);
  font-size: var(--type-statement-size);
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.25;
  color: #fff;
  margin: 0 0 12px;
}
.sw-products__latin {
  font-family: var(--font-family-grotesk);
  font-size: var(--type-index-size);
  font-weight: var(--type-index-weight);
  letter-spacing: var(--type-index-tracking);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}

.sw-products__rail {
  position: sticky;
  top: 0;
  flex: 0 0 auto;
  width: 100%;
  max-width: calc((493 / 1200) * 100%);
  min-width: min(100%, 280px);
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc((104 / 988) * 100vh) 0 0;
}
.sw-products__rail .sw-products__latin { margin-bottom: 36px; }

.sw-pills {
  display: flex;
  flex-direction: column;
  gap: min(calc((16 / var(--vw, 1440)) * 100vw), 16px);
  width: min(calc((327 / 493) * 100%), 327px);
  margin-bottom: min(calc((34 / 493) * 100%), 34px);
}
.sw-pill {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border: 1px solid #fff;
  border-radius: 9999px;
  padding: min(calc((14 / var(--vw, 1440)) * 100vw), 14px) 0 min(calc((14 / var(--vw, 1440)) * 100vw), 14px) min(calc((62 / var(--vw, 1440)) * 100vw), 62px);
  background: var(--pb, transparent);
  color: var(--pf, #fff);
  font-family: var(--type-body-family);
  transition: background-color .4s, color .4s;
}
.sw-pill:hover,
.sw-pill[aria-current="true"] { --pb: #fff; --pf: var(--blue-600); }
.sw-pill__line {
  display: block;
  width: 1px;
  height: min(calc((16 / var(--vw, 1440)) * 100vw), 16px);
  background: #fff;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
}
.sw-pill__num {
  position: absolute;
  top: min(calc((13 / var(--vw, 1440)) * 100vw), 13px);
  left: min(calc((27 / var(--vw, 1440)) * 100vw), 27px);
  font-family: var(--font-family-grotesk);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .05em;
}
.sw-pill__type { display: block; padding-left: 2px; font-family: var(--font-family-grotesk); font-size: var(--type-index-size); font-weight: 500; line-height: 1.5; letter-spacing: .05em; }
.sw-pill__name { display: block; font-family: var(--type-display-family); font-size: var(--text-base); font-weight: 700; line-height: 1.5; letter-spacing: .05em; }
.sw-products__all { width: min(calc((327 / 493) * 100%), 327px); }

.sw-products__col {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  max-width: calc((707 / 1200) * 100% + max(0px, (940px - 100vw) * 1000));
  min-width: min(100%, 300px);
  height: auto;
  min-height: calc(var(--sw-panels, 4) * 100vh);
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 9vh, 120px);
  padding: clamp(48px, 11vh, 150px) 0;
}

.sw-ppanel { flex: 0 0 auto; position: relative; background: var(--greige-000); border-radius: clamp(16px, 2vw, 26px); overflow: hidden; }
.sw-ppanel__num {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: clamp(76px, 9vw, 112px);
  height: clamp(76px, 9vw, 112px);
  background: var(--ink-900);
  border-radius: clamp(16px, 2vw, 26px) 0 clamp(16px, 2vw, 26px) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-grotesk);
  font-size: var(--text-xl);
  font-weight: 700;
  color: #fff;
  letter-spacing: .02em;
}
.sw-ppanel__type { display: flex; justify-content: flex-end; padding: 26px 28px 0; }
.sw-ppanel__type span {
  font-family: var(--font-family-grotesk);
  font-size: var(--type-index-size);
  font-weight: var(--type-index-weight);
  letter-spacing: var(--type-index-tracking);
  color: var(--blue-600);
}
.sw-ppanel__thumb {
  position: relative;
  margin: 22px 28px 0;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background: var(--blue-200);
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .4) 0 12px, transparent 12px 24px);
}
.sw-ppanel__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sw-ppanel:nth-child(4n+2) .sw-ppanel__thumb { background: var(--ink-900); background-image: radial-gradient(rgba(255, 255, 255, .24) 1.5px, transparent 1.5px); background-size: 15px 15px; }
.sw-ppanel:nth-child(4n+2) .sw-thumb-note { color: rgba(255, 255, 255, .6); }
.sw-ppanel:nth-child(4n+3) .sw-ppanel__thumb { background: var(--greige-200); background-image: repeating-linear-gradient(-45deg, rgba(23, 24, 26, .08) 0 12px, transparent 12px 24px); }
.sw-ppanel:nth-child(4n) .sw-ppanel__thumb { background: var(--blue-500); background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 2px, transparent 2px 16px); }
.sw-ppanel:nth-child(4n) .sw-thumb-note { color: rgba(255, 255, 255, .75); }
.sw-ppanel__body {
  padding: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px 32px;
  align-items: start;
}
.sw-ppanel__title { font-family: var(--type-display-family); font-size: var(--type-heading-size); font-weight: 900; line-height: 1.4; margin: 0; }
.sw-ppanel__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: var(--type-ui-size); line-height: var(--leading-ui); color: var(--ink-800); }
.sw-ppanel__points li { display: flex; gap: 10px; }
.sw-ppanel__points li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--blue-500); flex: none; margin-top: .45em; }
.sw-ppanel__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 0 28px 28px; }

.sw-products__all-m { display: none; padding: 0 0 clamp(72px, 12vh, 110px); }
.sw-products__all-m .k-btn { width: 100%; }

/* モバイルの固定ドットバー */
.sw-prodbar {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 28;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border-radius: 9999px;
  background: rgba(20, 102, 216, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s cubic-bezier(.16, 1, .3, 1), visibility .3s linear;
}
.sw-prodbar[data-show="true"] { opacity: 1; visibility: visible; }
.sw-prodbar__dot {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0;
  width: 42px;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, .7);
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-family: var(--font-family-grotesk);
  font-size: var(--type-index-size);
  font-weight: 700;
  letter-spacing: .06em;
  transition: background-color .3s, color .3s, width .3s, padding .3s;
}
.sw-prodbar__dot span:last-child { display: none; white-space: nowrap; }
.sw-prodbar__dot[aria-current="true"] { background: #fff; color: var(--blue-600); border-color: #fff; width: auto; padding: 0 16px; }
.sw-prodbar__dot[aria-current="true"] span:last-child { display: inline; }

@media (max-width: 939px) {
  .sw-products__rail { display: none; }
  .sw-products__head-m { display: block; }
  .sw-products__all-m { display: block; }
  .sw-prodbar { display: flex; }
  /* 横トラック。位置と高さは home.js が実測して書く（カンプと同じ） */
  .sw-products__row { align-items: flex-start; align-content: flex-start; }
  .sw-products__col {
    position: sticky;
    height: auto;
    min-height: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 14px;
    padding: 0;
    overflow: hidden;
  }
  .sw-ppanel { flex: 0 0 100%; width: 100%; transform-origin: top center; }
}

/* =========================================================
   FOLLOW
   ========================================================= */

.sw-follow { position: relative; z-index: 1; background: var(--surface-page); }
.sw-follow__in { padding: var(--band-y) 0; }
.sw-follow__title {
  font-family: var(--type-display-family);
  font-size: var(--type-heading-size);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--blue-500);
  margin: 0 0 14px;
}
.sw-follow__latin {
  font-family: var(--font-family-grotesk);
  font-size: var(--type-index-size);
  font-weight: var(--type-index-weight);
  letter-spacing: var(--type-index-tracking);
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 var(--stack-y);
}
.sw-follow__list { display: flex; flex-direction: column; border-top: 1px solid var(--border-rule, var(--greige-300)); }
.sw-follow__row {
  --c-bg: transparent;
  --c-fg: var(--blue-500);
  --c-x: 0px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: clamp(24px, 4vw, 64px);
  row-gap: 16px;
  padding: clamp(30px, 3.4vw, 44px) 0;
  border-bottom: 1px solid var(--border-rule, var(--greige-300));
  transition: background-color 140ms linear;
}
.sw-follow__row:hover { --c-bg: var(--blue-500); --c-fg: #fff; --c-x: 4px; color: inherit; }
.sw-follow__name { flex: 0 1 200px; display: flex; flex-direction: column; gap: 6px; }
.sw-follow__name span { font-family: var(--font-family-grotesk); font-size: var(--text-xl); font-weight: 600; letter-spacing: -.02em; line-height: 1; color: var(--blue-500); }
.sw-follow__txt { flex: 1 1 260px; display: flex; flex-direction: column; gap: 22px; max-width: 40rem; }
.sw-follow__txt p { margin: 0; font-size: var(--type-body-size); line-height: 1.9; letter-spacing: .01em; color: var(--ink-800); }
.sw-follow__cta { display: inline-flex; align-items: center; gap: 12px; font-family: var(--type-display-family); font-size: var(--text-xs); font-weight: 700; color: var(--blue-600); }
.sw-follow__circ {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  border: 1px solid var(--blue-400);
  background: var(--c-bg);
  color: var(--c-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateX(var(--c-x));
  transition: background-color 220ms cubic-bezier(.16, 1, .3, 1), color 220ms linear, transform 220ms cubic-bezier(.16, 1, .3, 1);
}
.sw-follow__note { margin: var(--stack-y) 0 0; font-size: var(--type-ui-size); line-height: var(--leading-body); color: var(--ink-700); }

/* =========================================================
   ABOUT（ベージュが円弧で青へ）
   ========================================================= */

.sw-aboutwrap {
  position: relative;
  z-index: 1;
  background: #0870ca;
  overflow: clip;
  margin-top: calc((-50 / var(--vw, 1440)) * 100vw);
}
.sw-aboutwrap__pad { width: 100%; padding: 0 0 max(calc((50 / var(--vw, 1440)) * 100vw), 50px); }
.sw-about {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  color: var(--ink-900);
  padding: calc(min(calc((150 / var(--vw, 1440)) * 100vw), 150px) - var(--y-cut-top)) 0 calc(min(calc((256 / var(--vw, 1440)) * 100vw), 256px) - var(--y-cut-bottom));
  backface-visibility: hidden;
}
.sw-about__curve {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 125%;
  height: 100%;
  border-radius: 0 0 50% 50% / 0 0 min(35vw, 500px) min(35vw, 500px);
  background: var(--surface-page);
  z-index: -1;
}
.sw-about__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px 48px;
  align-items: start;
}
.sw-about__label { font-size: var(--type-index-size); font-weight: var(--type-index-weight); letter-spacing: var(--type-index-tracking); color: var(--blue-600); margin-bottom: 12px; }
.sw-about__title { font-family: var(--type-display-family); font-size: var(--type-heading-size); font-weight: 900; line-height: 1.35; letter-spacing: -.01em; margin: 0; }
.sw-about__txt { display: flex; flex-direction: column; gap: 16px; }
.sw-about__txt p { margin: 0; font-size: var(--type-body-size); line-height: var(--leading-body); }
.sw-about__btn { align-self: flex-start; margin-top: 10px; }

/* 制作物が 0 件のとき：空の囲みの下にも帯の余白を残す（子の margin は帯の外へ抜けてしまうので padding にする） */
.sw-products__body--empty { padding-bottom: clamp(72px, 12vh, 110px); }