@charset "UTF-8";
/* ============================================================
   N_O architects | N_O設計事務所
   style.css  v1.0
   - デザインカンプ実測値ベース（PC:1366x768 / SP:375x812）
   - BP: PC>=1024px / SP<1024px（タブレットはSPレイアウト拡張）
   - BEM: l-(layout) c-(component) p-(page/section) js- u-
   - 横方向は --u / --usp（カンプ比スケール）で追従
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --bg: #F6F4F2;
  --bg-footer: #EEECE9;
  --bg-sheet: #F4F2EF;
  --rail-rgb: 219, 212, 205;      /* #DBD4CD */
  --drawer: #DAD3CC;
  --ink: #3B3936;
  --ink-strong: #000000;
  --mut: #9C9890;
  --line: #CFCAC3;
  --line-soft: #DDD9D3;
  --white: #F4F2EF;
  --field: #FEFEFE;
  --red: #C24040;

  --font-en: "Lato", "Helvetica Neue", Arial, sans-serif;
  --font-jp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-mc: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;

  --u: clamp(0.75px, 0.073206vw, 1.12px);               /* PC: 1px(1366基準)相当の長さ */
  --usp: clamp(0.85px, 0.266667vw, 1.2267px);           /* SP: 1px(375基準)相当の長さ */

  --ease: cubic-bezier(0.22, 0.9, 0.3, 1);
  --dur: 0.62s;
  --footer-h: 418px; /* JSで実測更新 */
  --rail-w: calc(70 * var(--u));
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-jp);
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, dl, dt, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; height: auto; }
button {
  appearance: none; border: 0; background: none; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer; letter-spacing: inherit;
}
input, textarea { font: inherit; color: var(--ink); letter-spacing: 0.05em; }
::selection { background: #D9D2C9; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.u-en { font-family: var(--font-en); }
.u-visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* TOPはネイティブスクロールを停止（JSフルページ制御） */
body.p-top { overflow: hidden; height: 100dvh; }

/* ふわっと出現（パネル内の子要素／JS有効時のみ発火） */
html.js .u-f {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  transition-delay: calc(var(--d, 0s) * 0.6);
}
html.js body.is-loaded .l-panel.is-active .u-f,
html.js .u-f.is-in { opacity: 1; transform: none; }

/* ============================================================
   Layout : frame / stage / panel
   ============================================================ */
.l-frame {
  position: relative;
  transition: transform 1s var(--ease);
  will-change: transform;
}
body.is-footer .l-frame { transform: translateY(calc(-1 * var(--footer-h))); }

.l-stage { position: relative; height: 100dvh; overflow: hidden; }

.l-panel {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.l-panel.is-active {
  opacity: 1; visibility: visible;
  transition: opacity var(--dur) var(--ease), visibility 0s;
  z-index: 2;
}
.l-panel__scroll {
  height: 100%; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none;
}
.l-panel__scroll::-webkit-scrollbar { display: none; }
.l-panel__inner { position: relative; min-height: 100%; height: 100%; }

/* ============================================================
   Fixed chrome : logo / rail / burger / pager / scroll / totop
   ============================================================ */
.l-logo {
  position: fixed; z-index: 60;
  left: calc(100 * var(--u)); top: calc(90 * var(--u));
  width: calc(106 * var(--u));
}
.l-logo img { width: 100%; filter: brightness(0); transition: filter 0.7s var(--ease); }
.l-footer__brand img, .c-drawer__logo img { filter: brightness(0); }
body.is-invert .l-logo img { filter: brightness(0) invert(0.96); }

.l-rail {
  position: fixed; z-index: 50;
  top: 0; right: 0; bottom: 0;
  width: var(--rail-w);
  background: rgba(var(--rail-rgb), 0.72);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.c-burger {
  position: fixed; z-index: 85;
  top: 0; right: 0;
  width: var(--rail-w); height: calc(64 * var(--u));
  display: grid; place-items: center;
}
.c-burger__box { position: relative; width: 28px; height: 12px; }
.c-burger__line {
  position: absolute; left: 0; width: 100%; height: 1.5px;
  background: var(--ink);
  transition: transform 0.45s var(--ease), top 0.45s var(--ease);
}
.c-burger__line:nth-child(1) { top: 0; }
.c-burger__line:nth-child(2) { top: 10px; }
body.is-drawer .c-burger__line:nth-child(1) { top: 5px; transform: rotate(23deg); }
body.is-drawer .c-burger__line:nth-child(2) { top: 5px; transform: rotate(-23deg); }

.c-pager {
  position: fixed; z-index: 55;
  top: 46.5%; right: 0; width: var(--rail-w);
  text-align: center;
  font-family: var(--font-en); font-weight: 400;
  font-size: 12px; letter-spacing: 0.1em; color: var(--ink);
  pointer-events: none;
}
.c-pager__bar {
  display: block; height: 1px; width: calc(49 * var(--u));
  margin: 13px 0 13px auto; background: var(--ink);
}
.c-scrollsign {
  position: fixed; z-index: 55;
  right: 0; bottom: calc(22 * var(--u)); width: var(--rail-w);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-en); font-size: 10px; letter-spacing: 0.3em;
  color: var(--ink); pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
body.p-top .c-scrollsign { cursor: pointer; }
.c-scrollsign span { writing-mode: vertical-rl; }
.c-scrollsign i { display: block; width: 1px; height: 26px; background: var(--ink); }
body.is-footer .c-scrollsign { opacity: 0; }

.c-totop {
  position: fixed; z-index: 56;
  right: 0; bottom: calc(20 * var(--u)); width: var(--rail-w); height: 44px;
  display: grid; place-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.c-totop::before {
  content: ""; width: 11px; height: 11px;
  border-top: 1.5px solid var(--ink); border-left: 1.5px solid var(--ink);
  transform: rotate(45deg) translateY(2px);
}
body.is-footer .c-totop,
body.p-sub .c-totop { opacity: 1; pointer-events: auto; }

.c-pagename {
  position: fixed; z-index: 55;
  top: 44%; right: 0; width: var(--rail-w);
  display: flex; justify-content: center;
  font-family: var(--font-en); font-size: 12px; letter-spacing: 0.35em;
  color: var(--ink); pointer-events: none;
}
.c-pagename span { writing-mode: vertical-rl; }

/* ============================================================
   Drawer menu
   ============================================================ */
.c-drawer-bd {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 70;
  background: rgba(20, 18, 16, 0.18);
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
body.is-drawer .c-drawer-bd { opacity: 1; pointer-events: auto; }

.c-drawer {
  position: fixed; z-index: 80;
  top: 0; right: 0; bottom: 0;
  width: calc(423 * var(--u));
  background: var(--drawer);
  box-shadow: -28px 0 56px rgba(30, 26, 22, 0.10);
  transform: translateX(102%);
  transition: transform 0.6s var(--ease);
  overflow-y: auto;
}
body.is-drawer .c-drawer { transform: translateX(0); }
.c-drawer__inner {
  position: relative; min-height: 100%;
  padding: calc(180 * var(--u)) 40px calc(50 * var(--u)) calc(101 * var(--u));
  display: flex; flex-direction: column;
}
.c-drawer__nav a {
  display: block;
  font-family: var(--font-en); font-weight: 500;
  font-size: 26px; letter-spacing: 0.08em; line-height: 1;
  padding: 12px 0; color: var(--ink);
  transition: opacity 0.3s;
}
.c-drawer__nav a:hover { opacity: 0.55; }
.c-drawer__contact {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: calc(46 * var(--u));
  font-family: var(--font-en); font-weight: 700;
  font-size: 14px; letter-spacing: 0.1em;
}
.c-drawer__contact::before {
  content: ""; width: 7px; height: 7px;
  border-top: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink);
  transform: rotate(45deg);
}
.c-drawer__privacy {
  display: inline-block; margin-top: calc(30 * var(--u));
  font-family: var(--font-en); font-weight: 300;
  font-size: 14px; letter-spacing: 0.1em;
}
.c-drawer__ig {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: calc(34 * var(--u));
  font-family: var(--font-en); font-size: 12px; letter-spacing: 0.1em;
}
.c-drawer__ig img { width: 19px; }
.c-drawer__related {
  margin-top: auto; padding-top: calc(60 * var(--u));
  font-size: 12px; letter-spacing: 0.06em;
  font-family: var(--font-en);
}
.c-drawer__related a { text-decoration: underline; text-underline-offset: 3px; }
.c-drawer__related a + a { margin-left: 14px; }

/* ============================================================
   Common components
   ============================================================ */
.c-sec-ttl {
  position: absolute; z-index: 3;
  left: calc(648 * var(--u)); top: 11.46%;
  font-family: var(--font-en); font-weight: 300;
  font-size: 28px; letter-spacing: 0.05em; line-height: 1;
  color: var(--ink);
}
.c-jp-ttl {
  font-family: var(--font-mc); font-weight: 400;
  font-size: 32px; letter-spacing: 0.1em; line-height: 1.75;
  color: var(--ink);
}
.c-viewlink {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-en); font-weight: 400;
  font-size: 14px; letter-spacing: 0.08em; line-height: 1;
  color: var(--ink);
}
.c-viewlink img { width: 32px; transition: transform 0.35s var(--ease); }
#projects .c-viewlink img { width: 26px; }
.c-viewlink:hover img { transform: translateX(7px); }

.c-btn {
  display: flex; align-items: center; justify-content: center;
  width: calc(360 * var(--u)); height: calc(56 * var(--u));
  background: var(--ink-strong); color: var(--white);
  font-size: 14px; font-weight: 500; letter-spacing: 0.18em; text-indent: 0.18em;
  transition: opacity 0.3s;
}
.c-btn:hover { opacity: 0.75; }

.c-circlebtn {
  width: calc(47 * var(--u)); height: calc(47 * var(--u));
  border: 1px solid var(--ink); border-radius: 50%;
  display: grid; place-items: center;
  transition: background 0.3s, opacity 0.3s;
}
.c-circlebtn img { width: 20px; }
.c-circlebtn--prev img { transform: scaleX(-1); }
.c-circlebtn:hover { opacity: 0.55; }

/* ============================================================
   01 FV
   ============================================================ */
.p-fv__art {
  position: absolute; z-index: 1;
  top: 0; right: 0; bottom: 0; left: 0;
}
.p-fv__art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.p-fv__copy {
  position: absolute; z-index: 2;
  left: calc(870 * var(--u)); top: 29.95%;
  font-family: var(--font-mc); font-size: 28px; font-weight: 400;
  letter-spacing: 0.14em; line-height: 1.68; color: var(--ink);
}
.p-fv__name {
  position: absolute; z-index: 2;
  left: calc(870 * var(--u)); top: 47.14%;
  font-family: var(--font-en); font-weight: 400;
  font-size: 25px; letter-spacing: 0.03em; line-height: 1;
}
.p-fv__brand {
  position: absolute; z-index: 2;
  left: calc(182 * var(--u)); top: 37.76%;
  width: calc(312 * var(--u));
}
.p-fv__brand svg { width: 100%; height: auto; }
.p-fv__word {
  position: absolute; z-index: 2; top: 50.39%;
  font-family: var(--font-en); font-weight: 400;
  font-size: 17px; letter-spacing: 0.06em; line-height: 1;
  color: #AE9586;
}
.p-fv__word--1 { left: calc(162 * var(--u)); }
.p-fv__word--2 { left: calc(305 * var(--u)); }
.p-fv__word--3 { left: calc(414 * var(--u)); }
.p-fv__wordjp {
  position: absolute; z-index: 2; top: 53.91%;
  font-size: 15px; font-weight: 500; letter-spacing: 0.04em; line-height: 1;
  color: #AE9586;
}
.p-fv__wordjp--1 { left: calc(148 * var(--u)); }
.p-fv__wordjp--2 { left: calc(302 * var(--u)); }
.p-fv__wordjp--3 { left: calc(424 * var(--u)); }

/* ============================================================
   02 PHILOSOPHY
   ============================================================ */
.p-phi__photo {
  position: absolute; z-index: 0;
  left: calc(595 * var(--u)); right: 0;
  top: 23.05%; height: 59.24%;
}
.p-phi__photo img { width: 100%; height: 100%; object-fit: cover; }
.p-phi__ttl {
  position: absolute; z-index: 2;
  left: calc(100 * var(--u)); top: 35.68%;
}
.p-phi__body {
  position: absolute; z-index: 2;
  left: calc(100 * var(--u)); top: 53.26%;
  width: calc(470 * var(--u));
  font-size: 14px; line-height: 2.26; letter-spacing: 0.05em;
}

/* ============================================================
   03 PEOPLE
   ============================================================ */
.p-people__card {
  position: absolute; z-index: 2; top: 35.94%;
  display: flex; align-items: flex-start;
}
.p-people__card--1 { left: calc(111 * var(--u)); }
.p-people__card--2 { left: calc(709 * var(--u)); }
.p-people__photo {
  width: calc(258 * var(--u)); aspect-ratio: 258 / 257; flex: none;
}
.p-people__photo img { width: 100%; height: 100%; object-fit: cover; }
.p-people__txt { margin-left: calc(15 * var(--u)); padding-top: calc(66 * var(--u)); }
.p-people__name { font-size: 14px; font-weight: 500; letter-spacing: 0.12em; line-height: 1; }
.p-people__role {
  margin-top: 13px;
  font-family: var(--font-en); font-weight: 400;
  font-size: 11px; letter-spacing: 0.1em; line-height: 1; color: var(--mut);
}
.p-people__copy { margin-top: 15px; font-size: 12px; line-height: 1.84; letter-spacing: 0.06em; }
.p-people__link { margin-top: calc(26 * var(--u)); }

/* ============================================================
   04 CONSULTATION
   ============================================================ */
.p-consul__photo {
  position: absolute; z-index: 0;
  left: calc(908 * var(--u)); right: 0;
  top: 34.77%; bottom: 0;
}
.p-consul__photo img { width: 100%; height: 100%; object-fit: cover; }
.p-consul__ttl {
  position: absolute; z-index: 2;
  left: calc(100 * var(--u)); top: 35.68%;
}
.p-consul__tabs {
  position: absolute; z-index: 2;
  left: calc(100 * var(--u)); top: 55.34%;
  font-size: 0; white-space: nowrap;
}
.p-consul__tab {
  position: relative; display: inline-block;
  padding: 0 4px 17px;
  font-size: 14px; letter-spacing: 0.06em; line-height: 1;
  color: var(--ink); opacity: 0.55;
  transition: opacity 0.3s;
}
.p-consul__tab + .p-consul__tab { margin-left: calc(27 * var(--u)); }
.p-consul__tab .u-en { font-weight: 300; letter-spacing: 0.08em; margin-right: 10px; }
.p-consul__tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.p-consul__tab:hover { opacity: 0.85; }
.p-consul__tab.is-active { opacity: 1; }
.p-consul__tab.is-active::after { transform: scaleX(1); }
.p-consul__card {
  position: absolute; z-index: 2;
  left: calc(100 * var(--u)); top: 63.8%;
  width: calc(560 * var(--u)); min-height: calc(178 * var(--u));
  border: 1px solid var(--line);
  padding: calc(42 * var(--u)) calc(40 * var(--u)) calc(40 * var(--u));
}
.p-consul__cardttl { font-size: 14px; font-weight: 500; letter-spacing: 0.12em; line-height: 1; }
.p-consul__cardtxt { margin-top: calc(26 * var(--u)); font-size: 14px; line-height: 2.4; letter-spacing: 0.04em; }
.p-consul__card.is-fade .p-consul__cardttl,
.p-consul__card.is-fade .p-consul__cardtxt { opacity: 0; transform: translateY(8px); }
.p-consul__cardttl, .p-consul__cardtxt { transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }

/* ============================================================
   05 PROJECTS
   ============================================================ */
.p-prj__card {
  position: absolute; z-index: 2; top: 33.85%;
  width: calc(468 * var(--u));
}
.p-prj__card--1 { left: calc(178 * var(--u)); }
.p-prj__card--2 { left: calc(649 * var(--u)); }
.p-prj__photo { display: block; width: 100%; aspect-ratio: 468 / 310; overflow: hidden; cursor: pointer; }
.p-prj__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.p-prj__photo:hover img { transform: scale(1.04); }
.p-prj__meta { padding-left: calc(25 * var(--u)); }
.p-prj__num {
  margin-top: calc(28 * var(--u));
  font-family: var(--font-en); font-weight: 300;
  font-size: 14px; letter-spacing: 0.04em; line-height: 1;
}
.p-prj__name {
  margin-top: 14px;
  font-family: var(--font-en); font-weight: 400;
  font-size: 16px; letter-spacing: 0.05em; line-height: 1;
}
.p-prj__foot {
  margin-top: 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.p-prj__date {
  font-family: var(--font-en); font-weight: 300;
  font-size: 12px; letter-spacing: 0.1em; line-height: 1; color: var(--mut);
}
.p-prj__nav { display: none; }

/* ============================================================
   06 CTA
   ============================================================ */
.p-cta { color: var(--white); }
.p-cta__bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; }
.p-cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.p-cta__bg::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(15, 14, 13, 0.34);
}
.p-cta__ttl {
  position: absolute; z-index: 2;
  left: calc(100 * var(--u)); top: 51.82%;
  color: var(--white);
}
.p-cta__link {
  position: absolute; z-index: 2;
  left: calc(100 * var(--u)); top: 71.74%;
  display: inline-flex; align-items: center; gap: 20px;
  font-family: var(--font-en); font-weight: 400;
  font-size: 18px; letter-spacing: 0.05em; line-height: 1;
  color: var(--white);
}
.p-cta__link img { width: 46px; transition: transform 0.35s var(--ease); }
.p-cta__link:hover img { transform: translateX(8px); }

/* ============================================================
   Footer
   ============================================================ */
.l-footer {
  position: relative;
  height: calc(418 * var(--u));
  background: var(--bg-footer);
  color: var(--ink);
}
.l-footer__brand {
  position: absolute; left: calc(100 * var(--u)); top: calc(93 * var(--u));
  font-family: var(--font-en); font-weight: 300;
  font-size: 36px; letter-spacing: 0.06em; line-height: 1;
}
.l-footer__co {
  position: absolute; left: calc(100 * var(--u)); top: calc(142 * var(--u));
  font-size: 12px; letter-spacing: 0.1em; line-height: 1;
}
.l-footer__addr {
  position: absolute; left: calc(100 * var(--u)); top: calc(224 * var(--u));
  font-size: 13px; letter-spacing: 0.06em; line-height: 1; font-style: normal;
}
.l-footer__tel {
  position: absolute; left: calc(100 * var(--u)); top: calc(257 * var(--u));
  font-family: var(--font-en); font-weight: 300;
  font-size: 12px; letter-spacing: 0.06em; line-height: 1;
}
.l-footer__nav { position: absolute; left: calc(711 * var(--u)); top: calc(88 * var(--u)); }
.l-footer__nav a {
  display: block;
  font-family: var(--font-en); font-weight: 300;
  font-size: 22px; letter-spacing: 0.06em; line-height: 35px;
  transition: opacity 0.3s;
}
.l-footer__nav a:hover { opacity: 0.55; }
.l-footer__contact {
  position: absolute; left: calc(978 * var(--u)); top: calc(85 * var(--u));
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-en); font-weight: 700;
  font-size: 14px; letter-spacing: 0.1em; line-height: 1;
}
.l-footer__contact::before {
  content: ""; width: 6px; height: 6px;
  border-top: 1.4px solid var(--ink); border-right: 1.4px solid var(--ink);
  transform: rotate(45deg);
}
.l-footer__privacy {
  position: absolute; left: calc(1158 * var(--u)); top: calc(85 * var(--u));
  font-family: var(--font-en); font-weight: 300;
  font-size: 14px; letter-spacing: 0.1em; line-height: 1;
}
.l-footer__igtxt {
  position: absolute; left: calc(571 * var(--u)); top: calc(195 * var(--u));
  font-family: var(--font-en); font-weight: 300;
  font-size: 12px; letter-spacing: 0.08em; line-height: 1;
}
.l-footer__ig {
  position: absolute; right: calc(100 * var(--u)); top: calc(297 * var(--u));
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-en); font-size: 12px; letter-spacing: 0.1em; line-height: 1;
}
.l-footer__ig img { width: 19px; }
.l-footer__related {
  position: absolute; right: calc(91 * var(--u)); bottom: calc(46 * var(--u));
  font-family: var(--font-en); font-size: 12px; letter-spacing: 0.04em; line-height: 1;
}
.l-footer__related a { text-decoration: underline; text-underline-offset: 3px; }
.l-footer__related a + a { margin-left: 12px; }
.l-footer__copy {
  position: absolute; left: calc(100 * var(--u)); bottom: calc(46 * var(--u));
  font-family: var(--font-en); font-weight: 300;
  font-size: 10px; letter-spacing: 0.08em; line-height: 1;
}

