/* ==========================================================================
   下層ページ(WORK / BLOG / ABOUT / CONTACT)— Union Tec の下層の型(2026-11-03)
   - 方眼の背景は全ページ共通(body::before)。見出し枠は「大きな英字 + 小さな日本語 + パンくず」を左、
     カテゴリは「– ALL - タグ」のテキストタブを右に(News 一覧と同じ)
   - 既存のマークアップ(grid-page-header / bento / about-section / cpg-*)はそのまま、見た目だけ置き換える
   ========================================================================== */
:root { --ut-ink: #080808; --ut-grid: rgba(8,8,8,.07); --ut-gap: 176px; --ut-ease: cubic-bezier(.2,.8,.2,1); --ut-x: var(--sp-x, clamp(20px, 8.9vw, 128px)); }
@media (max-width: 767px) { :root { --ut-gap: 96px; } }
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(to right, var(--ut-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--ut-grid) 1px, transparent 1px);
  background-size: var(--ut-gap) var(--ut-gap); background-position: var(--ut-x) 0;
}
body, section, .container.is-full, .grid-page-header, .about-body, .footer_top, .section.is-top-lg, .contactpg { background: transparent !important; }
body > section, body > div, main { position: relative; z-index: 1; }

/* ---------- 見出し枠: 罫線の表組みをやめ、Union Tec の下層ヘッダーに ---------- */
.grid-page-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important;
  grid-template-rows: auto !important;
  grid-template-areas: "title desc" "crumb tabs";
  gap: 24px 40px;
  padding: clamp(56px, 8vw, 120px) var(--ut-x) 40px;
  border: 0 !important; border-bottom: 1px solid var(--ut-ink) !important;
}
.grid-page-header > .service-top-wrapper { border: 0 !important; padding: 0 !important; min-height: 0 !important; width: auto !important; }
.grid-page-header .service-top-wrapper.sns { display: none !important; }              /* SNS はフッターに */
.grid-page-header .service-top-wrapper.search { display: none !important; }           /* 「SEARCH」「PROFILE」の見出しは不要 */
.grid-page-header .service-top-wrapper:not(.sns):not(.search):not(.description):not(.category) { grid-area: title; }
.grid-page-header .service-top-wrapper.description { grid-area: desc; align-self: end; }
.grid-page-header .service-top-wrapper.category { grid-area: tabs; }
.grid-page-header .div-with-space { padding: 0 !important; margin: 0 !important; display: block !important; }
.grid-page-header .service-top {
  font-family: Montserrat, "Hiragino Sans", sans-serif !important;
  font-size: clamp(56px, 8vw, 112px) !important; font-weight: 700 !important; line-height: .95 !important; letter-spacing: -.03em !important;
  color: var(--ut-ink) !important; display: block !important; visibility: visible !important;
}
.grid-page-header .work-count { display: inline-block !important; vertical-align: super; margin-left: 10px; font-family: Montserrat, sans-serif; font-size: 18px !important; font-weight: 700; visibility: visible !important; color: var(--ut-ink) !important; }
.grid-page-header .text-block.service.describe {
  margin: 0 !important; max-width: 36em; font-size: 16px !important; line-height: 1.9 !important; letter-spacing: 0 !important; color: var(--ut-ink) !important;
}
/* カテゴリ: テキストタブ */
.grid-page-header .service-top-wrapper.search-cat, .grid-page-header .div-with-space.search-cat, .grid-page-header .horizon-div.service { padding: 0 !important; margin: 0 !important; width: 100%; }
.grid-page-header .horizon-div.service { display: block !important; height: auto !important; border: 0 !important; }
.grid-page-header .text-block.service:not(.describe) { display: none !important; }
.grid-page-header .horizon-div.search { display: flex !important; flex-wrap: wrap; gap: 8px 28px; justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; height: auto !important; border: 0 !important; }
.grid-page-header .button.cat {
  position: relative; min-height: 0 !important; min-width: 0 !important; padding: 0 0 0 22px !important; margin: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
  font-size: 14px !important; color: #9a9a9a !important; transition: color .25s ease, padding-left .35s var(--ut-ease);
}
.grid-page-header .button.cat div { font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; color: inherit !important; visibility: visible !important; }
.grid-page-header .button.cat::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 1.5px; background: currentColor; transition: width .35s var(--ut-ease); }
.grid-page-header .button.cat:hover { color: var(--ut-ink) !important; }
.grid-page-header .button.cat.is-active { color: var(--ut-ink) !important; padding-left: 30px !important; }
.grid-page-header .button.cat.is-active::before { width: 18px; }
/* パンくず(JS 不要: ページ名は h1 から CSS で) */
.grid-page-header::after {
  grid-area: crumb; align-self: end;
  content: "TOP　／　" attr(data-crumb);
  font-family: Montserrat, "Hiragino Sans", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: #666;
}
@media (max-width: 991px) {
  .grid-page-header { grid-template-columns: 1fr !important; grid-template-areas: "title" "desc" "tabs" "crumb"; gap: 20px; padding-bottom: 28px; }
  .grid-page-header .service-top { font-size: clamp(44px, 13vw, 72px) !important; }
  .grid-page-header .horizon-div.search { gap: 6px 20px; }
  .grid-page-header .button.cat, .grid-page-header .button.cat div { font-size: 13px !important; }
}

