/* 書体はサイトで使う文字だけに絞って同梱している（Google Fonts と同じグリフ）。
   文章を大きく足したら tools/build-fonts.sh を流して作り直すこと。 */
@font-face{font-family:'Zen Kaku Gothic New';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/zen-kaku-400.woff2) format('woff2')}
@font-face{font-family:'Zen Kaku Gothic New';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/zen-kaku-500.woff2) format('woff2')}
@font-face{font-family:'Zen Kaku Gothic New';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/zen-kaku-700.woff2) format('woff2')}
@font-face{font-family:'Zen Old Mincho';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/zen-mincho-600.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/archivo-400.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/archivo-500.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/archivo-700.woff2) format('woff2')}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/archivo-black-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-700.woff2) format('woff2')}

:root{
  --white:#FFFFFF;
  --sumi:#111010;
  --hi:#E03A3F;
  --gray:#8B8681;
  --line:#E2DFDA;
  --wrap:1280px;
  --e:cubic-bezier(.3,.1,.1,1);
  --pad:9.72%;
  --uiOut:0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--white);color:var(--sumi);
  font-family:"Zen Kaku Gothic New",system-ui,sans-serif;
  font-size:15px;line-height:2;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3{font-feature-settings:"palt";letter-spacing:.02em;word-break:auto-phrase;line-height:1.3}
.en{font-family:Archivo,sans-serif}
.black{font-family:"Archivo Black",sans-serif;font-weight:400}
.nw{white-space:nowrap}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.wrap{width:min(100% - 56px,var(--wrap));margin-inline:auto}

/* ============ splash ============ */
.splash{position:fixed;inset:0;z-index:90;overflow:hidden;contain:strict}
.splash__layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.splash__back{background:var(--white)}
/* 赤面がせり上がるにつれ、同じ位置で墨→白・葉が緋→白へ反転する */
.splash__back .splash__wm{--wmText:var(--sumi);--wmLeaf:var(--hi)}
.splash__front .splash__wm{--wmText:#fff;--wmLeaf:#fff}
.splash__front{
  background:var(--hi);
  clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);
  animation:wipeUp .62s var(--e) .06s forwards;
}
.splash__wm{width:min(46vw,420px);height:auto}
@keyframes wipeUp{
  from{clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%)}
  to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
}
.splash__wm{transition:transform .66s var(--e),opacity .5s var(--e)}
.splash.is-out .splash__wm{transform:translateY(-70px);opacity:.6}
.splash.is-out{animation:splashOut .66s var(--e) forwards}
@keyframes splashOut{to{clip-path:polygon(0 0,100% 0,100% 0,0 0)}}
.splash.is-done{display:none}
/* 本編はスプラッシュ明けに立ち上がる */
.hero__viWrap,.hero__en,.hero__jp,.hero__type{opacity:0}
/* それぞれ元の transform を保ったまま立ち上げる（none にすると中央寄せが外れる） */
body.is-ready .hero__type{animation:typeIn .9s var(--e) .02s both}
body.is-ready .hero__viWrap{animation:markIn 1.05s var(--e) .10s both}
body.is-ready .hero__en{animation:sideIn .8s var(--e) .30s both}
body.is-ready .hero__jp{animation:sideIn .8s var(--e) .38s both}
@keyframes typeIn{from{opacity:0;transform:translate(-50%,calc(-50% + 16px))}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes markIn{from{opacity:0;transform:translateY(44px) scale(.982) rotate(-1.1deg)}to{opacity:1;transform:none}}
/* 舞っている絵なので、登場後もごくゆっくり漂わせる */
.hero__mark{animation:float 9s ease-in-out 1.3s infinite alternate}
@keyframes float{from{transform:translateY(0) rotate(-.5deg)}to{transform:translateY(-15px) rotate(.5deg)}}
@keyframes sideIn{from{opacity:0;transform:translateY(calc(-50% + 14px))}to{opacity:1;transform:translateY(-50%)}}
@media(max-width:1080px){
  body.is-ready .hero__en,body.is-ready .hero__jp{animation-name:fadeUp}
  @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* ============ cursor ============ */
.cursor{position:fixed;left:0;top:0;z-index:80;pointer-events:none;display:none}
.cursor__ring{
  display:block;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:1px solid var(--hi);
  transition:width .3s var(--e),height .3s var(--e),margin .3s var(--e),background-color .3s var(--e),opacity .3s var(--e);
}
.cursor.is-hover .cursor__ring{width:58px;height:58px;margin:-29px 0 0 -29px;background:rgba(224,58,63,.14)}
@media(hover:hover) and (pointer:fine){.cursor{display:block}}

/* ============ 上端の緋の帯 ============ */
.topbar{position:fixed;inset:0 0 auto;height:5px;background:var(--hi);z-index:78}

/* ============ header ============ */
.hd{
  position:fixed;top:5px;left:0;right:0;z-index:75;height:62px;display:flex;align-items:center;
  background:var(--white);border-bottom:1px solid var(--line);
  transform:translateY(calc(var(--uiOut) * -108%));
  transition:transform .5s var(--e);
}
/* ヒーロー上にいる間は背景を持たず、差分ブレンドで下地に反応する */
.hd.is-blend{background:transparent;border-bottom-color:transparent}
.hd.is-blend .hd__clock,.hd.is-blend .burger{mix-blend-mode:difference;color:#fff}
.hd__in{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 20px}
.hd__logo{display:block}
.hd__wm{width:154px;height:auto;--wmText:var(--sumi);--wmLeaf:var(--hi)}
.hd__right{display:flex;align-items:center;gap:26px}

/* ---- 案C: ヘッダー内の横並び。ホバーで緋の線が引かれる ---- */
.hd__inline{display:flex;gap:30px}
.hd__inline a{position:relative;font-size:13.5px;padding:4px 0}
.hd__inline a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hi);
  transform:scaleX(0);transform-origin:right;transition:transform .3s var(--e);
}
.hd__inline a:hover::after{transform:scaleX(1);transform-origin:left}

/* ---- 案A: ハンバーガー ---- */
.burger{display:flex;align-items:center;gap:10px;background:none;border:0;cursor:pointer;color:inherit;padding:6px 0}
.burger__lines{display:block;width:22px;height:10px;position:relative}
.burger__lines i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .34s var(--e),top .34s var(--e),opacity .2s var(--e)}
.burger__lines i:first-child{top:0}
.burger__lines i:last-child{top:calc(100% - 1.5px)}
.burger__label{font-family:Archivo,sans-serif;font-size:11.5px;letter-spacing:.16em}
/* 閉じるボタン：2本とも中央に寄せてから 45 度で交差させる。
   線の位置を px 固定で寄せると、ボタンの大きさが変わったときに×が歪む */
