/* ==========================================================================
   トップ 2 節目から下（front-page-v2.php・2026-10-20）
   --------------------------------------------------------------------------
   手本 4 社を実際にスクロールして撮り、部品の作りを節ごとに取って組んだ:
     LayerX    … 灰色の角丸の面（What We Do）／写真つきの行と丸い矢印（Business）
                 ／組み写真（Join Us）／斜めの図形を節の端に置く
     SmartHR   … 節の頭の札（四角＋全幅の罫）／お知らせの行（日付・札・題・●→）
                 ／大きさと形の違う写真を帯の上に並べる
     Goodpatch … 会社色の帯＋大きな欧文（Design Platforms）／輪郭だけの巨大な欧文を背に中央の宣言（Company）
     レバレジーズ … 色を絞る・余白を広く取る
   最後にまとめる糸: ヒーローの斜めの帯（ロゴの紺→緑・#heroBarPaint）を全節に通す。
   色は紺 1 色 + 墨 + 灰。角は 3 段（行の写真 14 / 写真 24 / 面 32）だけ。
   動きは付けていない（JS が無くても完成形）。
   ========================================================================== */
:root {
  --v2-ink: #12213a;
  --v2-sub: #5c6879;
  --v2-line: #dbe2ea;
  --v2-soft: #f1f4f8;
  --v2-accent: #003678;
  --v2-deep: #0d1d36;
  --v2-en: "Figtree", "Noto Sans JP", sans-serif;
  --v2-ja: "Noto Sans JP", sans-serif;
  --v2-pad: 60px;
}

