/* ═══════════════════════════════════════════
   RYOTA TANAKA — PORTFOLIO
   Layout: faithful to the original Canva site
   Motion: cursor / scroll / animation upgraded
   ═══════════════════════════════════════════ */

@font-face {
  font-family: "Canva Display";
  src: url("assets/canva-display.woff") format("woff");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #131315;
  --ink: #f5f4f1;
  --ink-dim: #a3a19a;
  --blue: #2b6bf3;          /* AI / accent blue (original) */
  --line: rgba(245, 244, 241, 0.85);
  --line-dim: rgba(245, 244, 241, 0.18);
  --font-display: "Canva Display", "Archivo Black", "Archivo", sans-serif;
  --font-body: "Archivo", sans-serif;
  --font-jp: "Noto Serif JP", serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  cursor: auto;
}

@media (hover: none), (max-width: 768px) {
  body { cursor: auto; }
  .cursor, .cursor-dot { display: none; }
}

::selection { background: var(--blue); color: #fff; }

a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  clip: rect(0 0 0 0); overflow: hidden;
}

/* ══════════ NOISE ══════════ */
.noise {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9990;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.4s steps(2) infinite;
}
@keyframes grain {
  0%, 100% { background-position: 0 0; }
  50% { background-position: 48px -32px; }
}

/* ══════════ PRELOADER ══════════ */
body:not(.loaded) { overflow: hidden; }
.preloader {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  transition: transform 1.1s cubic-bezier(0.76, 0, 0.24, 1), visibility 1.1s;
  will-change: transform;
}
.preloader.done { transform: translateY(-100%); visibility: hidden; }
.preloader.done .preloader__inner { opacity: 0; transition: opacity 0.4s; }
.preloader__inner { text-align: center; }
.preloader__jp {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  letter-spacing: 0.38em;
  margin-right: -0.38em; /* トラッキング分の光学補正 */
  display: block;
  margin-bottom: 2rem;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.5; } }
.preloader__bar {
  width: min(280px, 60vw); height: 1px;
  background: var(--line-dim);
  margin: 0 auto 1rem;
}
.preloader__fill {
  height: 100%; width: 0%;
  background: var(--ink);
  transition: width 0.3s ease;
}
.preloader__count {
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  color: var(--ink-dim);
}

/* ══════════ CURSOR ══════════
   小さな点 + 必要なときだけ現れる細いリング */
.cursor-dot {
  position: fixed; top: 0; left: 0;
  width: 4px; height: 4px;
  background: #f5f1e8;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  transition: opacity 0.25s var(--ease);
}
.cursor {
  position: fixed; top: 0; left: 0;
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid rgba(245, 241, 232, 0.72);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  mix-blend-mode: difference;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  color: #f5f1e8;
  transition: opacity 0.25s var(--ease), width 0.35s var(--ease), height 0.35s var(--ease),
              background 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.cursor.is-hover { border-color: rgba(245, 241, 232, 0.95); }
.cursor.has-text {
  width: 64px; height: 64px;
  mix-blend-mode: normal;
  background: rgba(13, 13, 15, 0.78);
  border-color: rgba(245, 241, 232, 0.34);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
}
.cursor.has-text .cursor__label { opacity: 1; transform: none; }
.cursor__label {
  opacity: 0;
  padding-left: 0.18em;
  transition: opacity 0.25s var(--ease);
}
body.cursor-blob .cursor-dot { opacity: 0; }
body.cursor-hidden .cursor,
body.cursor-hidden .cursor-dot { opacity: 0; }

/* ══════════ SCROLL PROGRESS ══════════ */
.progress {
  position: fixed; top: 0; left: 0;
  width: 0%;
  height: 2px;
  background: var(--blue);
  z-index: 9995;
}

/* ══════════ SHARED — vertical line (draws on scroll) ══════════ */
.vline {
  position: absolute;
  width: 4px;
  background: transparent;
  overflow: visible;
  --arrow-color: #fff;
}
.vline::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--arrow-color);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.6s var(--ease);
}
.vline.is-drawn::before { transform: scaleY(1); }
.vline--arrow::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--arrow-color);
  transform: translateX(-50%) scale(0);
  transition: transform 0.5s var(--ease) 1.4s;
}
.vline--arrow.is-drawn::after {
  transform: translateX(-50%) scale(1);
}
.vline__dot {
  position: absolute;
  left: 50%;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--ink);
  transform: translateX(-50%) scale(0);
  transition: transform 0.5s var(--ease);
}
.vline.is-drawn .vline__dot { transform: translateX(-50%) scale(1); }
.vline.is-drawn .vline__dot:nth-child(1) { transition-delay: 0.5s; }
.vline.is-drawn .vline__dot:nth-child(2) { transition-delay: 0.9s; }
.vline.is-drawn .vline__dot:nth-child(3) { transition-delay: 1.3s; }

