/* ============================================================
   NANAME INC. — v2 追加スタイル
   /style.css(v1・デザインの原本)を読み込んだ上に、v2で増えた要素だけを足す。
   色・タイポ・ホバー言語はv1をそのまま継承する。
   ============================================================ */

/* ---------- nav: 項目が7つになったので少し詰める ---------- */
header > nav{gap:clamp(14px,2.2vw,34px);}
header > nav a{font-size:12px;}
@media(max-width:1080px){header > nav{gap:clamp(12px,1.8vw,24px);}}

/* ---------- TOP hero: SHOWREELを最上部に全面で流す ---------- */
.reel-hero .hero-wall{background:#0E0E0D;}
.reel-hero .reel-still{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;filter:brightness(.72) saturate(.9);
}
.reel-bg{
  position:absolute;inset:0;overflow:hidden;
  opacity:0;transition:opacity 1.4s cubic-bezier(.2,0,.2,1);
}
.reel-bg.ready{opacity:1;}
/* iframeを画面いっぱいにカバーさせる(16:9を縦横どちらでも溢れさせる) */
.reel-bg iframe{
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  /* 常に16:9のまま画面をカバーする(比率が崩れるとVimeo側でレターボックスが出る) */
  width:max(100vw, calc(100svh * 16 / 9));
  height:max(100svh, calc(100vw * 9 / 16));
  border:0;pointer-events:none;
  filter:saturate(.9) brightness(.92);
}
/* リールは明るいカットが多いので、白タイポが常に読めるよう全面を一段落とす */
.reel-hero .hero-scrim{
  background:
    linear-gradient(180deg,rgba(10,10,9,.58),transparent 20%),
    linear-gradient(0deg,rgba(10,10,9,.74),transparent 54%),
    radial-gradient(125% 95% at 18% 82%,rgba(10,10,9,.55),transparent 62%),
    rgba(10,10,9,.32);
}
.reel-hero .hero-title{text-shadow:0 2px 44px rgba(10,10,9,.55);}
.reel-hero .hero-copy .paren{color:rgba(255,255,255,.78);text-shadow:0 1px 18px rgba(10,10,9,.7);}

.hero-sub{
  max-width:30em;margin-top:clamp(18px,2.6vh,30px);
  font-size:clamp(13px,1.35vw,15.5px);line-height:2.1;
  color:rgba(255,255,255,.82);
  text-shadow:0 1px 20px rgba(10,10,9,.6);
}
.hero-sub b{color:var(--paper);font-weight:600;}

/* 音つきで観るボタン */
.reel-cta{
  appearance:none;border:none;background:none;padding:0;cursor:pointer;text-align:left;
  position:absolute;right:var(--pad);bottom:clamp(56px,9vh,100px);z-index:3;
  display:flex;align-items:center;gap:16px;
  color:var(--paper);
  transition:translate .5s cubic-bezier(.2,0,.2,1);
}
.reel-cta:hover{translate:0 -4px;}
.reel-cta .disc{
  flex:none;width:clamp(52px,4.6vw,64px);aspect-ratio:1;border-radius:50%;
  background:var(--paper);display:grid;place-items:center;
  box-shadow:0 10px 40px rgba(0,0,0,.45);
  transition:scale .45s cubic-bezier(.2,0,.2,1);
}
.reel-cta:hover .disc{scale:1.1;}
.reel-cta .tri{
  width:0;height:0;margin-left:4px;
  border-left:14px solid var(--ink);
  border-top:9px solid transparent;border-bottom:9px solid transparent;
}
.reel-cta .lbl{display:grid;gap:5px;font-family:var(--font-sans);text-transform:uppercase;}
.reel-cta .lbl b{font-size:11px;font-weight:600;letter-spacing:.26em;}
.reel-cta .lbl i{font-style:normal;font-size:9.5px;letter-spacing:.2em;color:rgba(255,255,255,.66);}
@media(max-width:820px){
  .reel-cta{left:var(--pad);right:auto;bottom:clamp(18px,4vh,34px);}
  .hero-copy{bottom:clamp(120px,20vh,180px);}
}

/* ---------- TOP: フィロソフィー(ABOUTから移設) ---------- */
.philo{padding-top:clamp(90px,14vw,190px);}
.philo-inner{padding:0 var(--pad);}
.philo .paren{display:block;margin-bottom:clamp(24px,4vh,44px);}
.philo-lead{
  font-family:var(--font-jp-serif);font-weight:600;
  font-size:clamp(28px,5vw,64px);line-height:1.5;letter-spacing:.02em;
  max-width:16em;
}
.philo-lead em{
  font-family:var(--font-serif);font-style:italic;font-weight:400;
  letter-spacing:0;color:var(--ox);
}
.philo-body{
  margin-top:clamp(28px,4.5vh,52px);
  /* 幅の上限は設けない。折り返す位置はHTML側の<br>で決める */
  font-size:clamp(13.5px,1.4vw,15.5px);line-height:2.4;color:var(--muted);
}
.philo-body b{color:var(--ink);font-weight:600;}
.philo-more{
  display:inline-block;margin-top:clamp(24px,3.5vh,40px);
  font-family:var(--font-serif);font-style:italic;font-size:16px;
  border-bottom:1px solid var(--ink);padding-bottom:2px;
}

/* ---------- TOP: 入口設計(2つのドア) ---------- */
.doors{padding-top:clamp(90px,14vw,190px);}
.door-grid{
  display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--ink);
  margin:0 var(--pad);
}
@media(max-width:820px){.door-grid{grid-template-columns:1fr;}}
.door{
  display:block;position:relative;
  padding:clamp(30px,4vw,54px) clamp(6px,2vw,40px) clamp(34px,5vw,60px) 2px;
  border-bottom:1px solid var(--hairline);
}
.door:first-child{border-right:1px solid var(--hairline);}
@media(max-width:820px){.door:first-child{border-right:none;}}
.door .no{
  font-family:var(--font-serif);font-style:italic;
  font-size:13px;color:var(--muted);display:block;margin-bottom:18px;
}
.door h3{
  font-family:var(--font-sans);font-weight:600;text-transform:uppercase;
  font-size:clamp(26px,3.6vw,44px);letter-spacing:-.015em;line-height:1.02;
}
.door h3 .jp{
  display:block;margin-top:14px;
  font-family:var(--font-jp);font-size:13.5px;font-weight:600;letter-spacing:.1em;
  text-transform:none;color:var(--ink);
}
.door p{
  margin-top:16px;max-width:32em;
  color:var(--muted);font-size:13px;line-height:2.05;
}
.door .arr{
  position:absolute;right:clamp(6px,2vw,28px);top:clamp(30px,4vw,54px);
  font-family:var(--font-serif);font-style:italic;font-size:22px;
  transition:translate .5s cubic-bezier(.2,0,.2,1);
}
.door:hover .arr{translate:10px 0;}
.door:hover h3{
  background:linear-gradient(90deg,#1fd7c4,#ff36c6 33.3%,#536dff 66.7%,#1fd7c4);
  background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:inkflow 2.4s linear infinite;
}
.door:hover h3 .jp{-webkit-text-fill-color:var(--ink);color:var(--ink);}
.door-thumbs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
  margin-top:clamp(24px,3vw,36px);
}
.door-thumbs img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--paper-2);filter:saturate(.9);}
.door-key{
  margin-top:clamp(24px,3vw,36px);
  display:grid;gap:10px;
}
.door-key span{
  display:flex;gap:12px;align-items:baseline;
  font-size:12.5px;color:var(--muted);
}
.door-key span::before{
  content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--ox);translate:0 -3px;
}

