/* パターンE：和モダン（ロゴの「月夜の睡蓮」に合わせる）　style.css の上に重ねる */
:root {
  --ink: #1a1a22;
  --ink-soft: #565662;
  --paper: #f6f3ec;
  --paper-2: #ece6da;
  --night: #0e1120;
  --moon: #c8b27a;
  --moon-soft: #e3d4ac;
  --lotus: #c8b27a;
  --lotus-deep: #8a7444;
  --line: #d8d0bf;
}

body { letter-spacing: .05em; }

/* ロゴ画像：上にいるときは白、スクロール後は黒 */
.logo { display: block; line-height: 0; }
.logo img { height: 46px; width: auto; }
@media (max-width: 767px) { .logo img { height: 38px; } }
.logo .logo-b, .site-header.scrolled .logo .logo-w { display: none; }
.site-header.scrolled .logo .logo-b { display: block; }
.site-footer .logo { display: inline-block; }
.site-footer .logo img { height: 120px; }
.site-header.scrolled { background: rgba(246,243,236,.95); }

/* ボタン：細い線、字の間を広く */
.btn { border-radius: 0; letter-spacing: .2em; background: var(--moon); border-color: var(--moon); color: var(--night); position: relative; overflow: visible; }
.btn:hover { background: var(--moon-soft); border-color: var(--moon-soft); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn-ghost:hover { background: transparent; border-color: var(--moon); color: var(--moon-soft); }
.site-header.scrolled .btn { color: var(--night); }
/* ボタンに触れると星がきらっとする */
.btn::after {
  content: "✦"; position: absolute; right: -6px; top: -10px; font-size: 14px; color: var(--moon);
  opacity: 0; transform: scale(.3) rotate(-30deg); transition: opacity .25s, transform .35s;
  pointer-events: none;
}
.btn:hover::after { opacity: 1; transform: scale(1) rotate(0); }

/* 最初の画面：夜空に映像を沈め、月を浮かべる */
.hero { background: var(--night); }
/* 背景：3枚を斜めに切って、すき間なく横一列に並べる。
   画は拡大せず、枠の形だけを clip-path で斜めに切る */
/* --n 枚を、幅 --w ずつ横に並べる（i 番目は --i） */
.hero-bg { inset: 0; display: block; animation: none; --s: 22vh; --w: 33.34%; }
.hero-bg > span { position: absolute; top: 0; bottom: 0; overflow: hidden;
  left: calc(var(--w) * var(--i) - var(--s) / 2); width: calc(var(--w) + var(--s));
  clip-path: polygon(var(--s) 0, 100% 0, calc(100% - var(--s)) 100%, 0 100%); }
.hero-bg > span:nth-child(1) { --i: 0; left: 0; width: calc(var(--w) + var(--s) / 2); clip-path: polygon(0 0, 100% 0, calc(100% - var(--s)) 100%, 0 100%); }
.hero-bg > span:nth-child(2) { --i: 1; }
.hero-bg > span:nth-child(3) { --i: 2; width: auto; right: 0; clip-path: polygon(var(--s) 0, 100% 0, 100% 100%, 0 100%); }
.hero-bg img, .hero-bg video { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85) brightness(.72); }
/* 白っぽい画は、色が飛ばないよう少し締める */
.hero-bg > span:nth-child(1) video, .hero-bg > span:nth-child(2) video { filter: saturate(.9) brightness(.6) contrast(1.08); }
/* スマホ：細い3面にはせず、1本を全画面で見せて、終わったら次の動画にふわっと替える */
@media (max-width: 767px) {
  .hero-bg > span, .hero-bg > span:nth-child(n) {
    left: 0; right: 0; width: auto; clip-path: none;
    opacity: 0; transition: opacity 1.2s ease;
  }
  .hero-bg > span.on { opacity: 1; }
}
.hero::after { background: radial-gradient(ellipse at 50% 42%, rgba(14,17,32,.45) 0%, rgba(14,17,32,.7) 90%); }
.hero-mark { display: block; width: 92px; filter: drop-shadow(0 0 12px rgba(14,17,32,.9)); margin: 0 auto 28px; opacity: 0; animation: rise 1.6s .2s ease forwards; }
.hero .eyebrow { color: var(--moon); letter-spacing: .4em; }
@media (max-width: 767px) { .hero .eyebrow { letter-spacing: .18em; font-size: 12px; } .hero-mark { width: 72px; } }
/* 句読点の余白を詰め、字間の分だけ左に足して、行の見た目を中央にそろえる */
.hero h1 { font-weight: 500; letter-spacing: .16em; padding-left: .16em; white-space: nowrap; }
/* 「、」「。」は字の左下にしか墨がないので、右の空きを中央合わせから外す */
.hero h1 .punc { letter-spacing: 0; margin-right: -.62em; }
.hero-lead { letter-spacing: .1em; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-mark { animation: none; opacity: 1; } }