/* 横ライン(矢印つき)— 描画アニメーション */
[data-draw-x] {
  display: block;
  position: relative;
  height: 4px;
  background: var(--arrow-color, #fff);
  transform: scaleX(0.001);
  transform-origin: left;
  transition: transform 1.4s var(--ease) 0.2s;
}
[data-draw-x].is-drawn { transform: scaleX(1); }
[data-draw-x]::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid var(--arrow-color, #fff);
  transform: translateY(-50%);
}
.film__arrow--left { transform-origin: right; }
.film__arrow--left::after {
  right: auto;
  left: -10px;
  border-left: none;
  border-right: 10px solid var(--arrow-color, #fff);
}

/* 巨大な縦書きセクションタイトル */
.side-title {
  position: absolute;
  top: 50%;
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  /* 画面の高さでも制限して EDUCATION が見切れないように */
  font-size: min(clamp(3rem, 7.5vw, 7rem), 11.5vh);
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.side-title--right {
  right: clamp(0.6rem, 2.5vw, 2.5rem);
  transform: translateY(-50%);
}

/* リビール(文字ブロック) */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* 控えめなポインター連動。標準カーソルは維持し、要素側だけが反応する。 */
[data-magnetic] {
  --magnetic-x: 0px;
  --magnetic-y: 0px;
  translate: var(--magnetic-x) var(--magnetic-y);
  transition: translate 0.5s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  [data-depth].reveal.is-in {
    --depth-x: 0deg;
    --depth-y: 0deg;
    --depth-lift: 0px;
    transform: perspective(1100px) rotateX(var(--depth-y)) rotateY(var(--depth-x)) translate3d(0, var(--depth-lift), 0);
    transform-style: preserve-3d;
    transition: opacity 0.9s var(--ease), transform 0.42s var(--ease), box-shadow 0.55s var(--ease);
    will-change: transform;
  }
  [data-depth].reveal.is-in:hover {
    --depth-lift: -3px;
    box-shadow: 0 32px 72px rgba(0, 0, 0, 0.52);
  }
}

/* 写真・画像はズームアウトしながら現れる */
.edu__photo img,
.design__img img,
.calendar__sheet img {
  transform: scale(1.1);
  transition: transform 1.4s var(--ease);
}
.reveal.is-in img { transform: scale(1); }
.design__img.reveal.is-in:hover img { transform: scale(1.06); }
.photo-frame.reveal.is-in:hover img { transform: scale(1.04); }

.reveal-line { overflow: hidden; }
.reveal-line > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s var(--ease);
}
.reveal-line.is-in > span { transform: translateY(0); }

/* ══════════ 01 HERO — faithful to the Canva opening ══════════ */
.hero {
  --hero-bg-x: 0px;
  --hero-bg-y: 0px;
  --hero-title-x: 0px;
  --hero-title-y: 0px;
  --hero-person-x: 0px;
  --hero-person-y: 0px;
  --hero-role-x: 0px;
  --hero-role-y: 0px;
  --hero-light-x: 50%;
  --hero-light-y: 52%;
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: #09090a;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: -8px;
  z-index: 0;
  transform: translate3d(var(--hero-bg-x), var(--hero-bg-y), 0);
  will-change: transform;
}
.hero__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.035);
  animation: heroZoom 2.2s var(--ease) forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }
.hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 7, 8, 0.1), transparent 45%, rgba(7, 7, 8, 0.05));
  pointer-events: none;
}
.hero__light {
  position: absolute;
  inset: -10%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.24;
  background: radial-gradient(
    ellipse 32% 42% at var(--hero-light-x) var(--hero-light-y),
    rgba(128, 172, 255, 0.2) 0%,
    rgba(72, 116, 205, 0.09) 34%,
    rgba(40, 64, 120, 0.025) 54%,
    transparent 72%
  );
  mix-blend-mode: screen;
  filter: blur(10px);
  transition: opacity 0.8s var(--ease);
  will-change: background-position, opacity;
}
@media (hover: hover) and (pointer: fine) {
  .hero__light { animation: heroLightBreath 7s ease-in-out infinite; }
  .hero.is-depth-active .hero__light { opacity: 0.5; }
}
@keyframes heroLightBreath {
  0%, 100% { filter: blur(10px); }
  50% { filter: blur(14px); }
}
.hero__linkedin {
  position: absolute;
  top: clamp(1.25rem, 4.1vh, 2.2rem);
  right: clamp(1.2rem, 2.7vw, 2.5rem);
  width: clamp(48px, 5.55vw, 72px);
  z-index: 4;
  transition: transform 0.4s var(--ease);
}
.hero__linkedin:hover { transform: scale(1.12) rotate(3deg); }
.hero__title {
  position: absolute;
  left: 1.48vw;
  top: 44.9%;
  transform: translate3d(var(--hero-title-x), calc(-50% + var(--hero-title-y)), 0);
  z-index: 1;
  font-family: var(--font-display);
  font-size: 11.8vw;
  font-weight: 400;
  line-height: 0.894;
  letter-spacing: -0.025em;
  color: #fff;
  will-change: transform;
}
.hero__person {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  transform: translate3d(var(--hero-person-x), var(--hero-person-y), 0);
  will-change: transform;
}
.hero__person img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.035);
  animation: heroZoom 2.2s var(--ease) forwards;
}
.hero__line { display: block; overflow: hidden; }
.hero__word { display: inline-block; }
.hero__word .char {
  display: inline-block;
  transform: translateY(115%) rotate(4deg);
  animation: charUp 1.1s var(--ease) forwards;
  animation-delay: calc(var(--i) * 0.05s + 0.15s);
}
@keyframes charUp { to { transform: translateY(0) rotate(0); } }
.hero__role {
  position: absolute;
  right: 1vw;
  top: 36.5%;
  z-index: 1;
  text-align: right;
  font-family: "Canva Display", var(--font-display);
  font-weight: 400;
  font-size: 2.62vw;
  line-height: 1.06;
  letter-spacing: 0.065em;
  color: #fff;
  transform: translate3d(var(--hero-role-x), var(--hero-role-y), 0);
  will-change: transform;
}
.hero__scroll {
  position: absolute;
  bottom: 2.2rem; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.hero__scroll span {
  display: block;
  width: 1.5px; height: 56px;
  background: linear-gradient(rgba(255,255,255,0.9), transparent);
  animation: scrollHint 2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scrollHint { 50% { transform: scaleY(0.35); } }

/* ══════════ 02 EDUCATION ══════════ */
.edu {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 30% 8% 47% 15%;
  align-items: center;
  padding: clamp(4rem, 8vw, 6rem) 0;
}
.edu__text {
  grid-column: 1;
  display: flex; flex-direction: column;
  gap: clamp(3rem, 7vh, 6rem);
  text-align: right;
  padding-left: clamp(1rem, 4vw, 4rem);
}
.edu__degree {
  font-size: clamp(0.95rem, 1.4vw, 1.25rem);
  font-weight: 700;
}
.edu__field {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  line-height: 1.25;
  margin: 0.3em 0 0.5em;
}
.edu__school {
  font-size: clamp(0.9rem, 1.3vw, 1.15rem);
  font-weight: 700;
  line-height: 1.5;
}
/* スレッド(1本の縦ライン)は全セクション共通で 33% に揃える。
   Education で生まれ、About を貫き、Work イントロの矢印で終わる */
.edu__vline {
  left: 31.69%;
  top: 16.9%;
  height: 83.6%;
}
.edu__photo {
  grid-column: 3;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.edu__photo img {
  max-width: 100%;
  max-height: 86vh;
  width: auto;
  object-fit: contain;
  will-change: transform;
}
.side-title--right { z-index: 2; }

/* ══════════ 03 ABOUT ══════════ */
.about {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 31% 4% 65%;
  align-items: center;
  padding: clamp(4rem, 9vw, 7rem) 0;
}
.about__left {
  position: relative;
  grid-column: 1;
  height: 100%;
  min-height: 70vh;
}
.about__title {
  position: absolute;
  top: 0; left: clamp(0.5rem, 3vw, 2.5rem);
  display: flex;
  gap: 0.05em;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 7vw, 6.5rem);
  line-height: 0.95;
  pointer-events: none;
}
.about__title span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.about__title span:last-child { margin-top: 2.2em; }
.about__cutout {
  position: absolute;
  bottom: 0;
  right: -4%;
  width: clamp(220px, 22vw, 390px);
  filter: drop-shadow(0 25px 50px rgba(0,0,0,0.55));
  will-change: transform;
  z-index: 1;
}
.about__vline {
  left: 31.69%;
  top: 0;
  height: 61.5%;
}
.about__flow {
  left: 22.74%;
  top: 3.5%;
  height: 105.5%;
}
.about__flow::after {
  bottom: -4px;
  width: 12px;
  height: 12px;
  border: 0;
  border-right: 4px solid var(--arrow-color);
  border-bottom: 4px solid var(--arrow-color);
  transform: translateX(-50%) rotate(45deg) scale(0);
}
.about__flow.is-drawn::after {
  transform: translateX(-50%) rotate(45deg) scale(1);
}
.about__text {
  grid-column: 3;
  padding-right: clamp(2rem, 8vw, 9rem);
  padding-left: clamp(1rem, 3vw, 3rem);
}
.about__text p {
  font-size: clamp(1rem, 1.55vw, 1.4rem);
  font-weight: 700;
  line-height: 1.75;
  text-align: justify;
  margin-bottom: 1.6em;
}
.about__text p:last-child { margin-bottom: 0; }

/* ══════════ 04 WORK INTRO ══════════ */
.workintro {
  position: relative;
  min-height: 100vh;
  padding: clamp(5rem, 10vw, 8rem) 0;
  display: flex;
  align-items: center;
}
.workintro__vline {
  left: 22.79%;
  top: 0;
  height: 98.8%;
}
.workintro__title {
  margin-left: calc(22.79% + clamp(2rem, 4vw, 4.5rem));
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 9vw, 8.5rem);
  line-height: 0.98;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.workintro__note {
  position: absolute;
  right: clamp(1.2rem, 4vw, 3.5rem);
  /* Keep the link visually anchored to the top edge of the video below. */
  bottom: clamp(0.65rem, 1vw, 0.9rem);
  line-height: 1;
  font-weight: 700;
  font-size: clamp(0.95rem, 1.4vw, 1.25rem);
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.3s;
}
.workintro__note:hover { border-color: var(--ink); }

/* ══════════ 05-07 FILMS ══════════ */
.film {
  position: relative;
  background: #000;
}
.film__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.film__overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 5.5rem);
  color: #fff;
  text-shadow: 0 4px 40px rgba(0,0,0,0.4);
  white-space: nowrap;
  pointer-events: none;
}
.film__overlay .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em) scale(0.8);
  transition: opacity 0.5s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--i) * 0.04s);
}
.film__overlay.is-in .char {
  opacity: 1;
  transform: none;
}
.film__caption {
  position: relative;
  top: auto;
  z-index: 2;
  background: transparent;
  padding: clamp(1.2rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 3rem) clamp(1rem, 2vw, 1.6rem);
  max-width: none;
}
.film__caption--left {
  left: 0;
  width: 94%;
  padding-left: 0;
}
.film__caption--right {
  right: 0;
  width: 93.4%;
  padding-right: 0;
  text-align: right;
}
.film__caption p {
  font-weight: 700;
  font-size: clamp(0.95rem, 1.5vw, 1.35rem);
  line-height: 1.5;
  margin-bottom: 0.9em;
}
.film__caption--left p {
  max-width: 64%;
  padding-left: clamp(1.5rem, 3vw, 3rem);
}
.film__caption--right p {
  max-width: 62%;
  margin-left: auto;
  padding-right: clamp(1.5rem, 3vw, 3rem);
}
.film__arrow { width: 100%; }
.film__arrow--edge {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 3;
}
.film__arrow--edge::after {
  right: 3px;
  width: 12px;
  height: 12px;
  border: 0;
  border-right: 4px solid var(--arrow-color, #fff);
  border-top: 4px solid var(--arrow-color, #fff);
  transform: translateY(-50%) rotate(45deg);
}

/* ══════════ 08 OTHER EDITING ══════════ */
.editing {
  position: relative;
  width: 100%;
  height: 85.3vw;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #000;
}
.editing__festival {
  position: absolute;
  top: 0;
  left: 0;
  width: 53vw;
  max-width: none;
  margin: 0;
}
.editing__festival p {
  font-weight: 700;
  font-size: 2.8vw;
  line-height: 1.05;
  margin-bottom: 0.65em;
  padding-left: 1.5vw;
  width: 80vw;
}
.editing__title {
  position: absolute;
  left: 1.5%;
  top: 55%;
  transform: translateY(-50%);
  display: flex;
  gap: 0.1em;
  font-family: var(--font-display);
  font-size: 7vw;
  line-height: 0.95;
  pointer-events: none;
}
.editing__title span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.editing__title span:nth-child(2) { margin-top: 1.6em; }
.editing__title span:nth-child(3) { margin-top: 3.2em; }
.editing__vline {
  left: 26.57%;
  top: 17.4%;
  height: 77.6%;
}
.editing__text {
  font-weight: 700;
  font-size: 1.8vw;
  line-height: 1.2;
}
.editing__text a {
  border-bottom: 1.5px solid var(--line-dim);
  transition: 0.3s;
}
.editing__text a:hover { color: var(--blue); border-color: var(--blue); }
.editing__text--one {
  position: absolute;
  left: 30.5%;
  right: auto;
  top: 67.5%;
  width: 17.5%;
  text-align: right;
}
.editing__video {
  position: absolute;
  background: #000;
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
}
.editing__video video { width: 100%; aspect-ratio: 16/9; }
.editing__video--one {
  left: 50.75%;
  top: 64.8%;
  width: 48%;
}
.editing__text--two {
  position: absolute;
  right: 5%;
  top: 29.5%;
  width: 18.3%;
}
.editing__video--two {
  left: 27.6%;
  top: 27%;
  width: 48%;
}

/* ══════════ 09 GRAPHIC DESIGN ══════════ */
.design {
  position: relative;
  min-height: 128vh;
  padding: clamp(3rem, 6vw, 5rem) clamp(1.2rem, 4vw, 3.5rem) clamp(5rem, 9vw, 8rem);
  background: #000;
}
.design__title {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 9vw, 8.5rem);
  line-height: 0.95;
  display: flex;
  flex-direction: column;
}
.design__rule {
  width: calc(100% + clamp(1.2rem, 4vw, 3.5rem));
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2.5rem, 5vw, 4rem);
  margin-left: calc(0px - clamp(1.2rem, 4vw, 3.5rem));
}
.design__text {
  margin-left: clamp(280px, 28vw, 440px);
  max-width: min(640px, 40vw);
  font-weight: 700;
  font-size: clamp(1rem, 1.55vw, 1.4rem);
  line-height: 1.6;
}
.design__img {
  position: absolute;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0,0,0,0.45);
}
.design__img img {
  width: 100%;
  transition: transform 0.7s var(--ease);
  will-change: transform;
}
.design__img:hover img { transform: scale(1.06); }
.design__img--vape {
  left: clamp(1.2rem, 4vw, 3.5rem);
  top: 46%;
  width: clamp(200px, 19vw, 340px);
}
.design__img--campaign {
  left: 36%;
  top: 66%;
  width: clamp(180px, 16vw, 290px);
}
.design__img--cat {
  left: 58%;
  top: 60%;
  width: clamp(170px, 14vw, 260px);
  z-index: 1;
}
.design__img--dental {
  right: clamp(1.2rem, 4vw, 3.5rem);
  top: 52%;
  width: clamp(190px, 17vw, 300px);
}