/* ---------- WORKS: 絞り込みの並び ---------- */
.filter-groups{padding:0 var(--pad) clamp(24px,4vw,44px);display:grid;gap:14px;}
.filter-groups .fg{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;}
.filter-groups .fg > .paren{flex:none;min-width:74px;}
.filter-groups .fg button{
  appearance:none;border:none;background:none;cursor:pointer;
  font-family:var(--font-sans);font-size:10.5px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
  padding:4px 0;position:relative;transition:color .3s;
}
.filter-groups .fg button:hover{color:var(--ink);}
.filter-groups .fg button[aria-pressed="true"]{color:var(--ink);}
.filter-groups .fg button[aria-pressed="true"]::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);
}
.filter-groups .count{
  font-family:var(--font-serif);font-style:italic;font-size:12px;
  letter-spacing:.05em;text-transform:none;margin-left:.4em;color:var(--muted);
}
.filter-note{
  padding:0 var(--pad) clamp(24px,4vw,40px);
  font-size:12px;color:var(--muted);
}
.filter-note b{color:var(--ox);font-weight:600;}

/* 一覧は段違いにせず、各行の上端をそろえる */
.archive .work{translate:none;}

/* 作品カードのタグ表示(データが入ったときだけ出る) */
.work .tagrow{
  display:flex;flex-wrap:wrap;gap:6px;padding:8px 2px 0;
}
.work .tagrow span{
  font-family:var(--font-sans);font-size:9px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--hairline);padding:3px 8px;
}
.work-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(20px,3vh,32px);}
.work-tags span{
  font-family:var(--font-sans);font-size:9.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--hairline);padding:4px 10px;
}