/* ============================================================
   Sub pages (CONTACT / THANKS / PRIVACY)
   ============================================================ */
body.p-sub { background: var(--bg); }
.l-sub { position: relative; padding: calc(87 * var(--u)) 0 calc(150 * var(--u)); }
.l-sub__head { position: relative; height: 28px; }
.l-sub__head .c-sec-ttl { top: 0; }
.l-sub__inner { position: relative; width: 100%; }

/* --- form --- */
.p-form { position: relative; margin-top: calc(112 * var(--u)); }
.p-form__note {
  position: absolute; left: calc(100 * var(--u)); top: 4px;
  font-size: 12px; letter-spacing: 0.06em; line-height: 1;
}
.p-form__req { color: var(--red); font-family: var(--font-en); }
.p-form__body { margin-left: calc(405 * var(--u)); width: calc(586 * var(--u)); }
.p-form__row { margin-bottom: calc(27 * var(--u)); }
.p-form__label {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.1em; line-height: 1;
  margin-bottom: 9px;
}
.p-form__input, .p-form__textarea {
  display: block; width: 100%;
  background: var(--field); border: 1px solid transparent;
  padding: 8px 13px; min-height: calc(38 * var(--u));
  transition: border-color 0.3s;
}
.p-form__input:focus, .p-form__textarea:focus { outline: none; border-color: var(--line); }
.p-form__input.is-error, .p-form__textarea.is-error { border-color: var(--red); }
.p-form__input--s { width: calc(293 * var(--u)); }
.p-form__textarea { min-height: calc(128 * var(--u)); resize: vertical; }
.p-form__err {
  display: none; margin-top: 7px;
  font-size: 11px; color: var(--red); letter-spacing: 0.05em; line-height: 1.5;
}
.p-form__row.is-error .p-form__err { display: block; }
.p-form__agree {
  margin-top: calc(64 * var(--u));
  display: flex; justify-content: center;
}
.p-form__agreelabel {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; letter-spacing: 0.08em; cursor: pointer;
}
.p-form__check {
  appearance: none; width: 18px; height: 18px; margin: 0;
  background: var(--field); border: 1px solid var(--line);
  display: grid; place-items: center; cursor: pointer;
}
.p-form__check::before {
  content: ""; width: 9px; height: 5px;
  border-left: 1.6px solid var(--ink); border-bottom: 1.6px solid var(--ink);
  transform: rotate(-45deg) scale(0); transition: transform 0.2s;
}
.p-form__check:checked::before { transform: rotate(-45deg) translateY(-1px) scale(1); }
.p-form__agreelabel a { text-decoration: underline; text-underline-offset: 3px; }
.p-form__submit { margin: calc(48 * var(--u)) auto 0; }
.p-form__hp { position: absolute; left: -9999px; top: -9999px; }

