@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Montserrat:wght@500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Serif+JP:wght@500;600&display=swap");

:root {
  --ink: #1d1c1a;
  --muted: #6f6a61;
  --cream: #f5f1e8;
  --paper: #fcfaf5;
  --sand: #d6c5a7;
  --accent: #b9964c;
  --line: rgba(47, 43, 36, .16);
  --shadow: 0 28px 80px rgba(42, 37, 30, .12);
  --serif: "Noto Serif JP", "Yu Mincho", serif;
  --sans: "Noto Sans JP", sans-serif;
  --latin: "Montserrat", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: var(--sans); line-height: 1.9; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
p,dd { line-break: strict; overflow-wrap: break-word; text-wrap: pretty; word-break: auto-phrase; }
h1,h2,h3,strong { line-break: strict; text-wrap: balance; word-break: auto-phrase; }

.site-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: 10px clamp(18px,5vw,72px); border-bottom: 1px solid var(--line); background: rgba(252,250,245,.9); backdrop-filter: blur(18px); }
.agency { display: grid; line-height: 1.15; }
.agency span { font: 700 12px var(--latin); letter-spacing: .2em; }
.agency small { margin-top: 4px; color: var(--muted); font: 600 7px var(--latin); letter-spacing: .22em; }
nav { display: flex; gap: 28px; }
nav a { color: var(--muted); font: 600 9px var(--latin); letter-spacing: .14em; }

