/*=====================================================================*/
/* NOKID Lab（ブログ再設計）                                          */
/* 対象: /blog/（トップ）・/blog/section/*（セクション）・/?s=…&post_type=blog */
/* すべて .lab-Page 配下にスコープし、コーポレートの他ページに漏らさない。    */
/* 色は黒(#0f0f0f)と背景(#F7F7F7)だけ。グレー文字は使わない（罫線 #CFCFCF のみ可）。 */
/*=====================================================================*/

/*-------------------------------------------------------------------*/
/* base                                                               */
/*-------------------------------------------------------------------*/
.lab-Page{
  --px: 28px;
  --sl-w: min(820px, 62vw);
  /* 固定するタブ帯の高さ（PC 61px / ≤1024px はタブだけの1行で 51px）。
     帯の下に潜るもの（目次リンクの着地位置・追従サイドバー）の top に使う */
  --lab-bar-h: 61px;
  --lab-stick: calc(var(--nk-hd-h) + var(--lab-bar-h));
  position: relative;
  padding: 66px 0 96px; /* 固定ヘッダー(20px + ロゴ46px)の分 */
  color: #0f0f0f;
  font-family: 'Zen Kaku Gothic New', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1.8;
  overflow-x: clip;
}
.lab-Page *,
.lab-Page *::before,
.lab-Page *::after{
  box-sizing: border-box;
}
.lab-Page a{
  color: #0f0f0f;
  text-decoration: none;
}
.lab-Page a:hover{
  color: #0f0f0f;
}
.lab-Page h1,
.lab-Page h2,
.lab-Page h3,
.lab-Page h4,
.lab-Page p,
.lab-Page ul,
.lab-Page ol{
  margin: 0;
  padding: 0;
}
.lab-Page ul,
.lab-Page ol{
  list-style: none;
}
.lab-Page img{
  max-width: 100%;
  height: auto;
}
/* :where() で特異度を 0,1,0 に下げ、.c-on / .arrow / .apply 等のクラス指定の color を打ち消さないようにする */
.lab-Page :where(button:not(.nk-Btn)){
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.lab-Page ::placeholder{
  color: #0f0f0f;
  opacity: 1;
}
.lab-Page a:focus-visible,
.lab-Page button:focus-visible{
  outline: 2px solid #0f0f0f;
  outline-offset: 3px;
}
.lab-Page .chev{
  display: inline-block;
  width: 22px;
  height: 12px;
  margin-right: 6px;
  vertical-align: -1px;
}

/*-------------------------------------------------------------------*/
/* hero                                                               */
/*-------------------------------------------------------------------*/
.lab-Page .hw{ display: grid; }
.lab-Page .hwIn{ min-height: 0; overflow: hidden; }
.lab-Page .hw-open{
  grid-template-rows: 1fr;
  opacity: 1;
  filter: none;
  visibility: visible;
  transition: grid-template-rows 1s cubic-bezier(.7,0,.2,1), opacity .8s ease .4s, filter .8s ease .4s, visibility 0s;
}
.lab-Page .hw-closed{
  grid-template-rows: 0fr;
  opacity: 0;
  filter: blur(20px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity .6s ease, filter .6s ease, grid-template-rows 1s cubic-bezier(.7,0,.2,1) .3s, visibility 0s linear 1.3s;
}
/* セクションから「すべて」で戻ったときは、閉じた状態から始めて開く（top.js が外す） */
.lab-heroIn .lab-Page .hw{
  grid-template-rows: 0fr;
  opacity: 0;
  filter: blur(20px);
  visibility: hidden;
  pointer-events: none;
  transition: none;
}
.lab-heroIn .lab-Page .lab-Bar{
  margin-top: 32px;
  transition: none;
}

.lab-Page .hero{
  position: relative;
  overflow: hidden;
  padding: 64px 0 36px;
}
.lab-Page .track{
  position: relative;
  display: flex;
  justify-content: center;
  gap: 40px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.lab-Page .track img{ -webkit-user-drag: none; }
.lab-Page .track a{ -webkit-user-drag: none; }
.lab-Page .sl{ flex: 0 0 var(--sl-w); }
.lab-Page .sl-off{ display: none; }
.lab-Page .sl .img{
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--nk-r-m);
  overflow: hidden;
  background: #E9E9E9;
}
.lab-Page .sl .img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 矢印ボタン（PC・タブレットのみ） */
.lab-Page .arrow{
  position: absolute;
  top: calc(64px + var(--sl-w) * 9 / 32 - 32px);
  z-index: 2;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: #0f0f0f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), background-color .35s ease, color .35s ease, box-shadow .35s ease;
}
.lab-Page .arrow .ic{
  display: block;
  width: 20px;
  height: 16px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.lab-Page .arrow:hover,
.lab-Page .arrow:focus-visible{
  background: #fff;
  color: #0f0f0f;
  box-shadow: inset 0 0 0 2px #0f0f0f;
  transform: scale(1.08);
}
.lab-Page .arrow:focus-visible{ outline: 2px solid #0f0f0f; outline-offset: 10px; }
.lab-Page .prev:hover .ic{ transform: translateX(-4px); }
.lab-Page .next:hover .ic{ transform: translateX(4px); }
.lab-Page .arrow:active{ transform: scale(.96); }
.lab-Page .hero .prev{ left: 20px; }
.lab-Page .hero .next{ right: 20px; }

/* キャプション */
.lab-Page .cap{ margin-top: 22px; }
.lab-Page .mask{ overflow: hidden; }
.lab-Page .hook{
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .03em;
}
.lab-Page .hook .k{
  flex: none;
  font-family: 'Jost', 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  line-height: 1;
}
.lab-Page .hook .k-q{ font-size: 32px; }
.lab-Page .hook .k-w{
  align-self: flex-start;
  margin-top: 4px;
  padding: 6px 10px 5px;
  background: #0f0f0f;
  color: #fff;
  font-size: 14px;
  letter-spacing: .12em;
}
.lab-Page .cap .sub{
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .04em;
}

/* タグ */
.lab-Page .tags{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.lab-Page .tg{
  border: 2px solid #0f0f0f;
  background: #F7F7F7;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  padding: 7px 9px 8px;
}
.lab-Page .tg-new{
  background: #0f0f0f !important;
  color: #fff;
}

/* 動き: スライダー（切替・文字・自動再生の進捗） */
.lab-Page .sl-side{ transform: scale(.9); pointer-events: none; }
.lab-Page .sl-side .img{ opacity: .45; }
.lab-Page .sl-side .cap{ visibility: hidden; }
.lab-Page .sl-l{ transform-origin: right center; }
.lab-Page .sl-r{ transform-origin: left center; }
.lab-Page .p0 .sl .img img{ animation: labBlurA 1.2s cubic-bezier(.2,.6,.2,1) both; }
.lab-Page .p1 .sl .img img{ animation: labBlurB 1.2s cubic-bezier(.2,.6,.2,1) both; }
.lab-Page .p0 .sl-on .rise{ animation: labRiseA .7s cubic-bezier(.2,.7,.2,1) .3s both; }
.lab-Page .p1 .sl-on .rise{ animation: labRiseB .7s cubic-bezier(.2,.7,.2,1) .3s both; }
.lab-Page .p0 .sl-on .rise2{ animation: labFadeA .6s ease .55s both; }
.lab-Page .p1 .sl-on .rise2{ animation: labFadeB .6s ease .55s both; }
.lab-Page .p0 .sl-side .img{ animation: labSideA .9s ease both; }
.lab-Page .p1 .sl-side .img{ animation: labSideB .9s ease both; }
.lab-Page .ring{
  position: absolute;
  inset: -7px;
  width: calc(100% + 14px);
  height: calc(100% + 14px);
  pointer-events: none;
  transform: rotate(-90deg);
}
.lab-Page .ring circle{ fill: none; stroke-width: 2; }
.lab-Page .ring .trk{ stroke: #CFCFCF; }
.lab-Page .ring .prog{ stroke: #0f0f0f; stroke-dasharray: 232.5; stroke-dashoffset: 232.5; }
.lab-Page .ring .r0{ animation: labRingA 6s linear both; }
.lab-Page .ring .r1{ animation: labRingB 6s linear both; }
.lab-Page .paused .ring .prog,
.lab-Page .paused .tick{ animation-play-state: paused; }
/* SP は矢印を出さない。見えない要素の 6 秒アニメーションを自動再生のタイマーにする */
.lab-Page .tick{
  display: none;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.lab-Page .tick.r0{ animation: labTickA 6s linear both; }
.lab-Page .tick.r1{ animation: labTickB 6s linear both; }
@keyframes labRingA{ from{ stroke-dashoffset: 232.5; } to{ stroke-dashoffset: 0; } }
@keyframes labRingB{ from{ stroke-dashoffset: 232.5; } to{ stroke-dashoffset: 0; } }
@keyframes labTickA{ from{ opacity: 0; } to{ opacity: 0; } }
@keyframes labTickB{ from{ opacity: 0; } to{ opacity: 0; } }
@keyframes labBlurA{ from{ opacity: 0; filter: blur(18px); transform: scale(1.04); } to{ opacity: 1; filter: blur(0); transform: scale(1); } }
@keyframes labBlurB{ from{ opacity: 0; filter: blur(18px); transform: scale(1.04); } to{ opacity: 1; filter: blur(0); transform: scale(1); } }
@keyframes labRiseA{ from{ opacity: 0; transform: translateY(100%); } to{ opacity: 1; transform: none; } }
@keyframes labRiseB{ from{ opacity: 0; transform: translateY(100%); } to{ opacity: 1; transform: none; } }
@keyframes labFadeA{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }
@keyframes labFadeB{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }
@keyframes labSideA{ from{ opacity: 0; } to{ opacity: .45; } }
@keyframes labSideB{ from{ opacity: 0; } to{ opacity: .45; } }

/*-------------------------------------------------------------------*/
/* tab bar + search                                                   */
/*-------------------------------------------------------------------*/
.lab-Page .bar{
  margin: 0 var(--px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid #CFCFCF;
  flex-wrap: wrap;
  transition: margin-top 1s cubic-bezier(.7,0,.2,1);
}
.lab-Page .bar-top{ margin-top: 32px; }
.lab-Page .lab-Bar--plain{ min-height: var(--lab-bar-h); } /* 検索欄がなくても、アーカイブと同じ帯の高さにする */
.lab-Page .tabs{
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.lab-Page .tab{
  position: relative;
  display: inline-block;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .05em;
  line-height: 1.8;
  padding: 0 0 17px;
  margin-bottom: -1px;
}
.lab-Page .tab::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: #0f0f0f;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s cubic-bezier(.7,0,.2,1);
}
.lab-Page .tab-on::after,
.lab-Page .tab:hover::after,
.lab-Page .tab:focus-visible::after{
  transform: scaleX(1);
}
.lab-Page .tools{ padding: 8px 0 12px; } /* 上の 8px は、固定中に検索欄がヘッダーの縁に触れないための余白 */
.lab-Page .srch{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 300px;
  height: 40px;
  border: 2px solid #0f0f0f;
  background: #fff;
  padding: 0 12px;
}
.lab-Page .srch svg{ flex: none; }
.lab-Page .srch input[type="search"]{
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 13px;
  color: #0f0f0f;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}
.lab-Page .srch:focus-within{ outline: 2px solid #0f0f0f; outline-offset: 2px; }

/*-------------------------------------------------------------------*/
/* sections                                                           */
/*-------------------------------------------------------------------*/
.lab-Page .sec{
  padding: 0 var(--px);
  margin-top: 96px;
  animation: labSwap .5s ease both;
}
.lab-Page .sec-first{ margin-top: 56px; }
.lab-Page .sec-pick{ margin-top: 48px; }
.lab-Page .sec-new{ margin-top: 72px; }
.lab-Page .sec-cat{ margin-top: 64px; }
.lab-Page .sec-doc{ margin-top: 40px; }
@keyframes labSwap{ from{ opacity: 0; transform: translateY(12px); } to{ opacity: 1; transform: none; } }

/* NEW の見出し右端の MORE は SP だけ（PC は一覧の末尾に MORE を置く） */
.lab-Page .nk-SecHead_More--sp{ display: none; }
.lab-Page .more-foot{ margin-top: 28px; text-align: right; }
.lab-Page .soon{ font-weight: 700; font-size: 14px; }

/* grids */
.lab-Page .g4{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 24px;
}
.lab-Page .g4--row{ gap: 24px; }
.lab-Page .g3c{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px 24px;
}
/* PICK UP は4件取り、3列の PC では4件目を隠す（2列の SP で4件そろえるため） */
@media screen and (min-width: 768px){
  .lab-Page .lab-Pick > :nth-child(n+4){ display: none; }
}

/* category rows */
.lab-Page .row{
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid #CFCFCF;
}
.lab-Page .rh{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.lab-Page .rh h3{
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .06em;
}

/*-------------------------------------------------------------------*/
/* card                                                               */
/*-------------------------------------------------------------------*/
.lab-Page .lab-Card{ min-width: 0; }
.lab-Page .th{
  display: block;
  aspect-ratio: 16 / 9;
  background: #E9E9E9;
  overflow: hidden;
  border-radius: var(--nk-r-m);
}
.lab-Page .th img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.4s cubic-bezier(.16,.84,.3,1);
}
.lab-Page .dt{
  margin: 14px 0 0;
  font-family: 'Jost', 'Zen Kaku Gothic New', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: .04em;
}
.lab-Page .ttl{
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .04em;
}
.lab-Page .ttl a{
  background: linear-gradient(#0f0f0f, #0f0f0f) left bottom / 0 1px no-repeat;
  transition: background-size .45s cubic-bezier(.7,0,.2,1);
}
.lab-Page .lab-Card .tags{ margin-top: 12px; }
.lab-Page .lab-Card--doc .ttl{ margin-top: 14px; font-size: 16px; }
.lab-Page .lab-Card--doc .dl{ margin-top: 8px; font-weight: 700; font-size: 13px; }
@media (hover: hover){
  .lab-Page .rv:hover .th img{ transform: scale(1.035); }
  .lab-Page .rv:hover .ttl a{ background-size: 100% 1px; }
}
/* pick の番号（"1/" の斜線が画像に少し重なる） */
.lab-Page .lab-Card--pick .no{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  font-family: 'Jost', 'Zen Kaku Gothic New', sans-serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 1;
}
.lab-Page .lab-Card--pick .no i{
  font-style: normal;
  font-size: 28px;
  transform: skewX(-20deg);
  display: inline-block;
}
.lab-Page .lab-Card--pick .th{ position: relative; z-index: 1; margin-top: -10px; }
/* 事例調査の結果 */
.lab-Page .res{
  margin-top: 12px;
  border-top: 1px solid #0f0f0f;
  padding-top: 10px;
  font-size: 13px;
  line-height: 1.7;
}
.lab-Page .res b{ display: block; font-size: 17px; font-weight: 700; }
.lab-Page .res-l{ font-size: 12px; font-weight: 700; }
.lab-Page .sup{ margin-top: 8px; font-size: 12px; font-weight: 500; }

/*-------------------------------------------------------------------*/
/* facets / result bar / empty                                        */
/*-------------------------------------------------------------------*/
.lab-Page .fbtn{ display: none; }
.lab-Page .fac{
  border-top: 1px solid #CFCFCF;
  margin-bottom: 28px;
}
.lab-Page .fr{
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid #CFCFCF;
}
.lab-Page .fr b{
  font-size: 13px;
  font-weight: 700;
  padding-top: 8px;
}
.lab-Page .chips{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.lab-Page .c{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  border: 2px solid #0f0f0f;
  background: #fff;
  padding: 0 12px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.lab-Page .c input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.lab-Page .c:focus-within{ outline: 2px solid #0f0f0f; outline-offset: 2px; }
.lab-Page .c .c-n{
  font-family: 'Jost', 'Zen Kaku Gothic New', sans-serif;
  font-weight: 500;
  font-size: 12px;
}
.lab-Page .c-on{ background: #0f0f0f; color: #fff; }
.lab-Page .c-off{ border-style: dashed; cursor: default; }
.lab-Page .chk{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.lab-Page .chk input{
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #0f0f0f;
}
.lab-Page .apply{
  border: 2px solid #0f0f0f;
  background: #0f0f0f;
  color: #fff;
  min-height: 36px;
  padding: 0 16px;
  font-weight: 700;
  font-size: 13px;
}
.lab-Page .rbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
  font-size: 14px;
}
.lab-Page .rbar b{
  font-family: 'Jost', 'Zen Kaku Gothic New', sans-serif;
  font-weight: 500;
  font-size: 28px;
  margin-right: 4px;
}
.lab-Page .rbar strong{ font-weight: 700; }
.lab-Page .rbar-r{ display: flex; gap: 20px; align-items: center; }
.lab-Page .order{ font-weight: 500; }
.lab-Page .clr{
  background: transparent;
  border: 0;
  padding: 0;
  font-weight: 700;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lab-Page .empty{
  border: 2px solid #0f0f0f;
  background: #fff;
  padding: 28px;
  text-align: center;
  font-weight: 700;
}
.lab-Page .empty .clr{ margin-left: 12px; }

/*-------------------------------------------------------------------*/
/* know-how: 事業テーマのタイル                              */
/*-------------------------------------------------------------------*/
.lab-Page .stage-lead{ margin-bottom: 12px; font-size: 13px; font-weight: 700; }
.lab-Page .stages{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 2px solid #0f0f0f;
  border-bottom: 1px solid #CFCFCF;
  margin-bottom: 28px;
}
.lab-Page .stg{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 140px;
  padding: 20px 20px 22px;
  text-align: left;
  border-left: 1px solid #CFCFCF;
  background: transparent;
}
.lab-Page .stg:first-child{ border-left: 0; }
.lab-Page .stg b{ font-size: 16px; line-height: 1.5; }
.lab-Page .stg small{ font-size: 12px; line-height: 1.6; font-weight: 500; }
.lab-Page .stg span{
  margin-top: auto;
  font-family: 'Jost', 'Zen Kaku Gothic New', sans-serif;
  font-weight: 500;
  font-size: 13px;
}
.lab-Page .stg-on,
.lab-Page a.stg-on:hover,
.lab-Page .stg-on *{ color: #fff; }
.lab-Page .stg-on{ background: #0f0f0f; }
.lab-Page .stg-off{ border-style: dashed; cursor: default; }

/*-------------------------------------------------------------------*/
/* pagination（WP-PageNavi）                                          */
/*-------------------------------------------------------------------*/
.lab-Page .wp-pagenavi{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 56px;
  clear: both;
}
.lab-Page .wp-pagenavi a,
.lab-Page .wp-pagenavi span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  margin: 0;
  padding: 0 12px;
  border: 2px solid #0f0f0f;
  background: #fff;
  color: #0f0f0f;
  font-family: 'Jost', 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}
.lab-Page .wp-pagenavi span.current,
.lab-Page .wp-pagenavi a:hover{
  background: #0f0f0f;
  color: #fff;
  border-color: #0f0f0f;
}
.lab-Page .wp-pagenavi span.pages{ display: none; }
.lab-Page .wp-pagenavi span.extend{ border-color: transparent; background: transparent; }
/* common.css の PREV/NEXT は translateX で外へ逃がす古い作り。flex の並びに戻す（SP で右ガターが消える） */
.lab-Page .wp-pagenavi .previouspostslink,
.lab-Page .wp-pagenavi .nextpostslink{ transform: none; margin: 0; }

/* scroll reveal（ぼかし → ふわっと）は common.css の nk-reveal に統一 */

/*-------------------------------------------------------------------*/
/* tablet (768 – 1024)                                                */
/*-------------------------------------------------------------------*/
@media screen and (max-width: 1024px){
  .lab-Page{
    --sl-w: 70vw;
    padding-top: 14.4vw; /* SP/タブレットのヘッダーは vw でスケールする */
    padding-bottom: 72px;
  }
  .lab-Page .hero{ padding-top: 40px; }
  .lab-Page .arrow{
    top: calc(40px + var(--sl-w) * 9 / 32 - 24px);
    width: 48px;
    height: 48px;
  }
  .lab-Page .arrow .ic{ width: 16px; height: 13px; }
  .lab-Page .hero .prev{ left: 12px; }
  .lab-Page .hero .next{ right: 12px; }
  .lab-Page .g4{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .lab-Page .g4--row{ gap: 28px 20px; }
  .lab-Page .g3c{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; }
  .lab-Page .g3c.lab-Pick{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lab-Page .fr{ grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .lab-Page .fr b{ padding-top: 0; }
  .lab-Page .stages{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-Page .stg{ min-height: 112px; border-left: 0; border-bottom: 1px solid #CFCFCF; padding: 14px 12px 16px; }
  .lab-Page .stg:nth-child(odd){ border-right: 1px solid #CFCFCF; padding-left: 0; }
  .lab-Page .stg.stg-on:nth-child(odd){ padding-left: 12px; }
  .lab-Page .stages > :last-child:nth-child(odd){ grid-column: 1 / -1; border-right: 0; }
}

/*-------------------------------------------------------------------*/
/* タブ帯の固定（≤ 1024）                                              */
/* PC は帯ぜんぶ（タブ＋検索）を .nk-Stick で固定する。                  */
/* ≤1024 は検索欄が下の段に回り帯が 2 段になるので、タブの1行だけを固定する。 */
/* そのため .bar を display: contents にして、.tabs を .lab-Page 直下の子として sticky にする。 */
/* タブは1行・横スクロール（スクロールバー非表示）。選択中のタブは lab/bar.js が見える位置に寄せる。 */
/*-------------------------------------------------------------------*/
@media screen and (max-width: 1024px){
  .lab-Page{ --lab-bar-h: 44px; }
  .lab-Page .bar{ display: contents; }
  /* 上の余白は変数で持つ（スクロール後に上へ伸ばすとき、伸ばした分を引いて位置を変えないため） */
  .lab-Page .bar-top .tabs{ --lab-tabs-mt: 40px; transition: margin-top 1s cubic-bezier(.7,0,.2,1); }
  .lab-heroIn .lab-Page .bar .tabs{ --lab-tabs-mt: 40px; transition: none; }
  .lab-Page .tabs{
    margin-top: var(--lab-tabs-mt, 0px);
    position: sticky;
    top: var(--nk-hd-h);
    z-index: var(--nk-stick-z);
    flex-wrap: nowrap;
    gap: 24px;
    padding: 0 var(--px);
    background: #F7F7F7;
    /* 区切り線は inset の影で描く（border だと横スクロールの領域で選択中の下線が切れる） */
    box-shadow: inset 0 -1px 0 #CFCFCF;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .lab-Page .tabs::-webkit-scrollbar{ display: none; }
  .lab-Page .tab{ flex: none; margin-bottom: 0; }
  .lab-Page .tools{ padding: 14px var(--px) 0; }
  .lab-Page .srch{ width: min(100%, 360px); }
}

/*-------------------------------------------------------------------*/
/* SP (≤ 767)                                                         */
/*-------------------------------------------------------------------*/
@media screen and (max-width: 767px){
  .lab-Page{
    --px: 16px;
    --lab-bar-h: 51px;
    --sl-w: 81.5vw;
    letter-spacing: .03em;
    padding-bottom: 56px;
  }
  .lab-Page .hero{ padding: 20px 0 24px; }
  .lab-Page .track{ gap: 12px; cursor: grab; }
  .lab-Page .track img{ pointer-events: none; }
  .lab-Page .sl .img{ border-radius: var(--nk-r-m); }
  .lab-Page .arrow{ display: none; }
  .lab-Page .tick{ display: block; }
  .lab-Page .cap{ margin-top: 16px; }
  .lab-Page .hook{ font-size: 16px; gap: 8px; line-height: 1.55; }
  .lab-Page .hook .k-q{ font-size: 22px; }
  .lab-Page .hook:has(.k-w){ flex-direction: column; align-items: flex-start; gap: 8px; }
  .lab-Page .hook .k-w{ margin-top: 0; padding: 5px 8px 4px; font-size: 11px; }
  .lab-Page .cap .sub{ margin-top: 6px; font-size: 12px; }
  .lab-Page .tags{ gap: 5px; margin-top: 8px; }
  .lab-Page .tg{ border-width: 1.5px; font-size: 11px; padding: 5px 6px 6px; }
  .lab-Page .tg-pc{ display: none; }

  .lab-Page .bar-top .tabs{ --lab-tabs-mt: 8px; }
  .lab-Page .tabs{
    justify-content: space-between;
    gap: 4px;
    padding: 0 16px;
  }
  .lab-Page .tab{ font-size: 12px; letter-spacing: -.01em; padding: 14px 0 15px; }
  /* 4つのタブを横スクロールなしで1行に収めるため、「キャラクターIP事例調査」は SP では「事例調査」と見せる（読み上げは元の名前のまま） */
  .lab-Page .tab-Pre{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lab-Page .tools{ padding: 14px 16px 0; }
  /* スクロール後は右上のハンバーガー（黒いチップ。ヘッダーの .scrolled）がタブ帯の右端に来る。
     - 帯の下端をチップの下端にそろえる。帯は画面の上端（top:0）から貼りつけ、上の --lab-bar-top 分は
       padding で伸ばして帯の地色で埋める（伸ばした分は margin-top で引くので、流れの中の位置は変わらない）。
       以前は上の空きを影（box-shadow）で埋めていたが、横スクロールの帯の影は iPhone の Safari で描かれず、
       後ろの文字が透けていた
     - 右はチップの幅だけ border で空ける。border はスクロール領域の外なので、タブがチップの下に潜らない
     - 下の区切り線は border の下まで通すため、inset の影ではなく背景の線で描く */
  body:has(.st-Header.scrolled:not(.opened)) .lab-Page{ --lab-bar-top: max(0px, calc(10.545vw - 23px)); --lab-stick: calc(var(--lab-bar-top) + var(--lab-bar-h)); }
  body:has(.st-Header.scrolled:not(.opened)) .lab-Page .tabs{
    top: 0;
    margin-top: calc(var(--lab-tabs-mt, 0px) - var(--lab-bar-top));
    padding-top: var(--lab-bar-top);
    padding-right: 12px;
    border-right: calc(15.11vw + min(3.4vw, 16px)) solid transparent;
    background: linear-gradient(#CFCFCF, #CFCFCF) left bottom / 100% 1px no-repeat border-box, #F7F7F7;
    box-shadow: none;
    transition: none;
  }
  .lab-Page .srch{ width: auto; height: 44px; }
  .lab-Page .srch input[type="search"]{ font-size: 16px; }

  .lab-Page .sec{ margin-top: 48px; }
  .lab-Page .sec-first{ margin-top: 28px; }
  .lab-Page .sec-pick{ margin-top: 36px; }
  .lab-Page .sec-new,
  .lab-Page .sec-cat,
  .lab-Page .sec-doc{ margin-top: 48px; }
  .lab-Page .nk-SecHead_More--sp{ display: inline-flex; }
  .lab-Page .more-foot{ display: none; }

  .lab-Page .g4,
  .lab-Page .g4--row,
  .lab-Page .g3c,
  .lab-Page .g3c.lab-Pick{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 12px;
  }
  .lab-Page .g4--row > :nth-child(n+3){ display: none; }
  .lab-Page .row{ padding-bottom: 28px; margin-bottom: 28px; }
  .lab-Page .rh{ gap: 12px; margin-bottom: 14px; }
  .lab-Page .rh h3{ font-size: 17px; letter-spacing: .03em; }

  .lab-Page .dt{ margin-top: 8px; font-size: 12px; }
  .lab-Page .ttl{
    margin-top: 2px;
    font-size: 14px;
    line-height: 1.65;
    letter-spacing: .03em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .lab-Page .lab-Card--doc .ttl{ margin-top: 8px; font-size: 14px; }
  .lab-Page .lab-Card--doc .dl{ margin-top: 6px; font-size: 12px; }
  .lab-Page .lab-Card .tags{ margin-top: 8px; }
  .lab-Page .lab-Card--pick .no{ font-size: 28px; gap: 1px; margin-bottom: 0; }
  .lab-Page .lab-Card--pick .no i{ font-size: 20px; }
  .lab-Page .lab-Card--pick .th{ margin-top: -6px; }
  .lab-Page .res{ margin-top: 8px; padding-top: 6px; font-size: 11px; line-height: 1.6; }
  .lab-Page .res b{ font-size: 12px; }
  .lab-Page .res-l{ display: none; }
  .lab-Page .sup{ margin-top: 6px; font-size: 11px; }
  @media (hover: none){
    .lab-Page .rv:active .th img{ transform: scale(1.03); }
  }

  /* 事例調査の絞り込みは「条件で絞り込む」で開閉 */
  .lab-Page.is-js .fbtn{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    border: 2px solid #0f0f0f;
    background: #fff;
    padding: 0 14px;
    font-weight: 700;
    font-size: 14px;
  }
  .lab-Page.is-js #lab-fac{ display: none; }
  .lab-Page.is-js #lab-fac.is-open{ display: block; }
  .lab-Page .fac{ margin: 12px 0 0; }
  .lab-Page .fr{ display: block; padding: 12px 0; }
  .lab-Page .fr b{ display: block; font-size: 12px; margin-bottom: 8px; }
  .lab-Page .chips{ gap: 6px; }
  .lab-Page .c{ gap: 6px; padding: 0 10px; font-size: 12px; }
  .lab-Page .c .c-n{ font-size: 11px; }
  .lab-Page .rbar{ gap: 12px; margin: 18px 0 20px; font-size: 13px; }
  .lab-Page .rbar b{ font-size: 22px; margin-right: 2px; }
  .lab-Page .rbar-r{ gap: 12px; }
  .lab-Page .order{ display: none; }
  .lab-Page .clr{ font-size: 12px; padding: 6px 0; }
  .lab-Page .empty{ padding: 20px; font-size: 13px; }
  .lab-Page .empty .clr{ display: block; margin: 4px 0 0; }

  .lab-Page .stage-lead{ margin-bottom: 8px; font-size: 12px; }
  .lab-Page .stages{ margin-bottom: 20px; }
  .lab-Page .stg b{ font-size: 14px; }
  .lab-Page .stg small{ font-size: 11px; }
  .lab-Page .stg span{ font-size: 12px; }

  .lab-Page .wp-pagenavi{ margin-top: 40px; gap: 6px; }
  .lab-Page .wp-pagenavi a,
  .lab-Page .wp-pagenavi span{ min-width: 36px; height: 36px; padding: 0 8px; font-size: 13px; }
}

/*-------------------------------------------------------------------*/
/* アーカイブ系（/blog/all/・カテゴリ・編集者）                        */
/* カード・見出し・ページ送りは上の既存部品をそのまま使う。ここは追加分だけ。 */
/*-------------------------------------------------------------------*/
/* LAB 以外のページ（サービス詳細・TOP）に LAB のカードを埋め込むときの外枠 */
.lab-Page--embed{
  padding: 0;
  font-size: inherit;
  overflow-x: visible;
}

/* パンくず（parts/common/crumb.php）の LAB 内の余白 */
.lab-Page .sec > .nk-Breadcrumb{ margin: 0 0 28px; }
.lab-Page .sec-lead{
  max-width: 760px;
  margin: -8px 0 28px;
  font-size: 15px;
  line-height: 1.9;
}

/* 編集者の丸アイコン（一覧・個別ページ共通） */
.lab-Page .sv-img{
  display: block;
  flex: none;
  width: 72px;
  height: 72px;
  background: #E9E9E9;
  border-radius: 50%;
  overflow: hidden;
}
.lab-Page .sv-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lab-Page .sv-ph{
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-family: 'Jost', 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  font-size: 28px;
}

/* 編集者一覧（1人1行） */
.lab-Page .ed-list{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
}
.lab-Page .ed-row{
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 24px 0;
}
.lab-Page .ed-row + .ed-row{ border-top: 1px solid #cfcfcf; }
.lab-Page .ed-body{ flex: 1 1 0; min-width: 0; max-width: 720px; }
/* 最新記事 3 件（右寄せ） */
.lab-Page .ed-new{
  flex: none;
  display: flex;
  gap: 16px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}
.lab-Page .ed-new li{ flex: none; width: 200px; }
.lab-Page .ed-new-a{ display: block; color: inherit; text-decoration: none; }
.lab-Page .ed-new-img{
  display: block;
  aspect-ratio: 16 / 9;
  background: #E9E9E9;
  border-radius: var(--nk-r-m);
  overflow: hidden;
}
.lab-Page .ed-new-img img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.lab-Page .ed-new-t{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}
/* phrase.js の .nk-Phr(inline-block) が行数クランプを無効化するため */
.lab-Page .ed-new-t .nk-Phr{ display: inline; }
@media (hover: hover){
  .lab-Page .ed-new-a:hover .ed-new-t{ text-decoration: underline; }
}
/* PC: 最新記事の列を常に3枠分（200px×3 + 隙間16px×2）の固定幅にして、本文の列幅を全行でそろえる。
   記事が3件未満の編集者は、左詰めで空き枠を空けたままにする。 */
@media screen and (min-width: 1101px){
  .lab-Page .ed-row{
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) calc(200px * 3 + 16px * 2);
    align-items: start;
  }
  .lab-Page .ed-body{ max-width: 720px; }
  .lab-Page .ed-new{ margin: 0; justify-content: flex-start; }
}
@media screen and (max-width: 1100px){
  .lab-Page .ed-row{ flex-wrap: wrap; }
  .lab-Page .ed-new{ flex-basis: 100%; margin: 8px 0 0 96px; overflow-x: auto; }
}
.lab-Page .sv-name{
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .04em;
}
.lab-Page .sv-desc{
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.9;
}
.lab-Page .sv-more{ margin: 10px 0 0; font-weight: 700; font-size: 13px; }

/* 編集者プロフィール（個別ページ） */
.lab-Page .sv-profile{
  display: flex;
  align-items: flex-start;
  gap: 32px;
  max-width: 960px;
}
.lab-Page .sv-profile .sv-img{ width: 96px; height: 96px; }
.lab-Page .sv-profile .sv-ph{ font-size: 36px; }
.lab-Page .sv-body{ min-width: 0; }
.lab-Page .sv-role{
  margin: 0;
  font-family: 'Jost', 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
}
.lab-Page .sv-pname{
  margin: 6px 0 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .06em;
}
.lab-Page .sv-pdesc{
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 2;
}

@media screen and (max-width: 767px){
  .lab-Page .sec > .nk-Breadcrumb{ margin-bottom: 20px; }
  .lab-Page .sec-lead{ margin: -4px 0 20px; font-size: 14px; }
  .lab-Page .sv-img{ width: 56px; height: 56px; }
  .lab-Page .sv-ph{ font-size: 22px; }
  .lab-Page .ed-row{ gap: 16px; }
  .lab-Page .ed-new{ margin: 4px 0 0; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .lab-Page .ed-new li{ width: 160px; }
  .lab-Page .sv-name{ font-size: 16px; }
  .lab-Page .sv-desc{ font-size: 13px; }
  .lab-Page .sv-more{ margin-top: 6px; font-size: 12px; }
  .lab-Page .sv-profile{ gap: 16px; }
  .lab-Page .sv-profile .sv-img{ width: 72px; height: 72px; }
  .lab-Page .sv-profile .sv-ph{ font-size: 28px; }
  .lab-Page .sv-pname{ font-size: 24px; }
  .lab-Page .sv-pdesc{ font-size: 14px; }
}

/*-------------------------------------------------------------------*/
/* モーション低減                                                     */
/*-------------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce){
  .lab-Page *,
  .lab-Page *::before,
  .lab-Page *::after{
    animation: none !important;
    transition: none !important;
  }
  .lab-Page .ring{ display: none; }
}

/* common.css の .nk-Phr{display:inline-block} が行数クランプを無効化するため */
.lab-Page .lab-Card .ttl .nk-Phr{display:inline}