/* ============================================
   Atoma — Design Proposal B「Editorial」
   style.cssの後に読み込み、TOPページBのみで使用
   ============================================ */

body.design-b {
  background: var(--c-section);
}

/* ---------- Hero B ---------- */
.heroB {
  position: relative;
  min-height: 100svh;
  padding: calc(var(--header-h) + 4vh) var(--pad-side) 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.heroB-inner {
  position: relative;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  height: calc(100svh - var(--header-h) - 12vh);
  min-height: 480px;
}

/* 縦書きキャッチコピー */
.heroB-catch {
  position: absolute;
  left: 0;
  top: 4%;
  z-index: 3;
  writing-mode: vertical-rl;
  font-family: var(--font-serif-jp);
  font-weight: 500;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.9;
  letter-spacing: 0.24em;
  height: 88%;
}
.heroB-catch .line {
  display: block;
  overflow: hidden;
}
.heroB-catch .line span {
  display: inline-block;
  transform: translateX(110%);
  animation: heroBLine 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.heroB-catch .line:nth-child(2) span { animation-delay: 0.2s; }
@keyframes heroBLine { to { transform: none; } }

/* 写真(パララックス対象) */
.heroB-photo {
  position: absolute;
  right: 0;
  top: 0;
  width: min(46%, 520px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  margin: 0;
}
.heroB-photo img {
  width: 100%; height: 116%;
  object-fit: cover;
  will-change: transform;
}
.heroB-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-section);
  z-index: 2;
  transform-origin: top;
  animation: curtain 1.4s cubic-bezier(0.77, 0, 0.18, 1) 0.15s forwards;
}
@keyframes curtain { to { transform: scaleY(0); } }

/* 巨大アウトライン文字 */
.heroB-word {
  position: absolute;
  left: clamp(40px, 8vw, 140px);
  bottom: 6%;
  z-index: 4;
  font-family: var(--font-serif-en);
  font-size: clamp(90px, 17vw, 250px);
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1px rgba(26, 26, 24, 0.55);
  letter-spacing: 0.02em;
  user-select: none;
  opacity: 0;
  animation: heroFadeB 1.8s ease 0.7s forwards;
}
.heroB-word .fill { color: var(--c-ink); -webkit-text-stroke: 0; }
@keyframes heroFadeB { to { opacity: 1; } }

.heroB-lead {
  position: absolute;
  left: clamp(300px, 30vw, 480px);
  top: 8%;
  z-index: 2;
  font-size: 12px;
  line-height: 2.6;
  letter-spacing: 0.2em;
  color: var(--c-gray);
  max-width: 300px;
  opacity: 0;
  animation: heroFadeB 1.8s ease 1s forwards;
}

/* マーキー(流れる帯) */
.marquee {
  position: relative;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  padding: 16px 0;
  overflow: hidden;
  white-space: nowrap;
  background: var(--c-base);
}
.marquee-track {
  display: inline-block;
  animation: marq 30s linear infinite;
  font-family: var(--font-serif-en);
  font-size: 15px;
  letter-spacing: 0.32em;
}
.marquee-track em {
  font-style: normal;
  color: var(--c-gray);
  margin: 0 28px;
}
@keyframes marq { to { transform: translateX(-50%); } }

@media (max-width: 820px) {
  .heroB-inner { min-height: 420px; }
  .heroB-photo { width: 62%; top: 2%; }
  .heroB-catch { font-size: clamp(26px, 7vw, 34px); top: 2%; }
  .heroB-lead { display: none; }
  .heroB-word { left: 0; bottom: 4%; font-size: clamp(72px, 19vw, 120px); }
}

/* ---------- 墨色の実績数値バンド(スリム・Jost・中央揃え) ---------- */
.section--ink {
  background: var(--c-ink);
  color: #fff;
  padding-top: clamp(44px, 6vw, 76px);
  padding-bottom: clamp(44px, 6vw, 76px);
  text-align: center;
}
.section--ink .stat { padding: 10px; text-align: center; }
.section--ink .stat-value {
  font-family: "Jost", "Noto Sans JP", sans-serif;
  font-weight: 300;
  font-size: clamp(36px, 4.6vw, 62px);
  letter-spacing: 0.06em;
}
.section--ink .stat-value .stat-unit {
  font-size: 0.4em;
  letter-spacing: 0.1em;
}
.section--ink .stat-label {
  font-family: "Jost", "Noto Sans JP", sans-serif;
  font-weight: 300;
  letter-spacing: 0.3em;
}
/* スマホ縦積み時:区切り線と数字の間に余白を確保 */
@media (max-width: 700px) {
  .section--ink .stats-grid { gap: 0; }
  .section--ink .stat { padding: 30px 10px; }
  .section--ink .stat + .stat::before { top: 0; }
  .section--ink .stat-label { margin-top: 14px; }
}

/* ---------- ヒーローC:シネマティック(動画前提・中央揃え) ---------- */
.heroC {
  position: relative;
  height: 100svh;
  min-height: 540px;
  overflow: hidden;
  background: var(--c-ink);
}
.heroC-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  animation: heroCZoom 7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes heroCZoom { to { transform: scale(1); } }
.heroC::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom,
    rgba(26, 26, 24, 0.30) 0%,
    rgba(26, 26, 24, 0.16) 45%,
    rgba(26, 26, 24, 0.48) 100%);
}
.heroC-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 0 24px;
}
.heroC-word {
  font-family: var(--font-serif-en);
  font-size: clamp(64px, 12vw, 150px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.03em;
  overflow: hidden;
}
.heroC-word span {
  display: inline-block;
  transform: translateY(110%);
  animation: heroCLine 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}
.heroC-catch {
  margin-top: clamp(20px, 3.5vh, 34px);
  font-family: var(--font-serif-jp);
  font-weight: 500;
  font-size: clamp(17px, 2.6vw, 28px);
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  overflow: hidden;
}
.heroC-catch span {
  display: inline-block;
  transform: translateY(110%);
  animation: heroCLine 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.45s forwards;
}
@keyframes heroCLine { to { transform: none; } }
.heroC-sub {
  margin-top: clamp(18px, 3vh, 30px);
  font-family: "Jost", sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: rgba(255, 255, 255, 0.75);
  opacity: 0;
  animation: heroCFade 1.6s ease 1.1s forwards;
}
@keyframes heroCFade { to { opacity: 1; } }

/* 四隅のメタ情報(モバイルでは非表示) */
.heroC-meta {
  position: absolute;
  z-index: 2;
  font-family: "Jost", sans-serif;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.6);
  opacity: 0;
  animation: heroCFade 1.6s ease 1.4s forwards;
}
.heroC-meta--tl { top: calc(var(--header-h) + 10px); left: var(--pad-side); }
.heroC-meta--tr { top: calc(var(--header-h) + 10px); right: var(--pad-side); }
@media (max-width: 700px) {
  .heroC-meta { display: none; }
}