/* --- thanks --- */
.p-thanks__body {
  margin: calc(118 * var(--u)) 0 0 calc(100 * var(--u));
  width: min(calc(1060 * var(--u)), calc(100% - 200 * var(--u)));
  font-size: 13px; line-height: 2.3; letter-spacing: 0.05em;
}
.p-thanks__btn { margin: calc(92 * var(--u)) 0 0 calc(517 * var(--u)); }

/* --- privacy --- */
.p-privacy__body {
  margin: calc(112 * var(--u)) 0 0 calc(100 * var(--u));
  width: min(calc(1098 * var(--u)), calc(100% - 200 * var(--u)));
}
.p-privacy__lead { font-size: 13px; line-height: 2.2; letter-spacing: 0.04em; }
.p-privacy__intro { font-size: 14px; font-weight: 500; letter-spacing: 0.1em; margin-bottom: 26px; }
.p-privacy__sec { margin-top: calc(56 * var(--u)); }
.p-privacy__sec h2 {
  font-size: 14px; font-weight: 500; letter-spacing: 0.1em; line-height: 1.6;
}
.p-privacy__rule {
  position: relative; height: 1px; background: var(--line-soft);
  margin: 14px 0 22px;
}
.p-privacy__rule::before {
  content: ""; position: absolute; left: 0; top: -2px;
  width: 5px; height: 5px; background: var(--ink);
}
.p-privacy__sec p, .p-privacy__sec li { font-size: 13px; line-height: 2.2; letter-spacing: 0.04em; }
.p-privacy__sec ul li { padding-left: 1.2em; text-indent: -1.2em; }
.p-privacy__sec ul li::before { content: "・"; }
.p-privacy__office { margin-top: calc(64 * var(--u)); font-size: 13px; line-height: 2.2; }