/* ---------- WORK 一覧: Featured Projects と同じ行の型(罫線行 + 角丸の写真)。エディトリアルの段違いはそのまま ---------- */
.body-work .horizon-div.tag-holder { border-bottom: 0 !important; border-top: 1px solid var(--ut-ink); padding: 8px 0 24px !important; margin: 0 !important; align-items: center !important; }
.body-work .horizon-div.tag-holder::before { display: none !important; content: none !important; }
.body-work .tag-holder .button.mini { min-width: 100px; padding: 0; border: 0; background: none; justify-content: flex-start; }
.body-work .tag-holder .text-block.mini { font-family: Montserrat, sans-serif; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ut-ink) !important; }
.body-work .tag-holder .text-block.category { margin-left: auto; font-family: Montserrat, sans-serif; font-size: 13px; font-weight: 700; color: var(--ut-ink); }
.body-work .work-img { order: 1; border: 0 !important; border-radius: 8px; overflow: hidden; background: #ececec; }
.body-work .work-title .text-block.is-tite { order: 0; margin: 0 0 20px !important; padding: 0 !important; font-size: 16px !important; font-weight: 500; line-height: 1.6; background: none !important; transition: color .25s ease !important; }
.body-work .work-title .text-block.is-tite::before { display: none !important; }
.body-work .bento-link:hover .text-block.is-tite { color: #9a9a9a !important; }
.body-work .bento-link:hover .work-img img { transform: scale(.96) !important; }
.body-work .horizon-div.tag-holder::after { display: none !important; }

/* ---------- ABOUT: 見出し語を Union Tec の型に、本文は 16px/1.9 ---------- */
.about-section { padding: 48px 0 !important; border-top: 1px solid var(--ut-ink); }
.about-section.is-intro { border-top: 0; }
.about-eyebrow { font-family: Montserrat, sans-serif !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .02em !important; color: var(--ut-ink) !important; text-transform: none !important; }
.about-heading { font-family: "Hiragino Sans", "Noto Sans JP", sans-serif !important; font-size: 24px !important; font-weight: 700 !important; line-height: 1.6 !important; margin-top: 6px !important; }
.about-lead { font-size: clamp(22px, 2.6vw, 32px) !important; line-height: 1.8 !important; font-weight: 700 !important; color: var(--ut-ink) !important; max-width: none !important; }
.about-text { font-size: 16px !important; line-height: 1.9 !important; color: var(--ut-ink) !important; }
.about-figure, .about-portrait { border-radius: 8px !important; border: 0 !important; overflow: hidden; }
.about-gear-btn, .about-gear-btn figure, .about-gear-btn img, .about-gear-detail { border-radius: 8px !important; }
.about-chip { border-radius: 999px !important; border: 1px solid var(--ut-ink) !important; background: #fff !important; }

/* ---------- CONTACT: 下層ヘッダーと同じ見出し、フォームは罫線の行 ---------- */
.contactpg { padding: clamp(56px, 8vw, 120px) var(--ut-x) 96px !important; }
.contactpg-inner { max-width: none !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) !important; gap: 64px !important; align-items: start !important; }
.cpg-eyebrow { font-family: Montserrat, sans-serif !important; font-size: 11px !important; letter-spacing: .06em !important; font-weight: 600 !important; color: #666 !important; text-transform: none !important; }
.cpg-title { font-family: Montserrat, "Hiragino Sans", sans-serif !important; font-size: clamp(56px, 8vw, 112px) !important; font-weight: 700 !important; letter-spacing: -.03em !important; line-height: .95 !important; }
.cpg-lead { font-size: 16px !important; line-height: 1.9 !important; max-width: 30em !important; color: var(--ut-ink) !important; }
.cpg-social { border-radius: 999px !important; border: 1px solid var(--ut-ink) !important; }
.cpg-card { border: 0 !important; border-top: 1px solid var(--ut-ink) !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; padding: 24px 0 0 !important; }
.cpg-field label { font-family: Montserrat, "Hiragino Sans", sans-serif; font-size: 13px !important; font-weight: 700 !important; color: var(--ut-ink) !important; letter-spacing: 0 !important; }
.cpg-field input, .cpg-field select, .cpg-field textarea { border: 0 !important; border-bottom: 1px solid var(--ut-ink) !important; border-radius: 0 !important; padding: 12px 0 !important; background: transparent !important; font-size: 16px !important; }
.cpg-field input:focus, .cpg-field select:focus, .cpg-field textarea:focus { box-shadow: 0 1px 0 0 var(--ut-ink) !important; }
.cpg-field select { background-position: right 0 center !important; }
.cpg-submit { border-radius: 999px !important; width: auto !important; padding: 16px 32px !important; letter-spacing: .02em !important; font-family: Montserrat, "Hiragino Sans", sans-serif; }
.cpg-submit::before { content: "・ "; }
.cpg-note { text-align: left !important; }
.cpg-done { border-radius: 0 !important; }
@media (max-width: 991px) { .contactpg-inner { grid-template-columns: 1fr !important; gap: 40px !important; } }
/* 調整: パンくずは見出しの上の独立した行に(タブと重ならない) */
.grid-page-header { grid-template-areas: "crumb crumb" "title desc" "tabs tabs"; gap: 20px 40px; }
.grid-page-header::after { align-self: start; }
.grid-page-header .service-top-wrapper.category { margin-top: 8px; }
@media (max-width: 991px) { .grid-page-header { grid-template-areas: "crumb" "title" "desc" "tabs"; gap: 16px; } }
/* WORK 一覧: 行の順序は「罫線のメタ行(タグ・日付) → タイトル → 写真」 */
.body-work .work-title { display: flex !important; flex-direction: column; }
.body-work .horizon-div.tag-holder { order: 0 !important; justify-content: flex-start !important; gap: 24px; }
.body-work .work-title .text-block.is-tite { order: 1 !important; }
.body-work .work-img { order: 2 !important; }
.body-work .bento-link { display: flex !important; flex-direction: column !important; }
.body-work .bento-link > .work-img { order: 2; }
.body-work .tag-holder .button.mini { min-width: 0; margin-left: 0; }
.body-work .tag-holder .text-block.category { margin-left: 0; order: -1; }
/* CONTACT: 見出しが「CON / TACT」で折れないように */
.cpg-title { font-size: clamp(48px, 7vw, 104px) !important; white-space: nowrap; }
@media (max-width: 767px) { .cpg-title { font-size: clamp(40px, 13vw, 64px) !important; } }
/* パンくずと見出しの間隔、説明文は見出しの横に */
.grid-page-header::after { margin-bottom: 6px; }
.grid-page-header .service-top-wrapper.description { align-self: end; padding-bottom: 10px !important; }
.grid-page-header .work-count { vertical-align: top; margin-left: 8px; margin-top: 10px; }

/* ==========================================================================
   2026-11-03 スマホ精査
   ========================================================================== */
/* 見出し枠: Webflow の #w-node の grid-area に負けて、スマホでタイトルがパンくずの行に入り重なっていた */
.grid-page-header > .service-top-wrapper:not(.sns):not(.search):not(.description):not(.category) { grid-area: title !important; display: block !important; }
.grid-page-header > .service-top-wrapper.description { grid-area: desc !important; }
.grid-page-header > .service-top-wrapper.category { grid-area: tabs !important; }
.grid-page-header::after { grid-area: crumb !important; }
.grid-page-header .service-top { display: inline-block !important; }   /* 件数をタイトルの肩に */
@media (max-width: 767px) {
  .grid-page-header { padding-top: 40px; }
  /* カテゴリは折り返さず、横にスクロールする 1 行に */
  .grid-page-header .horizon-div.search { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 calc(var(--ut-x) * -1) !important; padding: 0 var(--ut-x) !important; width: auto !important; }
  .grid-page-header .horizon-div.search::-webkit-scrollbar { display: none; }
  .grid-page-header .button.cat { flex: none; white-space: nowrap; }
  /* CONTACT: 固定ヘッダーの直下に見出しが張り付いていた */
  .contactpg { padding-top: 104px !important; }
}

.grid-page-header > .service-top-wrapper.category { min-width: 0; }

/* ==========================================================================
   2026-11-01 ABOUT: 3種の神器の崩れ / 最近ハマっていること(3D ギャラリー)
   ========================================================================== */
/* 3種の神器: PC では 3 枚を 1 行に保ち、説明は行の下に開く(以前は押した札の横で折り返して崩れていた) */
@media (min-width: 768px) { .about-gear-detail { order: 99; } }
.about-3d { margin-top: 24px; }
.about-3d__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.about-3d__count { font-family: Montserrat, sans-serif; font-size: 13px; font-weight: 700; color: var(--ut-ink); }
.about-3d__nav { display: flex; gap: 6px; }
.about-3d__btn { width: 48px; height: 26px; display: grid; place-items: center; padding: 0; border: 1px solid var(--ut-ink); border-radius: 999px; background: #fff; color: var(--ut-ink); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.about-3d__btn:hover { background: var(--ut-ink); color: #fff; }
.about-3d__track { list-style: none; margin: 0; padding: 0 0 4px; display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; }
.about-3d__track::-webkit-scrollbar { display: none; }
.about-3d__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.about-3d__item { flex: 0 0 min(100%, 400px); scroll-snap-align: start; margin: 0; }
.about-3d__item canvas { display: block; width: 100%; aspect-ratio: 1; border: 1px solid var(--ut-ink); border-radius: 8px; touch-action: pan-x pan-y; cursor: grab; background: transparent; }
.about-3d__item canvas:active { cursor: grabbing; }
.about-3d__cap { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: baseline; padding-top: 10px; border-top: 1px solid var(--ut-ink); margin-top: 12px; }
.about-3d__n { font-family: Montserrat, sans-serif; font-size: 13px; font-weight: 700; color: var(--ut-ink); }
.about-3d__t { font-family: Montserrat, sans-serif; font-size: 15px; font-weight: 700; color: var(--ut-ink); }
.about-3d__d { grid-column: 2; font-size: 12px; line-height: 1.6; color: #666; }
.about-3d__item.is-nogl canvas { background: linear-gradient(145deg, #f3f3f3, #e4e4e4); }
@media (max-width: 767px) { .about-3d__item { flex-basis: 84%; } .about-3d__track { gap: 16px; } }
/* Webflow の ul(縦積み)に負けて 1 列になっていたので、横並びを明示 */
.about-3d__track { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; width: 100%; }
.about-3d__item { width: auto !important; max-width: none !important; min-width: 0; }