/* ---------- 個別ワークス: 担当メンバー(指名導線) ---------- */
.work-crew{padding:clamp(60px,9vw,110px) var(--pad) 0;}
.wcrew-head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 26px;
  border-top:1px solid var(--ink);padding-top:clamp(22px,3vw,36px);
}
.wcrew-head .jp{color:var(--muted);font-size:12.5px;}
.wcrew-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:clamp(14px,2vw,26px);
  margin-top:clamp(22px,3vw,34px);
}
.wcrew-list a{
  display:block;padding:18px 2px;border-top:1px solid var(--hairline);
  transition:border-color .4s;
}
.wcrew-list a:hover{border-color:var(--ink);}
.wcrew-list b{
  display:block;
  font-family:var(--font-sans);font-weight:600;text-transform:uppercase;
  font-size:15px;letter-spacing:-.01em;
}
.wcrew-list span{display:block;margin-top:6px;font-size:11.5px;color:var(--muted);letter-spacing:.1em;}
.wcrew-list i{
  display:block;margin-top:8px;
  font-family:var(--font-sans);font-style:normal;font-size:9px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.wcrew-list a:hover b{
  background:linear-gradient(90deg,#1fd7c4,#ff36c6 33.3%,#536dff 66.7%,#1fd7c4);
  background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:inkflow 2.4s linear infinite;
}

/* ---------- MEMBERS: 一覧の追加要素 ---------- */
.member{grid-template-columns:minmax(60px,1fr) 6fr 3.4fr auto auto;}
@media(max-width:720px){.member{grid-template-columns:1fr auto;}}
.member .m-count{
  font-family:var(--font-sans);font-size:10.5px;font-weight:500;
  letter-spacing:.2em;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.member .m-count i{font-style:normal;letter-spacing:.2em;text-transform:uppercase;}
@media(max-width:720px){.member .m-count{grid-column:1;}}

/* 役割の内訳(クレジット実績の集計。推定はしていない) */
.mw-roles{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:0 2px clamp(18px,2.5vw,28px);
}
.mw-roles span{
  font-family:var(--font-sans);font-size:9.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--hairline);padding:4px 10px;
  display:inline-flex;gap:8px;align-items:baseline;
}
.mw-roles span i{
  font-family:var(--font-serif);font-style:italic;font-size:12px;
  letter-spacing:0;text-transform:none;color:var(--ink);
}
.mw-grid{grid-template-columns:repeat(4,1fr);}
@media(max-width:1000px){.mw-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:720px){.mw-grid{grid-template-columns:repeat(2,1fr);}}

/* ---------- MEMBERS: 個別ポートフォリオ ---------- */
.mp-hero h1{font-size:clamp(44px,9vw,140px);}
.mp-jpname{
  margin-top:clamp(14px,2vh,22px);
  font-size:clamp(14px,1.6vw,18px);letter-spacing:.2em;color:var(--muted);
}
.mp-hero .lede{margin-top:clamp(22px,3.5vh,38px);}
.mp-stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,3vw,44px);
  margin:clamp(46px,7vw,84px) var(--pad) 0;
  border-top:1px solid var(--ink);
  padding-top:clamp(22px,3.5vw,38px);
}
@media(max-width:560px){.mp-stats{grid-template-columns:1fr 1fr;}}
.mp-stats b{
  display:block;
  font-family:var(--font-sans);font-weight:500;
  font-size:clamp(34px,5vw,68px);letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.mp-stats span{
  display:block;margin-top:10px;
  font-family:var(--font-sans);font-size:9.5px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
}
.mp-roles{
  margin:clamp(34px,5vw,60px) var(--pad) 0;
  display:grid;gap:16px;
}
.mp-roles > div{display:flex;flex-wrap:wrap;gap:7px;}
/* 枠を付けるのは役職チップだけ。見出しの .paren にまで枠が回らないよう > div で限定する */
.mp-roles > div span{
  font-family:var(--font-sans);font-size:10px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--hairline);padding:5px 11px;
  display:inline-flex;gap:9px;align-items:baseline;
}
.mp-roles > div span i{
  font-family:var(--font-serif);font-style:italic;font-size:12.5px;
  letter-spacing:0;text-transform:none;color:var(--ink);
}
.mp-sec{padding-top:clamp(60px,9vw,120px);}
.mp-note{
  padding:0 var(--pad) clamp(24px,3.5vw,40px);
  font-size:12.5px;color:var(--muted);max-width:44em;
}
.mp-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2.4vw,32px) clamp(14px,2vw,26px);
  padding:0 var(--pad);
}
@media(max-width:1000px){.mp-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:720px){.mp-grid{grid-template-columns:repeat(2,1fr);}}