body.is-menu .burger__lines i{top:calc(50% - .75px)}
body.is-menu .burger__lines i:first-child{transform:rotate(45deg)}
body.is-menu .burger__lines i:last-child{transform:rotate(-45deg)}

/* メニューを開いている間は緋の面が下地になるので、ブレンドをやめて白で固定する */
body.is-menu .hd{mix-blend-mode:normal;color:#fff;background:transparent;border-bottom-color:transparent}
body.is-menu .hd__wm{--wmText:#fff;--wmLeaf:#fff}
body.is-menu .hd__clock{opacity:0;pointer-events:none}
body.is-menu .hd{transform:none}

/* ---- 案B: 右端の縦組み ---- */
.sidenav{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:56;
  display:flex;flex-direction:row-reverse;gap:4px;padding-right:14px;
  mix-blend-mode:difference;color:#fff;
}
.sidenav a{
  writing-mode:vertical-rl;display:flex;align-items:center;gap:14px;
  padding:14px 9px;font-size:13.5px;letter-spacing:.14em;position:relative;
}
.sidenav a em{font-style:normal;font-family:Archivo,sans-serif;font-size:10px;letter-spacing:.12em;opacity:.5}
.sidenav a::after{
  content:"";position:absolute;top:0;bottom:0;right:2px;width:1px;background:currentColor;
  transform:scaleY(0);transform-origin:bottom;transition:transform .34s var(--e);
}
.sidenav a:hover::after{transform:scaleY(1);transform-origin:top}

/* ---- 案A: 全画面メニュー（入りの演出と同じ clip-path のせり上がり） ---- */
.ovl{position:fixed;inset:0;z-index:70;visibility:hidden;transition:visibility 0s linear .46s}
body.is-menu .ovl{visibility:visible;transition-delay:0s}
.ovl__sheet{
  position:absolute;inset:0;background:var(--hi);color:#fff;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(28px,9vw,150px);
  clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);
  transition:clip-path .44s var(--e);
}
body.is-menu .ovl__sheet{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transition-duration:.62s}
.ovl__nav a{
  display:flex;align-items:baseline;gap:clamp(16px,3vw,42px);
  padding:clamp(12px,2.1vh,22px) 0;border-bottom:1px solid rgba(255,255,255,.28);
  opacity:0;transform:translateY(18px);transition:opacity .5s var(--e),transform .5s var(--e);
}
.ovl__nav a:first-child{border-top:1px solid rgba(255,255,255,.28)}
body.is-menu .ovl__nav a{opacity:1;transform:none}
body.is-menu .ovl__nav a:nth-child(1){transition-delay:.30s}
body.is-menu .ovl__nav a:nth-child(2){transition-delay:.37s}
body.is-menu .ovl__nav a:nth-child(3){transition-delay:.44s}
body.is-menu .ovl__nav a:nth-child(4){transition-delay:.51s}
.ovl__nav em{font-style:normal;font-family:"Archivo Black",sans-serif;font-size:13px;letter-spacing:.1em;opacity:.75}
.ovl__nav b{font-family:"Zen Old Mincho",serif;font-weight:600;font-size:clamp(26px,5.2vw,60px);letter-spacing:.04em;line-height:1.2}
.ovl__nav span{margin-left:auto;font-family:Archivo,sans-serif;font-size:11.5px;letter-spacing:.18em;opacity:.72}
.ovl__foot{
  margin-top:clamp(24px,5vh,56px);font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.8);
  opacity:0;transition:opacity .5s var(--e) .58s;
}
body.is-menu .ovl__foot{opacity:1}

/* ---- 案ごとの出し分け（?menu=a|b|c で切り替え） ---- */
body[data-menu="a"] .sidenav{display:none}
body[data-menu="b"] .burger,body[data-menu="b"] .ovl{display:none}
/* 縦ナビと右のコピーがぶつかるので内側へ寄せる */
body[data-menu="b"] .hero__jp{right:11.5%}
body[data-menu="c"] .burger,body[data-menu="c"] .sidenav,body[data-menu="c"] .ovl{display:none}

