@font-face{
  font-family:"Swis721 BlkEx";
  src:url("../font/swis721-blkex.woff2") format("woff2");
  font-weight:400 900;
  font-display:swap;
}

:root{
  /* ヒーロー用ダーク */
  --ink:#141210;
  --hero-cream:#efe9dd;
  --hero-dim:#a8a094;
  --hero-copper:#c0844f;
  --hero-line:#3a352f;
  /* 明るいセクション用 */
  --cream:#efe9dd;      /* 生成り（明るい） */
  --greige:#e3ddd2;     /* グレージュ（少し濃い） */
  --sumi:#141210;       /* 墨（本文） */
  --sumi-soft:#4a453e;  /* やや淡い本文 */
  --copper:#a8702f;     /* 銅（落ち着き版） */
  --copper-dk:#8f5f24;
  --line:#d3ccbe;       /* 明るい地の罫線 */
  --font-en:"Swis721 BlkEx",sans-serif;
  --font-jp:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
  --max-w:1200px;
  --ease:cubic-bezier(.16,.68,.43,.99);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--cream);color:var(--sumi);font-family:var(--font-jp);font-weight:300;line-height:1.9;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
img,svg{display:block;}
::selection{background:var(--copper);color:#fff;}
.container{max-width:var(--max-w);margin:0 auto;padding:0 6vw;}
.section{padding:130px 0;}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px;}

/* 背景トーン */
.bg-cream{background:var(--cream);}
.bg-greige{background:var(--greige);}

/* ===== Header ===== */
.site-header{position:fixed;top:0;left:0;width:100%;z-index:100;padding:26px 0;transition:all .4s var(--ease);}
.brand .tx,.nav a{color:var(--hero-cream);}
.brand .mk{color:var(--hero-copper);}
.site-header.scrolled{background:rgba(239,233,221,.9);backdrop-filter:blur(12px);padding:14px 0;border-bottom:1px solid var(--line);}
.site-header.scrolled .brand .tx,.site-header.scrolled .nav a{color:var(--sumi);}
.site-header.scrolled .brand .mk{color:var(--copper);}
.header-inner{max-width:var(--max-w);margin:0 auto;padding:0 6vw;display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:12px;}
.brand .mk{width:34px;height:34px;flex:none;transition:color .4s;}
.brand .tx{font-family:var(--font-en);font-weight:900;font-size:1.4rem;letter-spacing:.16em;transition:color .4s;}
.nav ul{display:flex;gap:34px;list-style:none;align-items:center;}
.nav a{font-family:var(--font-en);font-weight:400;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;position:relative;padding:4px 0;transition:color .3s;}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--copper);transition:width .35s var(--ease);}
.nav a:hover::after,.nav a.active::after{width:100%;}
.site-header.scrolled .nav a:hover,.site-header.scrolled .nav a.active{color:var(--copper);}
.toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;z-index:120;}
.toggle span{width:26px;height:2px;background:var(--hero-cream);transition:all .3s var(--ease);}
.site-header.scrolled .toggle span{background:var(--sumi);}
.toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.toggle.open span:nth-child(2){opacity:0;}
.toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ===== Hero（黒のまま） ===== */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:var(--ink);color:var(--hero-cream);}
.hero-bg{position:absolute;top:50%;right:-8vw;transform:translateY(-50%);width:min(70vh,60vw);color:var(--hero-copper);opacity:.05;z-index:1;pointer-events:none;}
.hero-main{padding-left:6vw;position:relative;z-index:3;}
.hero-logo{width:clamp(64px,9vw,118px);height:auto;color:var(--hero-copper);margin-bottom:clamp(16px,2.5vw,32px);margin-left:.06em;opacity:0;transform:translateY(24px);animation:rise .9s var(--ease) .1s forwards;}
.huge{font-family:var(--font-en);font-weight:900;line-height:.82;letter-spacing:-.02em;font-size:clamp(4.2rem,20vw,17rem);color:var(--hero-cream);text-transform:uppercase;}
.huge span{display:block;overflow:hidden;}
.huge b{display:block;font-weight:inherit;transform:translateY(105%);animation:slideUp 1s var(--ease) forwards;}
.huge .l1 b{animation-delay:.25s;}
.huge .l2 b{animation-delay:.4s;}
.hero-side{position:absolute;top:50%;right:6vw;transform:translateY(-50%);text-align:right;max-width:300px;z-index:3;opacity:0;animation:fade 1s var(--ease) .8s forwards;}
.hero-side .eyebrow{font-family:var(--font-en);font-size:.74rem;letter-spacing:.32em;color:var(--hero-copper);text-transform:uppercase;margin-bottom:22px;}
.hero-side .tri{font-family:var(--font-en);font-size:.9rem;letter-spacing:.08em;color:var(--hero-cream);margin-bottom:18px;text-transform:uppercase;}
.hero-side .tri i{font-style:normal;color:var(--hero-copper);}
.hero-side p{font-size:.9rem;line-height:2.05;color:var(--hero-dim);}
.hero-index{position:absolute;left:6vw;bottom:6vh;z-index:3;font-family:var(--font-en);font-size:.72rem;letter-spacing:.25em;color:var(--hero-dim);text-transform:uppercase;opacity:0;animation:fade 1s var(--ease) 1s forwards;}
.scroll{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--font-en);font-size:.66rem;letter-spacing:.3em;color:var(--hero-dim);text-transform:uppercase;opacity:0;animation:fade 1s var(--ease) 1.2s forwards;}
.scroll .line{width:1px;height:40px;background:var(--hero-line);position:relative;overflow:hidden;}
.scroll .line::after{content:"";position:absolute;top:-40px;left:0;width:1px;height:40px;background:var(--hero-copper);animation:scrollMove 2s ease-in-out infinite;}