/* ---------- PRICE: 帯域の比較表(パッと比べられる形) ---------- */
.cmp-wrap{
  margin:0 var(--pad);
  overflow-x:auto;
  border-top:1px solid var(--ink);
}
.cmp{
  width:100%;min-width:940px;
  border-collapse:collapse;
  table-layout:fixed; /* 4帯域の列幅を揃える(揃えないと事例サムネの高さがズレる) */
  font-size:12.5px;
}
.cmp th,.cmp td{
  text-align:left;vertical-align:top;
  padding:16px clamp(10px,1.4vw,22px);
  border-bottom:1px solid var(--hairline);
}
.cmp thead th{
  padding-top:clamp(24px,3vw,36px);
  border-bottom:1px solid var(--ink);
}
.cmp th:first-child,.cmp td:first-child{
  padding-left:2px;width:132px;
  font-family:var(--font-sans);font-size:9.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;
}
.cmp .band-no{
  display:block;
  font-family:var(--font-serif);font-style:italic;font-size:12px;
  color:var(--muted);margin-bottom:10px;
}
.cmp .band-price{
  display:block;
  font-family:var(--font-sans);font-weight:500;
  font-size:clamp(24px,2.6vw,34px);letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.cmp .band-price small{
  font-size:.38em;font-weight:500;letter-spacing:.1em;color:var(--muted);margin-left:.5em;
}
.cmp .band-name{
  display:block;margin-top:12px;
  font-size:12.5px;font-weight:600;letter-spacing:.06em;line-height:1.7;
}
.cmp td{color:var(--muted);line-height:1.95;}
.cmp tbody tr:hover td{color:var(--ink);}
.cmp tbody tr:hover td:first-child{color:var(--muted);}
/* v1の .work は段違いレイアウト用に translate が入るので、表の中では無効化する */
.cmp .work{translate:none;}
.cmp .shot{display:block;overflow:hidden;margin-bottom:18px;}
.cmp .shot img{
  width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--paper-2);
  transition:transform 1.1s cubic-bezier(.2,0,.1,1);
}
.cmp .shot:hover img{transform:scale(1.04);}
.cmp .shot em{
  display:block;margin-top:7px;min-height:3.2em; /* 2行ぶん確保して段を揃える */
  font-family:var(--font-jp);font-style:normal;
  font-size:10.5px;line-height:1.6;color:var(--muted);
}
.cmp-scroll-hint{
  display:none;padding:12px var(--pad) 0;
  font-family:var(--font-sans);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
}
@media(max-width:900px){.cmp-scroll-hint{display:block;}}

