/* ==========================================================================
   nespa-e.css — creative house POURCHER 共通デザインシステム（E案 COFFRET）
   TOP(index) と全下層ページで共有する。3D開封のヒーロー専用CSSは index 側に
   インラインで持つ（このファイルには入れない）。
   トークン・タイポ・ナビ・セクション・各コンポーネント・フッター・reveal。
   ========================================================================== */

:root{
  --paper:#fffcf7; --ink:#1f1a15; --box:#8a4a26; --flame:#a9683c;
  --ribbon:#f0e5d4; --mid:#6f6660; --line:#e7ded1;
  /* 製本のかがり綴じ。見出しの罫に使い、紙屋の手仕事を通奏低音にする */
  --stitch:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='19' height='5' viewBox='0 0 19 5'><path d='M2 4 L8 1' stroke='%238a4a26' stroke-opacity='.55' stroke-width='1.2' stroke-linecap='round' fill='none'/></svg>");
  --display:"Cormorant Garamond",Georgia,serif;
  --body:"Noto Serif JP","Yu Mincho",serif;
  --gut:clamp(18px,5vw,86px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-weight:300;line-height:2.05;letter-spacing:.05em;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--box);outline-offset:3px}

.label{font-family:var(--display);font-weight:500;font-size:12.5px;letter-spacing:.36em;
  text-transform:uppercase;color:var(--box);margin:0}

/* ---------- nav ---------- */
/* 通常は透過（ヒーローの上に重なる）。下層ページなど背景が紙色のページでは
   body に class="solidnav" を付けると、地の色つきナビになって文字が読める */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;
  align-items:center;padding:16px var(--gut);
  background:linear-gradient(180deg,rgba(24,18,12,.55),rgba(24,18,12,0))}
.nav a{color:#fff}
.nav a:hover{color:var(--flame)}
.brand{font-family:var(--display);font-weight:400;font-size:clamp(15px,2vw,20px);
  letter-spacing:.42em;text-transform:uppercase;text-indent:.42em}
.navlinks{display:flex;gap:clamp(12px,2.6vw,34px);font-family:var(--display);
  font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;align-items:center}
.navlinks .rec{border:1px solid rgba(255,255,255,.5);padding:6px 14px;border-radius:1px;
  letter-spacing:.2em}
.navlinks .rec:hover{background:rgba(255,255,255,.12);color:#fff}
@media(max-width:400px){
  .brand{font-size:14px;letter-spacing:.2em;text-indent:.2em}
}

/* 背景が紙色のページ用の不透明ナビ（下層ページ） */
body.solidnav{padding-top:64px}
body.solidnav .nav{background:rgba(255,252,247,.92);
  backdrop-filter:saturate(1.1) blur(6px);border-bottom:1px solid var(--line)}
body.solidnav .nav a{color:var(--ink)}
body.solidnav .nav a:hover{color:var(--box)}
body.solidnav .brand{color:var(--ink)}
body.solidnav .navlinks .rec{border-color:var(--box);color:var(--box)}
body.solidnav .navlinks .rec:hover{background:var(--box);color:#fff}

/* ---------- ハンバーガーメニュー（狭い画面はリンクを畳み、タップで全項目を出す） ---------- */
.navburger{display:none;position:relative;z-index:70;width:42px;margin-left:10px;
  background:none;border:0;padding:10px 9px;cursor:pointer;color:#fff}
body.solidnav .navburger{color:var(--ink)}
.navburger span{display:block;height:1px;background:currentColor;transition:transform .3s ease}
.navburger span+span{margin-top:7px}
@media(max-width:720px){
  .navburger{display:block}
  .navlinks{position:fixed;inset:0;z-index:65;flex-direction:column;justify-content:center;
    gap:30px;background:rgba(24,18,12,.96);font-size:15px;letter-spacing:.3em;
    opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
  body.menuopen{overflow:hidden}
  body.menuopen .navlinks{opacity:1;visibility:visible}
  body.menuopen .navlinks a{color:#fff}
  body.menuopen .navlinks a:hover{color:var(--flame)}
  body.menuopen .navlinks .rec{border-color:rgba(255,255,255,.5);color:#fff}
  body.menuopen .navburger{color:#fff}
  body.menuopen .navburger span:nth-child(1){transform:translateY(4px) rotate(45deg)}
  body.menuopen .navburger span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
}

/* ---------- 下層ページのページヘッダ（ヒーロー代わりの帯） ---------- */
.pagehead{padding:clamp(40px,9vh,110px) var(--gut) 0;max-width:1240px;margin:0 auto;text-align:center}
.pagehead .label{color:var(--box);display:inline-block}
.pagehead h1{font-family:var(--display);font-weight:300;font-size:clamp(38px,8vw,104px);
  line-height:.98;letter-spacing:.03em;margin:14px 0 0;text-transform:uppercase}
.pagehead h1 em{font-style:italic;color:var(--box)}
.pagehead .jp{margin:18px auto 0;max-width:34em;font-size:clamp(13px,1.6vw,15.5px);color:var(--mid);
  line-height:2.15}
.pagehead::after{content:"";display:block;width:52px;height:2px;background:var(--flame);
  margin:26px auto 0}

/* パンくず */
.crumb{max-width:1240px;margin:22px auto 0;padding:0 var(--gut);
  font-family:var(--display);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--mid)}
.crumb a:hover{color:var(--box)}
.crumb span{color:var(--box)}

/* ---------- sections ---------- */
.sec{padding:clamp(70px,13vh,160px) var(--gut) 0;max-width:1240px;margin:0 auto}
.sec.tight{padding-top:clamp(40px,8vh,90px)}
.sechead{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;
  background:var(--stitch) bottom left repeat-x;
  padding-bottom:19px;margin-bottom:clamp(26px,5vh,54px)}
.sechead h2{font-family:var(--display);font-weight:300;font-size:clamp(28px,5vw,64px);
  line-height:1;margin:0;letter-spacing:.02em;text-transform:uppercase}
.sechead h2 em{font-style:italic;color:var(--box)}

/* 本文（読み物） */
.prose{max-width:34em;margin:0 auto;font-size:14.5px;line-height:2.5;color:#332c25}
.prose.center{text-align:center}
.prose p{margin:0 0 1.7em}
.prose .big{font-family:var(--display);font-size:clamp(20px,3.4vw,30px);color:var(--box);
  line-height:1.5;letter-spacing:.04em;margin:0 0 1.2em}
.figure{margin:clamp(30px,6vh,64px) auto;max-width:820px}
.figure img{width:100%;object-fit:cover}
.figure figcaption{margin-top:12px;text-align:center;font-family:var(--display);font-size:12px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--mid)}

/* 図版グリッド（刷り見本を台に置いたイメージ） */
.carre{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:clamp(12px,2vw,26px)}
.carre a,.carre .cell{display:block;position:relative;background:var(--paper)}
.carre .in{display:block;overflow:hidden;aspect-ratio:1/1;border:1px solid var(--line)}
.carre img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.19,1,.22,1)}
.carre a:hover img{transform:scale(1.06)}
.carre .n{display:block;margin-top:12px;font-family:var(--display);font-size:12px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--mid)}

/* items — 交互の大きな図版＋説明 */
.piece{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,5vw,80px);align-items:center;padding:clamp(30px,6vh,70px) 0;
  border-bottom:1px solid var(--line)}
.piece:first-child{border-top:1px solid var(--line)}
.piece:nth-child(even) .ph{order:2}
.piece .ph{overflow:hidden}
.piece .ph img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.19,1,.22,1)}
.piece:hover .ph img{transform:scale(1.045)}
.piece .no{font-family:var(--display);font-size:12px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--box);margin:0}
.piece h3{font-family:var(--body);font-weight:300;font-size:clamp(19px,2.8vw,32px);
  margin:14px 0 0;letter-spacing:.06em;line-height:1.5}
