/* =========================================================
   トップページのレイアウト。12列の板にタイルを敷き詰める。
   角丸は持たない。面の境目は罫と余白だけで作る（映像のタイルだけ例外）。
   色・書体・単位・リビールは core-x.css。
   ========================================================= */

.pat-e{
  --gap: clamp(8px, .9vw, calc(14 * var(--px)));
  --barh: calc(58 * var(--px));

  /* 本文の和文はここで差し替える。小さい級数の紺地でも縦画が痩せず、
     Fraunces と並べても字面が揃う。 */
  --f-jp:'IBM Plex Sans JP','Zen Kaku Gothic New',sans-serif;
}

/* ---- 上部バー ----
   1fr auto 1fr。両脇の桁を同じ幅で取ることでロゴが画面の中央に立つ。
   space-between だと左右の中身の幅の差だけロゴがずれる。
   z-index はオーバーレイ（.menu = 900）より上。開いている間もロゴと閉じるボタンを残す。 */
.bar{position:fixed;top:0;left:0;right:0;z-index:901;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:calc(14 * var(--px));
  height:var(--barh);padding:0 clamp(14px,2vw,calc(28 * var(--px)));
  background:rgba(0,18,61,.86);backdrop-filter:blur(12px);color:var(--fg);   /* 紙地のページ（signage）で本文の紺を継がない */
  border-bottom:1px solid var(--rule)}
.bar-brand{grid-column:2;justify-self:center;display:block;padding:calc(6 * var(--px)) 0}
.bar-brand img{width:calc(196 * var(--px));min-width:112px;height:auto;display:block}

/* 章へのナビ。下線が伸びて現在地を示す（.on は main-index.js が付ける） */
.bar-nav{grid-column:1;display:flex;align-items:center;
  gap:clamp(14px,1.7vw,calc(32 * var(--px)))}
.bar-nav a{position:relative;white-space:nowrap;font-size:var(--t-small);letter-spacing:.08em;
  color:var(--fg-soft);padding:calc(5 * var(--px)) 0;transition:color .35s var(--ease-out-quad)}
.bar-nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;
  transition:width .45s var(--ease-out-quart)}
.bar-nav a.on{color:var(--fg)}
.bar-nav a.on::after{width:100%}
@media (hover:hover) and (pointer:fine){
  .bar-nav a:hover{color:var(--fg)}
  .bar-nav a:hover::after{width:100%}
}

.bar-right{grid-column:3;justify-self:end;display:flex;align-items:center;gap:calc(10 * var(--px))}
.bar-cta{font-size:var(--t-small);letter-spacing:.06em;padding:calc(9 * var(--px)) calc(18 * var(--px));
  border:1px solid var(--rule-strong);white-space:nowrap;transition:background .3s,color .3s,border-color .3s}
@media (hover:hover) and (pointer:fine){ .bar-cta:hover{background:var(--fg);color:var(--ink);border-color:var(--fg)} }

/* ハンバーガーは core-x で fixed なので、バーの中に収める */
.bar .menu-btn{position:static;display:none;padding:calc(7 * var(--px));gap:5px}
.bar .menu-btn span{width:22px}
.menu-btn[aria-expanded="true"] span{background:var(--fg)}
/* ナビが4つ並ぶと両脇の桁が釣り合わなくなる幅で、オーバーレイに切り替える */
@media (max-width:900px){
  .bar-nav{display:none}
  .bar .menu-btn{display:flex}
}
@media (max-width:640px){
  /* 両脇の桁の幅は中身で決まるので、ロゴを小さくして中央を保つ */
  .bar-brand img{width:calc(132 * var(--px));min-width:96px}
  .bar-cta{padding:calc(8 * var(--px)) calc(12 * var(--px))}
}
@media (max-width:420px){ .bar-cta{display:none} }   /* Contact はオーバーレイの中にある */

/* 章の頭がバーの下に潜らないように、飛び先に逃げを持たせる */
#service,#works,#member,#company,#contact{scroll-margin-top:calc(var(--barh) + var(--gap))}

/* ---- 板 ---- */
.board{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);grid-auto-flow:row dense;
  padding:calc(var(--barh) + var(--gap)) var(--gap) var(--gap);
  max-width:calc(1520 * var(--px));margin:0 auto}
.tile{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--rule);
  padding:clamp(16px,1.8vw,calc(30 * var(--px)))}
figure.tile{padding:0}
/* 枠も地も持たないタイル（板の上に直接置く） */
.tile--bare{background:transparent;border-color:transparent}

/* ---- 章の見出し ----
   英字を左、和文を右に振り、下に細罫を1本。枠の有無にかかわらずこの型で統一する。 */
.tile-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:.2em 1em;
  width:100%;padding-bottom:clamp(14px,2vh,calc(22 * var(--px)));
  border-bottom:1px solid var(--rule);
  margin-bottom:clamp(16px,1.8vw,calc(28 * var(--px)))}
