/* ==========================================================================
   LLOYD-LAB — Main Stylesheet
   ========================================================================== */

@font-face {
  font-family: "Arcade Normal";
  src: url("../fonts/ARCADE_N.TTF") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-bg: #000000;
  --color-text: #ffffff;
  --color-text-sub: #c7c7c7;
  --color-text-muted: #7e7e7e;
  --color-accent-cyan: #00ffff;
  --color-accent-yellow: #ffff00;
  --color-accent-lime: #80ff00;
  --color-accent-blue: #0000ff;

  --font-arcade: "Arcade Normal", "Courier New", monospace;
  --font-montserrat: "Montserrat", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --font-footer: "Avenir", "Helvetica Neue", sans-serif;

  --header-height: 100px;
  /* Header — PC基準 1920px */
  --header-logo-pl: 40px;
  --header-logo-py: 20px;
  --header-nav-pr: 60px;
  --header-nav-gap: 30px;
  --header-link-size: 18px;
  --fv-delay-1: 0ms;
  --fv-delay-2: 1000ms;
  --fv-delay-3: 1000ms;
  --fv-delay-4: 2800ms;
  --fv-delay-scroll: calc(var(--fv-delay-4) + 250ms);
  --soundline-fade: 3s;
  --soundline-blur: 14px;
  --marquee-speed-v: 30s;
  --marquee-speed-h: 42s;

  --content-max: 1640px;
  --gutter-pc: clamp(24px, 7.292vw, 140px);
  --gutter-sp: 24px;
  /* Footer copyright — 1920px: 56px / 750px: 35px */
  --footer-bottom: 56px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Header — PC基準 1920px / SP基準 750px（750未満は比例スケール） */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: var(--header-height);
  padding: 0;
  pointer-events: none;
  transition: transform 0.28s ease, opacity 0.28s ease;
}

.site-header__logo,
.site-header__nav {
  pointer-events: auto;
}

.site-header__logo {
  display: flex;
  align-items: center;
  padding: var(--header-logo-py) 0 var(--header-logo-py) var(--header-logo-pl);
}

.site-header__logo img {
  width: 62px;
  height: auto;
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--header-nav-gap);
  padding-right: var(--header-nav-pr);
}

.site-header__link {
  font-family: var(--font-arcade);
  font-size: var(--header-link-size);
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.site-header__link:hover,
.site-header__link.is-current {
  color: var(--color-accent-lime);
}

/* Header reveal — PC hoverデバイスのみ上部マウスオンで表示 */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .site-header {
    transform: translateY(calc(-100% + 8px));
    opacity: 0;
    pointer-events: none;
  }

  .site-header.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}

/* Logo marquee — full-screen background (V columns + H rows) */
.logo-marquee {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.5;
  mix-blend-mode: normal;
}

/* 縦列マルキー */
.logo-marquee--v {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 6px;
  z-index: 6;
  opacity: 0.7;
}

/* 横列マルキー */
.logo-marquee--h {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  z-index: 3;
}

/* 縦列ユニット */
.logo-marquee__col {
  flex: 0 0 auto;
  position: relative;
  height: 100%;
  overflow: hidden;
}

.logo-marquee__col--s { width: 16.9px; }
.logo-marquee__col--m { width: 32.5px; }
.logo-marquee__col--l { width: 84.6px; }