/* ============================================================
   Modal
   ============================================================ */
.c-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 90; visibility: hidden; }
.c-modal.is-open { visibility: visible; }
.c-modal__bd {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(18, 16, 14, 0.5);
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.c-modal.is-open .c-modal__bd { opacity: 1; }
.c-modal__sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  top: calc(76 * var(--u));
  background: var(--bg-sheet);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(4%); opacity: 0;
  transition: transform 0.65s var(--ease), opacity 0.65s var(--ease);
}
.c-modal.is-open .c-modal__sheet { transform: translateY(0); opacity: 1; }
.c-modal__close {
  position: absolute; right: calc(34 * var(--u)); top: calc(33 * var(--u));
  font-family: var(--font-en); font-weight: 400;
  font-size: 15px; letter-spacing: 0.12em; line-height: 1;
  transition: opacity 0.3s;
}
.c-modal__close:hover { opacity: 0.55; }
.c-modal__inner { position: relative; min-height: 100%; padding-bottom: calc(110 * var(--u)); display: flow-root; }

/* people modal */
.p-mdpeople__l {
  margin: calc(105 * var(--u)) 0 0 calc(100 * var(--u));
  width: calc(300 * var(--u));
}
.p-mdpeople__photo { width: 100%; aspect-ratio: 300 / 297; }
.p-mdpeople__photo img { width: 100%; height: 100%; object-fit: cover; }
.p-mdpeople__namebox { margin: calc(34 * var(--u)) 0 0 calc(27 * var(--u)); }
.p-mdpeople__name { font-size: 19px; font-weight: 500; letter-spacing: 0.02em; line-height: 1; }
.p-mdpeople__role { margin-top: 21px; font-family: var(--font-en); font-weight: 400;
  font-size: 13px; letter-spacing: 0.1em; line-height: 1; color: var(--mut);
}
.p-mdpeople__copy { margin: calc(45 * var(--u)) 0 0 calc(27 * var(--u)); font-size: 12px; line-height: 1.83; letter-spacing: 0.06em; }
.p-mdpeople__r {
  position: absolute; top: calc(112 * var(--u));
  left: calc(572 * var(--u)); width: calc(660 * var(--u));
}
.p-mdpeople__dl dt { font-size: 13px; font-weight: 500; letter-spacing: 0.12em; line-height: 1; }
.p-mdpeople__dl dd { margin: 14px 0 0; font-size: 13px; line-height: 2.3; letter-spacing: 0.04em; }
.p-mdpeople__dl dd + dt { margin-top: calc(38 * var(--u)); }