.tile-h{font-family:var(--f-en);font-weight:300;line-height:1.02;letter-spacing:-.01em;color:var(--fg);
  font-size:clamp(30px,19px + 2.2vw,calc(64 * var(--px)))}
.tile-h--sm{font-size:clamp(22px,15px + 1.2vw,calc(38 * var(--px)));line-height:1.15}
.tile-sub{font-family:var(--f-jp);font-weight:500;font-size:var(--t-label);letter-spacing:.14em;color:var(--fg-soft)}

/* ---- 配置（12列） ----
   角丸を持たない板の唯一の例外。映像だけ大きめのRで抜き、面ではなく窓に見せる。 */
.tile--hero{grid-column:span 8;min-height:calc(420 * var(--px));padding:0;display:flex;
  border-radius:clamp(18px,2.6vw,calc(48 * var(--px)))}
/* タグラインは面の中央。映像の隣で負けない大きさにする */
.tile--word{grid-column:span 4;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center}
.tile--mq{grid-column:span 12;padding:calc(22 * var(--px)) 0;border-left:0;border-right:0;background:transparent}
/* 行ごとに12を使い切る（8+4 / 7+5 / 6+6 / 12）。
   合計が11などになると、その行だけ右端がへこんで見える。 */
.tile--news{grid-column:span 12}
.tile--read{grid-column:span 6}
.tile--proc{grid-column:span 6}
.tile--skl{grid-column:span 12}
.tile--sigcta{grid-column:span 12}
.tile--svc2{grid-column:span 12}
/* 図は面の中央に据え、上下の余白は詰める */
.tile--dia{grid-column:span 12;display:flex;flex-direction:column;justify-content:center;
  overflow:visible;    /* 枠を持たないので、波紋が板の上まで広がってよい */
  padding:clamp(20px,3vh,calc(44 * var(--px))) 0}
.tile--sec{grid-column:span 12}
.tile--ig{grid-column:span 12}
.tile--work{grid-column:span 8;padding:0}
.tile--shots{grid-column:span 4;display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);padding:var(--gap)}
.tile--mem{grid-column:span 12}
.tile--comp{grid-column:span 5}
.tile--land{grid-column:span 7;min-height:calc(240 * var(--px))}
.tile--map{grid-column:span 12;padding:0}
.tile--contact{grid-column:span 12}

@media (max-width:1100px){
  .tile--hero,.tile--work,.tile--mem,.tile--comp,.tile--land{grid-column:span 12}
  .tile--read,.tile--proc{grid-column:span 12}
  .tile--shots{grid-column:span 12}
  .tile--word{grid-column:span 12}
  .tile--dia .st{max-width:calc(280 * var(--px))}
  /* 全幅に戻るので、進め方は2列に開く（1列のままだと縦に間延びする） */
  .tile--proc ol{grid-template-columns:repeat(2,minmax(0,1fr));
    gap:calc(16 * var(--px)) calc(28 * var(--px))}
}
@media (max-width:760px){ .tile--proc ol{grid-template-columns:1fr} }

/* 横長に切ると看板の上下が落ちる。社名と足元の建物が残る位置に寄せる */
.tile--land img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 54%}

/* ---- お知らせ ----
   実績として1ページ立てるほどではない仕事を、日付・担当・出典で置く。
   列数は件数に追従する（1件あたりが痩せすぎない幅で折る）。 */
.news-list{list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(calc(400 * var(--px)),1fr));gap:var(--gap)}
/* 外のタイルに枠があるので、中の項目は枠でなく地の濃さで分ける。
   1件を開くと、その項目だけが下へ伸びる（隣は引き伸ばさない） */
.news-list{align-items:start}
.news-list > li{background:rgba(245,242,236,.07)}
.news-item > summary{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1fr);
  list-style:none;cursor:pointer}
.news-item > summary::-webkit-details-marker{display:none}
.news-item > summary:focus-visible{outline:1px solid var(--fg);outline-offset:-1px}
.news-fig{position:relative;overflow:hidden;min-height:calc(180 * var(--px))}
.news-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease-out-quart)}
.news-body{display:flex;flex-direction:column;gap:calc(10 * var(--px));
  padding:clamp(16px,1.8vw,calc(24 * var(--px)))}
.news-meta{display:flex;flex-wrap:wrap;align-items:center;gap:calc(6 * var(--px)) calc(12 * var(--px))}
/* 「2026年6月〜」のように和文が混じる。Fraunces に日本語は無いので、
   font-synthesis を止めないと年・月だけ機械的に傾いた字になる。 */
.news-meta time{font-family:'Fraunces',var(--f-jp);font-style:italic;
  font-synthesis-style:none;-webkit-font-synthesis:none;
  font-size:var(--t-label);letter-spacing:.06em;color:var(--fg-soft)}