/* 横列ユニット */
.logo-marquee__row {
  flex: 0 0 auto;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.logo-marquee__row--s { height: 16.94px; }
.logo-marquee__row--m { height: 32.47px; }
.logo-marquee__row--l { height: 84.63px; }

/* トラック（アニメーション対象）*/
.logo-marquee__track {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  will-change: transform;
}

.logo-marquee__col .logo-marquee__track {
  flex-direction: column;
  align-items: center;
  width: 100%;
  animation: marquee-v var(--col-speed, 34s) linear infinite;
  animation-direction: var(--col-dir, normal);
}

.logo-marquee__row .logo-marquee__track {
  flex-direction: row;
  align-items: center;
  height: 100%;
  animation: marquee-h var(--row-speed, 34s) linear infinite;
  animation-direction: var(--row-dir, normal);
}

/* アイテム */
.logo-marquee__item {
  display: block;
  flex: 0 0 auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.58;
}

.logo-marquee__col .logo-marquee__item {
  width: 100%;
  background-image: url("../images/logo-markee.svg");
}

.logo-marquee__col--s .logo-marquee__item { height: 126.14px; }
.logo-marquee__col--m .logo-marquee__item { height: 241.77px; }
.logo-marquee__col--l .logo-marquee__item { height: 630.68px; }

.logo-marquee__row .logo-marquee__item {
  height: 100%;
  width: auto;
  aspect-ratio: 126.39 / 17.19;
  background-image: url("../images/logo-markee-h.svg");
}

@keyframes marquee-v {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

@keyframes marquee-h {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes fv-soundline-rotate {
  from { transform: translate(-50%, -50%) rotate(var(--soundline-angle, 0deg)) scale(var(--soundline-scale)); }
  to { transform: translate(-50%, -50%) rotate(calc(var(--soundline-angle, 0deg) + 360deg)) scale(var(--soundline-scale)); }
}

@keyframes fv-soundline-blur-in {
  from {
    opacity: 0;
    filter: blur(var(--soundline-blur, 14px));
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

/* FV — 背景パターン（1ユニット・タイル・固定） */
.fv {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  overflow: visible;
  overflow-x: clip;
  background-color: var(--color-bg);
  background-attachment: fixed;
}

.page-works .fv {
  background-image: none;
}

.fv__layer {
  position: absolute;
  inset: 0;
}

.fv__soundlines,
.fv__key-area,
.fv__logo-area,
.fv__ui {
  pointer-events: none;
}

.fv__soundlines {
  z-index: 4;
}

.fv__key-area,
.fv__logo-area {
  opacity: 0;
  animation: fv-fade-in 1.5s ease forwards;
}

.fv__ui-line,
.fv__ui-block--right {
  opacity: 0;
  animation: fv-fade-in 1.2s ease forwards;
}

.fv__key-area {
  z-index: 7;
  animation-delay: var(--fv-delay-2);
}

.fv__logo-area {
  z-index: 8;
  animation-delay: var(--fv-delay-3);
}

.fv__ui {
  z-index: 9;
}
.fv__ui-line,
.fv__ui-block--right {
  animation-delay: var(--fv-delay-4);
}

.fv__soundline,
.fv__key,
.fv__logo,
.fv__camera-frame {
  position: absolute;
  height: auto;
  max-width: none;
}

.fv__soundline {
  left: 50%;
  top: 50%;
  width: clamp(320px, 29vw, 556px);
  opacity: 0;
  transform-origin: center;
  animation:
    fv-soundline-blur-in var(--soundline-fade) ease-out forwards,
    fv-soundline-rotate 24s linear infinite;
  animation-delay: var(--fv-delay-1), var(--fv-delay-1);
}

.fv__soundline--1 { --soundline-scale: 0.9;  }
.fv__soundline--2 { --soundline-scale: 1.86; --soundline-angle: -224deg; }
.fv__soundline--3 { --soundline-scale: 2.52; --soundline-angle: 150deg; }

.fv__key {
  left: 50%;
  top: 48.3%;
  width: min(671px, 62vw);
  transform: translate(-50%, -50%);
  filter: invert(1);
  opacity: 0.72;
}

.fv__logo {
  left: 50%;
  top: 48.7%;
  z-index: 2;
  width: min(698px, 64vw);
  transform: translate(-50%, -50%);
}

.fv__camera-frame {
  left: 50%;
  top: 48.4%;
  z-index: 3;
  width: min(826px, 76vw);
  transform: translate(-50%, -50%);
}

.fv__ui-block {
  position: absolute;
  margin: 0;
}

.fv__ui-block--left {
  left: clamp(24px, 2.35vw, 45px);
  bottom: clamp(24px, 2.4vw, 46px);
}

.fv__ui-block--right {
  right: clamp(24px, 2.35vw, 45px);
  bottom: clamp(24px, 2.4vw, 46px);
}

.fv__ui-line {
  margin: 0 0 0.35rem;
  font-family: var(--font-montserrat);
  font-size: 12px;
  font-weight: 200;
  letter-spacing: 0.2em;
  color: var(--color-text);
}

.fv__ui-block--left > .fv__ui-line {
  font-size: 20px;
}

.fv__ui-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: clamp(70px, calc(70px + 1.9 * ((100vw - 750px) / 1170)), 71.9px);
}

.fv__ui-row .fv__ui-line {
  margin: 0;
  white-space: nowrap;
}

.fv__ui-label--vertical {
  writing-mode: vertical-rl;
  font-size: 20px;
  letter-spacing: 0.15em;
}

@keyframes fv-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Scroll indicator — PC基準 1920px */
.scroll-indicator {
  position: fixed;
  right: 14.8px;
  bottom: 48px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5.9px;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.page-top .scroll-indicator {
  opacity: 0;
  animation: fv-fade-in 0.8s ease forwards;
  animation-delay: var(--fv-delay-scroll);
}

.scroll-indicator.is-hidden {
  opacity: 0;
  visibility: hidden;
  animation: none;
}

.scroll-indicator__text {
  font-family: var(--font-arcade);
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  color: var(--color-text);
  writing-mode: vertical-rl;
}

.scroll-indicator__graphic {
  width: 13.87px;
  height: auto;
}

/* 全画面セクション — 100vh / 100svh / 100dvh */
.section-viewport {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  box-sizing: border-box;
}

/* Sections（固定パターンの上に載せるため背景を不透明に） */
.section {
  position: relative;
  z-index: 10;
  padding: 120px var(--gutter-pc) 100px;
  background-color: var(--color-bg);
}

.section.section-viewport {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section__title {
  margin: 0 0 64px;
  font-family: var(--font-arcade);
  font-size: clamp(36px, 4vw, 54px);
  font-weight: normal;
  letter-spacing: 0.08em;
  text-align: center;
}

/* About — 写真・本文それぞれ1画面 */
.about {
  padding: 0;
  z-index: auto;           /* stacking context を作らない → marquee が透過 */
  background-color: transparent;
}

.about.section-viewport {
  display: block;
  min-height: auto;
}

.about__photos-area,
.about__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  box-sizing: border-box;
}

.about__photos-area {
  margin: 0;
  background-color: transparent; /* marquee を透かす */
  /* z-index なし → obj-line が about__content より前面に出せる */
}

.about__content {
  padding-top: 80px;
  padding-bottom: 100px;
  background-color: var(--color-bg);
  z-index: 6; /* marquee(z:5-6) より前面、obj-line(z:7) より背面 */
}

.about__obj-line {
  position: absolute;
  width: 0.8px;
  height: auto;
  pointer-events: none;
}

.about__obj-line--left {
  left: calc(265 * 100vw / 1920);
  top: calc(-71 * 100vw / 1920);
  bottom: auto;
  z-index: 7; /* about__content(z:6) より前面、about__photos(z:8) より背面 */
}

.about__obj-line--right {
  right: calc(247.5 * 100vw / 1920);
  top: calc(717 * 100vw / 1920);
  transform: rotate(180deg);
  z-index: 9; /* about__photos(z:8)・右写真より前面 */
}

.about__photos {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 100%;
  margin: 0;
}

.about__photo:nth-child(1) {
  grid-area: 1 / 1;
}

.about__photo--center {
  grid-area: 1 / 2;
}

.about__photo--right {
  grid-area: 1 / 3;
}

.about__photo {
  margin: 0;
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  background: transparent;
  transition: grid-template-rows 0.7s ease;
}

.about__photos.js-scroll-in.is-visible .about__photo {
  grid-template-rows: 1fr;
}

.about__photo-media {
  position: relative;
  overflow: hidden;
  min-height: 0;
}

.about__photo--center,
.about__photo--right {
  position: relative;
}

.about__photo-media picture {
  display: block;
  width: 100%;
}

.about__photo-img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 628 / 921;
  object-fit: cover;
}

.about__photo-overlay {
  grid-area: 1 / 2;
  z-index: 6; /* marquee(z:5) の上、about__content(z:10) の下 */
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2.55cqi, 16px);
  align-self: stretch;
  min-height: 0;
  pointer-events: none;
}

.about__photo-obj {
  width: min(330px, 52.5cqi) !important;
  height: auto;
}

/* photo3 マーカー — XD PC-TOP 基準 1920px（about_picture_3: 1292,1161 / 544×798） */
.about__photo-marker {
  position: absolute;
  z-index: 4;
  width: clamp(12px, 3.68%, 20px);
  aspect-ratio: 1;
  mix-blend-mode: overlay;
  box-sizing: border-box;
  visibility: hidden;
}

.about__photos.js-scroll-in.is-visible .about__photo--right .about__photo-marker {
  visibility: visible;
}

.about__photo-marker--1 {
  left: 60.85%;
  top: 26.19%;
  background: var(--color-accent-blue);
}

.about__photo-marker--2 {
  left: 64.52%;
  top: 28.7%;
  background: var(--color-accent-yellow);
}

.about__photo-marker--3 {
  left: 57.17%;
  top: 24.31%;
  background: var(--color-accent-lime);
}

.about__tagline {
  margin: 0;
  max-width: 92cqi;
  font-family: var(--font-arcade);
  font-size: clamp(10px, 3.18cqi, 20px);
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--color-text);
  line-height: 1.4;
  white-space: nowrap;
}

.about__line {
  display: block;
  width: min(100%, 1121px);
  margin: 0 auto 64px;
}

.about__brand {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 48px;
}

.about__logo {
  width: min(280px, 60vw);
  height: auto;
}

.about__camera-frame {
  position: absolute;
  width: min(90vw, 900px);
  opacity: 0.5;
  pointer-events: none;
}

.about__info {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  font-size: 16px;
  color: var(--color-text-sub);
}

.about__info p {
  margin: 0 0 0.5rem;
}

.about__info-break-sp {
  display: none;
}

/* Works — Figma: PC 3列・SP 1列 / Worksページ24件・TOP9件（SP4件） */
/* Works セクションは背景透明（marquee を透かす）、カードは marquee の前面 */
.works {
  z-index: 6; /* marquee(5) より前面に stacking context を作る */
  background-color: transparent;
}

/* TOP Works — MORE 下から Contact まで背景をつなぐ */
.works--preview {
  --works-section-gutter: var(--gutter-pc);
  --works-solid-height: 56px;
  --works-tail-height: calc((min(100vw - (var(--works-section-gutter) * 2), 1428px) - 10px) / 3 * 2 / 3 + var(--works-solid-height));
  padding-bottom: 0;
}

.works__bridge {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: auto;
  width: calc(100% + (var(--works-section-gutter) * 2));
  margin-left: calc(var(--works-section-gutter) * -1);
  background-color: var(--color-bg);
}

.works__preview {
  position: relative;
  z-index: 3;
  max-width: 1428px;
  margin: 0 auto;
  padding-bottom: var(--works-solid-height);
  background-color: transparent;
  overflow: visible;
}

.works--preview .works__grid {
  margin-bottom: 0;
}

.works--preview .works__tail-bg {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 2;
  width: 100vw;
  height: var(--works-tail-height);
  margin-left: -50vw;
  background: linear-gradient(
    to top,
    var(--color-bg) 0,
    var(--color-bg) var(--works-solid-height),
    rgba(0, 0, 0, 0.72) calc(var(--works-solid-height) + 35%),
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
}

.works--preview .works__more {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  margin-top: 0;
  padding-bottom: var(--works-solid-height);
  box-sizing: border-box;
  background: transparent;
  pointer-events: auto;
  text-align: center;
}

.works--preview .works__more-link {
  position: absolute;
  bottom: 16px;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  pointer-events: auto;
}

.works--preview .works-card--masked {
  pointer-events: none;
  cursor: default;
}

.works--preview .works-card--masked:hover .works-card__img,
.works--preview .works-card--masked:focus-visible .works-card__img {
  transform: none;
  opacity: 1;
}

.works--preview .works-card--masked:hover::after,
.works--preview .works-card--masked:focus-visible::after {
  background: rgba(0, 255, 255, 0);
}

.works__error {
  grid-column: 1 / -1;
  margin: 0;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
}

.works__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  max-width: 1428px;
  margin: 0 auto;
  width: 100%;
}

.works-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #111;
}

.works-card--dummy {
  cursor: default;
}

.works-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.works-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 255, 255, 0);
  transition: background 0.3s ease-out;
}