.price-note{
  margin:clamp(24px,3.5vw,40px) var(--pad) 0;
  font-size:12px;color:var(--muted);max-width:46em;
}

/* PRICE → 発注ナビの誘導バー */
.xlink{
  margin:clamp(60px,9vw,110px) var(--pad) 0;
  border-top:1px solid var(--ink);
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
  padding:clamp(26px,3.5vw,44px) 2px;
}
@media(max-width:680px){.xlink{grid-template-columns:1fr;}}
.xlink h3{
  font-family:var(--font-sans);font-weight:600;text-transform:uppercase;
  font-size:clamp(20px,2.6vw,32px);letter-spacing:-.01em;line-height:1.1;
}
.xlink p{margin-top:12px;color:var(--muted);font-size:12.5px;max-width:38em;}
.xlink .go{
  font-family:var(--font-serif);font-style:italic;font-size:clamp(16px,2vw,22px);
  border-bottom:1px solid var(--ink);padding-bottom:3px;white-space:nowrap;
}
.xlink:hover .go{color:var(--ox);border-color:var(--ox);}

/* ---------- 発注ナビ(GUIDE) ---------- */
.navi{padding:clamp(24px,3.5vw,44px) var(--pad) 0;}
.navi-q{
  border-top:1px solid var(--hairline);
  padding:clamp(26px,3.6vw,44px) 0;
}
/* 直前の .page-rule が罫線の役目をするので、1問目に border-top は引かない(二重線になる) */
.navi-q:first-child{border-top:none;}
.navi-q > .paren{display:block;margin-bottom:14px;}
.navi-q h3{
  font-size:clamp(16px,2vw,22px);font-weight:700;letter-spacing:.06em;line-height:1.7;
  margin-bottom:clamp(18px,2.4vw,28px);
}
.navi-q h3 .opt{
  font-family:var(--font-sans);font-weight:500;font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  margin-left:14px;
}
.navi-opts{display:flex;flex-wrap:wrap;gap:8px;}
.navi-opts button{
  appearance:none;cursor:pointer;
  background:none;border:1px solid var(--hairline);
  padding:11px 18px;
  font-family:var(--font-jp);font-size:12.5px;letter-spacing:.06em;color:var(--ink);
  transition:border-color .3s,background .3s,color .3s;
}
.navi-opts button:hover{border-color:var(--ink);}
.navi-opts button[aria-pressed="true"]{
  background:var(--ink);border-color:var(--ink);color:var(--paper);
}
.navi-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;
  padding:clamp(30px,4vw,48px) 0 0;
}
.navi-run{
  appearance:none;cursor:pointer;border:none;
  background:var(--ink);color:var(--paper);
  padding:16px 34px;
  font-family:var(--font-sans);font-size:11px;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;
  transition:background .35s;
}
.navi-run:hover{background:var(--ox);}
.navi-run[disabled]{opacity:.3;cursor:default;}
.navi-reset{
  appearance:none;background:none;border:none;cursor:pointer;
  font-family:var(--font-serif);font-style:italic;font-size:14px;color:var(--muted);
  border-bottom:1px solid var(--hairline);padding-bottom:2px;
}
.navi-reset:hover{color:var(--ink);border-color:var(--ink);}