.news-tags{display:flex;flex-wrap:wrap;gap:calc(6 * var(--px))}
@media (max-width:900px){ .news-list{grid-template-columns:1fr} }
.news-tags i{font-style:normal;font-size:var(--t-label);letter-spacing:.1em;color:var(--ink);
  background:var(--fg);padding:calc(3 * var(--px)) calc(10 * var(--px))}
.news-body strong{font-weight:600;letter-spacing:.03em;line-height:1.7;
  font-size:clamp(13px,11.6px + .34vw,calc(17 * var(--px)))}

/* 開閉の目印。＋が開くと−になる（縦棒だけ畳む） */
.news-more-btn{margin-top:auto;display:flex;align-items:center;gap:.7em;
  font-size:var(--t-label);letter-spacing:.12em;color:var(--fg-soft);transition:color .3s}
.news-pm{position:relative;width:calc(11 * var(--px));height:calc(11 * var(--px));flex:none}
.news-pm::before,.news-pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:currentColor;transition:transform .45s var(--ease-out-quart)}
.news-pm::after{transform:rotate(90deg)}
.news-item[open] .news-pm::after{transform:rotate(0)}
.news-item[open] .news-more-btn{color:var(--fg)}
@media (hover:hover) and (pointer:fine){
  .news-item > summary:hover .news-fig img{transform:scale(1.04)}
  .news-item > summary:hover .news-more-btn{color:var(--fg)}
}

/* 詳細。対応するブラウザでは高さをなめらかに開く（他は即座に開く） */
.news-item{interpolate-size:allow-keywords}
.news-item::details-content{height:0;overflow:hidden;
  transition:height .55s var(--ease-out-quart),content-visibility .55s allow-discrete}
.news-item[open]::details-content{height:auto}
.news-detail-in{border-top:1px solid var(--rule);
  padding:clamp(18px,2vw,calc(28 * var(--px))) clamp(16px,1.8vw,calc(24 * var(--px)))}
.news-detail p{font-size:var(--t-small);line-height:2.05;letter-spacing:.04em;
  color:rgba(245,242,236,.8);text-align:justify;line-break:strict}
.news-detail p + p{margin-top:.9em}
.news-links{list-style:none;margin-top:clamp(16px,2vh,calc(24 * var(--px)));border-top:1px solid var(--rule)}
.news-links a{display:flex;align-items:center;justify-content:space-between;gap:1em;
  padding:calc(12 * var(--px)) 0;border-bottom:1px solid var(--rule);
  font-size:var(--t-small);letter-spacing:.06em;color:var(--fg);transition:color .3s}
.news-links .ext{flex:none;color:var(--fg-soft);transition:transform .45s var(--ease-out-quart),color .3s}
@media (hover:hover) and (pointer:fine){
  .news-links a:hover .ext{transform:translate(3px,-3px);color:var(--fg)}
}
@media (max-width:520px){
  .news-item > summary{grid-template-columns:1fr}
  .news-fig{min-height:calc(200 * var(--px));aspect-ratio:16/9}
}

/* 映像タイル */
.tile--hero .tile-media{position:absolute;inset:0}
.tile--hero video{width:100%;height:100%;object-fit:cover}
.tile-copy{position:relative;z-index:2;width:min(72%, calc(620 * var(--px)));margin:auto;
  padding:clamp(28px,3.6vw,calc(64 * var(--px)));filter:drop-shadow(0 6px 30px rgba(0,0,0,.5))}

/* 上のマーキー。フッターの1本と対にする */
.tile--mq .mq-track span{font-family:var(--f-logo);font-weight:900;line-height:1.06;color:var(--fg);opacity:.16;
  font-size:calc(76 * var(--px))}

/* タグライン */
.word{font-weight:700;letter-spacing:.08em;line-height:1.4;
  font-size:clamp(36px,22px + 3.2vw,calc(72 * var(--px)))}
@media (max-width:1100px){
  /* 全幅に回るので改行せず1行で置く。10字の字送りは級数の約10.8倍なので、
     版面から級数を逆算する。11.2 で割っているのは書体差で溢れないための余裕。 */
  .word{font-size:min(calc((100vw - 56px) / 11.2), 92px);white-space:nowrap}
  .word br{display:none}
}

/* ---- 理念 ----
   面は12カラムでも、本文は1段・約40字の幅に絞る。
   上下の余白は入れない。Process と横に並ぶので、下げると見出しの高さがずれる。 */
.read-inner{max-width:calc(680 * var(--px));margin:0 auto}
.read-body{display:grid;gap:2em}
.read-body p{font-size:clamp(13.5px,1.2vw,calc(16.5 * var(--px)));line-height:2.35;letter-spacing:.05em;
  color:rgba(245,242,236,.82);
  text-align:justify;line-break:strict;word-break:normal;overflow-wrap:normal}