.piece h3 sup{font-size:.45em;vertical-align:super}
.piece p{margin:14px 0 0;font-size:13.5px;color:var(--mid);line-height:2.15;max-width:30em}
.piece .go{display:inline-block;margin-top:22px;font-family:var(--display);font-size:12px;
  letter-spacing:.28em;text-transform:uppercase;border-bottom:1px solid var(--box);
  padding-bottom:5px;transition:color .4s}
.piece .go:hover{color:var(--box)}
@media(max-width:800px){
  .piece{grid-template-columns:1fr;gap:18px}
  .piece:nth-child(even) .ph{order:0}
}

/* metier — 3列カード */
.metier{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3.6vw,54px)}
.metier img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center 30%}
.metier .n{font-family:var(--display);font-size:12px;letter-spacing:.3em;color:var(--box);margin:16px 0 0}
.metier h3{font-weight:400;font-size:clamp(16px,2vw,21px);margin:8px 0 0;letter-spacing:.06em}
.metier p{margin:10px 0 0;font-size:13px;color:var(--mid);line-height:2.1}
@media(max-width:760px){.metier{grid-template-columns:1fr}}

/* people */
.crew .shot{position:relative;line-height:0}
.crew .team{width:100%;aspect-ratio:2200/796;object-fit:cover}
.crew .cap{display:flex;flex-wrap:wrap;gap:8px 40px;justify-content:space-between;
  align-items:baseline;margin-top:20px}
.crew .cap p{margin:0;max-width:38em;font-size:13.5px;color:var(--mid);line-height:2.15}