/* ══════════ 10 CALENDAR ══════════ */
.calendar {
  position: relative;
  width: 100%;
  height: 55.7vw;
  min-height: 0;
  overflow: hidden;
  display: block;
  padding: 0;
}
.calendar__vline {
  left: 58.26%;
  top: 2.3%;
  height: 97.7%;
  z-index: 3;
}
.calendar__text {
  position: absolute;
  left: 0;
  top: 29.5%;
  transform: none;
  width: 22.5%;
  text-align: right;
  padding: 0 0 0 2.8vw;
  font-weight: 700;
  font-size: 1.75vw;
  line-height: 1.6;
}
.calendar__sheet {
  position: absolute;
  left: 23.1%;
  top: 1.2%;
  width: 33%;
  height: 97.4%;
  max-height: none;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 35px 80px rgba(0,0,0,0.5);
}
.calendar__sheet img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.side-title--calendar {
  position: absolute;
  left: 60.6%;
  top: 0;
  width: 39.4%;
  height: 100%;
  transform: none;
  font-size: 9.2vw;
  line-height: 1.03;
  white-space: nowrap;
}

/* ══════════ 11-12 AI ══════════ */
.ai {
  position: relative;
  height: 100vh;
  min-height: 0;
  display: grid;
  grid-template-columns: 40% 30% 30%;
  align-items: center;
  padding: clamp(4rem, 8vw, 6rem) clamp(1.2rem, 4vw, 3.5rem);
  gap: clamp(1.5rem, 3vw, 3rem);
}
.ai__head { grid-column: 1; }
.ai__title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6.2vw, 5.8rem);
  line-height: 0.98;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.ai__title-accent { color: var(--blue); }