/* ---- Service の図。進捗は main-index.js が --p と inline style で流す ---- */
.st{max-width:calc(400 * var(--px));width:100%;margin:0 auto}
.st-svg{display:block;width:100%;height:auto;overflow:visible}
.st-wire{stroke:var(--fg);stroke-width:1.2;fill:none;stroke-linejoin:round;stroke-linecap:round;
  vector-effect:non-scaling-stroke}
.js-anim .st-wire{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0))}
.st-facet{fill:var(--fg);fill-opacity:.5}
.js-anim .st-facet{fill-opacity:0}
.st-core{fill:var(--fg)}
.st-ripples circle{fill:none;stroke:var(--fg);stroke-width:1.4;vector-effect:non-scaling-stroke;opacity:0}
.st.is-rippling .st-ripples circle{animation:ripple 4.2s var(--ease-out-quad) infinite;
  animation-delay:calc(var(--i,0) * .7s)}
/* 波紋は viewBox の外まで広がる。.tile--dia を overflow:visible にしてあるので切れない */
@keyframes ripple{ from{r:86px;opacity:.5} to{r:214px;opacity:0} }

/* ---- できること。01と02は対なので左右に並べる ---- */
.tile--svc2{padding:clamp(28px,5vh,calc(64 * var(--px))) clamp(16px,1.8vw,calc(30 * var(--px)))}
.svc2-kicker{margin-bottom:clamp(22px,3.4vh,calc(40 * var(--px)))}
.svc2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,3vw,calc(56 * var(--px)));width:100%}
@media (max-width:760px){ .svc2{grid-template-columns:1fr;gap:clamp(26px,4vh,calc(44 * var(--px)))} }
.svc2-item{display:grid;gap:clamp(10px,1.6vh,calc(16 * var(--px)));
  padding-top:calc(22 * var(--px));border-top:1px solid var(--rule)}
.svc2-num{font-style:italic;font-weight:300;line-height:1;color:var(--fg-faint);
  font-size:clamp(28px,3.2vw,calc(46 * var(--px)))}
.svc2-ttl{font-weight:700;letter-spacing:.06em;line-height:1.45;color:var(--fg);
  font-size:clamp(21px,2.6vw,calc(36 * var(--px)))}
.svc2-txt{font-weight:500;letter-spacing:.04em;color:var(--fg-soft);
  font-size:clamp(13px,1.05vw,calc(15 * var(--px)));line-height:2.1}
/* 改行は広い画面用に手で入れてあるので、狭い画面では自然折り返しに任せる */
@media (max-width:680px){ .svc2-txt br{display:none} }

/* ---- 職能：ジャンル別の一覧 ----
   1項目1枠の独立したセルにして、どこまでが1つの仕事なのかを見えるようにする。
   分類（左）と、その分類が抱える仕事（右）。行の境目は罫だけで作る。 */
.tile--skl{padding:clamp(20px,3.4vh,calc(44 * var(--px))) clamp(16px,1.8vw,calc(30 * var(--px)))}
.skl{list-style:none;width:100%;max-width:calc(1220 * var(--px));margin:0 auto}
.skl-row{display:grid;grid-template-columns:calc(230 * var(--px)) minmax(0,1fr);
  gap:clamp(16px,2vw,calc(40 * var(--px)));
  padding:clamp(20px,3vh,calc(34 * var(--px))) 0;border-top:1px solid var(--rule)}
.skl-row:last-child{border-bottom:1px solid var(--rule)}
/* 分類名は英字を大きく、和文を小さく。章見出し（.tile-head）と同じ組み方の縮小版 */
.skl-key{align-content:start}
.skl-en{font-weight:300;line-height:1.1;letter-spacing:-.01em;color:var(--fg);
  font-size:clamp(19px,14px + .9vw,calc(30 * var(--px)))}
.skl-ja{margin-top:calc(6 * var(--px));
  font-size:var(--t-label);letter-spacing:.16em;color:var(--fg-soft)}
/* セルは中身の幅。等幅のグリッドに入れると、9個と4個で最終行に空きマスが出る */
.skl-items{list-style:none;display:flex;flex-wrap:wrap;gap:calc(8 * var(--px))}
.skl-items li{border:1px solid var(--rule);
  padding:calc(11 * var(--px)) calc(18 * var(--px));
  font-weight:500;font-size:var(--t-small);letter-spacing:.06em;color:var(--fg);
  white-space:nowrap}
@media (max-width:680px){
  .skl-row{grid-template-columns:1fr;gap:clamp(12px,2.2vh,calc(18 * var(--px)))}
  .skl-items li{padding:calc(9 * var(--px)) calc(14 * var(--px))}
}

/* ---- 媒体事業（サイネージ）への導線 ----
   Service の手前。紺の中でここだけ紙地に反転させ、明暗で目を留める（Contact と同じ扱い）。
   面ごとリンクだが、押す場所が分かるように中に実体のあるボタンを1つ置く。
   上下のマージンは、前後のタイルと同じ列に見えないようにするため。 */