/* boutiques */
.boutique{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,4.6vw,74px);align-items:center}
.boutique img{width:100%;aspect-ratio:4/3;object-fit:cover}
.boutique p{margin:0 0 24px;font-size:13.5px;color:var(--mid);line-height:2.15;max-width:31em}
.cities{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-wrap:wrap;gap:0 clamp(14px,2.4vw,30px)}
.cities li{font-family:var(--display);font-size:clamp(17px,2.4vw,27px);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);line-height:1.7}
.cities li+li::before{content:"·";color:var(--box);margin-right:clamp(14px,2.4vw,30px)}
@media(max-width:820px){.boutique{grid-template-columns:1fr}}

/* ボタン */
.btn{display:inline-block;font-family:var(--display);font-size:13px;letter-spacing:.3em;
  text-transform:uppercase;color:#fff;background:var(--box);padding:15px 36px;
  transition:background .45s;cursor:pointer;border:none}
.btn:hover{background:var(--flame)}
.btn.ghost{background:transparent;color:var(--box);border:1px solid var(--box)}
.btn.ghost:hover{background:var(--box);color:#fff}

/* Q&A アコーディオン風の並び */
.qa{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.qa .item{border-bottom:1px solid var(--line);padding:clamp(20px,4vh,34px) 0}
.qa .q{display:flex;gap:16px;font-family:var(--body);font-weight:400;font-size:clamp(15px,2vw,18px);
  letter-spacing:.04em;line-height:1.7;margin:0}
.qa .q::before{content:"Q";font-family:var(--display);color:var(--box);font-size:1.3em;line-height:1}
.qa .a{display:flex;gap:16px;margin:14px 0 0;font-size:13.5px;color:var(--mid);line-height:2.15}
.qa .a::before{content:"R";font-family:var(--display);color:var(--flame);font-size:1.3em;line-height:1}

/* 情報テーブル（企業情報など） */
.deftbl{max-width:860px;margin:0 auto;width:100%;border-collapse:collapse;font-size:13.5px}
.deftbl th,.deftbl td{text-align:left;vertical-align:top;padding:18px 8px;border-bottom:1px solid var(--line);
  line-height:2}
.deftbl th{width:30%;font-weight:400;color:var(--box);font-family:var(--display);letter-spacing:.14em;
  font-size:13px;white-space:nowrap}
.deftbl td{color:#332c25}
@media(max-width:600px){
  .deftbl th,.deftbl td{display:block;width:100%;padding:10px 0}
  .deftbl th{border-bottom:none;padding-bottom:2px}
  .deftbl td{padding-top:0;border-bottom:1px solid var(--line);padding-bottom:16px}
}

/* verse — 箱色の帯 */
.verse{margin-top:clamp(70px,13vh,160px);background:var(--box);color:#fff;
  padding:clamp(52px,10vh,120px) var(--gut);text-align:center}
.verse .label{color:rgba(255,255,255,.8)}
.verse .cred{font-family:var(--display);font-weight:300;font-size:clamp(24px,4.6vw,58px);
  line-height:1.4;margin:20px 0 6px;letter-spacing:.02em}
.verse .credjp{font-size:clamp(15px,2vw,20px);margin:0 0 30px;letter-spacing:.1em}
.verse .body{font-size:13.5px;line-height:2.6;margin:0;color:rgba(255,255,255,.92)}

/* 採用への誘い（下層ページ末尾に置ける小さめCTA） */
.recruitcta{margin-top:clamp(70px,13vh,160px);background:#221a12;color:#fff;
  padding:clamp(48px,9vh,104px) var(--gut);text-align:center}
.recruitcta .label{color:rgba(255,255,255,.72)}
.recruitcta h2{font-family:var(--display);font-weight:300;font-size:clamp(26px,4.6vw,52px);
  margin:16px 0 8px;letter-spacing:.03em}
.recruitcta p{font-size:13.5px;color:rgba(255,255,255,.82);margin:0 0 30px;line-height:2.2}
.recruitcta .btn{background:#fff;color:#221a12}
.recruitcta .btn:hover{background:var(--flame);color:#fff}

/* footer */
.foot{padding:clamp(50px,8vh,96px) var(--gut) 34px;max-width:1240px;margin:0 auto}
.footgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px)}
.foot .brand{color:var(--ink);font-size:clamp(19px,2.8vw,28px);display:block}
.sns{display:flex;gap:16px;margin-top:20px}
.sns img{width:26px;height:26px;object-fit:contain;opacity:.7;transition:opacity .4s}
.sns a:hover img{opacity:1}
.fmenu{list-style:none;margin:0;padding:0;columns:2;column-gap:26px;
  font-size:12.5px;line-height:2.6;color:var(--mid)}
.fmenu a:hover{color:var(--box)}
.fmenu .rec a{color:var(--box)}
.copy{margin:40px 0 0;font-family:var(--display);font-size:11.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--mid);text-align:center;
  border-top:1px solid var(--line);padding-top:22px}
@media(max-width:700px){.footgrid{grid-template-columns:1fr}.fmenu{columns:1}}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity 1s ease,transform 1s cubic-bezier(.19,1,.22,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto!important}
}