:root{
  --paper:#FCFBF8;     /* 紙白 */
  --ink:#1B1916;       /* 墨 */
  --mute:#8D8578;
  --line:#E7E2D8;
  --tan:#A9743F;       /* 革のタン(点で使う) */
  --en:"Archivo", system-ui, sans-serif;
  --jp:"Noto Sans JP", system-ui, sans-serif;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--paper); color:var(--ink); font-family:var(--jp); font-weight:400;
  line-height:1.9; letter-spacing:.02em; -webkit-font-smoothing:antialiased; font-size:14.5px;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.wrap{ max-width:1080px; margin:0 auto; padding:0 24px; }

/* topbar */
.topbar{ position:fixed; top:0; left:0; right:0; z-index:30; display:flex; align-items:center; justify-content:space-between;
  padding:20px 28px; mix-blend-mode:normal; }
.brand{ font-family:var(--en); font-weight:700; font-size:19px; letter-spacing:.16em; color:#fff; }
.topnav{ display:flex; gap:26px; align-items:center; font-family:var(--en); font-weight:600; font-size:11.5px; letter-spacing:.14em; color:#fff; }
.topnav a{ opacity:.85; }
.topnav a:hover{ opacity:1; }
.topnav__cta{ border:1px solid rgba(255,255,255,.7); padding:8px 16px; border-radius:999px; opacity:1 !important; }
.topbar.is-solid{ position:fixed; background:rgba(252,251,248,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.topbar.is-solid .brand, .topbar.is-solid .topnav{ color:var(--ink); }
.topbar.is-solid .topnav__cta{ border-color:var(--ink); }

/* FV */
.fv{ position:relative; height:100svh; min-height:560px; overflow:hidden; }
.fv__media{ margin:0; }   /* figureのデフォルト余白を消す(FV左右の変な余白の正体) */
.fv__media, .fv__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fv__media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(12,10,8,.44) 0%, rgba(12,10,8,.08) 45%, rgba(12,10,8,.12) 100%); }
.fv__text{ position:absolute; left:0; right:0; bottom:0; padding:0 28px 46px; color:#fff; }
.fv__logo{ margin:0; font-family:var(--en); font-weight:700; font-size:clamp(64px,12vw,150px);
  line-height:.92; letter-spacing:.02em; }
.fv__tag{ margin:18px 0 0; font-size:clamp(16px,2.2vw,21px); font-weight:500; letter-spacing:.14em; }
.fv__sub{ margin:10px 0 0; font-size:12px; letter-spacing:.12em; opacity:.85; }

/* section head */
.sec__en{ margin:0; font-family:var(--en); font-weight:700; font-size:clamp(30px,4.4vw,44px); letter-spacing:.06em; }
.sec__ja{ margin:6px 0 0; color:var(--mute); font-size:12px; letter-spacing:.2em; }
.sec__head{ padding:0 0 44px; }

/* WORKS(横スクロールのレール) */
.works{ padding:100px 0 40px; }
.works .sec__head{ max-width:1080px; margin:0 auto; padding:0 24px 40px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.sec__hint{ margin:0 0 6px; font-family:var(--en); font-weight:600; font-size:10.5px; letter-spacing:.22em; color:var(--mute); }
.works__rail{ display:flex; gap:44px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:0 24px 26px calc(max(24px, (100vw - 1080px) / 2 + 24px));  /* 先頭をwrapの左端に揃えて右へ流す */
  scroll-padding-left:calc(max(24px, (100vw - 1080px) / 2 + 24px));  /* スナップの止まり位置にも同じ余白(端にくっつかない) */
  -webkit-overflow-scrolling:touch; }
.works__rail::-webkit-scrollbar{ height:4px; }
.works__rail::-webkit-scrollbar-track{ background:transparent; }
.works__rail::-webkit-scrollbar-thumb{ background:var(--line); border-radius:2px; }
.work{ flex:0 0 min(520px, 80vw); scroll-snap-align:start; }
.work__media{ margin:0; aspect-ratio:3/2; overflow:hidden; }   /* 縦横バラバラの写真を横長3:2に統一クロップ */
.work__media img{ width:100%; height:100%; object-fit:cover; }
.work__media img.pos-low{ object-position:50% 74%; }  /* 04: ソファが映る位置に */
.work__body{ padding:18px 2px 0; }
.work__no{ margin:0 0 8px; font-family:var(--en); font-weight:600; font-size:12px; letter-spacing:.2em; color:var(--tan); }
.work__title{ margin:0 0 8px; font-size:20px; font-weight:700; letter-spacing:.06em; }
.work__meta{ margin:0 0 12px; font-size:11.5px; letter-spacing:.14em; color:var(--mute); }
.work__desc{ margin:0; color:#3d382f; font-size:13.5px; }

/* PHOTO BAND */
.band{ margin:40px 0 0; height:clamp(320px,52vh,560px); overflow:hidden; }
.band img{ width:100%; height:100%; object-fit:cover; }

/* ABOUT */
.about{ background:#F4F1EA; padding:100px 0; }
.about__inner{ display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:center; }
.about__media{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.about__ph{ margin:0; }
.about__ph img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
.about__ph--down{ margin-top:44px; }   /* 2枚目を少し下げて編集の段差 */
.about__ph figcaption{ margin-top:10px; font-family:var(--en); font-weight:600; font-size:10.5px;
  letter-spacing:.22em; color:var(--mute); }
.about__lead{ margin:22px 0 22px; font-size:clamp(22px,3vw,30px); font-weight:700; line-height:1.6; letter-spacing:.06em; }
.about__text{ margin:0 0 16px; max-width:36em; color:#3d382f; }

/* CONTACT */
.contact{ padding:110px 0 90px; }
.contact__inner{ display:grid; grid-template-columns:1fr 1.2fr; gap:64px; align-items:start; max-width:1000px; }
.contact__lead{ margin:22px 0 18px; font-size:clamp(22px,3vw,30px); font-weight:700; line-height:1.6; letter-spacing:.06em; }
.contact__note{ margin:0; color:#3d382f; }

.form__row{ margin:0 0 22px; }
.form__label{ display:block; font-size:12px; font-weight:700; letter-spacing:.12em; margin:0 0 8px; }
.req{ display:inline-block; margin-left:8px; font-size:10px; font-weight:700; color:#fff; background:var(--tan);
  padding:2px 7px; border-radius:3px; letter-spacing:.08em; vertical-align:1px; }
.form__input{ width:100%; border:1px solid var(--line); background:#fff; border-radius:6px;
  padding:13px 14px; font-family:var(--jp); font-size:15px; color:var(--ink); transition:border-color .15s; }
.form__input:focus{ outline:none; border-color:var(--ink); }
.form__selectwrap{ position:relative; }
.form__selectwrap::after{ content:""; position:absolute; right:16px; top:50%; width:8px; height:8px;
  border-right:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink); transform:translateY(-70%) rotate(45deg); pointer-events:none; }
.form__select{ appearance:none; -webkit-appearance:none; }
.form__textarea{ resize:vertical; min-height:130px; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.form__submit{ display:inline-flex; align-items:center; justify-content:center; width:100%;
  border:0; border-radius:999px; background:var(--ink); color:var(--paper); cursor:pointer;
  font-family:var(--jp); font-weight:700; font-size:15px; letter-spacing:.14em; padding:17px 30px;
  transition:opacity .15s, transform .12s; }
.form__submit:hover{ opacity:.88; }
.form__submit:active{ transform:scale(.985); }
.form__submit[disabled]{ opacity:.5; cursor:default; }
.form__fine{ margin:12px 0 0; text-align:center; font-size:11.5px; color:var(--mute); text-wrap:balance; }

.form__done{ border:1px solid var(--line); background:#fff; border-radius:10px; padding:34px 30px; }
.form__done-title{ margin:0 0 10px; font-weight:700; font-size:18px; letter-spacing:.08em; }
.form__done-title::before{ content:""; display:inline-block; width:10px; height:10px; border-radius:50%;
  background:var(--tan); margin-right:10px; }
.form__done-text{ margin:0; color:#3d382f; text-wrap:pretty; }
.form__demo{ margin:18px 0 0; padding-top:16px; border-top:1px solid var(--line);
  color:var(--mute); font-size:12.5px; line-height:1.8; text-wrap:pretty; }
.form__demo a{ color:var(--tan); font-weight:600; text-decoration:none; white-space:nowrap; }
.form__demo a:hover{ text-decoration:underline; }

/* footer */
.site-footer{ border-top:1px solid var(--line); padding:56px 24px 40px; text-align:center; }
.foot__brand{ margin:0 0 8px; font-family:var(--en); font-weight:700; font-size:22px; letter-spacing:.16em; }
.foot__addr{ margin:0 0 22px; font-size:11.5px; color:var(--mute); letter-spacing:.1em; }
.foot__make a{ font-size:12.5px; font-weight:700; border-bottom:1.5px solid var(--tan); padding-bottom:2px; }
.foot__cp{ margin:22px 0 0; font-size:10.5px; color:var(--mute); letter-spacing:.12em; }

[hidden]{ display:none !important; }

/* SP */
@media (max-width:760px){
  .topbar{ padding:16px 18px; }
  .topnav{ gap:16px; }
  .fv__text{ padding:0 20px 34px; }
  .works{ padding:72px 0 20px; }
  .works .sec__head{ padding:0 20px 28px; }
  .works__rail{ gap:24px; padding:0 20px 22px; scroll-padding-left:20px; }
  .work{ flex-basis:82vw; }
  .about{ padding:72px 0; }
  .about__inner{ grid-template-columns:1fr; gap:28px; }
  .contact{ padding:80px 0 64px; }
  .contact__inner{ grid-template-columns:1fr; gap:36px; }
}