.tile--sigcta{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:stretch;
  padding:0;margin:clamp(18px,3vh,calc(44 * var(--px))) 0;
  background:var(--acc-bg);color:var(--acc-fg);border-color:var(--acc-rule)}
.sig-body{display:grid;align-content:center;justify-items:start;gap:calc(10 * var(--px));
  padding:clamp(30px,3.4vw,calc(60 * var(--px)))}
.sig-en{color:var(--acc-muted)}
.sig-ttl{font-weight:600;letter-spacing:.05em;line-height:1.45;
  font-size:clamp(23px,15px + 1.6vw,calc(42 * var(--px)))}
.sig-note{font-size:var(--t-label);letter-spacing:.08em;line-height:1.9;color:var(--acc-muted)}
/* ボタンは Contact の送信ボタンと同じ型。紺ベタ→hover で罫だけに抜ける */
.sig-btn{display:inline-flex;align-items:center;gap:.9em;
  margin-top:clamp(14px,1.8vh,calc(24 * var(--px)));
  padding:calc(13 * var(--px)) calc(32 * var(--px));
  background:var(--ink);color:var(--acc-bg);border:1px solid var(--ink);
  font-weight:500;font-size:var(--t-small);letter-spacing:.08em;white-space:nowrap;
  transition:background .3s var(--ease-out-quad),color .3s,border-color .3s}
.sig-go{display:inline-block;transition:transform .45s var(--ease-out-quart)}
.sig-fig{position:relative;overflow:hidden;background:var(--ink);min-height:calc(250 * var(--px))}
.sig-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease-out-quart)}
@media (hover:hover) and (pointer:fine){
  .tile--sigcta:hover .sig-btn{background:transparent;color:var(--ink)}
  .tile--sigcta:hover .sig-go{transform:translateX(8px)}
  .tile--sigcta:hover .sig-fig img{transform:scale(1.05)}
}
@media (max-width:760px){
  /* 写真を上に。文字の下だと、押す先が何なのか分からないまま読み終える */
  .tile--sigcta{grid-template-columns:1fr}
  /* align-self:start が無いと WebKit では stretch が勝って高さ0になる */
  .sig-fig{order:-1;min-height:0;aspect-ratio:16/9;align-self:start}
  .sig-btn{width:100%;justify-content:center}
}

/* 画像や罫だけの面には見出しを載せられないので、外に立てる */
.tile--sec{padding:clamp(28px,5vh,calc(56 * var(--px))) clamp(16px,1.8vw,calc(30 * var(--px))) 0}
.tile--sec .tile-head{margin-bottom:0}
/* Member は右端まで列を流すので右padding=0。罫だけは他と同じ位置で止める */
.tile--mem .tile-head{padding-right:clamp(16px,1.8vw,calc(30 * var(--px)))}
/* 明るい面は罫の色を反転側に合わせる */
.tile--contact .tile-head{border-bottom-color:var(--acc-rule)}

/* ---- Instagram。写真が主役なので、枠の中はほぼ画像だけにする ---- */
.ig-at{display:inline-flex;align-items:center;gap:.45em;transition:color .3s var(--ease-out-quad)}
.ig-at .ext{transition:transform .45s var(--ease-out-quart)}
@media (hover:hover) and (pointer:fine){
  .ig-at:hover{color:var(--fg)}
  .ig-at:hover .ext{transform:translate(3px,-3px)}
}
.ig-grid{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gap)}
/* セルは4:5。投稿の多くがこの比率なので、大半は切らずに出せる。
   サムネイルの更新は assets/img/insta/fetch.sh。 */
.ig-grid a{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:rgba(245,242,236,.06)}
.ig-grid img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);
  transition:transform .8s var(--ease-out-quart),opacity .5s var(--ease-out-quad)}
@media (hover:hover) and (pointer:fine){
  .ig-grid a:hover img{transform:scale(1.05);opacity:.82}
}
/* 落とせなかった画像はセルごと外す（main-index.js） */
.ig-grid li.gone{display:none}
@media (max-width:900px){ .ig-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* ---- 進め方。Philosophy と半分ずつなので1列で降ろす ---- */
.tile--proc ol{list-style:none;display:grid;gap:calc(16 * var(--px))}
/* 1項目めの罫は引かない。見出し帯の罫と二重になり、その分だけ隣と行がずれる */
.tile--proc li:first-child{border-top:0;padding-top:0}
/* align-content:start が無いと、隣の項目の説明が2行のときに行が引き伸ばされる */
.tile--proc li{display:grid;grid-template-columns:calc(28 * var(--px)) minmax(0,1fr);gap:calc(12 * var(--px));
  align-content:start;
  padding-top:calc(14 * var(--px));border-top:1px solid var(--rule);
  transition-delay:calc(var(--i,0) * var(--step))}
.tile--proc b{font-style:italic;font-weight:400;color:var(--fg-faint);font-size:var(--t-small)}
.tile--proc span{font-family:var(--f-en);font-weight:300;font-size:clamp(16px,13px + .7vw,calc(24 * var(--px)))}
.tile--proc em{font-family:var(--f-jp);font-style:normal;font-size:var(--t-label);letter-spacing:.06em;
  color:var(--fg-soft);margin-left:.7em}
.tile--proc em::before{content:"—";margin-right:.5em;opacity:.5}
.tile--proc li p{grid-column:2;font-size:var(--t-label);line-height:2;color:var(--fg-soft);margin-top:.4em}

/* ---- 実績。モザイクが剥がれて写真が出る（セルは main-index.js が作る） ---- */
.tile--work a{display:grid;grid-template-rows:1fr auto;height:100%}
.w-media{position:relative;display:block;min-height:calc(300 * var(--px));overflow:hidden}
.w-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease-out-quart)}
.w-cells{position:absolute;inset:0;z-index:2;display:grid;
  grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(4,1fr)}