/* 看板：細い金の罫 */
.credits { background: var(--night); border-top: 1px solid rgba(200,178,122,.35); border-bottom: 1px solid rgba(200,178,122,.35); }
.credits li { border-left-color: rgba(200,178,122,.25); }
.credit-what { font-weight: 500; letter-spacing: .1em; }
@media (max-width: 767px) { .credits li { border-top-color: rgba(200,178,122,.2); } }

/* 見出し：星＋字の間を広く＋線がすっと引かれる */
.section-head .eyebrow { color: var(--lotus-deep); letter-spacing: .35em; }
.section-head .eyebrow::before { content: "✦"; display: block; font-size: 12px; letter-spacing: 0; color: var(--moon); margin-bottom: 4px; }
.section-head h2 { font-weight: 500; letter-spacing: .2em; }
.section-head h2::after {
  content: ""; display: block; width: 72px; height: 1px; margin: 22px auto 0; background: var(--moon);
  transform: scaleX(0); transition: transform 1.2s ease;
}
.section-head.in h2::after { transform: scaleX(1); }

/* 2つの入口：細い枠＋内側にもう一本 */
.field { border-radius: 0; border: 1px solid var(--line); background: #fbf9f4; position: relative; }
.field::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(200,178,122,.35); pointer-events: none; }
.field-tag { color: var(--lotus-deep); letter-spacing: .2em; }
.field h3 { font-weight: 500; letter-spacing: .1em; }

/* 強み：数字の上の月が、1→2→3で満ちていく */
.strengths-wrap { background: var(--paper-2); }
.strengths li { text-align: center; }
.strengths .num { color: var(--lotus-deep); font-size: 44px; display: inline-block; position: relative; padding-top: 34px; font-variant-numeric: lining-nums; font-feature-settings: "lnum"; }
.strengths .num::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 22px; height: 22px; margin-left: -11px;
  border-radius: 50%; border: 1px solid var(--moon);
}
.strengths li:nth-child(1) .num::before { box-shadow: inset -6px 0 0 0 var(--moon); }
.strengths li:nth-child(2) .num::before { background: linear-gradient(90deg, transparent 50%, var(--moon) 50%); }
.strengths li:nth-child(3) .num::before { background: var(--moon); box-shadow: 0 0 10px rgba(200,178,122,.6); }
.strengths h3 { font-weight: 500; letter-spacing: .1em; }

/* 実績 */
.works-title { font-weight: 500; letter-spacing: .12em; border-bottom-color: var(--line); }
.works-title::before { content: "✦ "; color: var(--moon); font-size: 12px; vertical-align: middle; }
.thumb { border-radius: 0; }
.thumb::after { background-color: rgba(14,17,32,.6); border: 1px solid var(--moon); }
.works-title small { margin-top: 4px; letter-spacing: .04em; }

