/* ==========================================================================
   shopippi.com トップ — Union Tec 風のリノベーション(2026-10-31)
   - 全面にうっすら方眼。黒いコンテナはやめ、背景に SHOPIPPI.COM が流れる
   - 各セクションの見せ方: HERO(カプセル写真 + 流れる社名)/ ABOUT(行ごとに灯る文章 + 楕円の写真)
     / What I Can Do(浮かぶカード)/ PROJECT(ぼかし写真の上に大きな英字 + 横に流れる作品)
   - 動き: 慣性スクロール(js/ut-motion.js)、文字の 1 文字ずつの出現、ScrollTrigger
   ========================================================================== */
:root {
  --ut-ink: #080808;
  --ut-paper: #fff;
  --ut-grid: rgba(8, 8, 8, .07);
  --ut-gap: 176px;      /* 方眼 1 マス(PC) */
  --ut-x: var(--sp-x, clamp(20px, 8.9vw, 128px));
  --ut-ease: cubic-bezier(.2, .8, .2, 1);
}
@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;
}
/* 旧 HERO の方眼アニメ(Lottie)と白いぼかしは使わない */
.lottie-grid-wrapper, .lottie-grid-tablet, .lottie-grid-desktop, .section-hero .overlay { display: none !important; }
/* セクションの地色は透明にして方眼を通す */
body, .section-hero, section, .container.is-full, .section-contents-title-wrapper, .footer_top, .section.is-top-lg { background: transparent !important; }
main, body > section, body > div { position: relative; z-index: 1; }

/* ---------- 背景に流れる SHOPIPPI.COM(セクションの後ろ) ---------- */
.ut-bgword {
  position: fixed;
  left: 0; right: 0;
  top: 50%;
  z-index: 0;
  pointer-events: none;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--_text---font-family--headings, Montserrat, sans-serif);
  font-weight: 800;
  font-size: clamp(120px, 28vw, 420px);
  line-height: 1;
  letter-spacing: -.04em;
  color: rgba(8, 8, 8, .035);
  will-change: transform;
}
.ut-bgword span { display: inline-block; padding-right: .35em; }

/* ---------- HERO ---------- */
.ut-hero {
  position: relative;
  height: 100svh !important;
  min-height: 640px;
  margin: 0 !important;
  overflow: hidden;
  display: block !important;
}
.ut-hero__marquee {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-58%);
  z-index: 1;
  overflow: hidden;
  white-space: nowrap;
}
.ut-hero__track {
  display: inline-flex;
  will-change: transform;
  font-family: var(--_text---font-family--headings, Montserrat, sans-serif);
  font-weight: 800;
  font-size: clamp(96px, 23vw, 340px);
  line-height: .9;
  letter-spacing: -.05em;
  color: var(--ut-ink);
}
.ut-hero__track span { padding-right: .32em; }
.ut-hero__capsule {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 2;
  width: min(66vw, 950px);
  aspect-ratio: 950 / 410;
  transform: translate(-50%, -56%);
  border-radius: 999px;
  overflow: hidden;
  clip-path: inset(0 round 999px);
}
.ut-hero__capsule img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.15);
  will-change: transform;
}
.ut-hero__bottom {
  position: absolute;
  left: var(--ut-x); right: var(--ut-x); bottom: 28px;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "copy copy" "meta scroll" "record scroll";
  gap: 10px 24px;
  align-items: end;
}
.ut-hero__copy {
  grid-area: copy;
  margin: 0 0 6px;
  font-family: var(--_text---font-family--headings, Montserrat, sans-serif);
  font-size: clamp(20px, 2.6vw, 38px);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.ut-hero__copy .ch { display: inline-block; opacity: 0; transform: translateY(.6em); }
.ut-hero__meta {
  grid-area: meta;
  margin: 0;
  font-family: var(--_text---font-family--headings, Montserrat, sans-serif);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #555;
}
.ut-hero .hero-record { grid-area: record; margin: 4px 0 0; justify-self: start; }
.ut-hero__scroll {
  grid-area: scroll;
  font-family: var(--_text---font-family--headings, Montserrat, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  padding-bottom: 6px;
  position: relative;
}
.ut-hero__scroll::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--ut-ink);
  transform-origin: left;
  animation: ut-scrollline 1.8s var(--ut-ease) infinite;
}
@keyframes ut-scrollline { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); transform-origin: left; } 61% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
@media (max-width: 767px) {
  .ut-hero { min-height: 560px; }
  .ut-hero__capsule { width: 86vw; aspect-ratio: 1 / 1.1; transform: translate(-50%, -60%); }
  .ut-hero__track { font-size: 27vw; }
  .ut-hero__bottom { grid-template-columns: 1fr; grid-template-areas: "copy" "meta" "record"; bottom: 22px; }
  .ut-hero__scroll { display: none; }
  .ut-hero__copy { justify-content: flex-start; gap: 0 .25em; }
}