.w-cells i{display:block;background:var(--ink);opacity:1;
  transition:opacity .5s var(--ease-out-quad);transition-delay:calc(var(--i,0) * 30ms)}
.w-media.is-in .w-cells i{opacity:0}
.w-scrim{position:absolute;inset:0;z-index:3;
  background:linear-gradient(0deg,rgba(0,18,61,.55) 0%,rgba(0,18,61,0) 46%)}
.w-body{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:baseline;gap:calc(14 * var(--px));padding:clamp(16px,1.8vw,calc(26 * var(--px)))}
.w-no{font-style:italic;color:var(--fg-faint);font-size:var(--t-small)}
.w-body strong{font-weight:600;letter-spacing:.05em;font-size:clamp(17px,13px + 1vw,calc(28 * var(--px)))}
.w-body em{font-style:normal;color:var(--fg-soft);font-size:var(--t-label);letter-spacing:.08em}
.w-go{color:var(--fg-faint);transition:transform .45s var(--ease-out-quart),color .4s}
@media (hover:hover) and (pointer:fine){
  .tile--work a:hover .w-media img{transform:scale(1.03)}
  .tile--work a:hover .w-go{transform:translateX(8px);color:var(--fg)}
}
@media (max-width:760px){ .w-body{grid-template-columns:auto minmax(0,1fr);row-gap:6px} .w-body em{grid-column:2} .w-go{display:none} }

/* ---- 素材の小タイル ----
   成果物そのもの（ロゴ・Web・紙面）は切ると何を作ったか分からなくなるので contain、
   人物や現場の写真は cover。地は素材の白に合わせる（紙色だと画像の四角だけが浮く）。 */
.shot{display:block;aspect-ratio:1;overflow:hidden;background:#fff}
.shot img{width:100%;height:100%;object-fit:cover}
.shot--fit img{object-fit:contain;padding:11%}
.shot--logo img{padding:17%}          /* 透過ロゴはもう少し余白を取る */

/* ---- メンバー。ゆっくり流れ続ける横スクロール（core-x.js の marqueeScroller）。
   タイルの右端で見切れることで「まだ続く」ことが伝わる ---- */
.tile--mem{padding-right:0}
.mem-sc{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.mem-sc::-webkit-scrollbar{display:none}
/* マウスでも掴んで動かせる（core-x.js の marqueeScroller）。
   掴めることが分かるようにカーソルを変え、掴んでいるあいだは文字を選択させない。 */
@media (hover:hover) and (pointer:fine){
  .mem-sc{cursor:grab}
  .mem-sc.is-dragging{cursor:grabbing;user-select:none}
}
.mem-track{list-style:none;display:flex;gap:clamp(10px,1vw,calc(18 * var(--px)))}
/* 1枚を大きくして同時に見える枚数を減らす。小さいと顔でなく明るい長方形の列に見える */
.mem-track li{flex:0 0 clamp(178px,17vw,calc(248 * var(--px)))}
.m-fig{display:block;aspect-ratio:3/4;overflow:hidden;background:var(--panel)}
.m-fig img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out-quart);user-select:none}
@media (hover:hover) and (pointer:fine){ .mem-track li:hover .m-fig img{transform:scale(1.05)} }
.mem-track b{display:block;margin-top:calc(10 * var(--px));font-weight:400;font-size:var(--t-label);letter-spacing:.02em}
.mem-track i{display:block;font-style:normal;font-size:calc(var(--t-label) * .92);color:var(--fg-soft);margin-top:2px}

/* ---- 会社概要 ---- */
.tile--comp dl{margin-top:calc(14 * var(--px))}
.tile--comp dl>div{display:grid;grid-template-columns:calc(110 * var(--px)) minmax(0,1fr);gap:calc(16 * var(--px));
  padding:calc(12 * var(--px)) 0;border-top:1px solid var(--rule)}