.ai__sub {
  margin-top: 1.6em;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 3.1rem);
  line-height: 1.02;
  text-align: left;
}
.ai__video {
  background: #000;
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
  max-width: clamp(240px, 24vw, 380px);
  justify-self: center;
}
.ai__video video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}
.ai__note {
  display: block;
  padding-left: clamp(2rem, 4vw, 3.5rem);
  max-width: 340px;
}
.ai__flow,
.ai2__flow {
  position: absolute;
  left: 75.42%;
  top: -13.7%;
  height: 126.5%;
}
.ai__flow {
  top: 0;
  height: 112.8%;
}
.ai__note p {
  font-weight: 700;
  font-size: clamp(1rem, 1.45vw, 1.3rem);
  line-height: 1.65;
}

.ai2 {
  position: relative;
  height: 100vh;
  min-height: 0;
  display: grid;
  grid-template-columns: 26% 22% 26% 26%;
  align-items: center;
  padding: clamp(4rem, 8vw, 6rem) clamp(1.2rem, 4vw, 3.5rem);
}
.ai2 .ai__video { grid-row: 1; }
.ai2 .ai__video:first-child { grid-column: 1; }
.ai2__title {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  display: flex;
  gap: 0.35em;
  font-family: var(--font-display);
  font-size: min(clamp(1.1rem, 2vw, 1.9rem), 2.6vh);
  line-height: 1;
  pointer-events: none;
}
.ai2__title span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}
.ai2__title em { font-style: normal; color: var(--blue); }
.ai2 .ai__video + .ai2__title + .ai__video { grid-column: 3; }
.ai2 .ai__note--two { grid-column: 4; justify-self: center; }
.ai2__flow { top: -25%; }

/* ══════════ 13 CONTACT ══════════ */
.contact {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(4rem, 8vw, 6rem) 1.5rem;
}
.contact__vline {
  left: 75.42%;
  top: 0;
  bottom: auto;
  height: 40.8%;
  transform: none;
}
.contact__vline::after {
  bottom: -10px;
  border-left-width: 7px;
  border-right-width: 7px;
  border-top-width: 10px;
}
.contact__title {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.6rem);
  font-family: var(--font-display);
  font-size: clamp(3rem, 10vw, 9rem);
  line-height: 1;
}
.contact__word { display: inline-block; }
.contact__word span { display: inline-block; }
.contact__word .char {
  display: inline-block;
  transition: transform 0.4s var(--ease), color 0.4s;
}
.contact__word:hover .char {
  color: var(--blue);
  transform: translateY(calc(var(--r) * 1px)) rotate(calc(var(--r) * 0.6deg));
}
.contact__in {
  position: relative;
  width: clamp(52px, 8vw, 110px);
}
.contact__in img { transition: transform 0.45s var(--ease); }
.contact__in:hover img { transform: scale(1.08); }
.contact__mail {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 700;
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  border-bottom: 1.5px solid transparent;
  transition: 0.3s;
}
.contact__mail:hover { color: var(--blue); border-color: var(--blue); }