/* ---------- セクション見出し(Union Tec の "Capability / ユニオンテックの強み" の型) ---------- */
.section-contents-title-wrapper { padding-top: clamp(64px, 9vw, 120px) !important; padding-bottom: 24px !important; border-top: 1px solid var(--ut-ink); }
.section-title-eng { font-size: clamp(34px, 4.2vw, 56px) !important; letter-spacing: -.02em !important; text-transform: none !important; }
.section-title-jp { font-size: 13px !important; font-weight: 700 !important; color: var(--ut-ink) !important; margin-top: 6px; }
.section-contents-title-wrapper.aboutme { border-top: 0; }

/* ---------- ABOUT: 行ごとに灯る文章 + 楕円の写真 ---------- */
.ut-stmt {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px;
  align-items: center;
  padding: clamp(40px, 6vw, 96px) var(--ut-x);
}
.ut-stmt__text p {
  margin: 0;
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 700;
  line-height: 2;
  letter-spacing: .01em;
  color: var(--ut-ink);
}
.ut-stmt__text .ut-stmt__gap { margin-top: 1em; }
.ut-stmt__text .ln { display: inline; background: linear-gradient(var(--ut-ink), var(--ut-ink)) no-repeat 0 0 / var(--p, 0%) 100%; -webkit-background-clip: text; background-clip: text; color: rgba(8, 8, 8, .18); -webkit-text-fill-color: transparent; }
.ut-stmt__photo { justify-self: center; width: min(100%, 380px); aspect-ratio: 380 / 520; border-radius: 999px; overflow: hidden; }
.ut-stmt__photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
@media (max-width: 991px) { .ut-stmt { grid-template-columns: 1fr; } .ut-stmt__photo { order: -1; width: min(70vw, 300px); justify-self: start; } }

/* 既存の「CURIOSITY / 興味が湧いたら…」ブロックは文章を上に移したので隠す */
.split-left.top, .split-right { display: none !important; }