.works-card:hover .works-card__img,
.works-card:focus-visible .works-card__img {
  transform: scale(1.07);
  opacity: 0.85;
}

.works-card:hover::after,
.works-card:focus-visible::after {
  background: rgba(0, 255, 255, 0.12);
}

.works__more,
.contact__send {
  text-align: center;
}

.works__more {
  margin-top: 74px;
}

.contact-end .section__title {
  margin-bottom: 0;
}

.contact-end .contact__send {
  margin-top: 80px;
}

.works__more-link,
.contact__send-link {
  font-family: var(--font-arcade);
  font-size: 18px;
  letter-spacing: 0.1em;
  text-decoration: underline;
  text-underline-offset: 6px;
  transition: color 0.2s ease;
}

.works__more-link:hover,
.contact__send-link:hover {
  color: var(--color-accent-lime);
}

/* Contact + Footer — 1画面（100vh） */
.contact-end {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
}

.contact-end .contact {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 120px var(--gutter-pc) 0;
}

.contact-end .site-footer {
  flex-shrink: 0;
  padding: 0 0 var(--footer-bottom);
  text-align: center;
  background-color: transparent;
}

/* Works page */
.works-page {
  padding-top: var(--header-height);
}

.works--full {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  padding-top: 100px;
  padding-bottom: 120px;
  padding-left: 0;
  padding-right: 0;
}