/* projects modal */
.p-mdprj__l {
  margin: calc(78 * var(--u)) 0 0 calc(100 * var(--u));
  width: calc(600 * var(--u));
}
.p-mdprj__num { font-family: var(--font-en); font-weight: 300; font-size: 14px; letter-spacing: 0.04em; line-height: 1; }
.p-mdprj__ttl { margin-top: 19px; font-family: var(--font-en); font-weight: 400; font-size: 30px; letter-spacing: 0.05em; line-height: 1; }
.p-mdprj__date { margin-top: 24px; font-family: var(--font-en); font-weight: 300; font-size: 11px; letter-spacing: 0.06em; line-height: 1; color: var(--mut); }
.p-mdprj__about { margin-top: calc(42 * var(--u)); width: calc(566 * var(--u)); font-size: 13px; line-height: 2.3; letter-spacing: 0.04em; }
.p-mdprj__datattl { margin-top: calc(62 * var(--u)); font-family: var(--font-en); font-weight: 300; font-size: 16px; letter-spacing: 0.06em; line-height: 1; }
.p-mdprj__table { margin-top: calc(26 * var(--u)); margin-left: calc(100 * var(--u)); width: calc(600 * var(--u)); }
.p-mdprj__tr {
  display: grid;
  grid-template-columns: calc(127 * var(--u)) calc(127 * var(--u)) calc(51 * var(--u)) calc(127 * var(--u)) 1fr;
  align-items: center; min-height: calc(51 * var(--u));
  border-bottom: 1px solid var(--line-soft);
}
.p-mdprj__tr:first-child { border-top: 1px solid var(--line-soft); }
.p-mdprj__th { font-family: var(--font-en); font-weight: 300; font-size: 14px; letter-spacing: 0.1em; color: var(--mut); }
.p-mdprj__td { font-family: var(--font-en); font-weight: 400; font-size: 14px; letter-spacing: 0.08em; }
.p-mdprj__r {
  position: absolute; top: calc(72 * var(--u));
  left: calc(747 * var(--u)); width: calc(519 * var(--u));
}
.p-mdprj__fig { position: relative; width: 100%; aspect-ratio: 519 / 346; overflow: hidden; }
.p-mdprj__fig picture {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; transition: opacity 0.7s var(--ease);
}
.p-mdprj__fig picture.is-show { opacity: 1; }
.p-mdprj__fig img { width: 100%; height: 100%; object-fit: cover; }
.p-mdprj__cap { margin-top: calc(43 * var(--u)); width: calc(430 * var(--u)); }
.p-mdprj__capttl { font-family: var(--font-en); font-weight: 400; font-size: 13px; letter-spacing: 0.06em; line-height: 1; }
.p-mdprj__captxt { margin-top: calc(26 * var(--u)); font-size: 13px; line-height: 2.3; letter-spacing: 0.03em; }
.p-mdprj__cap.is-fade .p-mdprj__capttl, .p-mdprj__cap.is-fade .p-mdprj__captxt { opacity: 0; }
.p-mdprj__capttl, .p-mdprj__captxt { transition: opacity 0.45s var(--ease); }
.p-mdprj__nav {
  position: absolute; left: calc(423 * var(--u)); top: calc(370 * var(--u));
  display: flex; gap: 18px;
}