/* ---------- What I Can Do: 浮かぶカード ---------- */
.ut-cap { padding: 0 var(--ut-x) 24px; }
.ut-cap__lead { max-width: 34em; margin: 0 0 48px; font-size: 15px; line-height: 2; color: #333; }
.ut-cap__cards {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  perspective: 1400px;
}
.ut-cap__card {
  position: relative;
  aspect-ratio: 1;
  padding: 22px;
  background: linear-gradient(135deg, #fafafa, #f0f0f0);
  box-shadow: 0 30px 60px -30px rgba(8, 8, 8, .35), 0 1px 0 rgba(8, 8, 8, .06) inset;
  display: flex; flex-direction: column; justify-content: space-between;
  transform-style: preserve-3d;
  will-change: transform;
}
.ut-cap__card:nth-child(2) { margin-top: 120px; }
.ut-cap__card:nth-child(3) { margin-top: 40px; }
.ut-cap__card:nth-child(4) { margin-top: 170px; }
.ut-cap__k { font-family: var(--_text---font-family--headings, Montserrat, sans-serif); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.ut-cap__k::after { content: ""; display: block; width: 8px; height: 1px; background: var(--ut-ink); margin-top: 8px; }
.ut-cap__t { font-size: clamp(16px, 1.4vw, 20px); font-weight: 700; line-height: 1.6; }
.ut-cap__glyph { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -55%); width: 72px; height: 92px; border: 1.5px solid var(--ut-ink); border-radius: 999px; }
.ut-cap__glyph--ring { border-style: dotted; border-width: 2px; width: 120px; height: 120px; }
.ut-cap__glyph--ring::after { content: ""; position: absolute; inset: 14px; border: 1.5px dotted var(--ut-ink); border-radius: 50%; }
.ut-cap__glyph--dots { border: 0; width: 100px; height: 100px; background: radial-gradient(circle, var(--ut-ink) 1.6px, transparent 2px) 0 0 / 20px 20px; -webkit-mask: radial-gradient(circle, #000 60%, transparent 61%); mask: radial-gradient(circle, #000 60%, transparent 61%); }
.ut-cap__glyph--stack { border: 0; width: 100px; height: 100px; }
.ut-cap__glyph--stack::before, .ut-cap__glyph--stack::after { content: ""; position: absolute; width: 40px; height: 60px; border: 1.5px solid var(--ut-ink); border-radius: 999px; }
.ut-cap__glyph--stack::before { left: 0; bottom: 0; }
.ut-cap__glyph--stack::after { right: 0; bottom: 0; }
.ut-cap__glyph--stack { background: none; }
.ut-cap__glyph--stack > i { position: absolute; left: 30px; top: 0; width: 40px; height: 60px; border: 1.5px solid var(--ut-ink); border-radius: 999px; }
@media (max-width: 991px) { .ut-cap__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ut-cap__card:nth-child(n) { margin-top: 0; } .ut-cap__card:nth-child(even) { margin-top: 56px; } }
@media (max-width: 599px) { .ut-cap__cards { grid-template-columns: 1fr; gap: 16px; } .ut-cap__card { aspect-ratio: 4 / 3; } .ut-cap__card:nth-child(n) { margin-top: 0; } }

/* ---------- PROJECT: ぼかし写真 + 大きな英字(Service の型) ---------- */
.ut-svc {
  position: relative;
  margin: 24px 0 72px;
  height: clamp(520px, 78vh, 760px);
  overflow: hidden;
  background: #111;
  color: #fff;
}
.ut-svc__bg { position: absolute; inset: -6%; }
.ut-svc__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(14px) brightness(.6); transform: scale(1.1); }
.ut-svc__capsule {
  position: absolute;
  right: var(--ut-x); top: 14%;
  width: min(26vw, 340px);
  aspect-ratio: 340 / 230;
  border-radius: 999px;
  overflow: hidden;
  clip-path: inset(0 round 999px);
  will-change: transform;
}
.ut-svc__capsule img { width: 100%; height: 100%; object-fit: cover; }
.ut-svc__lines {
  position: absolute;
  left: var(--ut-x); bottom: 48px;
  margin: 0; padding: 0; list-style: none;
  font-family: var(--_text---font-family--headings, Montserrat, sans-serif);
  font-size: clamp(30px, 5.2vw, 76px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.02em;
}
.ut-svc__lines li { position: relative; padding-left: 0; transition: padding-left .6s var(--ut-ease); overflow: hidden; }
.ut-svc__lines li > span { display: inline-block; transform: translateY(110%); }
.ut-svc__lines li.is-active { padding-left: .9em; }
.ut-svc__lines li::before { content: ""; position: absolute; left: .1em; top: 50%; width: .32em; height: .32em; border-radius: 50%; background: #fff; transform: translateY(-50%) scale(0); transition: transform .4s var(--ut-ease); }
.ut-svc__lines li.is-active::before { transform: translateY(-50%) scale(1); }
.ut-svc__more { position: absolute; right: var(--ut-x); bottom: 48px; }
@media (max-width: 767px) {
  .ut-svc { height: auto; min-height: 520px; padding: 120px 0 90px; }
  .ut-svc__capsule { width: 48vw; top: 24px; }
  .ut-svc__lines { position: static; padding: 0 var(--ut-x); font-size: 9vw; }
  .ut-svc__more { bottom: 24px; }
}

/* ---------- 共通: 丸いボタン(Union Tec の "・ Discover more") ---------- */
.ut-pill {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 26px 14px 22px;
  border-radius: 999px;
  background: var(--ut-ink); color: #fff;
  font-family: var(--_text---font-family--headings, Montserrat, sans-serif);
  font-size: 14px; font-weight: 700; letter-spacing: .02em;
  text-decoration: none;
}
.ut-svc .ut-pill { background: #fff; color: var(--ut-ink); }
.ut-pill__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; transition: transform .4s var(--ut-ease); }
.ut-pill:hover .ut-pill__dot { transform: translateX(6px); }

/* ---------- PROJECT の作品: 横に流れる帯(Featured Projects の型) ---------- */
.col-for-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 32px !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0 var(--ut-x) 8px !important;
  margin: 0 !important;
  width: 100% !important;
  -webkit-overflow-scrolling: touch;
}
.col-for-grid::-webkit-scrollbar { display: none; }
.col-for-grid .project-link { flex: 0 0 min(76vw, 560px) !important; min-width: 0 !important; scroll-snap-align: start; }
.col-for-grid .project-link .slide-reveal, .col-for-grid .project-link img.image { aspect-ratio: 16 / 10; object-fit: cover; }
.grid .project-link .slide-reveal img, .grid .project-link .slide-reveal { aspect-ratio: 16 / 10; }

/* 出現アニメーションの初期状態(JS が解除) */
[data-reveal] { opacity: 0; transform: translateY(28px); }
.ut-ready [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .8s var(--ut-ease), transform 1s var(--ut-ease); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
  .ut-hero__copy .ch { opacity: 1; transform: none; }
  .ut-svc__lines li > span { transform: none; }
  .ut-hero__scroll::after { animation: none; }
}

/* ---------- 1 回目の確認で直す点 ---------- */
/* HERO の一言: 旧テンプレートの薄い色(#e6e6e6)を継いでいた */
.ut-hero__copy, .ut-hero__copy .ch { color: var(--ut-ink) !important; }
/* カプセルの写真: 元画像の黒い余白が目立つので、ノート PC が枠いっぱいになるよう寄せる */
.ut-hero__capsule img { object-position: 50% 42%; transform: scale(1.55); }
@media (max-width: 767px) { .ut-hero__capsule img { object-position: 50% 45%; transform: scale(1.9); } }
/* 横に流れる作品の帯: 2 枚組の下に間隔を取る。小さいカードも同じ型(写真 → ラベル → タイトル) */
.col-for-grid { margin-top: 48px !important; }
.col-for-grid .project-link { background: #fff; }
.col-for-grid .project-link .slide-reveal { border: 0 !important; border-bottom: 1px solid var(--ut-ink) !important; }
/* PROJECT のぼかし面: 英字と丸ボタンが重ならないよう、英字の右に余白、ボタンは上寄せに */
.ut-svc__lines { right: calc(var(--ut-x) + 220px); }
.ut-svc__more { bottom: auto; top: calc(14% + min(26vw, 340px) * 230 / 340 + 28px); }
@media (max-width: 1100px) { .ut-svc__lines { right: var(--ut-x); font-size: clamp(28px, 4.4vw, 60px); } .ut-svc__more { top: auto; bottom: 28px; } .ut-svc__lines { bottom: 96px; } }
@media (max-width: 767px) { .ut-svc__lines { bottom: auto; } .ut-svc__more { position: static; margin: 24px var(--ut-x) 0; display: inline-flex; } .ut-svc { padding-bottom: 40px; } }
/* HERO の下の情報: スマホで一言が 2 行になるので間隔を詰める */
@media (max-width: 767px) { .ut-hero__copy { font-size: 20px; line-height: 1.35; } .ut-hero__bottom { gap: 8px; } }

/* ---------- 2 回目の確認で直す点 ---------- */
/* Capability: 親の container が左右 128px を持つので二重にしない。下にずらした分の余白を確保 */
.ut-cap { padding-left: 0 !important; padding-right: 0 !important; }
.ut-cap__cards { padding-bottom: 230px; }
.ut-cap__card { color: var(--ut-ink); }
@media (max-width: 991px) { .ut-cap__cards { padding-bottom: 96px; } }
@media (max-width: 599px) { .ut-cap__cards { padding-bottom: 32px; } }
/* Service: 英字は 1 行ずつ収める */
.ut-svc__lines { font-size: clamp(28px, 4.5vw, 64px); right: calc(var(--ut-x) + 200px); }
@media (max-width: 767px) {
  .ut-svc { min-height: 0; padding: 96px 0 40px; }
  .ut-svc__lines { font-size: 8.4vw; }
}

/* ==========================================================================
   2026-11-01 Union Tec のサブページ(強み・事業展開・プロジェクト)に合わせた作り直し
   ========================================================================== */
/* 写真の重なりをやめる: 旧 Service ブロックは削除(HTML)。3 枚の強みカード */
.ut-cap__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1100px; gap: 32px; }
.ut-cap__card:nth-child(1) { margin-top: 0; }
.ut-cap__card:nth-child(2) { margin-top: 120px; }
.ut-cap__card:nth-child(3) { margin-top: 48px; }
@media (max-width: 991px) { .ut-cap__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ut-cap__card:nth-child(n) { margin-top: 0; } .ut-cap__card:nth-child(2) { margin-top: 56px; } }
@media (max-width: 599px) { .ut-cap__cards { grid-template-columns: 1fr; } .ut-cap__card:nth-child(n) { margin-top: 0; } }

/* 文字の大きさを Union Tec に合わせる */
.section-title-eng { font-size: clamp(32px, 3.4vw, 48px) !important; }
.ut-stmt__text p { font-size: clamp(20px, 2.2vw, 32px); line-height: 2; }
.ut-stmt__photo { width: min(100%, 380px); aspect-ratio: 380 / 540; }
.ut-stmt__photo img { transform: scale(1.06); object-position: 50% 40%; }

/* ---------- Field of Work(Union Tec の /service/ の行) ---------- */
.ut-fow { padding: 8px var(--ut-x) 0; }
.ut-fow__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.ut-fow__lead { grid-column: 2; margin: 0; font-size: 18px; line-height: 1.8; color: var(--ut-ink); }
.ut-fow__k { grid-column: 2; margin: 0; font-family: var(--_text---font-family--headings, Montserrat, sans-serif); font-size: 16px; font-weight: 700; }
.ut-fow__rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ut-ink); }
.ut-fow__row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 32px 0; border-bottom: 1px solid var(--ut-line, #dcdcdc); }
.ut-fow__h { padding-left: 64px; }
.ut-fow__h h3 { margin: 0; display: flex; flex-direction: column; gap: 4px; font-family: var(--_text---font-family--headings, Montserrat, sans-serif); font-size: 16px; font-weight: 700; line-height: 1.5; }
.ut-fow__h h3 span { font-family: var(--sp-jp, sans-serif); font-size: 13px; font-weight: 500; color: #444; }
.ut-fow__tag { display: inline-block; margin: 14px 0 0; padding: 3px 10px; background: #efefef; font-size: 12px; line-height: 1.6; color: #222; }
.ut-fow__d { margin: 0; max-width: 420px; justify-self: end; font-size: 16px; line-height: 1.8; color: var(--ut-ink); }
@media (max-width: 991px) {
  .ut-fow__intro { grid-template-columns: 1fr; } .ut-fow__lead, .ut-fow__k { grid-column: 1; }
  .ut-fow__row { grid-template-columns: 1fr; gap: 16px; padding: 24px 0; } .ut-fow__h { padding-left: 0; } .ut-fow__d { justify-self: start; max-width: none; }
}

/* ---------- Featured Projects(Union Tec のトップの横並び) ---------- */
.ut-fp { padding: clamp(72px, 9vw, 128px) 0 24px; overflow: hidden; }
.ut-fp__head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--ut-x); margin-bottom: 56px; }
.ut-fp__title { margin: 0; font-family: var(--_text---font-family--headings, Montserrat, sans-serif); font-size: clamp(24px, 2.3vw, 32px); font-weight: 700; letter-spacing: -.01em; }
.ut-fp__nav { display: flex; gap: 6px; }
.ut-fp__btn { width: 48px; height: 26px; display: grid; place-items: center; 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; }
.ut-fp__btn:hover { background: var(--ut-ink); color: #fff; }
.ut-fp__list {
  list-style: none; margin: 0; padding: 0 var(--ut-x);
  display: flex; gap: 40px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.ut-fp__list::-webkit-scrollbar { display: none; }
.ut-fp__list.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.ut-fp__item { flex: 0 0 min(80vw, 570px); scroll-snap-align: start; }
.ut-fp__link { display: grid; grid-template-columns: 100px 1fr auto; grid-template-rows: auto 1fr; column-gap: 0; row-gap: 24px; align-items: start; padding-top: 8px; border-top: 1px solid var(--ut-ink); color: var(--ut-ink); text-decoration: none; }
.ut-fp__cat { margin: 0; min-height: 26px; display: flex; align-items: center; font-family: var(--_text---font-family--headings, Montserrat, sans-serif); font-size: 13px; font-weight: 700; transition: color .3s ease; }
.ut-fp__t { margin: 0; font-size: 16px; line-height: 1.6; font-weight: 500; transition: color .3s ease; }
.ut-fp__arrow { margin: 6px 0 0 16px; width: 12px; height: 12px; color: var(--ut-ink); transition: color .3s ease, transform .4s var(--ut-ease); }
.ut-fp__img { grid-column: 1 / -1; aspect-ratio: 308 / 205; border-radius: 8px; overflow: hidden; background: #ececec; }
.ut-fp__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ut-ease); }
/* ホバー: 文字が薄くなり、写真が枠の中で少し縮む(Union Tec と同じ) */
.ut-fp__link:hover .ut-fp__cat, .ut-fp__link:hover .ut-fp__t { color: #9a9a9a; }
.ut-fp__link:hover .ut-fp__arrow { transform: translate(2px, -2px); }
.ut-fp__link:hover .ut-fp__img img { transform: scale(.94); }
.ut-fp__more {
  display: grid; grid-template-columns: auto 180px 1fr auto; align-items: center; gap: 40px;
  width: min(100% - var(--ut-x) * 2, 734px); margin: 96px var(--ut-x) 0;
  padding: 32px; border-radius: 8px; background: #f6f6f6; color: var(--ut-ink); text-decoration: none;
}
.ut-fp__more-k { font-family: var(--_text---font-family--headings, Montserrat, sans-serif); font-size: 24px; font-weight: 700; }
.ut-fp__more-thumb { aspect-ratio: 180 / 120; border-radius: 4px; overflow: hidden; }
.ut-fp__more-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ut-fp__more-t { font-size: 16px; font-weight: 700; line-height: 1.6; }
.ut-fp__more-arrow { align-self: end; transition: transform .4s var(--ut-ease); }
.ut-fp__more:hover .ut-fp__more-arrow { transform: translate(2px, -2px); }
@media (max-width: 767px) {
  .ut-fp__list { gap: 24px; } .ut-fp__item { flex-basis: 82vw; }
  .ut-fp__link { grid-template-columns: 64px 1fr auto; row-gap: 16px; } .ut-fp__cat { font-size: 11px; min-height: 16px; } .ut-fp__t { font-size: 13px; }
  .ut-fp__more { grid-template-columns: 1fr auto; gap: 12px 16px; padding: 20px; margin-top: 56px; }
  .ut-fp__more-k { font-size: 18px; } .ut-fp__more-thumb { display: none; } .ut-fp__more-t { grid-column: 1; font-size: 14px; }
}
/* 旧 PROJECT のカード(黒枠)はトップでは使わない(CMS の読み込みは残す) */
.section-pickup .grid, .section-pickup .col-for-grid, .section-pickup .btn-sweep,
body.home-ut .grid.w-layout-grid:has(.project-card-wrapper), body.home-ut .col-for-grid, body.home-ut .container.is-full:has(> .col-for-grid) > .btn-sweep { display: none !important; }

/* ---------- 3 回目の確認で直す点 ---------- */
/* Webflow の ul { flex-direction: column } に負けて縦に積まれていた */
.ut-fp__list { flex-direction: row !important; display: flex !important; }
/* 旧テンプレートの薄い文字色を継がない */
.ut-fow, .ut-fow *, .ut-fp, .ut-fp * { color: var(--ut-ink); }
.ut-fow__h h3 span { color: #444; }
.ut-fp__link:hover .ut-fp__cat, .ut-fp__link:hover .ut-fp__t { color: #9a9a9a; }
/* ABOUT の文章: 親の container が左右の余白を持つので二重にしない。1 行 20 字が収まる大きさに */
.ut-stmt { padding-left: 0 !important; padding-right: 0 !important; grid-template-columns: minmax(0, 1fr) 380px; gap: 64px; }
.ut-stmt__text p { font-size: clamp(20px, 2vw, 30px); }
@media (max-width: 991px) { .ut-stmt { grid-template-columns: 1fr; } }
/* 旧「プロジェクト一覧はこちら」(Explore More に置き換えた) */
.ut-hide { display: none !important; }
/* スマホ: カテゴリ名が長いと題名に重なっていた */
.ut-fp__link { grid-template-columns: minmax(100px, auto) 1fr auto; }
.ut-fp__cat { padding-right: 16px; white-space: nowrap; }
@media (max-width: 767px) { .ut-fp__link { grid-template-columns: minmax(64px, auto) 1fr auto; } .ut-fp__cat { padding-right: 12px; } }
/* 横並びの左端を本文の左端(128px)に揃える(Webflow の ul { padding:0 } が勝っていた) */
.ut-fp__list { padding-left: var(--ut-x) !important; padding-right: var(--ut-x) !important; scroll-padding-left: var(--ut-x); }

/* ==========================================================================
   2026-11-02 写真は切り抜かず、文字とも重ねない
   HERO: 上に SHOPIPPI.COM、下に写真(全体が見える)、その下に一言。重なりなし
   ABOUT: 楕円をやめ、写真を角のある枠に。全体が見える
   ========================================================================== */
.ut-hero { display: grid !important; grid-template-rows: auto 1fr auto; height: 100svh !important; min-height: 700px; padding-top: 72px; row-gap: 20px; }
.ut-hero__marquee { position: relative; top: auto; transform: none; grid-row: 1; }
.ut-hero__track { font-size: clamp(72px, 15.5vw, 230px); line-height: .92; }
.ut-hero__photo {
  grid-row: 2;
  justify-self: center; align-self: center;
  width: min(1184px, 100% - var(--ut-x) * 2);
  height: 100%;
  min-height: 0;
  display: grid; place-items: center;
}
.ut-hero__photo img {
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  object-fit: contain;            /* 切り抜かない */
  border: 1px solid var(--ut-ink);
  background: #fff;
  will-change: transform;
}
.ut-hero__bottom { position: relative; left: auto; right: auto; bottom: auto; grid-row: 3; padding: 0 var(--ut-x) 28px; }
@media (max-width: 767px) {
  .ut-hero { min-height: 620px; padding-top: 64px; row-gap: 14px; }
  .ut-hero__track { font-size: 20vw; }
  .ut-hero__bottom { padding-bottom: 20px; }
}
/* ABOUT の写真: 角のある枠、全体が見える */
.ut-stmt__photo { border-radius: 0; aspect-ratio: auto; width: min(100%, 420px); border: 1px solid var(--ut-ink); background: #fff; overflow: hidden; }
.ut-stmt__photo img { width: 100%; height: auto; object-fit: contain; transform: none; }
.ut-stmt { grid-template-columns: minmax(0, 1fr) 420px; align-items: start; }
@media (max-width: 991px) { .ut-stmt { grid-template-columns: 1fr; } .ut-stmt__photo { width: 100%; order: 1; } }
/* HERO の写真(PC): 行の高さを超えないよう、画像ではなく枠側に高さの上限を持たせる */
.ut-hero__photo { height: auto; max-height: 100%; min-height: 0; overflow: hidden; }
.ut-hero__photo img { max-height: calc(100svh - 72px - 20px - 230px - 20px - 150px); }
@media (max-width: 767px) { .ut-hero__photo img { max-height: calc(100svh - 64px - 14px - 20vw - 14px - 190px); } }

/* ---------- 2026-11-02 仕上げ ---------- */
/* ABOUT の文章: まだ読んでいない部分も薄い灰色で見える(Union Tec と同じ)。
   以前は背景の幅で灯していたため、未読の部分が真っ白で「文章が途中で切れた」ように見えていた */
.ut-stmt__text .ln {
  background: linear-gradient(90deg, var(--ut-ink) 0 var(--p, 0%), rgba(8, 8, 8, .2) var(--p, 0%) 100%);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* HERO の一言: 単語を画面幅いっぱいに散らさず、左から普通に並べる */
.ut-hero__copy { justify-content: flex-start; gap: 0 .3em; letter-spacing: .01em; }