.works--full .section__title {
  margin-left: auto;
  margin-right: auto;
}

.scroll-indicator--works {
  position: fixed;
}

/* Footer（contact-end 外では従来どおり） */
.site-footer {
  position: relative;
  z-index: 10;
  padding: 40px 0 48px;
  text-align: center;
  background-color: var(--color-bg);
}

.site-footer__copy {
  margin: 0;
  font-family: var(--font-footer);
  font-size: 12px;
  font-weight: 300;
  color: var(--color-text);
  white-space: nowrap;
}

.site-footer__copy-line--sub::before {
  content: " ";
}

/* Scroll-in animation */
.js-scroll-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.js-scroll-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* About写真 — 表示は grid 0fr→1fr（clip-path は mix-blend-mode を壊すため使わない） */
.about__photos.js-scroll-in {
  opacity: 1;
  transform: none;
  transition: none;
}

.about__photos .about__photo-overlay {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.7s ease;
}

.about__photos.js-scroll-in.is-visible .about__photo-overlay {
  clip-path: inset(0 0 0 0);
}

.about__photos.js-scroll-in.is-visible .about__photo:nth-child(1) {
  transition-delay: 0s;
}

.about__photos.js-scroll-in.is-visible .about__photo:nth-child(2) {
  transition-delay: 0.15s;
}