/* 自社の制作：PSA を一番大きく */
.works-featured { grid-template-columns: repeat(2, 1fr); }
.works-featured .work-lead { grid-column: 1 / -1; }
.work-lead .work-name { font-size: 20px; font-family: var(--serif); font-weight: 500; letter-spacing: .06em; }
.work-lead .work-role { font-size: 13px; }
@media (max-width: 560px) { .works-featured { grid-template-columns: 1fr; } }

/* 映像を載せられない作品は、題字のカードにする */
.title-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 20px; margin-top: 40px; }
@media (max-width: 960px) { .title-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .title-cards { gap: 20px 12px; }
  .title-card { padding: 10px; }
  .tc-title { font-size: 14px; letter-spacing: .06em; }
  .tc-label { font-size: 10px; letter-spacing: .08em; }
}
.title-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: linear-gradient(135deg, #d9c48f 0%, #c8b27a 45%, #b39a5f 100%);
  color: var(--night); text-align: center; padding: 14px;
}
.title-card::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(14,17,32,.35); }
.title-card::after { display: none; }
.tc-label { font-size: 11px; letter-spacing: .15em; color: rgba(14,17,32,.7); }
.tc-title { font-family: var(--serif); font-size: clamp(16px, 1.6vw, 20px); font-weight: 700; letter-spacing: .1em; line-height: 1.45; text-wrap: balance; }
div.work { cursor: default; }