/* 見出し語は和文書体のまま字間で立てる。Fraunces に日本語は無い */
.tile--comp dt{font-family:var(--f-jp);font-size:var(--t-label);letter-spacing:.16em;color:var(--fg-soft)}
.tile--comp dd{font-weight:500;font-size:var(--t-small);letter-spacing:.05em}
@media (max-width:520px){ .tile--comp dl>div{grid-template-columns:1fr;gap:2px} }

/* ---- 地図（Googleマップの埋め込み） ----
   埋め込み地図に配色は指定できない（styles を渡せるのは有料の JS API だけ）ので、
   明るい地図を反転させ、その上から紺を color 合成して板の色に寄せている。
   重ねる2枚は pointer-events:none。拡大・移動はそのまま効く。 */
.gmap{position:relative;overflow:hidden;background:var(--ink);aspect-ratio:21/9}
.gmap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  filter:invert(1) hue-rotate(180deg) saturate(.5) brightness(1.12) contrast(.88)}
.gmap::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--ink);opacity:.4;mix-blend-mode:color}
/* 反転しているぶん枠との境が眠くなるので、内側に1本だけ罫を回す */
.gmap::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--rule)}
@media (max-width:760px){ .gmap{aspect-ratio:4/3} }

/* 経路案内は本家へ渡す */
.gmap-link{display:inline-flex;align-items:center;gap:.5em;margin-top:calc(14 * var(--px));
  font-size:var(--t-label);letter-spacing:.08em;color:var(--fg-soft);
  transition:color .3s var(--ease-out-quad)}
.gmap-link .ext{transition:transform .45s var(--ease-out-quart)}
@media (hover:hover) and (pointer:fine){
  .gmap-link:hover{color:var(--fg)}
  .gmap-link:hover .ext{transform:translate(3px,-3px)}
}

/* ---- 問い合わせ ---- */
.tile--contact{background:var(--acc-bg);color:var(--acc-fg);border-color:var(--acc-rule)}
/* 明るい面なので見出しの色も反転させる */
.tile--contact .tile-h{color:var(--acc-fg)}
.tile--contact .tile-sub{color:var(--acc-muted)}
/* 見出しと前置きを左の柱に。フォームは残り全部を使う */
.c-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:clamp(24px,3vw,calc(64 * var(--px)))}
/* 和文で ch を使うと「0」の幅基準になって、思ったより早く折れる。em で測る */
.c-lead{margin-top:calc(10 * var(--px));color:var(--acc-muted);font-size:var(--t-small);
  line-height:2.1;max-width:26em}
.c-addr{margin-top:calc(20 * var(--px));padding-top:calc(16 * var(--px));border-top:1px solid var(--acc-rule);
  color:var(--acc-muted);font-size:var(--t-label);line-height:2;letter-spacing:.06em}
.pat-e .cform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,1.6vw,calc(30 * var(--px)));align-content:start}
@media (max-width:900px){
  .c-grid{grid-template-columns:1fr;gap:clamp(20px,2.4vw,calc(34 * var(--px)))}
  .c-addr{display:none}   /* 会社概要のすぐ下なので、狭い画面では住所を二度出さない */
}
.pat-e .cf{display:flex;flex-direction:column;gap:calc(8 * var(--px))}
.pat-e .cf--full{grid-column:1/-1}
.pat-e .cf label{font-weight:500;font-size:var(--t-label);letter-spacing:.08em}
.pat-e .cf label i{font-style:normal;color:var(--acc-muted);margin-left:6px}
.pat-e .cf input,.pat-e .cf textarea{font-family:var(--f-jp);font-size:16px;padding:calc(8 * var(--px)) 2px;
  border:0;border-bottom:1px solid #B4AD9E;background:transparent;color:var(--acc-fg);resize:vertical;
  transition:border-color .25s var(--ease-out-quad),box-shadow .25s var(--ease-out-quad)}
/* 罫だけの入力欄は在り処が弱いので、フォーカスで罫を2本ぶんに太らせる */
.pat-e .cf input:focus,.pat-e .cf textarea:focus{outline:0;border-color:var(--ink);
  box-shadow:0 1px 0 0 var(--ink)}
.pat-e .cf-agree{grid-column:1/-1;display:flex;align-items:center;gap:10px;color:var(--acc-muted);font-size:var(--t-small)}
/* 同意を求める以上、規約そのものへ行けるようにする */
.cf-pp{color:var(--acc-fg);border-bottom:1px solid var(--acc-rule);padding-bottom:.08em;
  transition:border-color .3s var(--ease-out-quad)}
@media (hover:hover) and (pointer:fine){ .cf-pp:hover{border-color:var(--acc-fg)} }
.pat-e .cf-agree input{width:16px;height:16px;accent-color:var(--ink)}
/* 面を反転して置く。罫だけのボタンだと入力欄の罫と同じ重さになって沈む */
.pat-e .cf-send{grid-column:1/-1;justify-self:start;font-size:clamp(16px,13px + .6vw,calc(22 * var(--px)));
  padding:calc(12 * var(--px)) calc(34 * var(--px));
  background:var(--ink);color:var(--acc-bg);border:1px solid var(--ink);
  transition:background .3s var(--ease-out-quad),color .3s,border-color .3s}