/* ══════════ CASE STUDY ENTRY ══════════ */
.case {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: clamp(5rem, 10vw, 9rem) clamp(1.2rem, 5vw, 4.5rem);
  overflow: hidden;
}
.case__vline {
  position: absolute;
  top: 0;
  left: 75.42%;
  height: 100%;
  --arrow-color: #fff;
}
.case__link {
  position: relative;
  z-index: 2;
  display: block;
  width: min(72vw, 68rem);
  text-decoration: none;
  color: inherit;
}
.case__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.case__logo {
  display: block;
  width: min(62vw, 720px);
  height: auto;
  transition: transform 0.7s var(--ease);
}
.case__link:hover .case__logo { transform: translateX(0.6rem); }
.case__desc {
  display: block;
  margin-top: clamp(1.4rem, 3vw, 2rem);
  font-weight: 400;
  font-size: clamp(0.9rem, 1.3vw, 1.05rem);
  line-height: 1.95;
  color: var(--ink-dim);
  max-width: 40em;
}
.case__stats {
  display: flex;
  gap: clamp(1.6rem, 4vw, 3.8rem);
  margin-top: clamp(1.3rem, 2.4vw, 2rem);
  list-style: none;
}
.case__stats li { min-width: 0; }
.case__stats strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.case__stats span {
  display: block;
  margin-top: 0.55rem;
  color: var(--ink-dim);
  font-size: clamp(0.55rem, 0.7vw, 0.68rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.case__cta {
  display: inline-block;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-bottom: 1.5px solid var(--line-dim);
  padding-bottom: 0.5rem;
  transition: border-color 0.4s var(--ease);
}
.case__cta em { font-style: normal; display: inline-block; transition: transform 0.5s var(--ease); }
.case__link:hover .case__cta { border-color: var(--line); }
.case__link:hover .case__cta em { transform: translateX(0.4rem); }
.case__owl {
  position: absolute;
  right: -3%;
  bottom: 3.5%;
  width: clamp(260px, 32vw, 510px);
  height: auto;
  pointer-events: none;
  z-index: 0;
  object-fit: contain;
  will-change: transform, opacity;
  transition: transform 0.9s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .case:hover .case__owl { transform: translateY(-8px) scale(1.018); }
}
@media (max-width: 0px) {
  .case { min-height: 82vh; align-items: flex-start; }
  .case__vline { display: none; }
  .case__link { width: 100%; }
  .case__logo { width: min(82vw, 520px); }
  .case__owl { width: min(50vw, 230px); right: 0; bottom: 0; opacity: 0.72; }
  .case__desc { max-width: 72%; }
  .case__stats { flex-wrap: wrap; gap: 1.2rem 2rem; max-width: 72%; }
}

/* Canvaの各アートボードは画面の高さではなく横幅に比例して縮小される。 */
@media (min-width: 0px) {
  .hero,
  .edu,
  .about,
  .workintro,
  .ai,
  .ai2,
  .contact {
    height: 55.56vw;
    min-height: 0;
  }

  .edu,
  .about,
  .workintro,
  .design,
  .ai,
  .ai2,
  .case,
  .contact {
    overflow: hidden;
  }

  .edu__text { gap: 4vw; }
  .edu__photo {
    height: calc(100% + 16vw);
    margin-block: -8vw;
    align-self: stretch;
    align-items: flex-end;
  }
  .edu__photo img {
    width: 115%;
    max-width: none;
    max-height: none;
    flex: none;
  }

  .about__left {
    height: calc(100% + 18vw);
    min-height: 0;
    margin-block: -9vw;
  }
  .about__title {
    top: 1.5vw;
    font-size: 8vw;
  }
  .about__cutout {
    right: -50%;
    width: 38vw;
  }
  .about__text p {
    font-size: 1.9vw;
    line-height: 1.6;
  }
  .about__text {
    position: relative;
    z-index: 2;
  }

  .film#hokkaido { height: 45vw; }
  .film#hokkaido .film__video {
    height: 100%;
    aspect-ratio: auto;
  }
  .film:not(#hokkaido) {
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .film:not(#hokkaido) .film__video {
    position: relative;
    left: auto;
    bottom: auto;
    height: 55.56vw;
    aspect-ratio: auto;
    flex: 0 0 auto;
  }
  .film__caption {
    width: 100%;
    padding: 3.2vw 0 3.15vw;
  }
  .film__caption--left,
  .film__caption--right {
    width: 100%;
    padding-inline: 0;
  }
  .film__caption p {
    box-sizing: border-box;
    padding-inline: 0;
    font-size: 3vw;
    line-height: 0.98;
    margin-bottom: 0.75vw;
  }
  .film__caption--left p {
    width: 94vw;
    max-width: 94vw;
    padding-left: 0.35vw;
  }
  .film__caption--right p {
    width: 93vw;
    max-width: 93vw;
    padding-right: 0.35vw;
  }
  .film__caption--left .film__arrow {
    width: 87.1%;
    --arrow-color: rgba(255, 255, 255, 0.58);
  }
  .film__caption--right .film__arrow {
    width: 85.8%;
    margin-left: auto;
    margin-right: 1.2%;
    --arrow-color: #1b1b1c;
  }

  .design {
    height: 55.7vw;
    min-height: 0;
    padding: 2.3vw 0 0;
  }
  .design__rule {
    width: 100%;
    margin: 3vw 0 3.5vw;
    margin-left: 0;
  }
  .design__text {
    margin-left: 29vw;
    max-width: 65vw;
    font-size: 1.9vw;
    line-height: 1.25;
  }
  .design__img--vape {
    left: 2.8vw;
    top: 46%;
    width: 22.7vw;
  }
  .design__img--cat {
    left: 29.1%;
    top: 60.5%;
    width: 20.2vw;
  }
  .design__img--campaign {
    left: 53.3%;
    top: 60.5%;
    width: 20.2vw;
  }
  .design__img--dental {
    right: 2.4%;
    top: 60.5%;
    width: 20.2vw;
  }

  .ai {
    grid-template-columns: 38% 28% 1fr;
  }
  .ai__head {
    position: absolute;
    left: -2.2vw;
    top: -1.4%;
    width: 39.4%;
  }
  .ai__title {
    font-size: 7.59vw;
    line-height: 1.04;
  }
  .ai__title span + span { margin-top: -0.87vw; }
  .ai__sub {
    margin-top: 0.16vw;
    font-size: 5.4vw;
    line-height: 0.965;
  }
  .ai .ai__video--one {
    position: absolute;
    left: 41.32%;
    top: 0;
    width: 31.62%;
    height: 100%;
    max-width: none;
  }
  .ai .ai__video--one video {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }
  .ai .ai__note--one { grid-column: 3; }
  .ai__note { padding-left: 6vw; }

  .case {
    height: 55.7vw;
    min-height: 0;
  }

  .contact__title,
  .contact__mail {
    position: relative;
    top: 2.7vw;
  }
}

/* ══════════ FOOTER ══════════ */
.footer {
  padding: 1.6rem clamp(1.2rem, 4vw, 3.5rem);
  border-top: 1px solid var(--line-dim);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--ink-dim);
  text-align: center;
}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width: 0px) {
  .hero { min-height: 640px; }

  .edu {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 5rem 1.2rem;
  }
  .edu__text { text-align: left; padding: 0 0 0 2.2rem; grid-column: 1; }
  .edu__vline { position: absolute; left: 0.6rem; top: 12%; height: 40%; grid-column: auto; }
  .edu__photo { grid-column: 1; }
  .side-title--right {
    position: absolute;
    font-size: 2.6rem;
    right: 0.4rem;
    opacity: 0.5;
  }

  .about { grid-template-columns: 1fr; padding: 5rem 1.2rem; gap: 2rem; }
  .about__left { min-height: 46vh; }
  .about__cutout { right: 4%; width: min(56vw, 300px); }
  .about__vline { position: absolute; left: 0.6rem; top: 8%; height: 84%; }
  .about__flow { display: none; }
  .about__text { padding: 0 0 0 2.2rem; }

  .workintro__vline { left: 1rem; }
  .workintro__title { margin-left: 3rem; }

  .film__caption { max-width: 92%; }

  .editing {
    height: auto;
    min-height: auto;
    padding: 3rem 1.2rem 5rem;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .editing__title { position: static; transform: none; order: 1; width: 100%; flex-wrap: wrap; font-size: 2.4rem; }
  .editing__title span { writing-mode: horizontal-tb; transform: none; margin: 0 !important; }
  .editing__festival { position: static; width: 100%; margin: 0; order: 0; }
  .editing__festival p { width: auto; padding-left: 0; font-size: clamp(1.15rem, 4.7vw, 1.8rem); }
  .editing__vline { display: none; }
  .editing__text--one, .editing__text--two,
  .editing__video--one, .editing__video--two {
    position: static; width: 100%; text-align: left; order: 2;
  }

  .design { min-height: auto; display: flex; flex-direction: column; gap: 1.6rem; }
  .design__text { margin-left: 0; }
  .design__img { position: static; width: 100% !important; }

  .calendar { height: auto; min-height: 100vh; display: flex; flex-direction: column; gap: 2rem; padding: 5rem 1.2rem; }
  .calendar__vline { left: auto; right: 1rem; top: 3%; height: 92%; opacity: 0.45; }
  .calendar__text { position: static; transform: none; width: auto; text-align: left; padding: 0; font-size: 1.05rem; }
  .calendar__sheet { position: static; width: 100%; height: auto; max-height: none; }
  .calendar__sheet img { height: auto; object-fit: contain; }
  .side-title--calendar { position: static; width: auto; height: auto; writing-mode: horizontal-tb; font-size: clamp(2rem, 8vw, 4rem); line-height: 0.95; white-space: normal; }

  .ai { height: auto; min-height: 100vh; grid-template-columns: 1fr; gap: 2.5rem; }
  .ai__title, .ai__sub { align-items: flex-start; text-align: left; }
  .ai__video { max-width: min(70vw, 320px); justify-self: start; }
  .ai__note { display: flex; gap: 1.6rem; align-items: center; padding-left: 0; }
  .ai__flow,
  .ai2__flow {
    position: relative;
    left: auto;
    top: auto;
    height: 180px;
    flex: 0 0 4px;
  }

  .ai2 { height: auto; min-height: 100vh; grid-template-columns: 1fr; gap: 2.5rem; }
  .ai2__title { grid-column: 1; justify-self: start; width: 100%; }
  .ai2__title span { writing-mode: horizontal-tb; transform: none; white-space: normal; }
  .ai2 .ai__video:first-child, .ai2 .ai__video + .ai2__title + .ai__video { grid-column: 1; }
  .ai2 .ai__note--two { grid-column: 1; justify-self: start; }
  .ai2 .ai__video, .ai2__title, .ai2 .ai__note--two { grid-row: auto; }

  .contact__vline { display: none; }
  .contact__title { flex-direction: column; }
}

@media (max-width: 0px) {
  .hero__title {
    top: 47%;
    left: 1.2rem;
    font-size: 18vw;
    line-height: 0.9;
  }
  .hero__role {
    top: auto;
    right: 1.2rem;
    bottom: 14%;
    max-width: 20rem;
    font-size: 4vw;
    line-height: 1.25;
  }
  .hero__linkedin {
    top: 1.3rem;
    right: 1.2rem;
    width: 44px;
  }
}

/* ══════════ FIXED-RATIO ARTBOARD ══════════
   Keep the original desktop composition at every viewport width. All key
   dimensions use vw so typography, wrapping, lines and arrows scale together. */
.preloader__jp { font-size: 4vw; margin-bottom: 2vw; }
.preloader__bar { width: 21.875vw; height: 0.08vw; margin-bottom: 1vw; }
.preloader__count { font-size: 0.9vw; }

.vline { width: 0.3125vw; }
.vline--arrow::after {
  bottom: -0.625vw;
  border-left-width: 0.47vw;
  border-right-width: 0.47vw;
  border-top-width: 0.625vw;
}
.vline__dot { width: 0.86vw; height: 0.86vw; }
[data-draw-x] { height: 0.3125vw; }
[data-draw-x]::after {
  right: -0.78vw;
  border-top-width: 0.47vw;
  border-bottom-width: 0.47vw;
  border-left-width: 0.78vw;
}
.film__arrow--left::after {
  left: -0.78vw;
  border-left: none;
  border-right-width: 0.78vw;
}

.side-title { font-size: 7.5vw; }
.side-title--right { right: 2.5vw; }

.hero__linkedin { top: 2.3vw; right: 2.7vw; width: 5.55vw; }
.hero__scroll { bottom: 2.2vw; }
.hero__scroll span { width: 0.12vw; height: 4.4vw; }

.edu { padding: 7.5vw 0; }
.edu__text { padding-left: 4vw; }
.edu__degree { font-size: 1.4vw; }
.edu__field { font-size: 2vw; }
.edu__school { font-size: 1.3vw; }

.about { padding: 9vw 0; }
.about__title { left: 3vw; }
.about__text { padding-right: 8vw; padding-left: 3vw; }

.workintro { padding: 10vw 0; }
.workintro__title {
  margin-left: calc(22.79% + 4vw);
  font-size: 9vw;
}
.workintro__note { right: 4vw; bottom: 1vw; font-size: 1.4vw; }

.film__overlay { font-size: 6vw; }

.design__title { font-size: 9vw; }

.ai { padding: 8vw 3.5vw; gap: 3vw; }
.ai__note p { font-size: 1.45vw; }
.ai2 { padding: 8vw 3.5vw; }
.ai2__title { font-size: 2vw; }

.contact { padding: 8vw 1.9vw; }
.contact__title { gap: 2vw; font-size: 10vw; }
.contact__in { width: 8vw; }
.contact__mail { margin-top: 3vw; font-size: 1.8vw; }

.case { padding: 10vw 5vw; }
.case__label { font-size: 0.9vw; margin-bottom: 3vw; }
.case__desc { margin-top: 3vw; font-size: 1.3vw; }
.case__stats { gap: 4vw; margin-top: 2.4vw; }
.case__stats strong { font-size: 2.4vw; }
.case__stats span { margin-top: 0.7vw; font-size: 0.7vw; }
.case__cta { margin-top: 3vw; font-size: 0.95vw; padding-bottom: 0.625vw; }
.case__owl { width: 32vw; }

.footer { padding: 1.6vw 4vw; font-size: 0.98vw; }

/* ══════════ REDUCED MOTION ══════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-line > span { opacity: 1; transform: none; }
  .vline::before, [data-draw-x] { transform: none; }
  .vline__dot { transform: translateX(-50%) scale(1); }
  .film__overlay .char { opacity: 1; transform: none; }
  [data-depth].reveal.is-in,
  .case__owl { transform: none !important; transition: none !important; }
  [data-magnetic] { translate: none !important; transition: none !important; }
  .hero__light { animation: none !important; opacity: 0.16; }
}