/* 代表写真 */
.about-photo { border-style: solid; overflow: hidden; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.romaji { display: block; font-family: var(--latin); font-size: 15px; letter-spacing: .25em; color: var(--lotus-deep); margin-top: 4px; }

/* 流れ：3つの力と同じ見せ方。番号の丸を金の線でつなぐ */
.flow-wrap { background: var(--paper-2); }
.flow { gap: 32px; }
.flow li { background: none; border-radius: 0; padding: 0; text-align: center; position: relative; }
/* 番号の代わりに、水面に浮かぶ睡蓮。1→4でつぼみから花ひらく（3つの力は月、こちらは睡蓮） */
.flow li::before {
  content: ""; display: block;
  width: 56px; height: 52px; margin: 0 auto 10px;
  background: var(--paper-2) center / contain no-repeat; position: relative; z-index: 1;
}
.flow li:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 44'%3E%3Cpath d='M3 37q5-2.5 10 0t10 0t10 0t10 0' fill='none' stroke='%23c8b27a' stroke-width='1'/%3E%3Cpath d='M11 41q4-2 8 0t8 0t8 0' fill='none' stroke='%23c8b27a' stroke-width='.8' opacity='.6'/%3E%3Cpath d='M24 33C18.5 27 19.5 16 24 9C28.5 16 29.5 27 24 33Z' fill='none' stroke='%23c8b27a' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.flow li:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 44'%3E%3Cpath d='M3 37q5-2.5 10 0t10 0t10 0t10 0' fill='none' stroke='%23c8b27a' stroke-width='1'/%3E%3Cpath d='M11 41q4-2 8 0t8 0t8 0' fill='none' stroke='%23c8b27a' stroke-width='.8' opacity='.6'/%3E%3Cpath d='M24 33C18.5 27 19.5 16 24 9C28.5 16 29.5 27 24 33Z' fill='none' stroke='%23c8b27a' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M24 33C17 31.5 12.5 25.5 13 19C19 21 22.5 26 24 33Z M24 33C31 31.5 35.5 25.5 35 19C29 21 25.5 26 24 33Z' fill='none' stroke='%23c8b27a' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.flow li:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 44'%3E%3Cpath d='M3 37q5-2.5 10 0t10 0t10 0t10 0' fill='none' stroke='%23c8b27a' stroke-width='1'/%3E%3Cpath d='M11 41q4-2 8 0t8 0t8 0' fill='none' stroke='%23c8b27a' stroke-width='.8' opacity='.6'/%3E%3Cpath d='M24 33C18.5 27 19.5 16 24 9C28.5 16 29.5 27 24 33Z' fill='none' stroke='%23c8b27a' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M24 33C17 31.5 12.5 25.5 13 19C19 21 22.5 26 24 33Z M24 33C31 31.5 35.5 25.5 35 19C29 21 25.5 26 24 33Z' fill='none' stroke='%23c8b27a' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M24 33C15 34 7.5 30.5 5 25.5C13 24 19.5 27 24 33Z M24 33C33 34 40.5 30.5 43 25.5C35 24 28.5 27 24 33Z' fill='none' stroke='%23c8b27a' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.flow li:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 44'%3E%3Cpath d='M3 37q5-2.5 10 0t10 0t10 0t10 0' fill='none' stroke='%23c8b27a' stroke-width='1'/%3E%3Cpath d='M11 41q4-2 8 0t8 0t8 0' fill='none' stroke='%23c8b27a' stroke-width='.8' opacity='.6'/%3E%3Cpath d='M24 33C18.5 27 19.5 16 24 9C28.5 16 29.5 27 24 33Z' fill='%23c8b27a' opacity='.35'/%3E%3Cpath d='M24 33C18.5 27 19.5 16 24 9C28.5 16 29.5 27 24 33Z' fill='none' stroke='%23c8b27a' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M24 33C17 31.5 12.5 25.5 13 19C19 21 22.5 26 24 33Z M24 33C31 31.5 35.5 25.5 35 19C29 21 25.5 26 24 33Z' fill='none' stroke='%23c8b27a' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M24 33C15 34 7.5 30.5 5 25.5C13 24 19.5 27 24 33Z M24 33C33 34 40.5 30.5 43 25.5C35 24 28.5 27 24 33Z' fill='none' stroke='%23c8b27a' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.flow h3::before {
  content: counter(step, decimal-leading-zero); display: block; margin-bottom: 4px;
  font-family: var(--latin); font-size: 15px; letter-spacing: .2em; color: var(--lotus-deep);
  font-variant-numeric: lining-nums; font-feature-settings: "lnum";
}
/* 丸をつなぐ線は、睡蓮の水面の高さに合わせる */
.flow li:not(:last-child)::after { top: 43px !important; opacity: .7; }
/* 丸と丸のあいだの線 */
.flow li:not(:last-child)::after {
  content: ""; position: absolute; top: 22px; left: calc(50% + 30px); width: calc(100% - 60px + 32px); height: 1px;
  background: var(--moon); transform-origin: left; transform: scaleX(0); transition: transform 1s ease .3s;
}
.flow.in li::after { transform: scaleX(1); }
.flow h3 { font-weight: 500; font-size: 19px; letter-spacing: .08em; line-height: 1.6; margin: 0 0 14px; }
.flow p { text-align: left; }
@media (max-width: 860px) { .flow li::after { display: none; } }

/* スクロールで、ふわっと出てくる */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in { opacity: 1; transform: none; }
/* 実績などの見出し下の線も、すっと引く */
.works-title { position: relative; border-bottom-color: transparent; }
.works-title::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--moon);
  transform-origin: left; transform: scaleX(0); transition: transform 1.2s ease;
}
.works-title.in::after { transform: scaleX(1); }
/* 看板の区切り線も上から伸びる */
.credits li { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .works-title::after, .flow li::after { transform: none; transition: none; }
}

/* 代表 */
.about-photo { border-radius: 50% 50% 0 0 / 40% 40% 0 0; border-color: var(--moon); }
.about h2 { font-weight: 500; letter-spacing: .12em; }

/* 問い合わせ */
.form input, .form select, .form textarea { border-radius: 0; background: #fbf9f4; }
.form input:focus, .form select:focus, .form textarea:focus { outline-color: var(--moon); }
.req, .form-note { color: #a2533f; }

/* フッター：大きくロゴ */
.site-footer { background: var(--night); padding: 56px 16px 40px; }
.site-footer p { color: var(--moon-soft); }