/* 診断結果 */
.navi-result{margin-top:clamp(60px,9vw,110px);}
.navi-result[hidden]{display:none;}
.nr-head{
  border-top:1px solid var(--ink);
  padding:clamp(28px,4vw,48px) var(--pad) 0;
}
.nr-head .paren{display:block;margin-bottom:18px;}
.nr-head h2{
  font-family:var(--font-jp);font-weight:700;
  font-size:clamp(20px,3vw,34px);line-height:1.6;letter-spacing:.04em;
  max-width:22em;
}
.nr-head h2 em{
  font-family:var(--font-serif);font-style:italic;font-weight:400;
  color:var(--ox);letter-spacing:0;
}
.nr-cards{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.4vw,32px);
  padding:clamp(30px,4vw,50px) var(--pad) 0;
}
@media(max-width:760px){.nr-cards{grid-template-columns:1fr;}}
.nr-card{border-top:1px solid var(--hairline);padding-top:18px;}
.nr-card .paren{display:block;margin-bottom:14px;}
.nr-card b{
  display:block;
  font-family:var(--font-sans);font-weight:500;
  font-size:clamp(24px,3vw,38px);letter-spacing:-.03em;line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.nr-card b small{font-size:.4em;font-weight:500;letter-spacing:.1em;color:var(--muted);margin-left:.5em;}
.nr-card p{margin-top:12px;font-size:12.5px;color:var(--muted);line-height:1.95;}
.nr-warn{
  margin:clamp(28px,4vw,44px) var(--pad) 0;
  border-left:2px solid var(--ox);
  padding:4px 0 4px 18px;
  font-size:12.5px;line-height:2;color:var(--ink);
}
.nr-warn b{color:var(--ox);font-weight:600;}
.nr-sec{padding:clamp(50px,7vw,90px) var(--pad) 0;}
.nr-sec > .paren{display:block;margin-bottom:20px;}
.nr-flow{display:grid;gap:0;border-top:1px solid var(--hairline);}
.nr-flow li{
  display:grid;grid-template-columns:52px 1fr auto;gap:clamp(12px,2vw,28px);
  align-items:baseline;
  padding:14px 2px;border-bottom:1px solid var(--hairline);
  font-size:12.5px;color:var(--muted);
}
.nr-flow li b{
  font-family:var(--font-sans);font-weight:500;font-size:15px;
  letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;
}
.nr-flow li span{color:var(--ink);font-weight:600;font-size:13px;letter-spacing:.05em;}
.nr-flow li i{
  font-family:var(--font-sans);font-style:normal;font-size:9px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.nr-flow li.skip{opacity:.42;}
.nr-flow li.skip i{color:var(--ox);}
.nr-works{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2vw,26px);
}
@media(max-width:720px){.nr-works{grid-template-columns:1fr 1fr;}}
.nr-cta{
  margin:clamp(50px,7vw,90px) var(--pad) 0;
  border-top:1px solid var(--ink);
  padding-top:clamp(26px,3.5vw,44px);
  display:grid;gap:16px;justify-items:start;
}
.nr-cta a{
  font-family:var(--font-sans);font-size:11px;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);padding:16px 34px;
  transition:background .35s;
}
.nr-cta a:hover{background:var(--ox);}
.nr-cta p{font-size:12px;color:var(--muted);}

/* ---------- GUIDE: 発注者目線の工程表 ---------- */
.stepv{
  /* 中身は5つ(番号 / 見出し / You / Naname / 補足)。4列だと Naname が狭くなり
     補足が次の行に落ちるため、5列で指定する */
  display:grid;grid-template-columns:minmax(80px,0.8fr) 2.2fr 3.7fr 3.7fr 1.1fr;
  gap:clamp(16px,2.6vw,40px);
  padding:clamp(30px,4vw,52px) var(--pad);
  border-bottom:1px solid var(--hairline);
  align-items:baseline;
}
@media(max-width:900px){.stepv{grid-template-columns:1fr;gap:12px;}}
.stepv .no{
  font-family:var(--font-sans);font-weight:500;
  font-size:clamp(32px,4.4vw,60px);letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.stepv .no i{
  font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:.3em;
  color:var(--muted);letter-spacing:.1em;margin-left:.5em;
}
.stepv h3{font-size:15.5px;font-weight:700;letter-spacing:.1em;margin-bottom:10px;}
.stepv h3 .en{
  display:block;margin-top:6px;
  font-family:var(--font-sans);font-weight:500;font-size:9.5px;
  color:var(--muted);letter-spacing:.28em;text-transform:uppercase;
}
.stepv .you,.stepv .we{font-size:12.5px;line-height:2;color:var(--muted);}
.stepv .lbl{
  display:block;margin-bottom:8px;
  font-family:var(--font-sans);font-size:9px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
}
.stepv .you .lbl{color:var(--ox);}
.stepv .we .lbl{color:var(--muted);}
.stepv .aside{
  font-family:var(--font-sans);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);text-align:right;
}
@media(max-width:900px){.stepv .aside{text-align:left;}}