.heroC-scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-family: "Jost", sans-serif;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
}
.heroC-scroll::after {
  content: "";
  width: 1px;
  height: 46px;
  background: rgba(255, 255, 255, 0.7);
  animation: scrollLine 2.2s ease-in-out infinite;
}
.section--ink .stat-label { color: rgba(255, 255, 255, 0.55); }
.section--ink .stat + .stat::before { background: rgba(255, 255, 255, 0.18); }
.section--ink .section-label-jp { color: rgba(255, 255, 255, 0.5); }
.statB-note {
  margin-top: clamp(20px, 3vw, 32px);
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: rgba(255, 255, 255, 0.4);
}

/* ---------- Service:エディトリアルリスト ---------- */
.svcList {
  border-top: 1px solid var(--c-line);
}
.svcList li { border-bottom: 1px solid var(--c-line); }
.svcList a {
  position: relative;
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(30px, 4.5vw, 54px) 8px;
  transition: padding-left 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.svcList a:hover { padding-left: 28px; }
.svcList-num {
  font-family: var(--font-serif-en);
  font-size: 15px;
  letter-spacing: 0.2em;
  color: var(--c-gray);
}
.svcList-title {
  font-family: var(--font-serif-en);
  font-size: clamp(26px, 4vw, 52px);
  font-weight: 400;
  line-height: 1.15;
}
.svcList-title .jp {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--c-gray);
  margin-top: 10px;
}
.svcList-arrow {
  font-family: var(--font-serif-en);
  font-size: 22px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.svcList a:hover .svcList-arrow { transform: translateX(10px) rotate(-45deg); }

/* カーソル追従のプレビュー画像 */
.svcFloat {
  position: fixed;
  left: 0; top: 0;
  z-index: 90;
  width: 300px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.svcFloat img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.svcFloat.is-active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
@media (hover: none), (max-width: 820px) {
  .svcFloat { display: none; }
}
@media (max-width: 600px) {
  .svcList a { grid-template-columns: 48px 1fr auto; }
}

/* ---------- Works:横スクロール ---------- */
.worksB-wrap { padding-right: 0; }
.worksB {
  display: flex;
  gap: clamp(16px, 2.5vw, 32px);
  overflow-x: auto;
  padding-bottom: 24px;
  scrollbar-width: none;
  cursor: grab;
}
.worksB::-webkit-scrollbar { display: none; }
.worksB.is-dragging { cursor: grabbing; }
.worksB .works-item,
.worksB .talent-item {
  flex: 0 0 auto;
  width: clamp(230px, 26vw, 340px);
}
.worksB-hint {
  margin-top: 10px;
  font-family: var(--font-serif-en);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--c-gray);
  display: flex;
  align-items: center;
  gap: 12px;
}
.worksB-hint::after {
  content: "";
  width: 60px; height: 1px;
  background: var(--c-gray);
}

/* ---------- Talent:ホバーで名前が浮かぶ ---------- */
.design-b .talent-item figure { position: relative; }
.design-b .talent-item figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 24, 0);
  transition: background 0.5s ease;
}
.design-b .talent-item:hover figure::after { background: rgba(26, 26, 24, 0.35); }
.design-b .talent-hover-name {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif-en);
  font-size: 24px;
  letter-spacing: 0.2em;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.design-b .talent-item:hover .talent-hover-name {
  opacity: 1;
  transform: none;
}