/* ===== Section head ===== */
.sec-head{margin-bottom:70px;}
.sec-num{font-family:var(--font-en);font-size:.78rem;letter-spacing:.3em;color:var(--copper);margin-bottom:16px;}
.sec-title{font-family:var(--font-en);font-weight:900;font-size:clamp(2.2rem,5.5vw,4rem);letter-spacing:-.01em;text-transform:uppercase;line-height:1;color:var(--sumi);}
.sec-title .jp{display:block;font-family:var(--font-jp);font-weight:500;font-size:clamp(.9rem,1.6vw,1.05rem);letter-spacing:.14em;color:var(--sumi-soft);margin-top:18px;text-transform:none;}

/* ===== About ===== */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;}
.about-lead{font-family:var(--font-jp);font-weight:400;font-size:clamp(1.15rem,2.2vw,1.6rem);line-height:2.1;color:var(--sumi);}
.about-lead .mk{color:var(--copper);}
.about-body p{font-size:1.02rem;line-height:2.1;color:var(--sumi-soft);margin-bottom:20px;letter-spacing:.02em;}

/* ===== Concept ===== */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.pillar{background:var(--greige);padding:56px 40px;transition:background .4s var(--ease);}
.pillar:hover{background:#dcd5c8;}
.pillar-no{font-family:var(--font-en);font-size:2.6rem;font-weight:900;color:var(--line);line-height:1;margin-bottom:26px;}
.pillar:hover .pillar-no{color:var(--copper);}
.pillar h3{font-family:var(--font-en);font-weight:900;font-size:1.5rem;letter-spacing:.02em;text-transform:uppercase;margin-bottom:16px;color:var(--sumi);}
.pillar p{font-size:.96rem;line-height:2.05;color:var(--sumi-soft);letter-spacing:.02em;}

/* ===== Projects ===== */
.proj-list{border-top:1px solid var(--line);}
.proj{display:grid;grid-template-columns:80px 1fr auto auto;gap:36px;align-items:center;padding:44px 10px;border-bottom:1px solid var(--line);transition:padding-left .4s var(--ease),background .4s var(--ease);position:relative;}
.proj:hover{padding-left:34px;background:var(--greige);}
.proj-no{font-family:var(--font-en);font-size:.82rem;letter-spacing:.2em;color:var(--copper);}
.proj-name{font-family:var(--font-en);font-weight:900;font-size:clamp(1.8rem,4.5vw,3rem);letter-spacing:.01em;text-transform:uppercase;color:var(--sumi);line-height:1;}
.proj-desc{font-size:.95rem;color:var(--sumi-soft);margin-top:10px;max-width:520px;line-height:1.9;letter-spacing:.02em;}
.proj-cat{font-family:var(--font-en);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sumi-soft);white-space:nowrap;}
.proj-arrow{font-family:var(--font-en);font-size:1.6rem;color:var(--copper);transition:transform .4s var(--ease);}
.proj:hover .proj-arrow{transform:translateX(8px);}

/* ===== News ===== */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.news{background:var(--greige);padding:40px 34px;transition:background .4s var(--ease);}
.news:hover{background:#dcd5c8;}
.news-meta{display:flex;align-items:center;gap:14px;margin-bottom:20px;}
.news-date{font-family:var(--font-en);font-size:.82rem;letter-spacing:.08em;color:var(--sumi-soft);}
.news-tag{font-family:var(--font-en);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--copper);border:1px solid var(--copper);padding:3px 11px;border-radius:20px;}
.news h3{font-size:1.05rem;font-weight:500;line-height:1.7;color:var(--sumi);margin-bottom:12px;}
.news p{font-size:.9rem;line-height:1.9;color:var(--sumi-soft);letter-spacing:.02em;}