/* ---------- CONTACT: 発注ナビの結果引き継ぎ ---------- */
.brief{
  margin:clamp(40px,6vw,70px) var(--pad) 0;
  border:1px solid var(--ink);
  padding:clamp(24px,3.4vw,40px);
}
.brief[hidden]{display:none;}
.brief > .paren{display:block;margin-bottom:18px;}
.brief h3{
  font-family:var(--font-jp);font-weight:700;font-size:16px;
  letter-spacing:.06em;margin-bottom:20px;
}
.brief dl{display:grid;gap:12px;}
.brief dl > div{
  display:grid;grid-template-columns:minmax(120px,1fr) 3fr;gap:16px;
  padding-bottom:12px;border-bottom:1px solid var(--hairline);
  align-items:baseline;
}
@media(max-width:560px){.brief dl > div{grid-template-columns:1fr;gap:4px;}}
.brief dt{
  font-family:var(--font-sans);font-size:9.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.brief dd{font-size:13px;letter-spacing:.04em;}
.brief .brief-note{margin-top:20px;font-size:12px;color:var(--muted);}

/* ---------- COMPANY ---------- */
.company-info{
  display:grid;grid-template-columns:1fr;
  /* 直前の .page-rule が罫線の役目をするので、ここでは border-top を引かない(二重線になる) */
  margin:clamp(30px,4.5vw,56px) var(--pad) clamp(60px,9vw,110px);
}
.company-info > div{
  display:grid;grid-template-columns:minmax(150px,1fr) 4fr;
  gap:clamp(16px,3vw,44px);
  padding:clamp(18px,2.4vw,28px) 2px;
  border-bottom:1px solid var(--hairline);
  align-items:baseline;
}
@media(max-width:560px){.company-info > div{grid-template-columns:1fr;gap:6px;}}
.company-info b{
  font-family:var(--font-sans);font-size:9.5px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
}
.company-info span{font-size:13px;line-height:2;}

/* ---------- 下層ページのCTA: キャッチコピーを置かず、連絡先を主役にする ----------
   「各ページに無理にコピーを入れない」(2026-08-18 松岡さん)。
   巨大なセリフ体コピーはTOPの1箇所だけに絞る。 */
.cta-plain{
  padding:clamp(90px,14vw,180px) var(--pad);
  text-align:center;
}
.cta-plain .paren{display:block;margin-bottom:clamp(22px,3.5vh,40px);}
.cta-plain .mail{
  display:inline-block;
  font-family:var(--font-sans);font-weight:600;text-transform:lowercase;
  font-size:clamp(24px,5vw,62px);letter-spacing:-.03em;line-height:1;
}
.cta-plain .mail span{
  border-bottom:2px solid var(--ink);padding-bottom:.08em;
  transition:border-color .4s;
}
.cta-plain .mail:hover span{
  background:linear-gradient(90deg,#1fd7c4,#ff36c6 33.3%,#536dff 66.7%,#1fd7c4);
  background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:inkflow 2.4s linear infinite;
  border-color:#536dff;
}
.cta-plain .jp{
  display:block;margin:clamp(24px,3.5vh,40px) auto 0;
  max-width:36em;color:var(--muted);font-size:13px;line-height:2.05;
}

/* ---------- 共通の小物 ---------- */
.tmp{
  font-family:var(--font-sans);font-size:9px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ox);
  border:1px solid currentColor;padding:2px 7px;margin-left:10px;
  white-space:nowrap;vertical-align:.15em;
}

/* ---------- MEMBERS一覧の出現 ----------
   行ごとに罫線(border-bottom)があるので、上下に動きながら出てくると
   隣の行の罫線とずれて一瞬二重線に見える。移動をやめてフェードだけにする。 */
.members .rv{translate:none;}

/* ---------- 規約系ページ(プライバシーポリシー) ---------- */
.legal{
  margin:clamp(30px,4.5vw,56px) var(--pad) clamp(60px,9vw,110px);
  max-width:52em;
}
.legal h2{
  font-size:clamp(17px,2vw,22px);font-weight:700;letter-spacing:.08em;line-height:1.7;
  margin:clamp(46px,7vw,80px) 0 clamp(18px,2.5vw,28px);
  padding-bottom:14px;border-bottom:1px solid var(--ink);
}
.legal h2:first-child{margin-top:0;}
.legal p{
  font-size:13.5px;line-height:2.2;color:var(--muted);
  margin-bottom:1.2em;
}
.legal p:last-child{margin-bottom:0;}
.legal-sign{
  display:grid;gap:6px;justify-items:end;
  margin:clamp(28px,4vw,44px) 0 0;
  font-size:12.5px;color:var(--ink);letter-spacing:.06em;
}
/* v1の section{padding:clamp(90px,14vw,190px) 0 0} が効いてしまうので打ち消す */
.legal-sec{margin-top:clamp(30px,4vw,48px);padding-top:0;}
.legal-sec h3{
  display:flex;gap:12px;
  font-size:14px;font-weight:700;letter-spacing:.08em;line-height:1.8;
  margin-bottom:14px;
}
.legal-sec h3 i{
  flex:none;
  font-family:var(--font-serif);font-style:italic;font-weight:400;
  font-size:16px;color:var(--ox);letter-spacing:0;
}
.legal-lead{
  color:var(--ink)!important;font-weight:600;font-size:13px!important;
  margin-bottom:.6em!important;
}
.legal ul{
  margin:0 0 1.4em;display:grid;gap:8px;
}
.legal li{
  display:flex;gap:12px;align-items:baseline;
  font-size:13px;line-height:2.05;color:var(--muted);
}
.legal li::before{
  content:"";flex:none;width:4px;height:4px;border-radius:50%;
  background:var(--hairline);translate:0 -4px;
}
.legal-back{
  display:inline-block;margin-top:clamp(40px,6vw,70px);
  font-family:var(--font-serif);font-style:italic;font-size:15px;
  border-bottom:1px solid var(--ink);padding-bottom:2px;
}
.legal-back:hover{color:var(--ox);border-color:var(--ox);}

/* COMPANY下部のプライバシーポリシー導線 */
.company-legal{
  margin:0 var(--pad) clamp(70px,10vw,120px);
  padding-top:clamp(22px,3vw,34px);
  border-top:1px solid var(--hairline);
}
.company-legal a{
  font-family:var(--font-sans);font-size:10.5px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--hairline);padding-bottom:4px;
  transition:color .35s,border-color .35s;
}
.company-legal a:hover{color:var(--ink);border-color:var(--ink);}

/* ---------- 日本語長文の折り返し ----------
   句点で改行する方針にしたので、幅で勝手に折り返させない。
   (画面が狭いときは通常どおり画面幅で折り返す) */
.cta-plain .jp{max-width:none;}
.page-hero .lede{max-width:none;}
.xlink p{max-width:none;}
.mp-note{max-width:none;}
.contact-note{max-width:none;}
.price-note{max-width:none;}
.door p{max-width:none;}
/* 規約・FAQの本文は1文が長いので、上限は残しつつ広げる */
.faq .a{max-width:66em;}
.legal{max-width:70em;}