.hd__clock{display:flex;align-items:center;gap:9px;font-family:Archivo,sans-serif;font-size:12.5px;letter-spacing:.04em}
.hd__clock i{width:7px;height:7px;background:var(--hi);display:block;font-style:normal;animation:blink 1.6s steps(1,end) infinite}
.hd.is-blend .hd__clock i{background:#fff}
@keyframes blink{0%,60%{opacity:1}61%,100%{opacity:.15}}
.hd__mark{width:19px;height:auto;transition:opacity .3s var(--e)}

/* ============ hero ============ */
.hero{position:relative;height:100svh;min-height:620px;display:flex;align-items:center;justify-content:center;overflow:hidden}
/* 巨大タイポはブランドのワードマーク（参考元も同じくロゴSVGを敷いている） */
.hero__type{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:76%;z-index:1;user-select:none;pointer-events:none;
  --wmText:var(--sumi);--wmLeaf:var(--hi);
}
.hero__viWrap{position:relative;z-index:3;height:min(78vh,610px)}
/* 比較用に差し替えたときだけ大きさを寄せる */
.hero__viWrap[data-vi]{height:min(64vh,510px)}
.hero__viWrap[data-vi="a"],.hero__viWrap[data-vi="b"]{height:min(72vh,560px)}
.hero__mark{height:100%;width:auto}
/* ビジュアルの足元を白に溶かす（参考元の作り） */
.hero__viWrap::after{
  content:"";position:absolute;left:-6%;right:-6%;bottom:-1px;height:64px;
  background:linear-gradient(to top,var(--white),rgba(255,255,255,0));pointer-events:none;
}
.hero__en,.hero__jp{mix-blend-mode:difference;color:#fff;z-index:2}
/* 文字が黒ベタの横棒に収まる行組みにしてある（白地とまたぐと読みにくいため） */
.hero__en{
  position:absolute;left:3.4%;top:50%;transform:translateY(-50%);
  font-family:Archivo,sans-serif;font-weight:500;font-size:12px;line-height:1.6;letter-spacing:.03em;text-align:center;
}
.hero__jp{position:absolute;right:3.4%;top:50%;transform:translateY(-50%);text-align:center}
.hero__jp b{display:block;font-family:"Zen Old Mincho",serif;font-weight:600;font-size:clamp(19px,2.15vw,26px);line-height:1.8;letter-spacing:.04em}
.hero__jp small{display:block;font-family:Archivo,sans-serif;font-size:11px;color:#9C9C9C;line-height:1.7}
.hero__jp b+small{margin-top:10px}   /* 上に文が入ったときだけ間隔をとる */
body.is-ready .hero__foot{animation:footIn .85s var(--e) .46s both}
@keyframes footIn{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
.hero__foot{
  opacity:0;position:absolute;left:0;right:0;bottom:0;z-index:4;height:44px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 20px;
  border-top:1px solid var(--line);background:var(--white);
  font-family:Archivo,sans-serif;font-size:11.5px;letter-spacing:.06em;color:#6E6A66;
}
.marquee{flex:1;overflow:hidden;white-space:nowrap;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.marquee__in{display:inline-block;width:max-content;animation:marquee 13s linear infinite}
.marquee__in b{font-weight:400;padding-right:38px}
@keyframes marquee{from{transform:translate(0)}to{transform:translate(-10%)}}
.hero__foot em{font-style:normal;color:var(--sumi)}
.hero__foot .sound{display:flex;align-items:center;gap:7px;cursor:pointer}
.hero__foot .sound i{display:block;width:0;height:0;border-left:6px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;font-style:normal}

/* ============ section 共通 ============ */
.sec{padding:120px 0;border-top:1px solid var(--line)}
.sec__head{display:flex;align-items:baseline;gap:22px;margin-bottom:14px}
.sec__label{font-family:"Archivo Black",sans-serif;font-size:11.5px;letter-spacing:.18em;color:var(--hi)}
.sec__rule{flex:1;height:1px;background:var(--line)}
.sec__title{font-size:clamp(30px,5.4vw,64px);font-weight:900;letter-spacing:.005em;margin-bottom:26px}
.sec__note{max-width:34em;color:#4A4642;font-size:15.5px}
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--e),transform .9s var(--e)}
.list .rv:nth-child(2){transition-delay:.09s}
.list .rv:nth-child(3){transition-delay:.18s}
.rv.is-in{opacity:1;transform:none}

/* ============ stance / service ============ */
.list{list-style:none;margin-top:58px}
.item{display:grid;grid-template-columns:minmax(96px,.5fr) 1fr;gap:0 40px;padding:40px 0;border-top:1px solid var(--line);align-items:start}
.item:last-child{border-bottom:1px solid var(--line)}
.item__num{font-family:"Archivo Black",sans-serif;font-size:clamp(30px,4.4vw,58px);line-height:.9;color:var(--hi)}
.item h3{font-size:clamp(19px,2.3vw,25px);margin-bottom:14px}
.item p{max-width:38em;color:#3E3A37}

/* ============ members ============ */
.members{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:58px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.member{padding:40px 32px 44px 0;border-right:1px solid var(--line)}
.member:last-child{border-right:0;padding-right:0}
.member__en{font-family:"Archivo Black",sans-serif;font-size:12px;letter-spacing:.14em;color:var(--hi);margin-bottom:14px}
.member__ttl{font-family:"Zen Old Mincho",serif;font-weight:900;font-size:32px;margin-bottom:14px;letter-spacing:.06em}
.member p{font-size:14.5px;color:#3E3A37;line-height:1.95}

/* ============ 緋の面 ============ */
.band{background:var(--hi);color:#fff;padding:88px 0}
.band p{font-family:"Zen Old Mincho",serif;font-weight:600;font-size:clamp(21px,3.4vw,40px);line-height:1.75;letter-spacing:.03em;max-width:22em}

/* ============ company ============ */
.dl{margin-top:58px;border-top:1px solid var(--line)}
.dl__row{display:grid;grid-template-columns:minmax(96px,.5fr) 1fr;gap:0 40px;padding:22px 0;border-bottom:1px solid var(--line)}
.dl dt{font-family:Archivo,sans-serif;font-size:12px;letter-spacing:.12em;color:var(--gray);padding-top:5px}
.dl dd{font-size:16px}
.dl ul{list-style:none}
.dl li{position:relative;padding-left:17px}
.dl li::before{content:"";position:absolute;left:0;top:.95em;width:6px;height:6px;background:var(--hi)}

/* ============ contact ============ */
.contact{background:var(--sumi);color:#fff;padding:120px 0}
.contact .sec__label{color:#fff}
.contact .sec__rule{background:rgba(255,255,255,.2)}
.contact h2{font-size:clamp(28px,5vw,60px);font-weight:900;margin-bottom:24px}
.contact>.wrap>p{color:#B9B2AB;max-width:32em;margin-bottom:58px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:30px 34px;max-width:880px}
.field{display:flex;flex-direction:column;gap:10px}
.field--full{grid-column:1/-1}
.field label{font-family:Archivo,sans-serif;font-size:11.5px;letter-spacing:.12em;color:#948C85}
.field input,.field textarea{
  font-family:inherit;font-size:16px;color:#fff;background:transparent;
  border:0;border-bottom:1px solid #3A3634;padding:11px 2px;transition:border-color .2s var(--e);
}
.field textarea{resize:vertical;min-height:130px;line-height:1.9}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--hi)}
.submit{grid-column:1/-1;justify-self:start;margin-top:16px}
.submit button{
  font-family:"Archivo Black",sans-serif;font-size:14px;letter-spacing:.1em;color:var(--sumi);
  background:#fff;border:0;padding:19px 58px;cursor:pointer;transition:background-color .2s var(--e),color .2s var(--e);
}
.submit button:hover{background:var(--hi);color:#fff}

/* ============ footer ============ */
.ft{background:var(--sumi);color:#fff;padding:0 0 26px;position:relative;overflow:hidden}
.ft__type{
  font-size:min(20.4vw,340px);line-height:.78;letter-spacing:-.018em;color:#232120;
  text-align:center;user-select:none;white-space:nowrap;padding-top:14px;
}
.ft__in{display:flex;align-items:center;justify-content:space-between;gap:26px;padding-top:30px;font-family:Archivo,sans-serif;font-size:11.5px;letter-spacing:.06em;color:#7C7671}
.ft__wm{width:96px;height:auto;--wmText:#fff;--wmLeaf:var(--hi)}

@media(max-width:1080px){
  .hero{flex-direction:column;justify-content:center;gap:26px;padding:110px 0 70px;height:auto;min-height:100svh}
  .hero__en,.hero__jp{position:static;transform:none}
  .hero__type{top:44%}
  .hero__viWrap{height:min(46vh,360px)}
  .hero__jp{margin-top:6px}
}
@media(max-width:900px){
  .members{grid-template-columns:1fr}
  .member{border-right:0;border-bottom:1px solid var(--line);padding-right:0}
  .member:last-child{border-bottom:0}
}
@media(max-width:640px){
  .wrap{width:calc(100% - 40px)}
  .sec{padding:80px 0}
  .item,.dl__row{grid-template-columns:1fr;gap:12px}
    .hd__clock{display:none}
  .hd__inline{display:none}
  .sidenav a{font-size:12px;padding:11px 7px}
  .burger__label{display:none}
  .hd__wm{width:128px}
  .form{grid-template-columns:1fr}
  .hero__foot{font-size:10.5px;padding:0 14px}
  /* 幅が狭いと左右の文字に挟まれて流れる文が数語しか見えないので、帯を全幅で使う。
     .sound は display:flex を持っていて詳細度で勝つので、名指しで消す */
  .hero__foot > span,.hero__foot .sound{display:none}
  .splash__wm{width:64vw}
  /* 幅が狭いとキャラがワードマークを覆い尽くして社名が読めなくなる。
     ロゴを広げ、キャラを抑えて、PC と同じ「文字の上で舞う」構図に戻す */
  .hero__type{width:94%}
  .hero__viWrap{height:min(31vh,232px)}
  .hero__viWrap[data-vi]{height:min(28vh,210px)}
  /* キャラを縮めたぶん中身が中央で浮くので、下に余白を足して全体を上へ寄せる */
  .hero{padding-bottom:calc(var(--u)*9)}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}
}

/* ===== 下層は humanmade.co.jp の構造に寄せる（値はCSSを実測して移植） ===== */
/* 参考元は html{font-size:.694vw} で全サイズが画面幅に連動する。--u をその代わりに使う */
:root{--u:clamp(7px,.694vw,11px);--paper2:#F4F2EE;--panel:#fff}
body{background:var(--paper2)}
main{padding:0 calc(var(--u)*1.6) calc(var(--u)*10)}
.hero{background:var(--panel);border-radius:0 0 calc(var(--u)*2.4) calc(var(--u)*2.4);z-index:1}

/* パネル */
.sec,.band,.contact{
  position:sticky;top:calc(var(--u)*1.6);
  min-height:calc(100svh - var(--u)*3.2);
  display:flex;flex-direction:column;justify-content:center;
  background:var(--panel);border-radius:calc(var(--u)*2.4);
  padding:calc(var(--u)*9) 0;margin-top:calc(var(--u)*1.6);overflow:hidden;
}
.band{background:#000;color:#fff}            /* 参考元も黒はここ1枚だけ */
.contact{background:var(--sumi);color:#fff}
#mission{z-index:2}#about{z-index:3}#service{z-index:4}#projects{z-index:5}#news{z-index:6}#company{z-index:7}.contact{z-index:8}
.sec>.wrap,.band>.wrap,.contact>.wrap{position:relative;z-index:2;width:min(100% - var(--u)*13,calc(var(--u)*128))}

/* ラベルは括弧つき */
.sec__head{gap:0;margin-bottom:calc(var(--u)*3.4)}
.sec__label{font-family:Inter,Archivo,sans-serif;font-weight:700;font-size:clamp(11px,1.2vw,14px);letter-spacing:.06em;color:var(--sumi)}
.sec__label::before{content:"("}
.sec__label::after{content:")"}
.band .sec__label,.contact .sec__label{color:#fff}
.sec__rule{display:none}

/* 見出しは参考元と同じくゴシック。明朝は「言葉を聴かせる」面だけに残す */
.sec__title,.contact h2{
  font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;letter-spacing:.02em;line-height:1.55;
  font-size:clamp(24px,3.2vw,42px);margin-bottom:calc(var(--u)*3.6);
}
.sec__note{font-size:clamp(14px,1.6vw,18px);line-height:2.05;max-width:38em}
.ln{display:block;overflow:hidden}
.ln>i{display:block;font-style:normal;transform:translateY(104%);transition:transform .95s var(--e)}
.is-shown .ln>i{transform:none}
.ln:nth-child(2)>i{transition-delay:.08s}
.ln:nth-child(3)>i{transition-delay:.16s}

/* 本文の行組み・番号 */
.list{margin-top:calc(var(--u)*5)}
.item{padding:calc(var(--u)*4.2) 0;border-top:1px solid #E6E3DE}
.item:last-child{border-bottom:1px solid #E6E3DE}
.item__num{font-family:Inter,"Archivo Black",sans-serif;font-weight:700;font-size:clamp(26px,3.4vw,44px);line-height:1;color:var(--hi)}
.item__num::after{display:none}
.item h3{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:clamp(17px,1.9vw,23px);letter-spacing:.02em;margin-bottom:calc(var(--u)*1.4)}
.item p{font-size:clamp(13.5px,1.5vw,17px);line-height:2.05}

/* メンバーは参考元の values と同じ「角丸パネル3枚」 */
.members{display:flex;gap:calc(var(--u)*1.6);margin-top:calc(var(--u)*5);border:0;background:transparent}
.member{
  width:33.3333%;background:var(--paper2);border-radius:calc(var(--u)*2.4);
  padding:calc(var(--u)*5) calc(var(--u)*4);border:0;
}
.member__en{font-family:Inter,sans-serif;font-weight:700;font-size:clamp(11px,1.2vw,14px);letter-spacing:.06em;color:var(--hi);margin-bottom:calc(var(--u)*2)}
.member__ttl{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:clamp(20px,2.4vw,30px);margin-bottom:calc(var(--u)*1.4)}
.member p{font-size:clamp(13px,1.4vw,16px);line-height:2}

/* 黒い面の一言だけ明朝で聴かせる */
.band p{font-family:"Zen Old Mincho",serif;font-weight:600;font-size:clamp(22px,3.4vw,44px);line-height:1.75;color:#fff;max-width:20em}

/* 会社概要 */
.dl{margin-top:calc(var(--u)*5);border-top:1px solid rgba(255,255,255,.16)}
.dl__row{padding:calc(var(--u)*2.4) 0;border-bottom:1px solid rgba(255,255,255,.16)}
#company .dl{border-top-color:#E6E3DE}
#company .dl__row{border-bottom-color:#E6E3DE}
.dl dt{font-family:Inter,sans-serif;font-weight:700;font-size:clamp(11px,1.2vw,14px);letter-spacing:.06em;color:#8B8681}
.dl dd{font-size:clamp(14px,1.6vw,18px)}

/* ボタンは黒いピル */
.submit button{
  background:#fff;color:var(--sumi);border-radius:999em;
  padding:calc(var(--u)*2.4) calc(var(--u)*5);font-family:Inter,sans-serif;font-weight:700;
  font-size:clamp(12px,1.4vw,16px);letter-spacing:.04em;display:flex;align-items:center;gap:.8em;
}
.submit button::after{content:"";width:.5em;height:.5em;border-radius:999em;background:var(--hi)}
.submit button:hover{background:var(--hi);color:#fff}
.submit button:hover::after{background:#fff}

/* 背景の巨大な英字 */
.sec__ghost{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:"Archivo Black",sans-serif;font-size:min(19vw,260px);line-height:1;
  color:var(--sumi);opacity:.04;white-space:nowrap;pointer-events:none;user-select:none;z-index:0;letter-spacing:-.01em;
}
.band .sec__ghost,.contact .sec__ghost{color:#fff;opacity:.07}

/* 紅葉 */
.leaf{position:absolute;z-index:1;pointer-events:none;user-select:none;opacity:.9}
.leaf img{display:block;width:100%;height:auto}
.leaf--a{width:clamp(48px,6vw,92px);right:6%;top:13%;animation:drift 12s ease-in-out infinite alternate}
.leaf--b{width:clamp(36px,4.4vw,66px);left:4%;bottom:15%;animation:drift 15s ease-in-out 1.2s infinite alternate-reverse}
.leaf--c{width:clamp(30px,3.6vw,54px);right:17%;bottom:10%;animation:drift 18s ease-in-out .6s infinite alternate}
@keyframes drift{from{transform:translateY(0) rotate(-7deg)}to{transform:translateY(-24px) rotate(7deg)}}

.rv{opacity:1!important;transform:none!important;transition:none}
.contact .field input,.contact .field textarea{border-bottom-color:#3A3634}
.ft{border-radius:calc(var(--u)*2.4);margin:calc(var(--u)*1.6);overflow:hidden}

@media(max-width:900px){
  .members{flex-direction:column}
  .member{width:100%}
}
@media(max-width:640px){
  :root{--u:clamp(8px,2.56vw,12px)}
  main{padding:0 calc(var(--u)*1.2) calc(var(--u)*6)}
  .sec,.band,.contact{min-height:auto;padding:calc(var(--u)*6) 0;border-radius:calc(var(--u)*2)}
  .sec>.wrap,.band>.wrap,.contact>.wrap{width:calc(100% - var(--u)*5)}
  .leaf--b,.leaf--c{display:none}
  .sec__ghost{font-size:30vw}
}


/* ===== 覗き窓 ===== */
.peekRail{height:250svh;position:relative;z-index:7;margin-top:calc(var(--u)*1.6)}
.peek{position:sticky;top:calc(var(--u)*1.6);height:calc(100svh - var(--u)*3.2);overflow:hidden;border-radius:calc(var(--u)*2.4)}
.peek__behind{position:absolute;inset:0;background:var(--hi);display:flex;align-items:center;justify-content:center;padding:0 8%}
.peek__msg{
  font-family:Archivo,sans-serif;font-weight:600;color:#fff;
  font-size:clamp(27px,5.1vw,78px);line-height:1.5;letter-spacing:.005em;text-align:center;
}
.peek__svg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
@media(max-width:640px){.peekRail{height:190svh}.peek{border-radius:calc(var(--u)*2)}}


/* ===== 問い合わせ：紅葉を敷き詰めた地の上に白いパネル（参考元の CAREERS と同じ構造） ===== */
.contact{
  background:#EDEAE4 url(../deco/sticker-tile.webp) repeat;
  background-size:clamp(260px,30vw,400px);
  color:var(--sumi);
}
.contact .sec__label{color:var(--sumi)}
.contact .sec__ghost{color:var(--sumi);opacity:.05}
.contact__panel{
  position:relative;z-index:2;
  background:#fff;border-radius:calc(var(--u)*2.4);
  padding:calc(var(--u)*7) calc(var(--u)*6.5);
  width:min(100% - var(--u)*13,calc(var(--u)*128));margin-inline:auto;
}
.contact__panel>.wrap{width:100%!important}
.contact h2{color:var(--sumi)}
.contact>.wrap>p,.contact__panel p{color:#4A4642}
.contact .field label{color:#8B8681}
.contact .field input,.contact .field textarea{color:var(--sumi);border-bottom-color:#DCD7CF}
.contact .field input:focus,.contact .field textarea:focus{border-bottom-color:var(--hi)}
.submit button{background:var(--sumi);color:#fff}
.submit button::after{background:var(--hi)}
.submit button:hover{background:var(--hi);color:#fff}
.submit button:hover::after{background:#fff}
@media(max-width:640px){.contact__panel{padding:calc(var(--u)*5) calc(var(--u)*3.4);width:calc(100% - var(--u)*4)}}


/* ===== MISSION：文字が左から現れる（参考元と同じ見え方） ===== */
.sec--mission{justify-content:center}
.tw{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;letter-spacing:.02em;
  font-size:clamp(26px,4vw,52px);line-height:1.6;margin-bottom:calc(var(--u)*5)}
.tw--body{font-weight:400;font-size:clamp(15px,2.1vw,26px);line-height:2.1;letter-spacing:.03em;margin-bottom:0}
.twl{display:block;overflow:hidden}
.twl>i{display:block;font-style:normal;clip-path:inset(0 100% 0 0);will-change:clip-path}

/* ===== PROJECTS ===== */
.pj{display:flex;gap:calc(var(--u)*1.6);margin-top:calc(var(--u)*5)}
.pj__item{width:50%;display:flex;flex-direction:column;gap:calc(var(--u)*1.6)}
.pj__visual{
  position:relative;border-radius:calc(var(--u)*2.4);aspect-ratio:16/10;
  display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden;
}
.pj__visual--bot{background:var(--sumi)}
.pj__visual--media{background:var(--hi)}
.pj__badge{
  position:absolute;top:calc(var(--u)*2);left:calc(var(--u)*2);
  font-family:Inter,sans-serif;font-weight:700;font-size:clamp(9px,1vw,11px);letter-spacing:.14em;
  color:#fff;border:1px solid rgba(255,255,255,.5);border-radius:999em;padding:.5em 1.2em;
}
.pj__vtitle{font-family:"Archivo Black",sans-serif;color:#fff;font-size:clamp(26px,4vw,54px);letter-spacing:-.01em}
.pj__foot{background:var(--paper2);border-radius:calc(var(--u)*2.4);padding:calc(var(--u)*3.4) calc(var(--u)*3.4) calc(var(--u)*4)}
.pj__name{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:clamp(17px,2vw,24px);margin-bottom:calc(var(--u)*1.2)}
.pj__desc{font-size:clamp(13px,1.4vw,16px);line-height:2;color:#4A4642}

/* ===== NEWS ===== */
.news{list-style:none;margin-top:calc(var(--u)*4);border-top:1px solid #E6E3DE}
.news__item{
  display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:calc(var(--u)*2.4);
  padding:calc(var(--u)*2.8) 0;border-bottom:1px solid #E6E3DE;
}
.news__item time{font-family:Inter,sans-serif;font-weight:700;font-size:clamp(12px,1.3vw,15px);color:#8B8681;font-variant-numeric:tabular-nums}
.news__cat{
  font-size:clamp(10.5px,1.1vw,12.5px);letter-spacing:.08em;color:var(--sumi);
  border:1px solid #DCD7CF;border-radius:999em;padding:.4em 1.1em;white-space:nowrap;
}
.news__item p{font-size:clamp(13.5px,1.5vw,17px);line-height:1.9}

@media(max-width:900px){
  .pj{flex-direction:column}
  .pj__item{width:100%}
  .news__item{grid-template-columns:auto auto;grid-template-areas:"t c" "p p";gap:calc(var(--u)*1.4)}
  .news__item time{grid-area:t}.news__cat{grid-area:c;justify-self:start}.news__item p{grid-area:p}
}


/* ===== ヘッダー：参考元の並び（左＝ハンバーガー＋ロゴ／中央＝ナビ／右＝時計＋丸ボタン） ===== */
.hd{background:transparent;border-bottom:0;height:auto;padding:calc(var(--u)*1.6) 0}
.hd__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:calc(var(--u)*2);padding:0 calc(var(--u)*3.2)}
.hd__left{display:flex;align-items:center;gap:calc(var(--u)*1.8)}
.hd__inline{justify-content:center;gap:calc(var(--u)*3)}
.hd__inline a{font-family:Inter,sans-serif;font-weight:700;font-size:clamp(11px,1.2vw,13px);letter-spacing:.08em}
.hd__right{justify-content:flex-end;gap:calc(var(--u)*1.6)}
.hd__mail{
  display:grid;place-content:center;width:clamp(38px,4.6vw,50px);height:clamp(38px,4.6vw,50px);
  border-radius:999em;background:#fff;color:var(--sumi);transition:background-color .2s var(--e),color .2s var(--e);
}
.hd__mail svg{width:clamp(17px,1.9vw,21px);height:auto;stroke-width:1.6}
.hd__mail:hover{background:var(--sumi);color:#fff}
.burger{padding:0;width:clamp(30px,3.4vw,38px);height:clamp(30px,3.4vw,38px);border-radius:999em;background:#fff;place-content:center;justify-content:center}
.burger__lines{width:52%;height:32%}
.hd.is-blend{mix-blend-mode:normal}
.hd.is-blend .hd__clock,.hd.is-blend .burger{mix-blend-mode:normal;color:inherit}

/* ===== ヒーローも四隅を丸くして、地の上に浮かせる ===== */
main{padding-top:calc(var(--u)*9.5)}
.hero{border-radius:calc(var(--u)*2.4);overflow:hidden;margin:0}
.hero__foot{border-radius:0 0 calc(var(--u)*2.4) calc(var(--u)*2.4)}

@media(max-width:900px){
  .hd__inline{display:none}
  .hd__in{grid-template-columns:auto 1fr}
  .hd__right{grid-column:2}
}


/* ===== ヘッダーもパネルの内側に置く（参考元と同じ収まり） ===== */
main{padding-top:calc(var(--u)*1.6)}
.topbar{display:none}
.hd{top:calc(var(--u)*1.6);padding:calc(var(--u)*1.9) 0}
.hd__in{padding:0 calc(var(--u)*4.4)}
.hero{position:relative}
.hd__left,.hd__right,.hd__inline{position:relative;z-index:2}
@media(max-width:640px){.hd__in{padding:0 calc(var(--u)*3)}}


/* メニューを開いている間：閉じるボタンを白線に、中央ナビも白に */
body.is-menu .burger{background:transparent;border:1px solid rgba(255,255,255,.55)}
body.is-menu .burger__lines i{background:#fff}
body.is-menu .hd__inline a{color:#fff}
body.is-menu .hd__inline a::after{background:#fff}
body.is-menu .hd__mail{background:transparent;border:1px solid rgba(255,255,255,.55);color:#fff}
body.is-menu .hd__mail:hover{background:#fff;color:var(--hi)}
/* 6項目でも縦に収まるように */
.ovl__nav b{font-size:clamp(21px,3.6vw,44px)}
.ovl__nav a{padding:clamp(9px,1.5vh,17px) 0}


/* 一覧ページへ送るボタン（参考元の .c-button と同じ黒いピル） */
.btn{display:inline-flex;align-items:center;gap:.8em;margin-top:calc(var(--u)*4.5);
  font-family:Inter,sans-serif;font-weight:700;font-size:clamp(11px,1.2vw,13px);letter-spacing:.08em;
  background:var(--sumi);color:#fff;border-radius:999em;padding:calc(var(--u)*2.2) calc(var(--u)*4.6);
  transition:background-color .2s var(--e)}
.btn::after{content:"";width:.5em;height:.5em;border-radius:999em;background:var(--hi)}
.btn:hover{background:var(--hi)}.btn:hover::after{background:#fff}
.contact .btn{background:#fff;color:var(--sumi)}
.contact .btn:hover{background:var(--hi);color:#fff}
.contact__panel h2{margin-bottom:calc(var(--u)*2.4)}
#mission{z-index:2}#service{z-index:4}#projects{z-index:5}#news{z-index:6}.contact{z-index:8}


/* ヘッダーの真下が濃い面のときは白に反転させる */
.hd.is-dark{color:#fff}
.hd.is-dark .hd__wm{--wmText:#fff;--wmLeaf:#fff}
.hd.is-dark .burger{background:transparent;border:1px solid rgba(255,255,255,.5)}
.hd.is-dark .burger__lines i{background:#fff}
.hd.is-dark .hd__mail{background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff}
.hd.is-dark .hd__mail:hover{background:#fff;color:var(--sumi)}
.hd.is-dark .hd__clock i{background:#fff}


/* パネルが貼り付いたまま読ませるための余白。次の面のカットインを遅らせる */
.gap{height:48svh;pointer-events:none}
.gap--read{height:105svh}
@media(max-width:640px){.gap{height:22svh}.gap--read{height:50svh}}


/* パネル間の余白を margin から border に変える。
   margin だと隙間から背後の（貼り付いたままの）前のパネルが見えてしまう */
.sec,.band,.contact{
  margin-top:0;
  border-top:calc(var(--u)*1.6) solid var(--paper2);
  background-clip:padding-box;
}
.peekRail{margin-top:0}
.peek{border-top:calc(var(--u)*1.6) solid var(--paper2);background-clip:padding-box}
.peek__behind,.peek__svg{border-radius:calc(var(--u)*2.4)}


.ft__nav{display:flex;gap:calc(var(--u)*3.2);flex-wrap:wrap}
.ft__nav a{font-family:Inter,sans-serif;font-weight:700;font-size:clamp(11px,1.2vw,13px);letter-spacing:.08em;color:#fff;transition:color .2s var(--e)}
.ft__nav a:hover{color:var(--hi)}
@media(max-width:900px){.ft__in{flex-direction:column;align-items:flex-start;gap:calc(var(--u)*2.6)}}


/* スクロールしたらヘッダーに白い帯を敷く。
   透明のままだと濃いカードの上でロゴやナビが読めなくなるため */
.hd::before{
  content:"";position:absolute;top:0;bottom:0;left:calc(var(--u)*1.6);right:calc(var(--u)*1.6);
  background:#fff;opacity:0;transition:opacity .28s var(--e);
  border-radius:0 0 calc(var(--u)*2) calc(var(--u)*2);
}
.hd.is-stuck::before{opacity:1}
.hd__in{position:relative;z-index:1}
body.is-menu .hd::before{opacity:0}


/* 葉が本文に重なると読みにくいので、余白側へ逃がす */
.sec .leaf--b{left:1.5%;bottom:4%}
.sec .leaf--c{right:3%;bottom:5%}


.news__item{padding:0}
.news__link{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:calc(var(--u)*2.4);padding:calc(var(--u)*2.8) 0;transition:opacity .2s var(--e)}
/* 幅が狭いと3列は収まらず日付・カテゴリ・見出しが重なるので、2段に折る。
   上の 640px ブロックではなくここに置くこと（同じ詳細度なら後に書いた方が勝つため） */
@media(max-width:640px){
  .news__link{
    grid-template-columns:auto 1fr;
    grid-template-areas:"t c" "p p";
    gap:calc(var(--u)*1.2) calc(var(--u)*1.6);
  }
  .news__link time{grid-area:t}
  .news__link .news__cat{grid-area:c;justify-self:start}
  .news__link p{grid-area:p}
}
.news__link:hover{opacity:.6}


.tw__en{font-family:Inter,sans-serif;font-weight:700;font-size:clamp(11px,1.3vw,15px);letter-spacing:.14em;color:var(--hi);margin-bottom:calc(var(--u)*2.2)}