/* ===== Contact ===== */
.contact{text-align:center;}
.contact-big{font-family:var(--font-en);font-weight:900;font-size:clamp(2.2rem,7vw,5.5rem);letter-spacing:-.01em;text-transform:uppercase;line-height:1;color:var(--sumi);margin-bottom:20px;}
.contact-lead{font-size:1.02rem;color:var(--sumi-soft);letter-spacing:.02em;margin-bottom:56px;}
.contact-card{max-width:620px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:6px;padding:52px 44px;text-align:center;box-shadow:0 24px 50px -30px rgba(20,18,16,.3);}
.contact-icon{width:64px;height:64px;margin:0 auto 24px;border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;color:var(--copper);}
.contact-icon svg{width:30px;height:30px;}
.contact-card h3{font-family:var(--font-jp);font-weight:700;font-size:1.35rem;letter-spacing:.06em;color:var(--sumi);margin-bottom:12px;}
.contact-card .sub{font-size:.92rem;color:var(--sumi-soft);line-height:1.9;margin-bottom:32px;}
.btn-contact{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;font-family:var(--font-jp);font-weight:700;font-size:1.05rem;letter-spacing:.08em;color:#fff;background:var(--copper);padding:20px 30px;border-radius:4px;transition:all .35s var(--ease);}
.btn-contact:hover{background:var(--copper-dk);transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(168,112,47,.6);}
.btn-contact svg{width:22px;height:22px;flex:none;}
.btn-contact .en{font-family:var(--font-en);font-weight:400;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;opacity:.75;margin-left:2px;}
.contact-alt{margin-top:26px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;font-size:.9rem;color:var(--sumi-soft);}
.contact-alt a{color:var(--copper);font-weight:500;border-bottom:1px solid transparent;transition:border-color .3s;}
.contact-alt a:hover{border-color:var(--copper);}
.contact-divider{width:1px;height:14px;background:var(--line);}

/* ===== Footer（黒） ===== */
.footer{background:var(--ink);color:var(--hero-dim);padding:70px 0 34px;}
.footer-inner{max-width:var(--max-w);margin:0 auto;padding:0 6vw;display:flex;justify-content:space-between;gap:50px;flex-wrap:wrap;}
.footer-brand .fl{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.footer-brand .fl .mk{width:38px;height:38px;color:var(--hero-copper);}
.footer-brand .fl .tx{font-family:var(--font-en);font-weight:900;font-size:1.5rem;letter-spacing:.16em;color:var(--hero-cream);}
.footer-tag{font-size:.88rem;color:var(--hero-cream);margin-bottom:18px;letter-spacing:.06em;}
.footer-addr{font-size:.84rem;color:var(--hero-dim);line-height:1.9;letter-spacing:.02em;}
.footer-nav{display:flex;gap:60px;}
.footer-nav h4{font-family:var(--font-en);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--hero-copper);margin-bottom:18px;}
.footer-nav ul{list-style:none;display:flex;flex-direction:column;gap:12px;}
.footer-nav a{font-size:.88rem;color:var(--hero-dim);transition:color .3s;}
.footer-nav a:hover{color:var(--hero-copper);}
.footer-bottom{max-width:var(--max-w);margin:54px auto 0;padding:26px 6vw 0;border-top:1px solid var(--hero-line);}
.footer-copy{font-family:var(--font-en);font-size:.74rem;letter-spacing:.1em;color:#6b655c;}

/* ===== Reveal ===== */
.js .reveal{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.js .reveal.in{opacity:1;transform:none;}

@keyframes slideUp{to{transform:translateY(0);}}
@keyframes rise{to{opacity:1;transform:translateY(0);}}
@keyframes fade{to{opacity:1;}}
@keyframes scrollMove{0%{top:-40px;}60%,100%{top:40px;}}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
  .js .reveal{opacity:1!important;transform:none!important;}
  .hero-logo,.hero-side,.hero-index,.scroll{opacity:1;transform:none;}
  .huge b{transform:none;}
}

@media(max-width:760px){
  .section{padding:90px 0;}
  .toggle{display:flex;}
  .nav{position:fixed;inset:0;background:var(--ink);display:flex;align-items:center;justify-content:center;transform:translateX(100%);transition:transform .5s var(--ease);}
  .nav.open{transform:none;}
  .nav a{color:var(--hero-cream)!important;font-size:1.3rem;}
  .nav ul{flex-direction:column;gap:28px;text-align:center;}
  .hero{flex-direction:column;justify-content:center;padding-top:16vh;}
  .hero-side{position:static;transform:none;text-align:left;padding:28px 6vw 0;max-width:none;margin-right:auto;}
  .hero-index{display:none;}
  .hero-bg{right:-24vw;opacity:.04;}
  .about-grid{grid-template-columns:1fr;gap:44px;}
  .pillars,.news-grid{grid-template-columns:1fr;}
  .proj{grid-template-columns:auto 1fr;gap:8px 20px;}
  .proj-cat{grid-column:2;}
  .proj-arrow{display:none;}
  .contact-card{padding:40px 24px;}
  .contact-alt{flex-direction:column;gap:8px;}
  .contact-divider{display:none;}
}