/* ============================================================
   SP (<1024px)  ※タブレットはSPレイアウトを拡張
   ============================================================ */
@media (max-width: 1023px) {
  /* 画面の高さに合わせて文字・図版を縮小する単位（1 = デザイン基準812px時） */
  :root { --fs: min(1px, 0.12315vh); }
  @supports (height: 100dvh) {
    :root { --fs: min(1px, 0.12315dvh); }
  }

  :root { --rail-w: calc(43 * var(--usp)); --footer-h: 100dvh; }
  body { font-size: 12px; }

  .l-logo { left: calc(30 * var(--usp)); top: calc(44 * var(--usp)); width: calc(78 * var(--usp)); }

  .c-burger { height: calc(58 * var(--usp)); }
  .c-burger__box { width: 24px; }
  .c-pager { top: 46.8%; font-size: calc(11 * var(--fs)); }
  .c-pager__bar { width: calc(30 * var(--usp)); margin: 11px 0 11px auto; }
  .c-scrollsign { bottom: calc(18 * var(--usp)); font-size: calc(9 * var(--fs)); }
  .c-scrollsign i { height: 22px; }
  .c-totop { bottom: calc(16 * var(--usp)); }
  .c-pagename { font-size: 11px; }

  .c-drawer { width: 100%; box-shadow: none; }
  .c-drawer__inner { padding: calc(150 * var(--usp)) 30px calc(34 * var(--usp)) calc(30 * var(--usp)); }
  .c-drawer__logo { position: absolute; left: calc(30 * var(--usp)); top: calc(44 * var(--usp)); width: calc(78 * var(--usp)); }
  .c-drawer__nav a { font-size: 26px; padding: 11px 0; }

  .c-sec-ttl { left: auto; right: calc(48 * var(--usp)); top: 10.71%; font-size: calc(20 * var(--fs)); font-weight: 400; letter-spacing: 0.12em; }
  .c-jp-ttl { font-size: calc(24 * var(--fs)); line-height: 1.75; }
  .c-btn { width: 100%; height: 52px; }
  .c-circlebtn { width: calc(46 * var(--usp)); height: calc(46 * var(--usp)); }

  /* FV */
  .p-fv__copy { left: calc(30 * var(--usp)); top: 21.18%; font-size: calc(28 * var(--fs)); line-height: 1.68; }
  .p-fv__name { left: calc(30 * var(--usp)); top: 43.23%; font-size: calc(25 * var(--fs)); }
  .p-fv__brand { left: calc(50 * var(--usp)); top: 79.56%; width: calc(261 * var(--fs)); }
  .p-fv__word { top: 90.89%; font-size: calc(13 * var(--fs)); }
  .p-fv__word--1 { left: calc(35 * var(--usp)); }
  .p-fv__word--2 { left: calc(153 * var(--usp)); }
  .p-fv__word--3 { left: calc(244 * var(--usp)); }
  .p-fv__wordjp { top: 93.72%; font-size: calc(11 * var(--fs)); }
  .p-fv__wordjp--1 { left: calc(23 * var(--usp)); }
  .p-fv__wordjp--2 { left: calc(151 * var(--usp)); }
  .p-fv__wordjp--3 { left: calc(253 * var(--usp)); }

  /* PHILOSOPHY */
  .p-phi__photo { left: calc(30 * var(--usp)); right: 0; top: 18.97%; height: 29.31%; }
  .p-phi__ttl { left: calc(30 * var(--usp)); top: 54.68%; line-height: 1.667; }
  .p-phi__body { left: calc(30 * var(--usp)); top: 72.91%; width: calc(302 * var(--usp)); font-size: calc(12 * var(--fs)); line-height: 1.85; }

  /* PEOPLE */
  .p-people__card { display: block; }
  .p-people__card--1, .p-people__card--2 {
    left: 0; top: 0; width: 100%; height: 100%;
    pointer-events: none; /* 透明な重なりがタップを奪うのを防ぐ */
  }
  .p-people__card > * { pointer-events: auto; }
  .p-people__photo { position: absolute; left: calc(30 * var(--usp)); width: calc(160 * var(--fs)); aspect-ratio: 1 / 1; overflow: hidden; }
  .p-people__card--1 .p-people__photo { top: 19.09%; }
  .p-people__card--2 .p-people__photo { top: 56.77%; }
  .p-people__txt { margin: 0; padding: 0; position: static; }
  .p-people__namebox { position: absolute; left: calc(214 * var(--usp)); }
  .p-people__card--1 .p-people__namebox { top: 27.09%; }
  .p-people__card--2 .p-people__namebox { top: 64.78%; }
  .p-people__copy { position: absolute; left: calc(30 * var(--usp)); margin: 0; font-size: calc(12 * var(--fs)); line-height: 1.84; }
  .p-people__card--1 .p-people__copy { top: 42.36%; }
  .p-people__card--2 .p-people__copy { top: 80.05%; }
  .p-people__link { position: absolute; left: calc(30 * var(--usp)); margin: 0; }
  .p-people__card--1 .p-people__link { top: 50.12%; }
  .p-people__card--2 .p-people__link { top: 87.81%; }

  /* CONSULTATION */
  .p-consul__photo { left: 0; right: 0; top: 18.97%; bottom: auto; height: 26.48%; }
  .p-consul__ttl { left: calc(30 * var(--usp)); top: 52.71%; }
  .p-consul__tabs {
    left: 0; right: var(--rail-w); top: 69.21%;
    overflow-x: auto; padding: 0 calc(30 * var(--usp)) 2px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .p-consul__tabs::-webkit-scrollbar { display: none; }
  .p-consul__tab { flex: none; font-size: calc(13 * var(--fs)); padding-bottom: 14px; }
  .p-consul__tab + .p-consul__tab { margin-left: calc(26 * var(--usp)); }
  .p-consul__card {
    left: calc(30 * var(--usp)); right: calc(51 * var(--usp)); top: 77.59%;
    width: auto; min-height: 0;
    padding: calc(34 * var(--fs)) calc(28 * var(--usp)) calc(32 * var(--fs));
  }
  .p-consul__cardttl { font-size: calc(13 * var(--fs)); }
  .p-consul__cardtxt { margin-top: calc(18 * var(--fs)); font-size: calc(12 * var(--fs)); line-height: 2.05; }

  /* PROJECTS (slider) */
  .p-prj__card { top: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 0.6s var(--ease), visibility 0s 0.6s; }
  .p-prj__card.is-show { opacity: 1; visibility: visible; transition: opacity 0.6s var(--ease); }
  .p-prj__card--1, .p-prj__card--2 { left: 0; }
  .p-prj__photo { position: absolute; left: 0; right: 0; top: 18.97%; width: auto; aspect-ratio: auto; height: 30.79%; }
  .p-prj__meta { position: absolute; left: calc(54 * var(--usp)); top: 55.3%; padding: 0; }
  .p-prj__num { margin-top: 0; }
  .p-prj__foot { display: block; margin-top: calc(13 * var(--fs)); }
  .p-prj__viewmore { position: absolute; left: calc(54 * var(--usp)); top: 69.33%; }
  .p-prj__nav {
    display: flex; gap: 18px;
    position: absolute; left: 50%; transform: translateX(-52%);
    top: 75.4%; z-index: 3;
  }

  /* CTA */
  .p-cta__ttl { left: calc(30 * var(--usp)); top: 50.62%; }
  .p-cta__link { left: calc(30 * var(--usp)); top: 66.5%; font-size: calc(16 * var(--fs)); gap: 16px; }

  /* Footer */
  .l-footer { height: auto; min-height: 100dvh; padding: calc(117 * var(--usp)) calc(30 * var(--usp)) calc(30 * var(--usp)); }
  .l-footer__brand, .l-footer__co, .l-footer__addr, .l-footer__tel,
  .l-footer__nav, .l-footer__contact, .l-footer__privacy,
  .l-footer__ig, .l-footer__related, .l-footer__copy { position: static; }
  .l-footer__brand { font-size: 32px; }
  .l-footer__co { margin-top: 13px; }
  .l-footer__addr { margin-top: 44px; }
  .l-footer__tel { margin-top: 19px; }
  .l-footer__nav { margin-top: 44px; }
  .l-footer__nav a { font-size: 24px; line-height: 41px; }
  .l-footer__contact { margin-top: 28px; }
  .l-footer__privacy { display: inline-block; margin-top: 46px; }
  .l-footer__ig { margin-top: 46px; }
  .l-footer__related { margin-top: 34px; }
  .l-footer__copy { margin-top: 30px; }
  .l-footer > * { display: block; }
  .l-footer__contact, .l-footer__privacy, .l-footer__ig {
    display: flex; width: -webkit-max-content; width: max-content;
  }
  .l-footer__nav a { display: block; }

  /* Sub pages */
  .l-sub { padding: calc(167 * var(--usp)) 0 calc(110 * var(--usp)); }
  .l-sub__head { height: 20px; }
  .l-sub__head .c-sec-ttl { left: calc(30 * var(--usp)); right: auto; top: 0; font-size: calc(18 * var(--fs)); }
  .p-form { margin-top: calc(64 * var(--usp)); }
  .p-form__note { position: static; margin: 0 calc(30 * var(--usp)) 30px; }
  .p-form__body { margin: 0 calc(64 * var(--usp)) 0 calc(30 * var(--usp)); width: auto; }
  .p-form__row { margin-bottom: 26px; }
  .p-form__input--s { width: 100%; }
  .p-form__input, .p-form__textarea { min-height: 46px; }
  .p-form__textarea { min-height: 132px; }
  .p-form__agree { margin-top: 52px; justify-content: flex-start; padding-left: calc(28 * var(--usp)); }
  .p-form__submit { margin-top: 42px; width: 100%; }
  .p-thanks__body { margin: calc(64 * var(--usp)) calc(64 * var(--usp)) 0 calc(30 * var(--usp)); width: auto; font-size: 12px; }
  .p-thanks__btn { margin: 60px calc(64 * var(--usp)) 0 calc(30 * var(--usp)); width: auto; }
  .p-privacy__body { margin: calc(60 * var(--usp)) calc(64 * var(--usp)) 0 calc(30 * var(--usp)); width: auto; }
  .p-privacy__sec p, .p-privacy__sec li, .p-privacy__lead { font-size: 12px; }

  /* Modal */
  .c-modal__sheet { top: calc(44 * var(--usp)); }
  .c-modal__close { right: calc(24 * var(--usp)); top: calc(22 * var(--usp)); font-size: 13px; }
  .c-modal__inner { padding-bottom: calc(90 * var(--usp)); }

  .p-mdpeople__l { margin: calc(66 * var(--usp)) 0 0; width: 100%; }
  .p-mdpeople__photo { aspect-ratio: 375 / 330; }
  .p-mdpeople__namebox, .p-mdpeople__copy { margin-left: calc(30 * var(--usp)); margin-right: calc(30 * var(--usp)); }
  .p-mdpeople__namebox { margin-top: 38px; }
  .p-mdpeople__copy { margin-top: 22px; }
  .p-mdpeople__r { position: static; margin: 44px calc(30 * var(--usp)) 0; width: auto; }
  .p-mdpeople__dl dd + dt { margin-top: 40px; }

  .p-mdprj__l { margin: calc(58 * var(--usp)) calc(30 * var(--usp)) 0; width: auto; }
  .p-mdprj__ttl { font-size: 22px; line-height: 1.4; }
  .p-mdprj__about { margin-top: 34px; width: auto; font-size: 12px; line-height: 2.1; }
  .p-mdprj__r { position: static; margin: 40px 0 0; width: 100%; }
  .p-mdprj__fig { aspect-ratio: 375 / 250; }
  .p-mdprj__cap { margin: 30px calc(30 * var(--usp)) 0; width: auto; }
  .p-mdprj__captxt { font-size: 12px; line-height: 2.1; }
  .p-mdprj__nav { position: static; margin: 34px calc(30 * var(--usp)) 0; justify-content: flex-start; }
  .p-mdprj__datattl { margin: 52px calc(30 * var(--usp)) 0 calc(47 * var(--usp)); }
  .p-mdprj__table { border-top: 1px solid var(--line-soft); margin: 18px calc(30 * var(--usp)) 0 calc(47 * var(--usp)); width: auto; }
  .p-mdprj__tr { grid-template-columns: calc(118 * var(--usp)) 1fr; min-height: 0; padding: 0; }
  .p-mdprj__tr > * { padding: 17px 0; }
  .p-mdprj__th { font-size: 13px; }
  .p-mdprj__td { font-size: 13px; }
}

/* ============================================================
   PC only helpers
   ============================================================ */
@media (min-width: 1024px) {
  .u-sp { display: none !important; }
}
@media (max-width: 1023px) {
  .u-pc { display: none !important; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .l-panel, .l-frame, .u-f, .c-drawer, .c-modal__sheet,
  .p-prj__photo img, .c-viewlink img, .p-cta__link img {
    transition-duration: 0.01s !important;
  }
  .u-f { transform: none; }
}