.about__photos.js-scroll-in.is-visible .about__photo:nth-child(3) {
  transition-delay: 0.3s;
}

.about__photos.js-scroll-in.is-visible .about__photo-overlay {
  transition-delay: 0.15s;
}

.about__photos.js-scroll-in.is-visible .about__photo:nth-child(3) .about__photo-marker {
  transition: visibility 0s linear 0.45s;
}

/* SP — 基準 750px、750未満は 750 比率で比例スケール */
@media (max-width: 767px) {
  :root {
    --header-logo-pl: clamp(20px, 5.333vw, 40px);
    --header-logo-py: clamp(10px, 2.667vw, 20px);
    --header-nav-pr: clamp(20px, 5.333vw, 40px);
    --header-nav-gap: clamp(11px, 2.933vw, 22px);
    /* 750px → 18px、601–750px は緩やかに縮小 */
    --header-link-size: clamp(13px, 2.4vw, 18px);
  }

  .fv__soundline {
    width: 50vw;
  }

  .fv__key {
    top: 49%;
    width: 86vw;
  }

  .fv__logo {
    width: 82vw;
  }

  .fv__camera-frame {
    width: 92vw;
  }

  .fv__ui-block--left {
    left: var(--gutter-sp);
    bottom: 80px;
  }

  .fv__ui-block--right {
    right: var(--gutter-sp);
    bottom: 80px;
  }

  .fv__ui-line {
    font-size: 10px;
  }

  .fv__ui-block--left > .fv__ui-line {
    font-size: 20px;
  }

  .fv__ui-row {
    gap: clamp(12px, calc(12px + 58 * ((100vw - 320px) / 430)), 70px);
  }

  .about__content {
    padding-left: var(--gutter-sp);
    padding-right: var(--gutter-sp);
  }

  .about__info-break-sp {
    display: block;
  }

  .about__photos-area {
    padding-left: 0;
    padding-right: 0;
  }

  .about__content {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .about__photos {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .about__photo:nth-child(1) {
    grid-area: 1 / 1;
  }

  .about__photo--center {
    grid-area: 2 / 1;
  }

  .about__photo--right {
    grid-area: 3 / 1;
  }

  .about__photo-overlay {
    grid-area: 4 / 1;
    padding: 24px var(--gutter-sp) 8px;
  }

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

  .works__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .works__preview {
    padding-bottom: var(--works-solid-height, 48px);
  }

  .works--full {
    padding-bottom: 80px;
    padding-left: var(--gutter-sp);
    padding-right: var(--gutter-sp);
  }

  .section__title {
    margin-bottom: 40px;
    font-size: 36px;
  }

  .contact-end .contact {
    padding: 80px var(--gutter-sp) 0;
  }

}

@media (max-width: 495px) {
  .site-footer__copy {
    white-space: normal;
    font-size: 11px;
  }

  .site-footer__copy-line {
    display: block;
  }

  .site-footer__copy-line--sub::before {
    content: none;
  }
}

/* Footer copyright — 750px〜1920px で 35px→56px、750未満は比例 */
@media (max-width: 1920px) {
  :root {
    --footer-bottom: clamp(
      35px,
      calc(35px + 21 * ((100vw - 750px) / 1170)),
      56px
    );
  }
}

@media (max-width: 750px) {
  :root {
    --footer-bottom: clamp(20px, 4.667vw, 35px);
  }

  .about__obj-line {
    width: 0.75px;
  }

  .about__obj-line--left {
    left: var(--gutter-sp);
        top: calc(1191 * 100vw / 750);
    bottom: auto;
    z-index: 10;
  }

  .about__obj-line--right {
    right: var(--gutter-sp);
    top: calc(1835 * 100vw / 750);
  }

  .contact-end .contact__send {
    margin-top: clamp(40px, 10.667vw, 80px);
  }
}

@media (max-width: 600px) {
  :root {
    /* 600px 付近からさらに縮小（600px → 約12px） */
    --header-link-size: clamp(11px, 2vw, 14px);
  }
}

/* Scroll indicator — Works SP（750px以下）は非表示 */
@media (max-width: 750px) {
  .scroll-indicator--works {
    display: none;
  }

  .works--preview {
    --works-section-gutter: var(--gutter-sp);
    --works-solid-height: 48px;
    --works-tail-height: calc(min(100vw - (var(--works-section-gutter) * 2), 1428px) * 2 / 3 + var(--works-solid-height));
    padding-left: var(--gutter-sp);
    padding-right: var(--gutter-sp);
  }

  .works__preview {
    padding-bottom: var(--works-solid-height);
  }

  .works--preview .works__more {
    padding-bottom: var(--works-solid-height);
  }

  .works--preview .works__more-link {
    bottom: 12px;
  }

  .about__photo-img {
    aspect-ratio: 750 / 313;
    max-height: none;
  }

  .about__photo-obj {
    width: min(200px, 50vw) !important;
  }

  .about__tagline {
    max-width: 100%;
    font-size: clamp(10px, 2.8vw, 16px);
    white-space: normal;
  }
}

/* アクセシビリティ — アニメーション低減 */
@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track {
    animation: none;
  }

  .fv__soundline {
    opacity: 0.95;
    filter: none;
    transform: translate(-50%, -50%) rotate(0deg) scale(var(--soundline-scale));
    animation: none;
  }
}