.pat-e .cf-send span{display:inline-block;transition:transform .45s var(--ease-out-quart)}
@media (hover:hover) and (pointer:fine){
  .pat-e .cf-send:hover{background:transparent;color:var(--ink)}
  .pat-e .cf-send:hover span{transform:translateX(8px)}
}
/* 送信先を実装したら、この断り書きごと消す */
/* 送信結果。空のあいだは場所を取らない */
.cf-status{grid-column:1/-1;font-size:var(--t-small);line-height:1.9;letter-spacing:.05em;color:var(--acc-muted)}
.cf-status:empty{display:none}
.cf-status[data-kind="ok"]{color:var(--ink)}
.cf-status[data-kind="err"]{color:#A3282C}
.pat-e .cf-send:disabled{opacity:.5;cursor:progress}
@media (max-width:680px){ .pat-e .cform{grid-template-columns:1fr} }

/* ---- 下層ページ共通の足元の導線。戻りは弱く、連絡は枠付きで ---- */
.wk-back{display:inline-flex;align-items:center;gap:.6em;font-size:var(--t-small);letter-spacing:.06em;
  color:var(--fg-soft);transition:color .3s var(--ease-out-quad)}
.wk-back span{display:inline-block;transition:transform .45s var(--ease-out-quart)}
.wk-cta{font-size:var(--t-small);letter-spacing:.06em;padding:calc(11 * var(--px)) calc(26 * var(--px));
  border:1px solid var(--rule-strong);white-space:nowrap;
  transition:background .3s,color .3s,border-color .3s}
@media (hover:hover) and (pointer:fine){
  .wk-back:hover{color:var(--fg)}
  .wk-back:hover span{transform:translateX(-6px)}
  .wk-cta:hover{background:var(--fg);color:var(--ink);border-color:var(--fg)}
}

/* ---- フッター ---- */
.board-foot{max-width:calc(1520 * var(--px));margin:0 auto;
  padding:calc(24 * var(--px)) var(--gap) calc(34 * var(--px))}
.mq-track--foot span{font-family:var(--f-logo);font-weight:900;line-height:1;color:var(--fg);opacity:.12;
  font-size:calc(96 * var(--px));animation-duration:38s}
.foot-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px calc(24 * var(--px));
  margin-top:calc(18 * var(--px));padding-top:calc(16 * var(--px));border-top:1px solid var(--rule);
  font-size:var(--t-label);color:var(--fg-soft)}
.foot-nav{margin-right:auto;display:flex;flex-wrap:wrap;gap:6px calc(24 * var(--px))}   /* 社名のすぐ隣に置く。著作権表示だけを右端に残す */
.foot-nav a{transition:color .3s var(--ease-out-quad)}
@media (hover:hover) and (pointer:fine){ .foot-nav a:hover{color:var(--fg)} }
/* 狭い幅では1語も入りきらないので、上のマーキーは出さない（足元の1本は残す） */
@media (max-width:760px){ .tile--mq{display:none} }
@media (max-width:680px){
  .mq-track--foot span{font-size:clamp(40px,24px + 6vw,96px)}
}

/* ---- PCだけ Service の並びを組み替える ----
   狭い画面はDOM順（サイネージ → 見出し → 図 → 01/02 → 職能）。
   PCは 01/02 と図を対にして横に並べたいので、順番を振り直す。
   order は板ぜんぶに効く。一部だけ指定すると残りが最後尾へ飛ぶので全タイルに振る。 */
@media (min-width:1101px){
  .tile--hero,.tile--word,.tile--mq,.tile--news{order:1}
  .tile--sigcta{order:2}
  #service{order:3}
  .tile--svc2{order:4}
  .tile--dia{order:5}
  .tile--skl{order:6}
  .tile--read,.tile--proc{order:7}
  #works{order:8}
  .tile--work,.tile--shots{order:9}
  .tile--mem{order:10}
  .tile--ig{order:11}
  .tile--comp,.tile--land{order:12}
  .tile--map{order:13}
  .tile--contact{order:14}

  /* 7 + 5 の対。01/02は縦に積み、その横に図を置く */
  .tile--svc2{grid-column:span 7;
    padding:clamp(48px,9vh,calc(128 * var(--px))) clamp(16px,1.8vw,calc(30 * var(--px)))}
  .svc2{grid-template-columns:1fr;gap:clamp(30px,4.4vh,calc(58 * var(--px)))}
  .tile--dia{grid-column:span 5;padding:clamp(20px,2.2vw,calc(36 * var(--px)))}
}

/* 迷惑メール対策のハニーポット。display:none だと避けるボットがいるので、
   画面外へ飛ばして残しておく。 */
.cf-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}