.v2-sec { position: relative; padding: 150px 0; color: var(--v2-ink); font-family: var(--v2-ja); }
.v2-in { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; padding: 0 var(--v2-pad); }
.v2-root { overflow-x: clip; }
/* 斜めの帯の束（3 本・単色・ずらして重ねる。ヒーローの組み方） */
.v2-bars { position: absolute; z-index: 0; width: var(--w, 900px); aspect-ratio: 2337.6 / 200; pointer-events: none; }
.v2-bar { position: absolute; display: block; height: auto; }
.v2-bar--c1 { top: 0; left: 0; width: 100%; color: #003c78; }
.v2-bar--c2 { top: 36%; left: 16%; width: 84%; color: #286eaa; }
.v2-bar--c3 { top: 72%; left: 4%; width: 58%; color: #28a08c; }

/* 節の札（SmartHR）: 全幅の罫の左端に、ロゴの色の四角と欧文 */
.v2-label {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 56px; padding-top: 18px;
  border-top: 1px solid var(--v2-line);
  font-family: var(--v2-en); font-weight: 600; font-size: 15px; letter-spacing: .04em;
}
/* 番号は帯と同じ紺。記号（四角・点）は置かない */
.v2-label b { font-weight: 600; color: var(--v2-accent); }
.v2-label b::after { content: ""; display: inline-block; width: 24px; height: 1px; margin: 0 0 4px 12px; background: currentColor; opacity: .4; }
.v2-label--light b { color: #7fb0e0; }
.v2-label--center { justify-content: center; border-top: 0; padding-top: 0; }
.v2-label--light { color: #fff; border-top-color: rgb(255 255 255 / .18); }

.v2-h2 { margin: 0; font-weight: 700; font-size: 40px; line-height: 1.5; letter-spacing: .03em; }
.v2-h2--xl { font-size: 56px; line-height: 1.4; }
.v2-h2--center { text-align: center; }
.v2-h3 { margin: 0; font-weight: 700; font-size: 26px; line-height: 1.5; letter-spacing: .03em; }
.v2-p { margin: 0; color: var(--v2-sub); font-size: 16px; line-height: 1.95; letter-spacing: .04em; }
.v2-sec .typo-accent { color: var(--v2-accent); }

/* 丸い矢印（LayerX）と、それを使う 2 つの導線 */
.v2-circle {
  display: inline-grid; place-items: center; flex: none;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--v2-line); color: var(--v2-accent);
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.v2-circle svg { width: 15px; height: 15px; }
a:hover > .v2-circle, a:focus-visible > .v2-circle { background: var(--v2-accent); border-color: var(--v2-accent); color: #fff; }
.v2-link { display: inline-flex; align-items: center; gap: 16px; color: var(--v2-ink); font-weight: 700; font-size: 15px; letter-spacing: .04em; text-decoration: none; }
.v2-link--light { color: #fff; }
.v2-link--light .v2-circle { border-color: rgb(255 255 255 / .3); color: #fff; }
.v2-link--light:hover .v2-circle { background: #fff; border-color: #fff; color: var(--v2-accent); }
.v2-pill {
  display: inline-flex; align-items: center; gap: 22px;
  height: 60px; padding: 0 6px 0 30px; border-radius: 999px;
  font-weight: 700; font-size: 15px; letter-spacing: .04em; text-decoration: none;
}
.v2-pill .v2-circle { width: 48px; height: 48px; border: 0; }
.v2-pill--white { background: #fff; color: var(--v2-accent); }
.v2-pill--white .v2-circle { background: var(--v2-accent); color: #fff; }

/* ── お知らせ（SmartHR / LayerX の行）──────────────────────────────── */
.v2-news { padding-bottom: 190px; }
.v2-bars--news { --w: 780px; right: -160px; bottom: -58px; z-index: 3; }
.v2-news__grid { display: grid; grid-template-columns: 4fr 8fr; gap: 80px; }
.v2-news__head { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.v2-news__list ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--v2-line); }
.v2-news__list li { border-bottom: 1px solid var(--v2-line); }
.v2-news__row {
  display: grid; grid-template-columns: 168px 132px 1fr 52px; align-items: center; gap: 32px;
  padding: 26px 0; color: inherit; text-decoration: none;
}
.v2-news__thumb { display: block; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: var(--v2-soft); }
.v2-news__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.v2-news__row:hover .v2-news__thumb img { transform: scale(1.05); }
.v2-news__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.v2-news__meta time { color: var(--v2-sub); font-family: var(--v2-en); font-weight: 600; font-size: 14px; letter-spacing: .04em; }
.v2-tag { padding: 3px 10px; border: 1px solid var(--v2-line); border-radius: 4px; color: var(--v2-sub); font-weight: 500; font-size: 12px; }
.v2-news__title { font-weight: 700; font-size: 17px; line-height: 1.65; letter-spacing: .03em; }

/* ── 事業（LayerX の灰色の面 ＋ 写真つきの行）──────────────────────── */
.v2-biz { padding: 0; }
.v2-panel { position: relative; margin: 0 24px; padding: 130px 0; border-radius: 20px; background: var(--v2-soft); }
.v2-panel--ink { overflow: hidden; }
.v2-bars--biz-a { --w: 700px; left: -150px; bottom: -64px; z-index: 3; }
.v2-biz .v2-h2--xl { margin-bottom: 80px; }
.v2-biz__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--v2-line); }
.v2-biz__list li { border-bottom: 1px solid var(--v2-line); }
.v2-biz__row {
  display: grid; grid-template-columns: 300px 56px 1fr 52px; align-items: center; gap: 40px;
  padding: 36px 0; color: inherit; text-decoration: none;
}
.v2-biz__photo { display: block; aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; background: #dfe6ee; }
.v2-biz__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.v2-biz__row:hover .v2-biz__photo img { transform: scale(1.05); }
.v2-biz__num { align-self: start; padding-top: 6px; color: var(--v2-accent); font-family: var(--v2-en); font-weight: 600; font-size: 18px; }
.v2-biz__body { display: flex; flex-direction: column; gap: 12px; }
.v2-biz__title { font-weight: 700; font-size: 28px; line-height: 1.4; letter-spacing: .03em; }
.v2-biz__text { max-width: 38em; color: var(--v2-sub); font-size: 15px; line-height: 1.95; letter-spacing: .04em; }

/* ── CRM（Goodpatch の会社色の帯 ＋ 大きな欧文）────────────────────── */
.v2-crm {
  margin-top: 150px; padding: 140px 0 0; overflow: hidden; color: #fff;
  background: #003678;
}
.v2-crm .v2-bar--c1 { color: #0e4a8c; }
.v2-crm .v2-bar--c2 { color: #2a6eaa; }
.v2-crm .v2-bar--c3 { color: #28a08c; }
.v2-bars--crm-a { --w: 820px; right: -200px; top: 150px; }
.v2-crm__head { display: grid; grid-template-columns: 1fr 440px; align-items: end; gap: 60px; }
.v2-crm__en { margin: 0; font-family: var(--v2-en); font-weight: 600; font-size: 150px; line-height: .9; letter-spacing: -.035em; }
.v2-crm__title { margin: 0; font-weight: 700; font-size: 30px; line-height: 1.5; letter-spacing: .03em; }
.v2-crm__text { margin: 18px 0 32px; color: rgb(255 255 255 / .8); font-size: 15px; line-height: 1.95; letter-spacing: .04em; }
.v2-crm__shot { display: block; max-width: 1040px; margin: 90px auto -40px; }
.v2-crm__screen { display: block; position: relative; border-radius: 10px 10px 0 0; overflow: hidden; box-shadow: 0 0 0 1px rgb(255 255 255 / .12); }
.v2-crm__screen > img { display: block; width: 100%; height: auto; }
.v2-crm__screen .live-stage { position: absolute; inset: 0; }
.v2-crm__screen.is-live > img { visibility: hidden; }

/* ── Vision（Goodpatch の Company ＋ SmartHR の写真の並び）───────────── */
.v2-vision { overflow: hidden; }
.v2-vision .v2-label--center { margin-bottom: 36px; }
.v2-vision__photos {
  position: relative; display: grid; grid-template-columns: 1.15fr .75fr 1.4fr; align-items: end; gap: 24px;
  max-width: 1320px; margin: 90px auto 0; padding: 0 var(--v2-pad);
}
.v2-bars--vision { --w: 1500px; left: -220px; top: 30%; }
.v2-ph { position: relative; z-index: 1; display: block; overflow: hidden; border-radius: 8px; background: var(--v2-soft); }
.v2-ph img { width: 100%; height: 100%; object-fit: cover; }
.v2-ph--a { aspect-ratio: 4 / 5; }
.v2-ph--b { aspect-ratio: 3 / 4; margin-bottom: 80px; }
.v2-ph--c { aspect-ratio: 4 / 3; }
.v2-vision__items { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin: 80px 0 0; padding: 0; list-style: none; }
.v2-vision__items .v2-p { margin: 16px 0 28px; }

/* ── 会社概要・採用（LayerX の Join Us）──────────────────────────────── */
.v2-about { padding: 0 0 150px; }
.v2-panel--ink { padding: 130px 0 0; background: var(--v2-deep); color: #fff; }
.v2-bars--about { --w: 760px; right: -180px; top: 44px; }
.v2-about__items { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin: 0; padding: 0; list-style: none; }
.v2-about__title { margin: 0; font-weight: 700; font-size: 40px; line-height: 1.4; letter-spacing: .03em; }
.v2-panel--ink .v2-p { margin: 18px 0 30px; color: rgb(255 255 255 / .74); }
.v2-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 100px 16px -70px; }
.v2-mosaic__ph { display: block; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: #1c2d48; }
.v2-mosaic__ph img { width: 100%; height: 100%; object-fit: cover; }
.v2-mosaic__ph:nth-child(even) { transform: translateY(64px); }

/* ── スマホ・タブレット ───────────────────────────────────────────── */
@media (max-width: 1023px) {
  :root { --v2-pad: 20px; }
  .v2-sec { padding: 88px 0; }
  .v2-label { margin-bottom: 32px; }
  .v2-h2 { font-size: 26px; }
  .v2-h2--xl { font-size: 32px; }
  .v2-h3 { font-size: 21px; }
  .v2-p { font-size: 15px; }
  .v2-circle { width: 44px; height: 44px; }
  .v2-news { padding-bottom: 120px; }
  .v2-bars--news { --w: 420px; right: -140px; bottom: -36px; }
  .v2-news__grid { grid-template-columns: 1fr; gap: 32px; }
  .v2-news__head { gap: 24px; }
  .v2-news__head .v2-link { order: 2; }
  .v2-news__row { grid-template-columns: 104px 1fr 44px; grid-template-areas: "thumb meta arrow" "thumb title arrow"; gap: 6px 16px; padding: 20px 0; }
  .v2-news__thumb { grid-area: thumb; }
  .v2-news__meta { grid-area: meta; flex-direction: row; align-items: center; }
  .v2-news__title { grid-area: title; font-size: 15px; }
  .v2-news__row > .v2-circle { grid-area: arrow; }
  .v2-panel { margin: 0 10px; padding: 80px 0; border-radius: 14px; }
  .v2-bars--biz-a { --w: 380px; left: -120px; bottom: -36px; }
  .v2-biz .v2-h2--xl { margin-bottom: 40px; }
  .v2-biz__row { grid-template-columns: 1fr 44px; gap: 18px 16px; padding: 28px 0; }
  .v2-biz__photo { grid-column: 1 / -1; }
  .v2-biz__num { display: none; }
  .v2-biz__title { font-size: 22px; }
  .v2-crm { margin-top: 88px; padding-top: 88px; }
  .v2-crm__head { grid-template-columns: 1fr; gap: 28px; }
  .v2-crm__en { font-size: 68px; }
  .v2-crm__title { font-size: 22px; }
  .v2-crm__shot { margin: 56px 16px -20px; }
  .v2-bars--crm-a { --w: 440px; right: -180px; top: 40px; }
  .v2-vision .v2-h2--xl { font-size: 25px; }
  .v2-vision__photos { grid-template-columns: 1fr .7fr; gap: 10px; margin-top: 48px; }
  .v2-ph--c { grid-column: 1 / -1; }
  .v2-ph--b { margin-bottom: 40px; }
  .v2-bars--vision { --w: 800px; left: -260px; top: 26%; }
  .v2-vision__items { grid-template-columns: 1fr; gap: 48px; margin-top: 48px; }
  .v2-about { padding-bottom: 88px; }
  .v2-panel--ink { padding-top: 80px; }
  .v2-bars--about { --w: 420px; right: -170px; top: 24px; }
  .v2-about__items { grid-template-columns: 1fr; gap: 48px; }
  .v2-about__title { font-size: 28px; }
  .v2-mosaic { grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 56px 10px -40px; }
  .v2-mosaic__ph:nth-child(even) { transform: translateY(36px); }
  .v2-mosaic__ph:nth-child(n+5) { display: none; }
}

/* ── 動き（top-v2.js が html に .v2-motion を付けたときだけ隠す。JS が無ければ全部見えている）── */
[data-drift] { translate: var(--drift, 0) 0; }
[data-drift-axis="y"] { translate: 0 var(--drift, 0); }
html.v2-motion .v2-rv { opacity: 0; transform: translateY(28px); }
html.v2-motion .v2-rv.is-in {
  opacity: 1; transform: none;
  transition: opacity .9s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 90ms), transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 90ms);
}
/* 札の罫は左から引かれる（SmartHR） */
.v2-label { position: relative; }
html.v2-motion .v2-label.v2-rv { border-top-color: transparent; }
html.v2-motion .v2-label.v2-rv::after {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%;
  background: currentColor; opacity: .18; transform: scaleX(0); transform-origin: left;
}
html.v2-motion .v2-label--center.v2-rv::after { display: none; }
html.v2-motion .v2-label.v2-rv.is-in::after { transform: scaleX(1); transition: transform 1.4s cubic-bezier(.65,0,.35,1) .1s; }
html.v2-motion .v2-news .v2-label.v2-rv::after,
html.v2-motion .v2-biz .v2-label.v2-rv::after { background: var(--v2-line); opacity: 1; }
/* 写真は下から切り開く（Goodpatch / LayerX） */
html.v2-motion .v2-wipe { clip-path: inset(100% 0 0 0 round 24px); }
html.v2-motion .v2-wipe.is-in { clip-path: inset(0 0 0 0 round 0); transition: clip-path 1.3s cubic-bezier(.65,0,.35,1) calc(var(--i, 0) * 110ms); }
html.v2-motion .v2-wipe img { transform: scale(1.12); }
html.v2-motion .v2-wipe.is-in img { transform: scale(1); transition: transform 1.8s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 110ms); }
html.v2-motion .v2-biz__row:hover .v2-biz__photo.is-in img,
html.v2-motion .v2-news__row:hover .v2-news__thumb img { transform: scale(1.05); transition: transform .5s ease; }
/* 斜めの帯は横から差し込む（LayerX / ヒーローの帯と同じ向き） */
html.v2-motion .v2-slide { clip-path: inset(0 100% 0 0); }
html.v2-motion .v2-slide.is-in { clip-path: inset(0 0 0 0); transition: clip-path 1.6s cubic-bezier(.65,0,.35,1) .15s; }
@media (prefers-reduced-motion: reduce) {
  [data-drift], [data-drift-axis="y"] { translate: none; }
}

/* ── 1 本の帯の重なり順: 節の地（z なし）＜ 帯（1）＜ 文字・写真（2）──────── */
/* ★ main に position を付けない。付けるとヒーローの動画（absolute）の基準が main 全体に変わり、
     動画がページ全体に引き伸ばされて白地に透ける（2026-10-20 に実際に起きた）。
     帯は文書の座標で置く（top は JS が書く） */
.v2-ribbon { position: absolute; left: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.v2-in, .v2-vision__photos, .v2-mosaic, .v2-crm__shot { position: relative; z-index: 2; }
/* 帯は色の付いた面（事業の灰・CRM の紺・会社概要の紺）の裏を通る。
   白地の節では文字の下に見え、面に来ると裏へ潜って反対側から出てくる（節を縫う） */
.v2-panel, .v2-crm { z-index: 2; }

/* ── 事業のタイル（Sansan / マネーフォワードの事業の並べ方）──────────────────
   事業ごとに 地の色・写真・実物の製品画面 2 枚 を変える。画面幅いっぱいに敷き詰め、隙間を置かない。
   1 枚目（主軸）は横幅いっぱいで 文字左・絵右、2・3 枚目は横に並べて 絵上・文字下。 */
.v2-biz { padding: 150px 0 0; }
.v2-biz .v2-h2--xl { margin-bottom: 72px; }
.v2-tiles { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; }
.v2-tile {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; min-height: 640px;
  color: #fff; text-decoration: none; background: var(--tile);
}
.v2-tile--fc { --tile: #0e3d70; --tile-line: #63c7b6; }
.v2-tile--sales { --tile: #1b5f9a; --tile-line: #9fd0f2; }
.v2-tile--ai { --tile: #0d5b57; --tile-line: #7fe0cf; }
.v2-tile__photo { position: absolute; inset: 0; z-index: -1; }
.v2-tile__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); mix-blend-mode: luminosity; opacity: .16; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.v2-tile:hover .v2-tile__photo img { transform: scale(1.04); }
.v2-tile__art { position: relative; display: block; padding: 64px 64px 0; }
.v2-tile__screen {
  position: relative; display: block; width: 84%; aspect-ratio: 1424 / 904;
  border-radius: 10px; overflow: hidden; background: #fff;
  box-shadow: 0 28px 60px -28px rgb(0 0 0 / .55);
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.v2-tile__screen > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v2-tile__screen .live-stage { position: absolute; inset: 0; }
.v2-tile__screen.is-live > img { visibility: hidden; }
.v2-tile__sub {
  position: absolute; right: 48px; bottom: -36px; z-index: 1; display: block; width: 44%; aspect-ratio: 1424 / 904;
  border-radius: 8px; overflow: hidden; background: #fff;
  box-shadow: 0 24px 50px -20px rgb(0 0 0 / .6);
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.v2-tile__sub img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.v2-tile:hover .v2-tile__screen { transform: translateY(-6px); }
.v2-tile:hover .v2-tile__sub { transform: translateY(-12px); }
.v2-tile__text { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin-top: auto; padding: 84px 64px 64px; }
.v2-tile__en { font-family: var(--v2-en); font-weight: 600; font-size: 13px; letter-spacing: .08em; opacity: .72; }
.v2-tile__title { margin-top: 14px; font-weight: 700; font-size: 34px; line-height: 1.35; letter-spacing: .03em; }
.v2-tile__title::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 18px; background: var(--tile-line); }
.v2-tile__desc { margin-top: 20px; max-width: 30em; color: rgb(255 255 255 / .82); font-size: 15px; line-height: 1.9; letter-spacing: .04em; }
.v2-tile__more { display: inline-flex; align-items: center; gap: 14px; margin-top: 30px; font-weight: 700; font-size: 14px; letter-spacing: .04em; }
.v2-tile__more .v2-circle { border-color: rgb(255 255 255 / .35); color: #fff; }
.v2-tile:hover .v2-tile__more .v2-circle { background: #fff; border-color: #fff; color: var(--tile); }
/* 1 枚目は横幅いっぱい・文字左・絵右 */
.v2-tile--wide { grid-column: 1 / -1; flex-direction: row-reverse; align-items: stretch; min-height: 600px; }
.v2-tile--wide .v2-tile__art { flex: 0 0 58%; padding: 80px 0 0; }
.v2-tile--wide .v2-tile__screen { width: 92%; margin-left: 0; }
.v2-tile--wide .v2-tile__sub { left: -70px; right: auto; bottom: 64px; width: 40%; }
.v2-tile--wide .v2-tile__text { flex: 1; justify-content: center; margin-top: 0; padding: 80px 64px 80px max(64px, calc(50vw - 660px + 60px)); }
.v2-tile--wide .v2-tile__title { font-size: 40px; }
@media (max-width: 1023px) {
  .v2-biz { padding-top: 88px; }
  .v2-biz .v2-h2--xl { margin-bottom: 40px; }
  .v2-tiles { grid-template-columns: 1fr; }
  .v2-tile, .v2-tile--wide { flex-direction: column; min-height: 0; }
  .v2-tile__art, .v2-tile--wide .v2-tile__art { flex: none; padding: 36px 20px 0; }
  .v2-tile__screen, .v2-tile--wide .v2-tile__screen { width: 90%; }
  .v2-tile__sub, .v2-tile--wide .v2-tile__sub { left: auto; right: 16px; bottom: -22px; width: 46%; }
  .v2-tile__text, .v2-tile--wide .v2-tile__text { padding: 52px 20px 44px; }
  .v2-tile__title, .v2-tile--wide .v2-tile__title { font-size: 26px; }
}
@media (max-width: 1023px) {
  /* スマホは画面が狭く、横に流すと大きな欧文の頭が切れる */
  .v2-crm__en[data-drift] { translate: none; }
}

/* ── 2026-10-20 改: 事業のタイルは写真で見せる（製品画面は外した）────────────── */
.v2-tile__photo { position: relative; inset: auto; z-index: 0; display: block; flex: none; height: 380px; overflow: hidden; }
.v2-tile__photo img { width: 100%; height: 100%; object-fit: cover; filter: none; mix-blend-mode: normal; opacity: 1; }
.v2-tile__text { margin-top: 0; padding: 48px 64px 60px; }
.v2-tile--wide { min-height: 560px; }
.v2-tile--wide .v2-tile__photo { flex: 0 0 56%; height: auto; }
@media (max-width: 1023px) {
  .v2-tile__photo, .v2-tile--wide .v2-tile__photo { flex: none; height: 240px; }
  .v2-tile__text, .v2-tile--wide .v2-tile__text { padding: 32px 20px 40px; }
}

/* ── 背景: Remind のマークの形を大きく薄く（固定ページで選んだ「C ロゴの形」と同じ）──
   帯はやめた（2026-10-20 オーナー「その帯じゃない形式にしよう」）。
   色は紺 7%・緑 8%、静止。節ごとに左右を入れ替えて置く。 */
.v2-news, .v2-biz, .v2-vision { position: relative; }
.v2-news::before, .v2-biz::before, .v2-vision::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  -webkit-mask: url("../images/mark-hd.png") center / contain no-repeat;
          mask: url("../images/mark-hd.png") center / contain no-repeat;
}
.v2-news::before { top: 20px; right: -170px; width: 620px; height: 670px; background-color: rgba(0, 54, 120, .06); transform: rotate(-8deg); }
.v2-biz::before { top: 40px; left: -230px; width: 560px; height: 600px; background-color: rgba(40, 160, 140, .08); transform: rotate(12deg); }
.v2-vision::before { top: 120px; right: -200px; width: 640px; height: 690px; background-color: rgba(0, 54, 120, .06); transform: rotate(-14deg); }
@media (max-width: 1023px) {
  .v2-news::before { width: 300px; height: 325px; right: -130px; }
  .v2-biz::before { width: 280px; height: 300px; left: -130px; }
  .v2-vision::before { width: 300px; height: 325px; right: -140px; top: 60px; }
}