.hero { position: relative; display: grid; grid-template-columns: 1.06fr .94fr; align-items: center; gap: clamp(45px,8vw,120px); min-height: calc(100vh - 72px); padding: clamp(70px,8vw,120px) clamp(20px,7vw,110px); overflow: hidden; }
.hero::before { position: absolute; top: -42vw; right: -20vw; width: 82vw; height: 82vw; border: 1px solid rgba(73,65,51,.1); border-radius: 50%; content: ""; }
.hero-copy { position: relative; z-index: 2; min-width: 0; }
.eyebrow { margin: 0 0 20px; color: #8f733c; font: 600 9px var(--latin); letter-spacing: .2em; }
.hero-logo { width: min(590px,92%); height: auto; max-height: 245px; margin: 0 0 28px; object-fit: contain; object-position: left; }
.hero h1 { margin: 0; font-family: var(--serif); font-size: clamp(44px,6vw,78px); font-weight: 500; letter-spacing: .045em; line-height: 1.42; }
.hero-lead { max-width: 680px; margin: 24px 0 0; color: var(--muted); font-family: var(--serif); font-size: 14px; line-height: 2.1; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 31px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 10px 25px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .05em; transition: transform .2s ease; }
.button:hover { transform: translateY(-2px); }
.button.primary { background: var(--ink); color: #fff; box-shadow: 0 14px 36px rgba(29,28,26,.18); }
.button.secondary { border: 1px solid var(--line); background: rgba(255,255,255,.7); }
.button.dark { width: 100%; background: var(--ink); color: #fff; }

.hero-visual { position: relative; height: 550px; }
.frame-card { position: absolute; inset: 55px 5px 45px 35px; display: flex; flex-direction: column; justify-content: center; padding: clamp(35px,5vw,60px); border: 1px solid rgba(255,255,255,.9); background: linear-gradient(145deg,rgba(255,255,255,.82),rgba(228,219,200,.58)); box-shadow: var(--shadow); }
.frame-card::before,.frame-card::after { position: absolute; width: 54px; height: 54px; content: ""; }
.frame-card::before { top: 18px; left: 18px; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.frame-card::after { right: 18px; bottom: 18px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.frame-card span { color: #8f733c; font: 600 9px var(--latin); letter-spacing: .2em; }
.frame-card strong { margin: 18px 0; font: 500 clamp(47px,6vw,72px)/.92 "Cormorant Garamond",serif; letter-spacing: -.015em; }
.frame-card small { color: var(--muted); font: italic 500 14px "Cormorant Garamond",serif; letter-spacing: .06em; }
.frame-number { position: absolute; right: -12px; bottom: 10px; color: rgba(29,28,26,.07); font: 500 150px "Cormorant Garamond",serif; }

.film-strip { display: flex; align-items: center; justify-content: center; gap: clamp(16px,3vw,42px); min-height: 82px; padding: 18px; overflow: hidden; background: var(--ink); color: #f5f1e8; }
.film-strip span { font: 600 9px var(--latin); letter-spacing: .18em; white-space: nowrap; }
.film-strip i { width: 7px; height: 7px; flex: 0 0 auto; background: var(--accent); }

.section { width: min(1160px,calc(100% - 42px)); margin: 0 auto; padding: clamp(85px,10vw,145px) 0; }
.section-label { display: flex; align-items: center; gap: 14px; margin-bottom: 48px; color: #8f733c; font: 600 10px var(--latin); letter-spacing: .18em; }
.section-label::after { flex: 1; height: 1px; background: linear-gradient(90deg,var(--line),transparent); content: ""; }
.section-label span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; letter-spacing: 0; }
h2 { margin: 0; font-family: var(--serif); font-size: clamp(37px,5vw,63px); font-weight: 500; letter-spacing: .045em; line-height: 1.5; }
.concept-grid { display: grid; grid-template-columns: 1fr .9fr; gap: clamp(45px,8vw,120px); }
.concept-copy { padding-top: 35px; color: var(--muted); font-family: var(--serif); font-size: 14px; line-height: 2.3; }
.concept-copy p { margin: 0 0 22px; }

.expression-section { background: var(--cream); }
.expression-head { display: grid; grid-template-columns: .72fr 1.28fr; margin-bottom: 52px; }
.expression-head .eyebrow { padding-top: 15px; }
.expression-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); }
.expression-grid article { min-height: 245px; padding: 33px; background: var(--paper); }
.expression-grid article > span { color: #8f733c; font: 500 14px "Cormorant Garamond",serif; }
.expression-grid h3 { margin: 35px 0 13px; font: 600 23px var(--latin); letter-spacing: .08em; }
.expression-grid p { margin: 0; color: var(--muted); font-size: 12px; line-height: 2; }

.scene-section { background: #24221f; color: #fff; }
.scene-grid { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: clamp(50px,8vw,110px); }
.scene-card { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 420px; padding: 45px; border: 1px solid rgba(255,255,255,.18); background: radial-gradient(circle at 80% 15%,rgba(210,182,120,.18),transparent 34%); }
.scene-card span { color: #d8c39b; font: 600 9px var(--latin); letter-spacing: .18em; }
.scene-card strong { margin-top: 35px; font-family: var(--serif); font-size: clamp(36px,4.5vw,58px); font-weight: 500; line-height: 1.65; }
.scene-copy .eyebrow { color: #d8c39b; }
.scene-copy p:last-child { margin: 30px 0 0; color: rgba(255,255,255,.7); font-size: 13px; line-height: 2.15; }

.casting-grid { display: grid; grid-template-columns: 1fr .88fr; align-items: start; gap: clamp(45px,8vw,100px); }
.casting-lead { margin: 28px 0 0; color: var(--muted); font-size: 13px; line-height: 2.1; }
.casting-card { padding: clamp(28px,4vw,45px); border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.status { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; color: #8f733c; font: 600 9px var(--latin); letter-spacing: .15em; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(185,150,76,.13); }
.casting-card dl { margin: 0 0 26px; }
.casting-card dl div { display: grid; grid-template-columns: 88px 1fr; gap: 18px; padding: 17px 0; border-top: 1px solid var(--line); }
.casting-card dl div:last-child { border-bottom: 1px solid var(--line); }
.casting-card dt { color: #8f733c; font-size: 10px; font-weight: 700; }
.casting-card dd { margin: 0; font-size: 11px; }

.closing { padding: clamp(85px,10vw,140px) 20px; background: var(--cream); text-align: center; }
.closing img { width: min(530px,86%); height: auto; max-height: 240px; margin: 0 auto 25px; object-fit: contain; }
.closing p { color: var(--muted); font-family: var(--serif); font-size: 14px; }
.closing a { display: inline-block; margin-top: 22px; color: #765e30; font-size: 10px; font-weight: 700; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 28px clamp(20px,5vw,70px); border-top: 1px solid var(--line); color: var(--muted); font: 500 8px var(--latin); letter-spacing: .08em; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; text-align: center; }
  .hero-logo { margin-right: auto; margin-left: auto; object-position: center; }
  .hero-lead { margin-right: auto; margin-left: auto; }
  .hero-actions { justify-content: center; }
  .hero-visual { height: 430px; }
  .frame-card { inset: 30px 6% 30px; }
}

@media (max-width: 700px) {
  .site-header { min-height: 64px; padding: 10px 15px; }
  nav { gap: 11px; }
  nav a { font-size: 7px; letter-spacing: .08em; }
  .hero { min-height: auto; gap: 32px; padding: 62px 17px 70px; }
  .hero-logo { width: 94%; max-height: 180px; margin-bottom: 22px; }
  .hero h1 { font-size: clamp(39px,12vw,50px); }
  .hero-lead { font-size: 12px; }
  .hero-actions { display: grid; }
  .button { width: 100%; }
  .hero-visual { height: 315px; }
  .frame-card { inset: 10px 2%; padding: 30px; }
  .frame-card strong { font-size: 47px; }
  .frame-number { font-size: 100px; }
  .film-strip { justify-content: flex-start; gap: 15px; }
  .section { width: min(100% - 32px,1160px); padding: 77px 0; }
  .section-label { margin-bottom: 34px; font-size: 8px; }
  h2 { font-size: clamp(31px,9.5vw,41px); }
  .concept-grid,.expression-head,.scene-grid,.casting-grid { grid-template-columns: 1fr; gap: 28px; }
  .concept-copy { padding-top: 0; font-size: 13px; line-height: 2.05; }
  .expression-head .eyebrow { padding-top: 0; }
  .expression-grid { grid-template-columns: 1fr; }
  .expression-grid article { min-height: auto; }
  .scene-card { min-height: 300px; padding: 30px; }
  .scene-copy p:last-child { font-size: 12px; }
  .casting-card { padding: 29px 22px; }
  .casting-card dl div { grid-template-columns: 68px 1fr; gap: 12px; }
  .closing img { width: 93%; max-height: 180px; }
  footer { flex-direction: column; align-items: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { transition-duration: .01ms !important; } }