/* ---------- 大型CTA ---------- */
.ctaB {
  text-align: center;
  padding: clamp(110px, 15vw, 200px) var(--pad-side);
  background: var(--c-base);
}
.ctaB-title {
  font-family: var(--font-serif-en);
  font-size: clamp(52px, 9vw, 130px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.03em;
}
.ctaB-title .outline {
  color: transparent;
  -webkit-text-stroke: 1px rgba(26, 26, 24, 0.5);
}
.ctaB-lead {
  margin: 30px auto 0;
  max-width: 520px;
  font-size: 13.5px;
  color: rgba(26, 26, 24, 0.75);
}
.ctaB .contact-buttons {
  margin: clamp(44px, 5vw, 64px) auto 0;
}

/* ---------- リビール強化(B専用) ---------- */
.design-b .reveal {
  transform: translateY(40px);
  filter: blur(6px);
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
              filter 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.design-b .reveal.is-visible { filter: blur(0); transform: none; }

/* ---------- YouTube埋め込み(案A・案B共通) ---------- */
.yt-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-ink);
}
.yt-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 案A:WORKSの隣に新設する専用セクション */
.yt-section-inner {
  max-width: 920px;
  margin: 0 auto;
}
.yt-caption {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.yt-caption-text {
  font-size: 13px;
  color: rgba(26, 26, 24, 0.72);
  max-width: 480px;
}
.yt-caption-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif-en);
  font-size: 13px;
  letter-spacing: 0.18em;
  white-space: nowrap;
}
.yt-caption-link::after {
  content: "";
  width: 40px; height: 1px;
  background: var(--c-ink);
}

/* 案B:WORKSストリップ内の1枠に埋め込み(横長タイル) */
.works-item--video {
  width: clamp(320px, 42vw, 480px) !important;
}
.works-item--video figure {
  aspect-ratio: 16 / 9;
}

/* セクション番号 */
.section-index {
  display: block;
  font-family: var(--font-serif-en);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--c-gray);
  margin-bottom: 18px;
}