/* Hallmark · macrostructure: hero-image + scroll-statement + tracking-rail + record-band · nav: N7 full-screen menu · footer: Ft giant-wordmark · contrast: pass (40–41) · slop: pass (42–45) · pre-emit critique: P5 H4 E4 S5 R4 V5 */
/* なみのりAI メインサイト（モック）
   骨組み＝博報堂の並び／飾り＝リーズ（初回ローダー・色の帯・目次型・細線・大きな英字・目次フッター＋丸いPage Top）
   ロゴの組み方＝toC版 PROJECT NaminoriAI（Manrope 800、AIだけコーラル）
   案A 白×紺／案B 白×黒＋コーラル／案C 白×水色／案D 白×紺の面 */

:root {
  --navy: #123a7a; --blue: #0080c8; --cyan: #05a8d4; --coral: #f4633a; --coral-ink: #c23f15;
  --bg: #ffffff; --pale: #f4f6f9; --line: #d9dee6;
  --ink: #12213d;          /* 見出し */
  --text: #2c3647;         /* 本文：濃いが彩度を落とす */
  --mute: #5d6878;         /* 補足（4.5:1以上） */
  --accent: var(--navy);   /* 差し色（リンク・番号） */
  --panel: var(--navy); --panel-ink: #fff;

  --f-ja: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --f-en: "Manrope", "Inter", sans-serif;
  --ja-h-weight: 700; --ja-h-track: 0.01em; --body-track: 0.02em;

  --t-xs: 0.75rem; --t-sm: 0.875rem; --t-md: 1rem; --t-lg: 1.25rem; --t-xl: 1.75rem;
  --t-hero: clamp(2.5rem, 6.2vw, 5.75rem);
  --t-en: clamp(3.5rem, 9vw, 8.5rem);

  --gut: clamp(20px, 4vw, 56px); --max: 1360px;
  --sec: clamp(96px, 12vw, 176px);
  --r: 20px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
/* 書体2：秀英角ゴシック銀（Adobe Fonts・localhostで表示）。字間を少しあけて編集っぽく */
/* 書体2（10-15 本人選択）：秀英角ゴシック銀 L/M/B ＋ Futura PT Medium/Demi（Adobe Fonts kit cox2rdm）。Jost は読み込み失敗時の代わり */
[data-f="2"] { --f-ja: "dnp-shuei-gothic-gin-std", "Noto Sans JP", sans-serif; --f-en: "futura-pt", "Jost", sans-serif; --ja-h-weight: 600; --ja-h-track: 0.06em; --body-track: 0.05em; }
[data-f="2"] .logo__word, [data-f="2"] .ft__word, [data-f="2"] .intro__word, [data-f="2"] .plogo__word,
[data-f="2"] .logo__word b, [data-f="2"] .ft__word b, [data-f="2"] .intro__word b, [data-f="2"] .plogo__word b { font-weight: 600; letter-spacing: -0.01em; }
[data-f="2"] .sec-en { font-weight: 600; letter-spacing: -0.02em; }
[data-f="2"] .gnav, [data-f="2"] .drawer a, [data-f="2"] .group__h span { font-weight: 500; }


*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--f-ja); font-size: var(--t-md); font-weight: 400; line-height: 1.85; letter-spacing: var(--body-track); font-feature-settings: "palt"; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; padding: 0; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 4px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.nw { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: 8px; top: -60px; background: var(--ink); color: #fff; padding: 8px 14px; z-index: 200; border-radius: 6px; }
.skip:focus { top: 8px; }
.hero__h, .sec-ja, .about__big, .feature__h, .card__h, .contact__ja, .ppl__name { word-break: auto-phrase; text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------- 初回ローダー ---------- */
.intro { display: none; }
.is-intro .intro { display: grid; place-items: center; position: fixed; inset: 0; z-index: 300; background: #fff; animation: introOut .7s var(--ease) 2.1s forwards; }
.intro__bars { position: absolute; left: 50%; top: 50%; width: min(420px, 70vw); transform: translate(-50%, -50%); display: grid; gap: 6px; }
.intro__bars i { display: block; height: 3px; transform-origin: left; transform: scaleX(0); }
.intro__bars i:nth-child(1) { background: var(--navy); animation: bar .7s var(--ease) .05s forwards, barOut .4s var(--ease) 1.25s forwards; }
.intro__bars i:nth-child(2) { background: var(--blue); animation: bar .7s var(--ease) .15s forwards, barOut .4s var(--ease) 1.3s forwards; }
.intro__bars i:nth-child(3) { background: var(--cyan); animation: bar .7s var(--ease) .25s forwards, barOut .4s var(--ease) 1.35s forwards; }
.intro__bars i:nth-child(4) { background: var(--coral); animation: bar .7s var(--ease) .35s forwards, barOut .4s var(--ease) 1.4s forwards; }
.intro__word { font-family: var(--f-en); font-weight: 800; font-size: clamp(2.5rem, 7vw, 4.5rem); letter-spacing: -0.03em; color: #111; opacity: 0; animation: wordIn .6s var(--ease) 1.45s forwards; }
.intro__word b, .logo__word b, .hero-a__catch, .ft__word b, .plogo__word b { color: var(--coral); font-weight: 800; }
@keyframes bar { to { transform: scaleX(1); } }
@keyframes barOut { to { transform: scaleX(1) translateY(-14px); opacity: 0; } }
@keyframes wordIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes introOut { to { opacity: 0; visibility: hidden; } }

/* ---------- ヘッダー ---------- */
.hd { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.96); border-bottom: 1px solid transparent; transition: border-color .25s; }
.hd.is-scrolled { border-bottom-color: var(--line); }
.hd__bar { display: grid; grid-template-columns: 4fr 3fr 2fr 1fr; height: 4px; }
.hd__bar i:nth-child(1) { background: var(--navy); } .hd__bar i:nth-child(2) { background: var(--blue); }
.hd__bar i:nth-child(3) { background: var(--cyan); } .hd__bar i:nth-child(4) { background: var(--coral); }
.hd__in { display: flex; align-items: center; gap: 40px; height: 76px; }
.logo { display: inline-flex; flex-direction: column; line-height: 1; gap: 4px; color: var(--ink); }
.logo__label { font-size: 10px; font-weight: 700; letter-spacing: .32em; color: var(--coral-ink); }
.logo__word { font-family: var(--f-en); font-weight: 800; font-size: 26px; letter-spacing: -0.025em; white-space: nowrap; }
.gnav { display: flex; gap: 32px; margin-left: auto; font-family: var(--f-en); font-weight: 700; font-size: 15px; letter-spacing: .01em; color: var(--ink); }
.gnav a { padding: 12px 0 !important; }
.ft__map a { padding: 10px 0 !important; }
.gnav a, .ft__map a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .25s var(--ease); padding: 6px 0; }
.gnav a:hover, .ft__map a:hover { background-size: 100% 1px; }
.hd__cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 99px; background: var(--ink); color: #fff; font-size: var(--t-sm); font-weight: 700; transition: background .2s, transform .15s; }
.hd__cta:hover { background: var(--accent); } .hd__cta:active { transform: scale(.97); }
.menu-btn { display: none; width: 44px; height: 44px; position: relative; margin-left: auto; }
.menu-btn i { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--ink); transition: transform .25s var(--ease); }
.menu-btn i:nth-of-type(1) { top: 18px; } .menu-btn i:nth-of-type(2) { top: 25px; }
.menu-btn[aria-expanded="true"] i:nth-of-type(1) { transform: translateY(3.5px) rotate(20deg); }
.menu-btn[aria-expanded="true"] i:nth-of-type(2) { transform: translateY(-3.5px) rotate(-20deg); }
.drawer { border-top: 1px solid var(--line); background: #fff; }
.drawer nav { display: grid; padding-top: 8px; padding-bottom: 24px; }
.drawer a { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); font-family: var(--f-en); font-weight: 700; font-size: 1.5rem; color: var(--ink); letter-spacing: -0.01em; }
.drawer small { font-family: var(--f-ja); font-size: var(--t-xs); font-weight: 400; color: var(--mute); letter-spacing: .08em; }

/* ---------- FV 共通 ---------- */
.hero__h { font-size: var(--t-hero); font-weight: var(--ja-h-weight); line-height: 1.22; letter-spacing: var(--ja-h-track); color: var(--ink); }
.hero__lead { font-size: var(--t-md); line-height: 1.9; max-width: 30em; }
.link-arrow { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 700; color: var(--ink); font-size: var(--t-md); }
.link-arrow svg { width: 22px; height: 22px; padding: 10px; box-sizing: content-box; border: 1px solid var(--line); border-radius: 50%; transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease); }
.link-arrow:hover svg, a:hover > .link-arrow svg, .feature:hover .link-arrow svg { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateX(4px); }

/* 案A：大きな絵 */
.hero--a { padding: 24px 0 var(--sec); }
.hero-a__pic { border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 7; }
.hero-a__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transform: scale(1.06); transition: transform 2.4s var(--ease); }
.hero-a__pic.is-in img { transform: none; }
.hero-a__txt { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: end; margin-top: 56px; }
.hero-a__side { display: grid; gap: 24px; justify-items: start; padding-bottom: 10px; }

/* ---------- セクション共通 ---------- */
.sec { padding: 0 0 var(--sec); }
.sec-head { display: grid; gap: 10px; margin-bottom: 56px; }
.sec-head--row { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.sec-en { font-family: var(--f-en); font-weight: 700; font-size: var(--t-en); line-height: .95; letter-spacing: -0.04em; color: var(--ink); }
.sec-ja { font-size: var(--t-sm); font-weight: 700; letter-spacing: .14em; color: var(--mute); display: flex; align-items: center; gap: 12px; }
.sec-ja::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.kakunin { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #b42318; border: 1px solid #b42318; border-radius: 4px; padding: 0 6px; line-height: 1.7; }

/* About */
.about__in { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; border-top: 1px solid var(--line); padding-top: 56px; }
.about__body { display: grid; gap: 40px; }
.about__big { font-size: clamp(1.75rem, 3.4vw, 3rem); font-weight: var(--ja-h-weight); line-height: 1.5; letter-spacing: var(--ja-h-track); color: var(--ink); }
.about__p { max-width: 34em; }

/* Business */
.feature { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; padding-bottom: 72px; border-bottom: 1px solid var(--line); }
.feature__pic { border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 10; background: var(--pale); }
.feature__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.feature:hover .feature__pic img { transform: scale(1.03); }
.feature__txt { display: grid; gap: 20px; justify-items: start; }
.feature__no { font-family: var(--f-en); font-weight: 700; font-size: var(--t-sm); color: var(--accent); letter-spacing: .04em; }
.feature__h { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: var(--ja-h-weight); line-height: 1.3; letter-spacing: var(--ja-h-track); color: var(--ink); }
.groups { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 80px); }
.group { padding-top: 56px; }
.group__h { display: flex; align-items: baseline; gap: 14px; font-size: var(--t-sm); font-weight: 700; color: var(--mute); letter-spacing: .1em; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.group__h span { font-family: var(--f-en); font-size: var(--t-lg); color: var(--ink); letter-spacing: -0.01em; }
.row { display: grid; grid-template-columns: 40px 1fr auto 28px; align-items: center; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); min-height: 44px; }
a.row { transition: padding .3s var(--ease), background .3s; }
a.row:hover { padding-left: 10px; background: var(--pale); }
.row__no { font-family: var(--f-en); font-weight: 700; font-size: var(--t-sm); color: var(--accent); font-variant-numeric: tabular-nums; }
.row__name { display: grid; gap: 2px; font-size: var(--t-lg); font-weight: var(--ja-h-weight); color: var(--ink); line-height: 1.45; letter-spacing: var(--ja-h-track); }
.row__name small { font-size: var(--t-sm); font-weight: 400; color: var(--mute); letter-spacing: var(--body-track); }
.row__tag { font-size: var(--t-xs); color: var(--mute); border: 1px solid var(--line); border-radius: 99px; padding: 2px 12px; white-space: nowrap; }
.row__soon { grid-column: 4; font-size: 11px; color: var(--coral-ink); font-weight: 700; white-space: nowrap; }
.row:has(.row__soon) .row__tag { grid-column: 3; }
.row__arr { width: 20px; height: 20px; color: var(--ink); }

/* Pickup */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 36px); }
.card a { display: grid; gap: 12px; }
.card__pic { aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--pale); margin-bottom: 6px; }
.card__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.card a:hover .card__pic img { transform: scale(1.04); }
.card__pic--norio { display: grid; place-items: center; }
.card__pic--norio img { width: 46%; height: auto; }
.card__pic--logo { display: grid; place-items: center; background: #111; }
.card__cat { font-size: var(--t-xs); font-weight: 700; color: var(--accent); letter-spacing: .1em; }
.card__h { font-size: var(--t-lg); font-weight: var(--ja-h-weight); line-height: 1.55; color: var(--ink); letter-spacing: var(--ja-h-track); }
.card__more { font-family: var(--f-en); font-size: var(--t-sm); font-weight: 700; color: var(--ink); justify-self: start; border-bottom: 1px solid currentColor; }
.plogo { display: inline-flex; flex-direction: column; gap: .14em; font-family: var(--f-en); font-size: clamp(30px, 3.4vw, 46px); line-height: 1; }
.plogo__box { font-weight: 800; font-size: .3em; letter-spacing: .32em; color: var(--coral); }
.plogo__word { font-weight: 800; letter-spacing: -0.025em; color: #fff; }

/* News */
.news__in { display: grid; grid-template-columns: 1fr 1.8fr; gap: 48px; }
.news__list { border-top: 1px solid var(--ink); }
.news__list a { display: grid; grid-template-columns: 110px 96px 1fr; gap: 20px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--line); transition: background .3s, padding .3s var(--ease); }
.news__list a:hover { background: var(--pale); padding-left: 10px; }
.news__list time { font-family: var(--f-en); font-weight: 600; font-size: var(--t-sm); color: var(--mute); font-variant-numeric: tabular-nums; }
.news__cat { font-size: var(--t-xs); color: var(--accent); font-weight: 700; letter-spacing: .06em; }
.news__t { color: var(--ink); }

/* People */
.ppl { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); }
.ppl figure { aspect-ratio: 1; width: min(100%, 300px); border-radius: 50%; overflow: hidden; background: var(--pale); margin-bottom: 24px; }
.ppl figure img { width: 100%; height: 100%; object-fit: cover; }
.ppl__norio img { object-fit: contain !important; object-position: 50% 100%; padding-top: 10%; }
.ppl__role { font-family: var(--f-en); font-weight: 700; font-size: var(--t-xs); letter-spacing: .12em; color: var(--accent); }
.ppl__name { font-size: var(--t-xl); font-weight: var(--ja-h-weight); color: var(--ink); letter-spacing: var(--ja-h-track); margin: 4px 0 10px; line-height: 1.4; }
.ppl__p { font-size: var(--t-sm); line-height: 1.85; }

/* Company */
.company__in { display: grid; grid-template-columns: 1fr 1.8fr; gap: 48px; }
.info { border-top: 1px solid var(--ink); }
.info div { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.info dt { font-size: var(--t-sm); color: var(--mute); font-weight: 700; letter-spacing: .08em; }
.info dd { color: var(--ink); }
.info a { border-bottom: 1px solid currentColor; }

/* Contact */
.contact { background: var(--pale); }
.contact__in { display: grid; gap: 24px; padding-top: clamp(72px, 9vw, 128px); padding-bottom: clamp(72px, 9vw, 128px); }
.contact__row { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.contact__ja { font-size: clamp(1.25rem, 2.4vw, 2rem); font-weight: var(--ja-h-weight); letter-spacing: var(--ja-h-track); line-height: 1.5; }
.contact__circle { flex: none; width: clamp(72px, 9vw, 120px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; border: 1px solid currentColor; transition: background .3s, color .3s, transform .3s var(--ease); }
.contact__circle svg { width: 32%; }
.contact__in:hover .contact__circle { background: var(--coral); border-color: var(--coral); color: #fff; transform: scale(1.06); }
.contact__in:hover .sec-en { transform: translateX(8px); }
.contact .sec-en { transition: transform .4s var(--ease); }

/* Footer */
.ft { padding: 80px 0 32px; }
.ft__top { display: flex; justify-content: space-between; gap: 40px; align-items: flex-start; }
.ft__map { display: grid; grid-template-columns: auto auto auto; gap: 32px clamp(32px, 5vw, 80px); }
.ft__biz { display: block !important; column-count: 2; column-gap: clamp(32px, 4vw, 64px); }
.ft__biz p { column-span: all; }
.ft__biz a { display: block; width: max-content; }
.ft__map div { display: grid; gap: 0; align-content: start; }
.ft__map p { font-family: var(--f-en); font-weight: 700; font-size: var(--t-sm); color: var(--ink); margin-bottom: 8px; }
.ft__map a { font-size: var(--t-sm); color: var(--text); justify-self: start; }
.pagetop { flex: none; width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink); transition: background .25s, color .25s, border-color .25s; }
.pagetop svg { width: 22px; }
.pagetop:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.ft__word { font-family: var(--f-en); font-weight: 800; font-size: clamp(3.5rem, 15.5vw, 14rem); letter-spacing: -0.045em; line-height: .9; color: var(--ink); margin: 72px 0 32px -0.04em; white-space: nowrap; }
.ft__bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 20px; }
.ft__bottom img { height: 28px; width: auto; }
.ft__bottom small { font-size: var(--t-xs); color: var(--mute); }

/* 入場の動き */
.rv { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }
.hero-a__pic.rv { transform: none; }

/* ---------- 幅ごと ---------- */
@media (max-width: 1080px) {
  .gnav { display: none; }
  .hd__cta { margin-left: auto; }
  .menu-btn { display: block; margin-left: 0; }
  .ft__map { grid-template-columns: 1fr 1fr; }
  .ft__biz { grid-column: 1 / -1; grid-row: 1; }
}
@media (max-width: 860px) {
  .hero-a__txt, .about__in, .news__in, .company__in, .feature, .groups { grid-template-columns: 1fr; }
  .hero-a__txt { gap: 28px; margin-top: 36px; }
  .hero-a__pic { aspect-ratio: 4 / 3; }
  .about__in, .news__in, .company__in { gap: 0; }
  .sec-head { margin-bottom: 36px; }
  .cards, .ppl { grid-template-columns: 1fr; }
  .cards { gap: 40px; }
  .ppl { gap: 48px; }
  .news__list a { grid-template-columns: 1fr auto; gap: 6px 16px; padding: 20px 0; }
  .news__t { grid-column: 1 / -1; }
  .news__list time { order: 0; } .news__cat { justify-self: end; }
}
@media (max-width: 560px) {
  .hd__in { height: 64px; gap: 12px; }
  .logo__word { font-size: 22px; }
  .hd__cta { padding: 0 16px; font-size: 13px; }
  .row { grid-template-columns: 32px 1fr auto; gap: 12px; }
  .row__arr, .row__tag { display: none; }
  .ft__biz { column-count: 1; }
  .row__soon { grid-column: 3; grid-row: 1; }
  .row__name { font-size: 1.0625rem; }
  .info div { grid-template-columns: 1fr; gap: 4px; }
  .ft__top { flex-direction: column; }
  .pagetop { align-self: flex-end; }
  .contact__row { align-items: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
  .is-intro .intro { display: none; }
  .hero-a__pic img { transform: none; }
}

/* ===== 10-15 A案確定・キャッチコピー DO MORE ===== */
.hero-a__txt { grid-template-columns: 1.5fr 1fr; }
.hero-a__catch { font-family: var(--f-en); font-weight: 600; font-size: clamp(4.5rem, 13.5vw, 12.5rem); line-height: .86; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; margin-left: -0.04em; }
.hero-a__catch { color: var(--ink); }
.hero-a__sub { font-size: var(--t-lg); font-weight: var(--ja-h-weight); letter-spacing: var(--ja-h-track); color: var(--ink); }
.hero-a__side { gap: 18px; }
.ft__word b { color: var(--coral); }
.gnav a[aria-current="page"] { background-size: 100% 1px; }
.card__pic--reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 18px; }
.card__pic--reels img { border-radius: 10px; height: 100%; object-fit: cover; }
.plogo--ink .plogo__word { color: var(--ink); }
.plogo--ink { font-size: 30px; margin-bottom: 18px; }

/* ===== 事業ページ ===== */
.crumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--t-xs); color: var(--mute); padding: 28px 0 0; letter-spacing: .06em; }
.crumb a { border-bottom: 1px solid transparent; transition: border-color .2s; padding: 12px 0; margin: -12px 0; }
.crumb a:hover { border-color: currentColor; }
.bp-head { padding-bottom: clamp(72px, 9vw, 128px); }
.bp-en { display: flex; align-items: baseline; gap: 20px; font-family: var(--f-en); font-weight: 600; font-size: var(--t-en); line-height: 1; letter-spacing: -0.02em; color: var(--ink); margin-top: clamp(40px, 6vw, 80px); white-space: nowrap; }
.bp-en span { font-size: .22em; color: var(--coral-ink); letter-spacing: .04em; }
.bp-title { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: end; margin: 28px 0 clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--ink); }
.bp-title h1 { font-size: clamp(1.75rem, 3.4vw, 3rem); font-weight: var(--ja-h-weight); letter-spacing: var(--ja-h-track); line-height: 1.35; color: var(--ink); word-break: auto-phrase; text-wrap: balance; }
.bp-title__side { display: grid; justify-items: start; gap: 6px; }
.bp-sub { font-size: var(--t-sm); font-weight: 700; color: var(--accent); letter-spacing: .08em; }
.bp-soon { font-size: 11px; font-weight: 700; color: var(--coral-ink); border: 1px solid currentColor; border-radius: 99px; padding: 0 10px; }
.bp-lead { font-size: var(--t-lg); line-height: 1.7; color: var(--ink); text-wrap: pretty; }
.bp-pic { border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 7; background: var(--pale); }
.bp-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.bp-pic--contain img { object-fit: contain; object-position: 50% 50%; }
.bp-pic--norio img { object-fit: contain; object-position: 50% 100%; padding-top: 4%; }
.bp-pic--reels { display: flex; justify-content: center; gap: clamp(10px, 2vw, 28px); padding: clamp(20px, 3vw, 40px); }
.bp-pic--reels img { height: 100%; width: auto; border-radius: 14px; }
.bp-pic--type { display: grid; place-items: center; align-content: center; gap: 12px; background: var(--navy); color: #fff; }
.bp-pic--type span { font-family: var(--f-en); font-weight: 600; font-size: clamp(2.5rem, 8vw, 7.5rem); letter-spacing: .02em; line-height: 1; text-align: center; }
.bp-pic--type small { font-size: var(--t-xs); opacity: .75; letter-spacing: .1em; }
.bp-sec { padding-bottom: clamp(72px, 9vw, 128px); }
.bp-grid { display: grid; grid-template-columns: 1fr 2.2fr; gap: 48px; }
.bp-h { display: grid; gap: 8px; align-content: start; min-width: 0; font-size: var(--t-sm); font-weight: 700; color: var(--mute); letter-spacing: .14em; }
.bp-h span { font-family: var(--f-en); font-weight: 600; font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1; letter-spacing: -0.01em; color: var(--ink); }
.bp-who, .bp-what, .bp-price { border-top: 1px solid var(--ink); }
.bp-who li { display: grid; grid-template-columns: 48px 1fr; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--line); font-size: var(--t-lg); color: var(--ink); line-height: 1.6; text-wrap: pretty; }
.bp-who__no { font-family: var(--f-en); font-weight: 600; font-size: var(--t-sm); color: var(--accent); }
.bp-what { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; border-top: 0; }
.bp-what li { padding: 24px 0; border-top: 1px solid var(--ink); }
.bp-what h3 { font-size: var(--t-lg); font-weight: var(--ja-h-weight); letter-spacing: var(--ja-h-track); color: var(--ink); line-height: 1.5; margin-bottom: 6px; }
.bp-what p { font-size: var(--t-sm); }
.bp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: s; }
.bp-steps--3 { grid-template-columns: repeat(3, 1fr); }
.bp-steps li { position: relative; padding-top: 28px; }
.bp-steps li::before { content: ""; position: absolute; left: 44px; right: -20px; top: 49px; height: 1px; background: var(--line); }
.bp-steps li:last-child::before { display: none; }
.bp-step__no { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ink); font-family: var(--f-en); font-weight: 600; color: var(--ink); background: #fff; position: relative; margin-bottom: 18px; }
.bp-steps h3 { font-size: var(--t-lg); font-weight: var(--ja-h-weight); letter-spacing: var(--ja-h-track); color: var(--ink); line-height: 1.45; margin-bottom: 6px; word-break: auto-phrase; }
.bp-steps p { font-size: var(--t-sm); line-height: 1.8; }
.bp-price div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); }
.bp-price dt { color: var(--ink); font-weight: 500; }
.bp-price dd { display: flex; align-items: baseline; gap: 12px; text-align: right; }
.bp-price b { font-family: var(--f-ja); font-size: var(--t-xl); font-weight: var(--ja-h-weight); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.bp-price small { font-size: var(--t-xs); color: var(--mute); }
.bp-note { font-size: var(--t-sm); color: var(--mute); margin-top: 16px; }
.bp-out { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 24px; margin-top: 40px; padding: 28px 32px; border-radius: var(--r); background: var(--pale); color: var(--ink); transition: background .3s; }
.bp-out > span:first-child { font-size: var(--t-lg); font-weight: var(--ja-h-weight); }
.bp-out__url { font-family: var(--f-en); font-size: var(--t-sm); color: var(--mute); grid-row: 2; }
.bp-out .contact__circle { grid-row: 1 / 3; grid-column: 2; width: 64px; }
.bp-out:hover .contact__circle { background: var(--coral); border-color: var(--coral); color: #fff; }
.bp-more { padding-bottom: clamp(72px, 9vw, 128px); }
.bp-pn { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.bp-pn__a { display: grid; gap: 4px; padding: 28px 0; color: var(--ink); transition: background .3s, padding .3s var(--ease); }
.bp-pn__a--next { text-align: right; border-left: 1px solid var(--line); }
.bp-pn__a small { font-size: var(--t-xs); color: var(--mute); letter-spacing: .1em; }
.bp-pn__a span { font-size: var(--t-lg); font-weight: var(--ja-h-weight); letter-spacing: var(--ja-h-track); }
.bp-pn__a:hover { background: var(--pale); padding-left: 12px; }
.bp-pn__a--next:hover { padding-left: 0; padding-right: 12px; }
.bp-all { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.bp-all a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 99px; font-size: var(--t-sm); color: var(--ink); transition: border-color .2s, background .2s; }
.bp-all a span { font-family: var(--f-en); font-weight: 600; color: var(--accent); font-size: var(--t-xs); }
.bp-all a:hover { border-color: var(--ink); }
.bp-all a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.bp-all a[aria-current="page"] span { color: #fff; }
.biz--index .groups { margin-top: -56px; }
@media (max-width: 860px) {
  .hero-a__catch { font-size: clamp(3.5rem, 20vw, 7rem); }
  .hero-a__txt { grid-template-columns: 1fr; }
  .ft__word { font-size: clamp(3rem, 17vw, 7rem); }
  .bp-title, .bp-grid { grid-template-columns: 1fr; gap: 24px; }
  .bp-pic { aspect-ratio: 4 / 3; }
  .bp-pic--reels { aspect-ratio: 4 / 3; }
  .bp-what { grid-template-columns: 1fr; }
  .bp-steps, .bp-steps--3 { grid-template-columns: 1fr; gap: 0; }
  .bp-steps li { display: grid; grid-template-columns: 44px 1fr; column-gap: 18px; padding: 0 0 28px; }
  .bp-steps li::before { left: 22px; right: auto; top: 44px; bottom: 0; width: 1px; height: auto; }
  .bp-step__no { grid-row: 1 / 3; margin: 0; }
  .bp-pn { grid-template-columns: 1fr; }
  .bp-pn__a--next { text-align: left; border-left: 0; border-top: 1px solid var(--line); }
  .bp-out { padding: 24px; }
  .bp-en { font-size: clamp(2.75rem, 12vw, 4.5rem); white-space: normal; flex-wrap: wrap; }
}

/* ===== 10-15 ルクアの雰囲気（白地・広い余白・字間あけの英字ラベル・画像＋白の文字ブロックのカード・線の丸ボタン） ===== */
:root { --gut: clamp(20px, 6.5vw, 128px); --max: 1760px; --r: 4px; }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; margin-bottom: clamp(32px, 3.5vw, 48px); }
.sec-en { font-family: var(--f-en); font-weight: 500; font-size: clamp(1.125rem, 1.5vw, 1.5rem); line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
[data-f="2"] .sec-en { font-weight: 500; letter-spacing: .14em; }
.sec-ja { font-size: var(--t-xs); letter-spacing: .14em; }
.sec-ja::before { width: 16px; }
.contact .sec-en { font-size: clamp(3rem, 8vw, 7rem); font-weight: 600; letter-spacing: -0.01em; text-transform: none; line-height: 1; }
.about__in { grid-template-columns: 1fr 2fr; }
.about__in .sec-head, .news__in .sec-head, .company__in .sec-head { flex-direction: column; gap: 8px; }

/* 事業カード（4列） */
.bcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(40px, 4vw, 64px) clamp(20px, 2.4vw, 44px); }
.bcard { display: grid; grid-template-rows: auto 1fr; height: 100%; background: #fff; border: 1px solid var(--line); transition: border-color .3s; }
.bcard:hover { border-color: var(--ink); }
.bcard__pic, .pcard__pic { aspect-ratio: 4 / 3; overflow: hidden; background: var(--pale); }
.bcard__pic img, .pcard__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform .8s var(--ease); }
.bcard:hover .bcard__pic img, .pcard:hover .pcard__pic img { transform: scale(1.04); }
.bcard__pic--contain img { object-fit: contain; object-position: 50% 50%; padding: 8%; }
.bcard__pic--norio img, .pcard__pic--norio img { object-fit: contain; object-position: 50% 100%; padding-top: 8%; }
.bcard__pic--reels, .pcard__pic--reels { display: flex; justify-content: center; gap: 8px; padding: 16px; }
.bcard__pic--reels img, .pcard__pic--reels img { width: auto; height: 100%; border-radius: 6px; }
.bcard__pic--type { display: grid; place-items: center; background: var(--navy); color: #fff; font-family: var(--f-en); font-weight: 600; font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: .08em; text-align: center; padding: 16px; }
.bcard__body, .pcard__body { display: grid; align-content: start; gap: 8px; padding: clamp(20px, 2vw, 32px); }
.bcard__cat, .pcard__cat { display: flex; align-items: center; gap: 10px; font-family: var(--f-en); font-size: var(--t-xs); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.bcard__cat span { color: var(--coral-ink); font-weight: 600; }
.bcard__soon { font-family: var(--f-ja); letter-spacing: .06em; color: var(--coral-ink); border: 1px solid currentColor; border-radius: 99px; padding: 0 8px; text-transform: none; }
.bcard__h, .pcard__h { font-size: var(--t-lg); font-weight: var(--ja-h-weight); letter-spacing: .06em; line-height: 1.55; color: var(--navy); word-break: auto-phrase; text-wrap: balance; }
.bcard__p { font-size: var(--t-sm); line-height: 1.8; }

/* 線の丸ボタン */
.more { display: flex; justify-content: flex-end; margin-top: clamp(40px, 4vw, 56px); }
.btn-line { display: inline-flex; align-items: center; justify-content: center; position: relative; min-width: min(100%, 320px); min-height: 54px; padding: 0 56px; border: 1px solid var(--ink); border-radius: 99px; font-weight: 700; letter-spacing: .12em; color: var(--ink); transition: background .25s, color .25s; }
.btn-line svg { position: absolute; right: 22px; width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn-line:hover { background: var(--ink); color: #fff; }
.btn-line:hover svg { transform: translateX(4px); }
.btn-line:active { transform: scale(.98); }

/* 横に送るカード */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * clamp(20px, 2.4vw, 44px)) / 4); column-gap: clamp(20px, 2.4vw, 44px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > li { scroll-snap-align: start; }
.pcard { display: grid; grid-template-rows: auto 1fr; height: 100%; border: 1px solid var(--line); transition: border-color .3s; }
.pcard:hover { border-color: var(--ink); }
.pcard__pic--norio { display: grid; place-items: center; }
.pcard__pic--norio img { width: 46%; height: auto; padding: 0; }
.pcard__pic--logo { display: grid; place-items: center; background: #111; }
.rail-nav { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.rail-nav button { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); transition: background .2s, opacity .2s; }
.rail-nav button svg { width: 22px; }
.rail-nav button:hover:not(:disabled) { background: var(--pale); }
.rail-nav button:disabled { opacity: .3; cursor: default; }

/* 事業ページの見出しも、字間あけの英字ラベルに */
.bp-en { font-size: clamp(1.125rem, 1.5vw, 1.5rem); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; gap: 14px; }
[data-f="2"] .bp-en { font-weight: 500; }
.bp-en span { font-size: 1em; }
.bp-title { border-top: 0; padding-top: 0; margin-top: 16px; }
.bp-title h1 { font-size: clamp(2rem, 4.4vw, 4rem); line-height: 1.3; }
.bp-h span { font-size: clamp(1rem, 1.3vw, 1.25rem); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.bp-what h3, .bp-steps h3 { color: var(--navy); letter-spacing: .06em; }
.bp-pic { aspect-ratio: 21 / 8; }

@media (max-width: 1080px) {
  .bcards { grid-template-columns: repeat(2, 1fr); }
  .rail { grid-auto-columns: calc((100% - clamp(20px, 2.4vw, 44px)) / 2); }
}
@media (max-width: 560px) {
  .bcards { grid-template-columns: 1fr; }
  .rail { grid-auto-columns: 82%; }
  .more { justify-content: stretch; }
  .btn-line { width: 100%; }
  .about__in { grid-template-columns: 1fr; }
  .bp-pic { aspect-ratio: 4 / 3; }
}
.ft__biz { min-width: min(100%, 460px); }
.ft__biz a { width: auto; break-inside: avoid; }
.ft__map p a { padding: 0 !important; }
.ft__map .ft__biz { display: grid !important; grid-template-columns: repeat(2, auto); column-count: auto; gap: 0 clamp(28px, 3vw, 56px); justify-content: start; }
.ft__biz p { grid-column: 1 / -1; }
@media (max-width: 560px) { .ft__map .ft__biz { grid-template-columns: 1fr; } }

/* ===== 10-15 未来感の演出（粒・トラッキングショット・2色→カラーの走査線・輪のカーソル） ===== */
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.hero-a__pic { position: relative; }
.mo .hero-a__pic img { transform: translateY(var(--py, 0)) scale(1.12); animation: drift 26s ease-in-out infinite alternate; transition: none; }
@keyframes drift { from { object-position: 40% 60%; } to { object-position: 60% 66%; } }
/* 2色→走査線→カラー（FVの絵・事業ページの頭の絵）。線は ::before の下端なので、絵の高さに自動で合う */
.mo .hero-a__pic::after, .mo .scan::after { content: ""; position: absolute; inset: 0; background: var(--navy); mix-blend-mode: color; transform-origin: 50% 100%; animation: scanOut 1.6s var(--ease) .5s forwards; z-index: 1; pointer-events: none; }
.mo .hero-a__pic::before, .mo .scan::before { content: ""; position: absolute; inset: 0; border-bottom: 2px solid var(--cyan); z-index: 3; transform: translateY(-100%); animation: scanLine 1.6s var(--ease) .5s forwards; pointer-events: none; }
@keyframes scanOut { to { transform: scaleY(0); } }
@keyframes scanLine { 0% { transform: translateY(-100%); opacity: 1; } 92% { opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
.bp-pic { position: relative; }
.mo .bp-pic img { animation: settle 2.4s var(--ease) .3s both; }
@keyframes settle { from { transform: scale(1.08); } to { transform: none; } }
.bp-pic--type.scan::after { display: none; }

/* DO MORE：1文字ずつせり上がる */
.split { display: inline-flex; }
.split__m { display: inline-block; overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em; }
.split__c { display: inline-block; transform: translateY(105%); animation: rise .7s var(--ease) forwards; animation-delay: calc(.12s + var(--i) * 35ms); } /* 2026-10-22 本人「画面切り替わりで文字が遅い」→ 0.9秒待ちを0.12秒に */
.split__c:nth-last-child(1) { color: inherit; }
.split__sp { display: inline-block; width: .28em; }
@keyframes rise { to { transform: none; } }
.hero-a__catch .split__m:nth-last-child(-n+4) .split__c { color: var(--coral); }

/* 英字ラベル：下からせり上がる */
.lift { overflow: hidden; }
.lift__in { display: inline-block; transform: translateY(110%); transition: transform .9s var(--ease); }
.lift.is-open .lift__in { transform: none; }

/* 画像に幕（紺の幕が右へ抜ける） */
.wipe { position: relative; }
.wipe::after { content: ""; position: absolute; inset: 0; background: var(--navy); transform-origin: 100% 50%; transform: scaleX(1); transition: transform 1s var(--ease) .1s; z-index: 2; pointer-events: none; }
.wipe.is-open::after { transform: scaleX(0); }
.about__big.wipe::after { background: #fff; }

/* ---------- トラッキングショット ---------- */
.ride { position: relative; margin-bottom: var(--sec); }
.ride__stick { position: relative; overflow: hidden; }
.ride.is-pinned .ride__stick { position: sticky; top: 0; height: 100vh; height: 100svh; }
.ride__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding-top: calc(80px + 4vh); }
.ride__head .sec-head { margin: 0; }
.ride__hud { display: flex; align-items: center; gap: 28px; }
.ride__num { font-family: var(--f-en); font-size: var(--t-sm); letter-spacing: .14em; color: var(--mute); font-variant-numeric: tabular-nums; }
.ride__num b { font-size: 2rem; font-weight: 600; color: var(--ink); letter-spacing: 0; margin-right: 4px; }
.btn-line--sm { min-width: 0; min-height: 44px; padding: 0 48px 0 24px; font-size: var(--t-sm); }
.btn-line--sm svg { right: 16px; }
.ride__bar { margin-top: 18px; }
.ride__bar i { display: block; height: 1px; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.ride__bar { background: linear-gradient(var(--line), var(--line)) var(--gut) 50% / calc(100% - 2 * var(--gut)) 1px no-repeat; }
.ride__bar i { margin: 0; }
.ride__track { display: flex; gap: clamp(20px, 3vw, 48px); width: max-content; list-style: none; margin: 0; padding: clamp(24px, 4vh, 44px) 22vw 0 30vw; will-change: transform; position: relative; z-index: 3; }
.ride:not(.is-pinned) .ride__track { width: auto; overflow-x: auto; padding-left: var(--gut); padding-bottom: 24px; }
.ride__panel { width: clamp(280px, 30vw, 500px); flex: none; }
.ride__panel a { display: grid; background: #fff; border: 1px solid var(--line); transition: border-color .3s, transform .5s var(--ease); }
.ride__panel a:hover { border-color: var(--ink); transform: translateY(-6px); }
.ride__pic { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy); }
.ride__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; filter: grayscale(1) contrast(1.15); mix-blend-mode: screen; opacity: .92; transition: filter .6s var(--ease), opacity .6s; }
.ride__pic::after { content: ""; position: absolute; inset: 0; background: var(--cyan); mix-blend-mode: multiply; opacity: .35; transition: opacity .6s; pointer-events: none; }
.ride__pic::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--cyan); z-index: 2; opacity: 0; }
.is-near .ride__pic img, .ride__panel a:hover .ride__pic img { filter: none; mix-blend-mode: normal; opacity: 1; }
.is-near .ride__pic::after, .ride__panel a:hover .ride__pic::after { opacity: 0; }
.is-near .ride__pic::before { animation: scanPanel .8s var(--ease); }
@keyframes scanPanel { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(var(--ph, 280px)); } }
.ride__pic { --ph: calc(clamp(280px, 30vw, 500px) * 9 / 16); }
.ride__pic--contain img { object-fit: contain; padding: 6%; }
.ride__pic--norio img { object-fit: contain; object-position: 50% 100%; padding-top: 6%; }
.ride__pic--reels { display: flex; justify-content: center; gap: 8px; padding: 12px; }
.ride__pic--reels img { width: auto; height: 100%; border-radius: 6px; }
.ride__pic--type { display: grid; place-items: center; color: #fff; font-family: var(--f-en); font-weight: 600; font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: .1em; text-align: center; }
.ride__txt { position: relative; display: grid; gap: 6px; padding: 22px 24px 24px; }
.ride__no { position: absolute; right: 18px; top: 0; transform: translateY(-62%); font-family: var(--f-en); font-weight: 600; font-size: clamp(3.5rem, 6vw, 6rem); line-height: 1; color: #fff; -webkit-text-stroke: 1px var(--navy); z-index: 3; transition: color .5s; }
.is-near .ride__no { color: var(--coral); -webkit-text-stroke-color: var(--coral); }
.ride__cat { display: flex; align-items: center; gap: 10px; font-family: var(--f-en); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.ride__h { font-size: var(--t-lg); font-weight: var(--ja-h-weight); letter-spacing: .06em; line-height: 1.5; color: var(--navy); word-break: auto-phrase; text-wrap: balance; }
.ride__p { font-size: var(--t-sm); line-height: 1.75; }
.ride__sea { position: absolute; left: 0; right: 0; bottom: 0; height: 22vh; overflow: hidden; z-index: 1; }
.ride:not(.is-pinned) .ride__sea, .ride:not(.is-pinned) .ride__norio { display: none; }
.ride__bg { height: 100%; width: calc(22vh * 4275 / 360); background: url(/group/img/sea-strip.webp) 0 0 / auto 100% repeat-x; will-change: transform; }
.ride__norio { position: absolute; left: 8vw; bottom: calc(22vh - 11vh); height: min(24vh, 230px); width: auto; z-index: 4; transform-origin: 50% 90%; transform: rotate(var(--lean, 0deg)); transition: transform .3s var(--ease); }
.ride__norio { animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 50% { translate: 0 -10px; } }
.ride__wake { z-index: 3; }

/* 輪のカーソル（マウスのときだけ） */
.cursor { position: fixed; left: 0; top: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 1px solid var(--navy); border-radius: 50%; pointer-events: none; z-index: 400; transition: width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease), border-color .25s, opacity .25s; opacity: 0; }
.cursor.is-on { opacity: 1; }
.cursor.is-link { width: 64px; height: 64px; margin: -32px 0 0 -32px; border-color: var(--coral); }
.cursor__dot { position: fixed; left: 0; top: 0; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--coral); pointer-events: none; z-index: 401; }

@media (max-width: 860px) {
  .ride__head { flex-direction: column; align-items: flex-start; padding-top: calc(72px + 2vh); }
  .ride__hud { width: 100%; justify-content: space-between; }
  .ride__track { padding: 24px 20vw 0 14vw; }
  .ride__panel { width: 76vw; }
  .ride__sea { height: 16vh; }
  .ride__bg { width: calc(16vh * 4275 / 360); }
  .ride__norio { height: 15vh; bottom: 7vh; left: 4vw; }
  .ride__pic { --ph: calc(76vw * 9 / 16); }
}
@media (prefers-reduced-motion: reduce) {
  .ride__pic img { filter: none; mix-blend-mode: normal; opacity: 1; }
  .ride__pic::after { opacity: 0; }
}

/* FV：DO MORE が1画面目に収まるよう絵を少し低く */
.hero-a__pic { aspect-ratio: 16 / 6; }
.hero-a__txt { margin-top: 40px; }
@media (max-width: 860px) { .hero-a__pic { aspect-ratio: 4 / 3; } }
.contact { position: relative; overflow: hidden; }
.contact__in { position: relative; z-index: 3; }
.ride__num { white-space: nowrap; }

/* ===== 事業ページの動き（トップと同じ系統） ===== */
.lift .lift__in { max-width: 100%; }
.bp-title h1.lift { overflow: hidden; padding-bottom: .08em; }
/* こんな方に：水色の線が1行ずつ走って消える */
.mo .bp-who li { position: relative; }
.mo .bp-who li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--cyan); transform: scaleX(0); transform-origin: left; opacity: 0; }
.mo .bp-who li.is-in::after { animation: drawFade 1.4s var(--ease) var(--d, 0ms) both; }
@keyframes drawFade { 0% { transform: scaleX(0); opacity: 1; } 55% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
/* できること：上の線が左から引かれる */
.mo .bp-what li { position: relative; border-top-color: transparent; }
.mo .bp-what li::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) var(--d, 0ms); }
.mo .bp-what li.is-in::before { transform: scaleX(1); }
/* 進め方：丸がぽんと出て、つなぐ線が伸びる */
.mo .bp-steps li::before { transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) calc(var(--d, 0ms) + .35s); }
.mo .bp-steps li.is-in::before { transform: scaleX(1); }
.mo .bp-steps li .bp-step__no { transform: scale(.4); opacity: 0; transition: transform .6s cubic-bezier(.3, 1.6, .5, 1) var(--d, 0ms), opacity .3s var(--d, 0ms), background .4s, color .4s; }
.mo .bp-steps li.is-in .bp-step__no { transform: none; opacity: 1; }
.bp-steps li:hover .bp-step__no { background: var(--navy); color: #fff; border-color: var(--navy); }
@media (max-width: 860px) {
  .mo .bp-steps li::before { transform: scaleY(0); transform-origin: top; }
  .mo .bp-steps li.is-in::before { transform: scaleY(1); }
}
/* 料金：行の線が引かれる */
.mo .bp-price div { position: relative; }
/* 事業一覧：区切り線が上から順に引かれる */
.mo .group .row { position: relative; }
.mo .group .row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease); }
.mo .group.is-in .row::after { transform: scaleX(1); }
.mo .group.is-in li:nth-child(2) .row::after { transition-delay: .12s; }
.mo .group.is-in li:nth-child(3) .row::after { transition-delay: .24s; }
.mo .group .row:hover::after { background: var(--coral); }
@media (prefers-reduced-motion: reduce) {
  .bp-steps li .bp-step__no { transform: none; opacity: 1; }
}
.bp-en .lift__in { display: inline-flex; align-items: baseline; gap: 14px; }
.row:has(.row__soon) { grid-template-columns: 40px 1fr auto auto 28px; }
.row:has(.row__soon) .row__tag, .row .row__soon { grid-column: auto; grid-row: auto; }
@media (max-width: 560px) { .row:has(.row__soon) { grid-template-columns: 32px 1fr auto; } }
@media (max-width: 560px) {
  .bp-price div { grid-template-columns: 1fr; gap: 4px; }
  .bp-price dd { flex-wrap: wrap; text-align: left; gap: 4px 10px; }
}
/* 実績（営業組織構築・なみのりバイヤー） */
.bp-proof { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.bp-proof li { padding: 24px 0; border-top: 1px solid var(--ink); }
.bp-proof__who { font-family: var(--f-ja); font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; color: var(--coral-ink); margin-bottom: 8px; }
.bp-proof__t { font-size: var(--t-lg); font-weight: var(--ja-h-weight); letter-spacing: .04em; line-height: 1.6; color: var(--navy); text-wrap: pretty; }
@media (max-width: 860px) { .bp-proof { grid-template-columns: 1fr; } }
.bp-proof__t { word-break: auto-phrase; text-wrap: balance; }

/* ===== 10-15 DO MORE を全幅で大きく＋光の三原色（赤・緑・青）が重なって紺とコーラルにたどり着く ===== */
.hero-a__pic { aspect-ratio: 16 / 5; }
.hero-a__txt { display: block; margin-top: clamp(20px, 2.5vw, 36px); }
.hero-a__catch { display: block; font-size: clamp(5rem, 19.5vw, 23rem); line-height: .8; letter-spacing: -0.015em; margin-left: -0.05em; }
.hero-a__side { display: grid; grid-template-columns: auto 1fr auto; gap: 16px 48px; align-items: end; margin-top: clamp(20px, 2.4vw, 36px); padding-top: 24px; border-top: 1px solid var(--line); }
.hero-a__side .hero__lead { max-width: 40em; }
.rgb { position: relative; display: inline-block; white-space: nowrap; }
.rgb__fin { color: var(--ink); }
.rgb__fin b { color: var(--coral); font-weight: inherit; }
.rgb__l { display: none; position: absolute; left: 0; top: 0; pointer-events: none; }
.mo .rgb__l { display: block; mix-blend-mode: multiply; opacity: 0; will-change: transform, opacity; }
.rgb__l--r { color: #ff1e1e; }
.rgb__l--g { color: #1ee21e; }
.rgb__l--b { color: #1e3cff; }
.mo .rgb__l--r { animation: rgbR 2s cubic-bezier(.2, .8, .2, 1) .8s both; }
.mo .rgb__l--g { animation: rgbG 2s cubic-bezier(.2, .8, .2, 1) .9s both; }
.mo .rgb__l--b { animation: rgbB 2s cubic-bezier(.2, .8, .2, 1) 1s both; }
.mo .rgb__fin { animation: rgbFin 2.2s ease .8s both; }
@keyframes rgbR { 0% { opacity: 0; transform: translate(-.45em, .04em); } 12% { opacity: 1; } 52% { opacity: 1; transform: none; } 78%, 100% { opacity: 0; transform: none; } }
@keyframes rgbG { 0% { opacity: 0; transform: translate(.05em, -.4em); } 12% { opacity: 1; } 52% { opacity: 1; transform: none; } 78%, 100% { opacity: 0; transform: none; } }
@keyframes rgbB { 0% { opacity: 0; transform: translate(.45em, .06em); } 12% { opacity: 1; } 52% { opacity: 1; transform: none; } 78%, 100% { opacity: 0; transform: none; } }
@keyframes rgbFin { 0%, 44% { opacity: 0; } 72%, 100% { opacity: 1; } }
@media (max-width: 860px) {
  .hero-a__pic { aspect-ratio: 4 / 3; }
  .hero-a__catch { font-size: clamp(3.5rem, 20.5vw, 9rem); }
  .hero-a__side { grid-template-columns: 1fr; }
}
/* のりお（メンバー）：全身が丸の中に収まるように */
.ppl__norio img { object-fit: contain !important; object-position: 50% 50% !important; padding: 12% 0 10% !important; }
/* トラッキングの写真：機材は全体を見せる */
.ride__pic--contain img { object-position: 50% 50%; }

/* ===== FV の仕掛け：波乗りノリオ（マウスを追う）＋しぶき＋クリックでDO MOREの色が混ざり直す ===== */
.hero-a__pic { cursor: pointer; }
.hero-rider { position: absolute; left: 30%; top: 60%; height: 42%; width: auto; z-index: 4; pointer-events: none; transform: translate(-50%, -80%); filter: drop-shadow(0 6px 0 rgba(18, 58, 122, .18)); }
.hero-wake { z-index: 3; }
.hero-a__pic .fx-canvas:first-of-type { z-index: 2; }
.mo .rgb__l.is-replay { animation-delay: 0s; animation-duration: 1.4s; }
.mo .rgb__fin.is-replay { animation-delay: 0s; animation-duration: 1.5s; }
.cursor__label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--f-en); font-size: 10px; font-weight: 600; letter-spacing: .14em; color: var(--coral); opacity: 0; transition: opacity .2s; white-space: nowrap; }
.cursor.is-label { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: rgba(255, 255, 255, .9); }
.cursor.is-label .cursor__label { opacity: 1; }
@media (max-width: 860px) { .hero-rider { height: 34%; } }
@media (prefers-reduced-motion: reduce) { .hero-rider { display: none; } }
.hero-a__pic img.hero-rider, .mo .hero-a__pic img.hero-rider { width: auto; height: 42%; object-fit: contain; animation: none; transition: none; max-width: none; }
@media (max-width: 860px) { .hero-a__pic img.hero-rider, .mo .hero-a__pic img.hero-rider { height: 34%; } }

/* ===== トラッキング：ノリオと事業パネルが重ならないように（10-15 本人「被ってるの気になる」） =====
   ノリオは下の海の帯の中だけを走る。パネルは画面の高さから大きさを決め、必ず海より上で終わる */
.ride__sea { height: 28vh; }
.ride__bg { width: calc(28vh * 4275 / 360); }
.ride__norio { height: min(20vh, 210px); bottom: 3vh; }
.ride__panel { --pw: clamp(240px, min(30vw, calc((72vh - 400px) * 16 / 9)), 500px); width: var(--pw); }
.ride__pic { --ph: calc(var(--pw) * 9 / 16); }
.ride__txt { padding: 18px 22px 20px; }
@media (max-width: 860px) {
  .ride__sea { height: 20vh; }
  .ride__bg { width: calc(20vh * 4275 / 360); }
  .ride__norio { height: 13vh; bottom: 2vh; }
  .ride__panel { --pw: min(76vw, calc((80vh - 470px) * 16 / 9)); }
}
/* パネルは「幅は固定・絵の高さが残りの高さに合わせて伸び縮み」に（どの画面の高さでも海より上で終わる） */
.ride.is-pinned .ride__stick { display: flex; flex-direction: column; }
.ride__head, .ride__bar { flex: none; }
.ride.is-pinned .ride__track { flex: 1 1 auto; min-height: 0; align-items: stretch; padding-bottom: calc(28vh + 16px); }
.ride__panel { --pw: clamp(240px, 30vw, 500px); width: var(--pw); }
.ride.is-pinned .ride__panel a { height: 100%; display: flex; flex-direction: column; }
.ride.is-pinned .ride__pic { flex: 1 1 auto; min-height: 72px; aspect-ratio: auto; max-height: calc(var(--pw) * 9 / 16); }
.ride__txt { flex: none; }
.ride.is-pinned .ride__panel a { height: auto; max-height: 100%; }
.ride__pic::before { inset: 0; height: auto; background: none; border-bottom: 2px solid var(--cyan); transform: translateY(-100%); }
@keyframes scanPanel { 0% { opacity: 1; transform: translateY(-100%); } 100% { opacity: 0; transform: translateY(0); } }
@media (max-width: 860px) {
  .ride__panel { --pw: 76vw; }
  .ride.is-pinned .ride__track { padding-bottom: calc(20vh + 12px); }
}
@media (max-height: 760px) { .ride__p { display: none; } .ride__txt { padding: 14px 18px 16px; } }
/* パネルの高さをそろえ、絵は枠の中に収める */
.ride.is-pinned .ride__panel a { height: 100%; max-height: calc(var(--pw) * 9 / 16 + 230px); }
.ride.is-pinned .ride__pic { max-height: none; position: relative; }
.ride.is-pinned .ride__pic > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ride.is-pinned .ride__pic--reels { display: flex; }
.ride.is-pinned .ride__pic--reels > img { position: static; width: auto; height: 100%; }
.ride.is-pinned .ride__pic--norio > img { object-fit: contain; object-position: 50% 100%; padding-top: 6%; }
.ride.is-pinned .ride__pic--contain > img { object-fit: contain; padding: 6%; }
/* 海の帯（10-15 作り直し：反転なし・つなぎ目をなじませた 3600×360） */
.ride__bg { width: calc(28vh * 10); }
@media (max-width: 860px) { .ride__bg { width: calc(20vh * 10); } }

/* ===== 10-15 三原色を「光らしく」：一瞬だけ紺の帯の上で赤・緑・青が足し算で混ざる（重なり＝黄・水色・ピンク、全部そろうと白）→帯が消えて紺とコーラルへ ===== */
.hero-a__catch { position: relative; isolation: isolate; }
.mo .hero-a__catch::before { content: ""; position: absolute; z-index: -1; left: calc(50% - 50vw); width: 100vw; top: -.06em; bottom: -.1em; background: #0a1834; opacity: 0; animation: rgbNight 2.2s ease .8s both; pointer-events: none; }
.mo .rgb__l { mix-blend-mode: screen; }
.rgb__l--r { color: #ff2020; }
.rgb__l--g { color: #20ff3a; }
.rgb__l--b { color: #2a4dff; }
@keyframes rgbNight { 0% { opacity: 0; } 8% { opacity: 1; } 60% { opacity: 1; } 86%, 100% { opacity: 0; } }
@keyframes rgbR { 0% { opacity: 0; transform: translate(-.45em, .04em); } 10% { opacity: 1; } 50% { opacity: 1; transform: none; } 62% { opacity: 1; } 84%, 100% { opacity: 0; transform: none; } }
@keyframes rgbG { 0% { opacity: 0; transform: translate(.05em, -.4em); } 10% { opacity: 1; } 50% { opacity: 1; transform: none; } 62% { opacity: 1; } 84%, 100% { opacity: 0; transform: none; } }
@keyframes rgbB { 0% { opacity: 0; transform: translate(.45em, .06em); } 10% { opacity: 1; } 50% { opacity: 1; transform: none; } 62% { opacity: 1; } 84%, 100% { opacity: 0; transform: none; } }
@keyframes rgbFin { 0%, 62% { opacity: 0; } 88%, 100% { opacity: 1; } }
.mo .rgb__fin { animation-duration: 2.2s; }
.mo .hero-a__catch.is-replay::before { animation-delay: 0s; animation-duration: 1.6s; }
.mo .rgb__fin.is-replay { animation-duration: 1.6s; }
.mo .rgb__l.is-replay { animation-duration: 1.5s; }

/* ===== About：画面を止めて、大きな一文がスクロールで一文字ずつ紺に塗られる（最後の「速い。」だけコーラル） ===== */
.hero--a { padding-bottom: clamp(48px, 6vw, 96px); }
.about-x { position: relative; }
.about-x.is-fill { height: 230vh; }
.about-x__stick { padding: clamp(56px, 7vw, 112px) 0; }
.about-x.is-fill .about-x__stick { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; display: grid; align-content: center; padding: 80px 0 40px; }
.about-x__big { font-size: clamp(2.4rem, 6.6vw, 7.5rem); font-weight: var(--ja-h-weight); line-height: 1.28; letter-spacing: .02em; color: var(--ink); margin-top: clamp(16px, 2vw, 28px); }
.about-x__big em { font-style: normal; color: var(--coral); }
.about-x.is-fill .fc { color: #dfe4ec; transition: color .35s var(--ease); }
.about-x.is-fill .fc.on { color: var(--ink); }
.about-x.is-fill em .fc.on { color: var(--coral); }
.about-x__p { max-width: 30em; margin: clamp(28px, 3.4vw, 48px) 0 0 auto; font-size: var(--t-lg); line-height: 1.9; color: var(--text); }
.about-x.is-fill .about-x__p { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.about-x.is-done .about-x__p { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .about-x.is-fill { height: 200vh; }
  .about-x__big { font-size: clamp(2rem, 10vw, 3.4rem); }
  .about-x__p { margin-left: 0; font-size: var(--t-md); }
}

/* ===== award-check r2 ===== */
/* 実績の帯：紺の面に白い大きな数字（後半のリズムを作る1か所だけの面） */
.rec { background: var(--navy); color: #fff; padding: clamp(80px, 10vw, 152px) 0; margin-bottom: var(--sec); }
.rec .sec-en, .rec .sec-ja { color: #fff; }
.rec .sec-ja { opacity: .75; }
.rec__list { display: grid; grid-template-columns: repeat(3, 1fr); }
.rec__list li { padding: 8px clamp(20px, 3vw, 48px) 0; border-left: 1px solid rgba(255, 255, 255, .22); }
.rec__list li:first-child { border-left: 0; padding-left: 0; }
.rec__n { display: flex; align-items: baseline; gap: 10px; font-family: var(--f-en); line-height: 1; }
.rec__n b { font-weight: 600; font-size: clamp(4.5rem, 10vw, 10rem); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rec__n small { font-family: var(--f-ja); font-size: clamp(1.125rem, 1.6vw, 1.5rem); font-weight: 600; color: var(--coral); letter-spacing: .06em; }
.rec__t { margin-top: 20px; max-width: 22em; font-size: var(--t-md); line-height: 1.8; color: rgba(255, 255, 255, .86); text-wrap: pretty; }
/* お知らせと運営情報を横並び */
.nc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 96px); max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.nc > .sec > .wrap { padding: 0; max-width: none; }
.nc .news__in, .nc .company__in { grid-template-columns: 1fr; gap: 0; }
.nc .sec-head { flex-direction: row; }
/* 押せる所を44px以上に */
.logo { min-height: 44px; justify-content: center; }
.gnav a { padding: 12px 6px !important; margin: 0 -6px; }
.info a { display: inline-block; padding: 12px 0; margin: -12px 0; }
.crumb a { display: inline-block; padding: 14px 4px; margin: -14px -4px; }
@media (max-width: 860px) {
  .rec__list { grid-template-columns: 1fr; }
  .rec__list li { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .22); padding: 28px 0; }
  .rec__list li:first-child { border-top: 0; padding-top: 8px; }
  .nc { grid-template-columns: 1fr; gap: 0; }
  /* メンバー：スマホは小さな丸＋文字の横並び */
  .ppl { gap: 28px; }
  .ppl li { display: grid; grid-template-columns: 112px 1fr; column-gap: 20px; align-items: start; }
  .ppl figure { width: 112px; margin: 0; grid-row: 1 / 5; }
  .ppl__name { font-size: var(--t-lg); margin: 2px 0 6px; }
}
.hero--a { overflow-x: clip; }
.crumb a { min-width: 44px; text-align: center; }

/* ===== 10-15 おしゃれな仕掛け ===== */
/* ページ移動の幕：ブランド4色が下から順に立ち上がる→次のページで上へ抜ける */
.pt { position: fixed; inset: 0; z-index: 500; display: grid; grid-template-columns: repeat(4, 1fr); pointer-events: none; }
.pt i { display: block; transform: scaleY(0); transform-origin: 50% 100%; }
.pt i:nth-child(1) { background: var(--navy); } .pt i:nth-child(2) { background: var(--blue); }
.pt i:nth-child(3) { background: var(--cyan); } .pt i:nth-child(4) { background: var(--coral); }
.pt.is-enter i { transform: scaleY(1); transition: transform .5s cubic-bezier(.7, 0, .2, 1); }
.pt.is-enter i:nth-child(2) { transition-delay: .05s; } .pt.is-enter i:nth-child(3) { transition-delay: .1s; } .pt.is-enter i:nth-child(4) { transition-delay: .15s; }
.pt.is-cover i { transform: scaleY(1); transform-origin: 50% 0; transition: none; }
.pt.is-cover.is-leave i { transform: scaleY(0); transition: transform .7s cubic-bezier(.7, 0, .2, 1); }
.pt.is-cover.is-leave i:nth-child(2) { transition-delay: .06s; } .pt.is-cover.is-leave i:nth-child(3) { transition-delay: .12s; } .pt.is-cover.is-leave i:nth-child(4) { transition-delay: .18s; }

/* 流れる大きな文字の帯 */
.mq { overflow: hidden; padding: clamp(8px, 1.5vw, 20px) 0; margin: calc(var(--sec) * -0.5) 0 var(--sec); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mq__in { display: flex; align-items: center; gap: clamp(24px, 3vw, 56px); width: max-content; will-change: transform; }
.mq span { font-family: var(--f-en); font-weight: 600; font-size: clamp(3.5rem, 9vw, 9rem); line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.mq span.o { color: transparent; -webkit-text-stroke: 1.5px var(--navy); }
.mq i { flex: none; width: clamp(14px, 1.4vw, 22px); aspect-ratio: 1; border-radius: 50%; background: var(--coral); }

/* メンバーのひとこと：写真の上に紺の幕が上がって言葉が出る（スマホは名前の下に文字で） */
.ppl figure { position: relative; }
.ppl__q { position: absolute; inset: 0; display: grid; place-items: center; padding: 18%; text-align: center; background: var(--navy); color: #fff; font-weight: var(--ja-h-weight); font-size: clamp(1rem, 1.3vw, 1.25rem); line-height: 1.7; letter-spacing: .04em; transform: translateY(101%); transition: transform .55s var(--ease); word-break: auto-phrase; z-index: 3; }
.ppl li:hover .ppl__q, .ppl li:focus-within .ppl__q { transform: none; }
.ppl__qt { display: none; }
@media (hover: none), (max-width: 860px) {
  .ppl__q { display: none; }
  .ppl__qt { display: block; font-size: var(--t-sm); font-weight: var(--ja-h-weight); color: var(--navy); margin: 0 0 6px; }
}

/* フッター DO MORE の文字 */
.ft__word .wl { display: inline-block; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .pt { display: none; }
  .mq__in { transform: none !important; }
}
.ppl__qt { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (hover: none), (max-width: 860px) { .ppl__qt { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; } }

/* ===== /gamen 仕上げ（Hallmark の点検で落ちた所） ===== */
html, body { overflow-x: clip; }
html.is-lock { overflow: hidden; }
/* ナビ：ロゴ＋お問い合わせ＋Menu（よくあるAIのヘッダーをやめる） */
.gnav { display: none !important; }
.hd__in { position: relative; z-index: 2; gap: 12px; }
.hd__cta { margin-left: auto; }
.menu-btn { display: inline-flex !important; align-items: center; gap: 12px; width: auto; height: 44px; margin-left: 4px; padding: 0 4px 0 12px; font-family: var(--f-en); font-weight: 600; font-size: 15px; letter-spacing: .08em; color: var(--ink); position: relative; }
.menu-btn__l { position: relative; width: 28px; height: 14px; display: block; }
.menu-btn__l i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .3s var(--ease); }
.menu-btn__l i:nth-child(1) { top: 2px; } .menu-btn__l i:nth-child(2) { bottom: 2px; }
.menu-btn i { left: 0; right: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__l i:nth-child(1) { transform: translateY(4.5px) rotate(20deg); }
.menu-btn[aria-expanded="true"] .menu-btn__l i:nth-child(2) { transform: translateY(-4.5px) rotate(-20deg); }
.hd.is-menu { background: transparent; border-bottom-color: transparent; }
.hd.is-menu .logo, .hd.is-menu .logo__word, .hd.is-menu .menu-btn { color: #fff; }
.hd.is-menu .hd__cta { background: #fff; color: var(--navy); }
.menu.drawer { position: fixed; inset: 0; z-index: 1; background: var(--navy); color: #fff; border: 0; overflow-y: auto; transform: translateY(-100%); transition: transform .5s cubic-bezier(.7, 0, .2, 1); }
.menu.drawer.is-open { transform: none; }
.menu__in { min-height: 100%; display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr auto; gap: 40px clamp(32px, 6vw, 120px); padding-top: 120px; padding-bottom: 32px; }
.menu__main ul, .menu__biz ul { list-style: none; margin: 0; padding: 0; }
.menu__main a { display: grid; grid-template-columns: 48px auto 1fr; align-items: baseline; gap: 16px; padding: 6px 0; color: #fff; }
.menu__no { font-family: var(--f-en); font-size: var(--t-sm); color: var(--coral); font-variant-numeric: tabular-nums; }
.menu__en { font-family: var(--f-en); font-weight: 600; font-size: clamp(2.5rem, 5.4vw, 5rem); line-height: 1.1; letter-spacing: -0.01em; transition: transform .3s var(--ease), color .2s; }
.menu__main small { font-size: var(--t-xs); letter-spacing: .14em; opacity: .7; }
.menu__main a:hover .menu__en { transform: translateX(10px); color: var(--cyan); }
.menu__main a[aria-current="page"] .menu__en { color: var(--cyan); }
.menu__h { font-family: var(--f-en); font-size: var(--t-sm); letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-bottom: 12px; }
.menu__biz a { display: flex; gap: 16px; align-items: baseline; min-height: 44px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .16); color: #fff; font-weight: 500; transition: padding .3s var(--ease); }
.menu__biz a span { font-family: var(--f-en); font-size: var(--t-xs); color: var(--coral); }
.menu__biz a:hover { padding-left: 8px; }
.menu__foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 20px; }
.menu__foot a { color: #fff; display: inline-block; padding: 12px 0; }
.menu__bar { display: grid; grid-template-columns: 4fr 3fr 2fr 1fr; width: 160px; height: 4px; }
.menu__bar i:nth-child(1) { background: #fff; } .menu__bar i:nth-child(2) { background: var(--blue); } .menu__bar i:nth-child(3) { background: var(--cyan); } .menu__bar i:nth-child(4) { background: var(--coral); }
.menu__main li, .menu__biz li { opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.menu.is-open li { opacity: 1; transform: none; }
.menu.is-open .menu__main li:nth-child(1) { transition-delay: .18s; } .menu.is-open .menu__main li:nth-child(2) { transition-delay: .23s; }
.menu.is-open .menu__main li:nth-child(3) { transition-delay: .28s; } .menu.is-open .menu__main li:nth-child(4) { transition-delay: .33s; }
.menu.is-open .menu__main li:nth-child(5) { transition-delay: .38s; } .menu.is-open .menu__main li:nth-child(6) { transition-delay: .43s; }
.menu.is-open .menu__biz li { transition-delay: .35s; }
.drawer nav { display: block; padding: 0; }
.drawer a small { color: inherit; }
@media (max-width: 860px) {
  .menu__in { grid-template-columns: 1fr; padding-top: 96px; gap: 28px; }
  .menu__main a { grid-template-columns: 36px 1fr; }
  .menu__main small { grid-column: 2; }
  .hd__cta { padding: 0 14px; }
  .menu-btn__t { display: none; }
}
/* 動き：位置や大きさではなく transform で（滑らかに） */
.cursor { width: 64px; height: 64px; margin: -32px 0 0 -32px; transition: border-color .25s, opacity .25s, background-color .25s; }
.cursor > .cursor__ring { display: none; }
.cursor.is-link, .cursor.is-label { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.cursor__label { color: var(--coral-ink); }
.hero-a__pic img.hero-rider, .mo .hero-a__pic img.hero-rider { left: 0 !important; top: 0 !important; }
/* 流れる帯：マウスを乗せると止まる */
.mq:hover .mq__in { animation-play-state: paused; }
/* 事業パネル：ホバーの効果は2つまで（線と色）。持ち上がりはやめる */
.ride__panel a:hover { transform: none; }
.cursor { border-width: 1.5px; }
.menu-btn .menu-btn__l i { left: 0; right: 0; transform: none; }
.menu-btn .menu-btn__l i:nth-child(1) { top: 2px; bottom: auto; }
.menu-btn .menu-btn__l i:nth-child(2) { top: auto; bottom: 2px; }
.menu-btn[aria-expanded="true"] .menu-btn__l i:nth-child(1) { transform: translateY(4.25px) rotate(30deg); }
.menu-btn[aria-expanded="true"] .menu-btn__l i:nth-child(2) { transform: translateY(-4.25px) rotate(-30deg); }
.menu__biz a { justify-content: flex-start; font-family: var(--f-ja); font-size: var(--t-md); letter-spacing: .04em; }
.menu__main a { justify-content: initial; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.menu-btn[aria-expanded="true"] .menu-btn__l { width: 20px; margin: 0 4px; }
.menu-btn[aria-expanded="true"] .menu-btn__l i:nth-child(1) { transform: translateY(4.25px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__l i:nth-child(2) { transform: translateY(-4.25px) rotate(-45deg); }

/* ===== /gamen：事業一覧を画像カードに・事業ページに大きな番号と Next ブロック ===== */
.biz--index .groups { margin-top: 0; }
.ggroup { padding-top: clamp(40px, 5vw, 72px); }
.ggroup:first-child { padding-top: 0; }
.ggroup__h { display: flex; align-items: baseline; gap: 14px; font-size: var(--t-sm); font-weight: 700; color: var(--mute); letter-spacing: .1em; padding-bottom: 14px; border-bottom: 1px solid var(--ink); margin-bottom: clamp(20px, 2.4vw, 32px); }
.ggroup__h span { font-family: var(--f-en); font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 2.25rem); color: var(--ink); letter-spacing: 0; }
.gcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 40px); }
.gcard { display: grid; grid-template-rows: auto 1fr; height: 100%; border: 1px solid var(--line); background: #fff; transition: border-color .3s; }
.gcard:hover { border-color: var(--ink); }
.gcard__pic { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy); }
.gcard__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; filter: grayscale(1) contrast(1.15); mix-blend-mode: screen; opacity: .92; transition: filter .5s var(--ease), opacity .5s; }
.gcard__pic::after { content: ""; position: absolute; inset: 0; background: var(--cyan); mix-blend-mode: multiply; opacity: .35; transition: opacity .5s; pointer-events: none; }
.gcard:hover .gcard__pic img, .gcard:focus-visible .gcard__pic img { filter: none; mix-blend-mode: normal; opacity: 1; }
.gcard:hover .gcard__pic::after, .gcard:focus-visible .gcard__pic::after { opacity: 0; }
.gcard__pic--contain img { object-fit: contain; object-position: 50% 50%; padding: 6%; }
.gcard__pic--norio img { object-fit: contain; object-position: 50% 100%; padding-top: 6%; }
.gcard__pic--reels { display: flex; justify-content: center; gap: 8px; padding: 12px; }
.gcard__pic--reels img { width: auto; height: 100%; border-radius: 6px; }
.gcard__pic--type { display: grid; place-items: center; color: #fff; font-family: var(--f-en); font-weight: 600; font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: .1em; }
.gcard__pic--type::after { display: none; }
.gcard__body { position: relative; display: grid; align-content: start; gap: 6px; padding: 22px 24px 26px; }
.gcard__no { position: absolute; right: 18px; top: 0; transform: translateY(-62%); font-family: var(--f-en); font-weight: 600; font-size: clamp(3rem, 4.6vw, 4.5rem); line-height: 1; color: #fff; -webkit-text-stroke: 1px var(--navy); transition: color .4s, -webkit-text-stroke-color .4s; }
.gcard:hover .gcard__no { color: var(--coral); -webkit-text-stroke-color: var(--coral); }
.gcard__h { font-size: var(--t-lg); font-weight: var(--ja-h-weight); letter-spacing: .06em; line-height: 1.5; color: var(--navy); word-break: auto-phrase; text-wrap: balance; }

/* 事業ページの頭：背景に大きな中抜き番号 */
.bp-head__in { position: relative; }
.bp-bignum { position: absolute; right: var(--gut); top: clamp(8px, 2vw, 32px); font-family: var(--f-en); font-weight: 600; font-size: clamp(8rem, 22vw, 22rem); line-height: .8; color: transparent; -webkit-text-stroke: 1.5px var(--line); pointer-events: none; z-index: 0; letter-spacing: -0.03em; }
.bp-head__in > *:not(.bp-bignum) { position: relative; z-index: 1; }
.mo .bp-bignum { animation: bignum 1.4s var(--ease) .2s both; }
@keyframes bignum { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }

/* 次の事業：大きなブロック */
.bp-next { display: grid; grid-template-columns: 1fr minmax(240px, 34%) auto; gap: clamp(20px, 3vw, 48px); align-items: center; padding: clamp(28px, 3.5vw, 48px) 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); color: var(--ink); }
.bp-next__l { display: grid; gap: 6px; }
.bp-next__l small { font-family: var(--f-en); font-size: var(--t-sm); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.bp-next__no { font-family: var(--f-en); font-weight: 600; font-size: var(--t-lg); color: var(--coral-ink); }
.bp-next__name { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: var(--ja-h-weight); letter-spacing: .04em; line-height: 1.35; color: var(--navy); word-break: auto-phrase; text-wrap: balance; }
.bp-next__short { font-size: var(--t-sm); color: var(--text); }
.bp-next__pic { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy); }
.bp-next__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; filter: grayscale(1) contrast(1.15); mix-blend-mode: screen; opacity: .92; transition: filter .5s var(--ease), opacity .5s, transform .8s var(--ease); }
.bp-next__pic::after { content: ""; position: absolute; inset: 0; background: var(--cyan); mix-blend-mode: multiply; opacity: .35; transition: opacity .5s; }
.bp-next:hover .bp-next__pic img { filter: none; mix-blend-mode: normal; opacity: 1; }
.bp-next:hover .bp-next__pic::after { opacity: 0; }
.bp-next__pic--contain img { object-fit: contain; padding: 6%; }
.bp-next__pic--norio img { object-fit: contain; object-position: 50% 100%; padding-top: 6%; }
.bp-next__pic--reels { display: flex; justify-content: center; gap: 8px; padding: 10px; }
.bp-next__pic--reels img { width: auto; height: 100%; border-radius: 6px; }
.bp-next__pic--type { display: grid; place-items: center; color: #fff; font-family: var(--f-en); font-weight: 600; letter-spacing: .1em; }
.bp-next__pic--type::after { display: none; }
.bp-next__arrow { width: 72px; }
.bp-next:hover .bp-next__arrow { background: var(--coral); border-color: var(--coral); color: #fff; transform: translateX(6px); }
.bp-prev { margin-top: 16px; font-size: var(--t-sm); }
.bp-prev a { display: inline-block; padding: 12px 0; color: var(--mute); border-bottom: 1px solid transparent; }
.bp-prev a:hover { color: var(--ink); border-bottom-color: currentColor; }
@media (max-width: 1080px) { .gcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
  .bp-next { grid-template-columns: 1fr auto; }
  .bp-next__pic { grid-column: 1 / -1; grid-row: 2; }
  .bp-next__arrow { width: 56px; grid-row: 1; grid-column: 2; }
}
@media (max-width: 560px) { .gcards { grid-template-columns: 1fr; } .bp-bignum { font-size: 9rem; } }
@media (prefers-reduced-motion: reduce) { .gcard__pic img, .bp-next__pic img { filter: none; mix-blend-mode: normal; opacity: 1; } .gcard__pic::after, .bp-next__pic::after { opacity: 0; } }

/* 初回ローダーの間は FV の演出（三原色・走査線）を止めておき、ローダーが消えてから始める */
.is-intro .rgb__l, .is-intro .rgb__fin, .is-intro .hero-a__catch::before,
.is-intro .hero-a__pic::before, .is-intro .hero-a__pic::after { animation-play-state: paused !important; }
/* DO MORE の下の説明の行をなくした（10-15 本人「メッセージ弱い」）→ FVは絵と DO MORE だけで締める */
.hero--a { padding-bottom: clamp(24px, 3vw, 48px); }
.about-x__p { max-width: none; width: fit-content; }
@media (max-width: 860px) { .about-x__p br { display: none; } }

/* ===== 10-15 遊び心 ===== */
/* 1) のぞきノリオ */
.peek { position: fixed; right: clamp(8px, 2.4vw, 32px); bottom: 0; z-index: 140; width: clamp(64px, 6.5vw, 96px); height: clamp(110px, 11vw, 160px); padding: 0; overflow: visible; transform: translateY(100%); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); cursor: pointer; }
.peek img { width: 100%; height: auto; display: block; transform-origin: 50% 100%; }
.peek.is-up { transform: translateY(38%); }
.peek.is-up.is-duck { transform: translateY(82%); }
.peek.is-talk { transform: translateY(18%); }
.peek.is-talk img { animation: hop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hop { 40% { transform: translateY(-14px) rotate(-4deg); } }
.peek__say { position: absolute; right: 70%; bottom: 82%; width: max-content; max-width: 16em; padding: 10px 16px; border-radius: 18px 18px 4px 18px; background: var(--navy); color: #fff; font-size: var(--t-sm); font-weight: 700; line-height: 1.6; text-align: left; opacity: 0; transform: translateY(8px) scale(.9); transform-origin: 100% 100%; transition: opacity .2s, transform .3s var(--ease); pointer-events: none; }
.peek.is-talk .peek__say { opacity: 1; transform: none; }
.peek:focus-visible { outline-offset: -8px; }
.is-lock .peek { transform: translateY(100%); }
/* 2) 上の線のサーフボード */
.hd__bar { position: relative; overflow: visible; }
.hd__board { position: absolute; left: 0; top: -4px; width: 40px; height: 12px; pointer-events: none; will-change: transform; }
.hd__board svg { display: block; width: 100%; height: 100%; }
/* 3) 水の輪 */
.ripple { position: fixed; z-index: 450; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; border: 1.5px solid var(--cyan); pointer-events: none; transform: scale(.1); opacity: .9; animation: ripple .8s var(--ease) forwards; }
.ripple::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; border: 1px solid var(--blue); opacity: .6; }
@keyframes ripple { to { transform: scale(1.6); opacity: 0; } }
/* 4) Pickup のカードが波に浮かぶ */
.pcard:hover { animation: float 2.4s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-6px) rotate(-.6deg); } 70% { transform: translateY(-3px) rotate(.5deg); } }
/* 5) フッターの文字が跳ねる */
.ft__word { cursor: pointer; }
.ft__word .wl.is-jump { animation: jump .7s cubic-bezier(.3, 1.6, .5, 1) var(--jd, 0ms) both; }
@keyframes jump { 0% { translate: 0 0; } 35% { translate: 0 -.3em; } 60% { translate: 0 .03em; } 100% { translate: 0 0; } }
.drop { position: fixed; z-index: 450; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); pointer-events: none; animation: drop 1.1s cubic-bezier(.2, .6, .4, 1) both; }
.drop:nth-child(3n) { background: var(--blue); width: 5px; height: 5px; }
@keyframes drop { 0% { transform: translate(0, 0); opacity: 1; } 55% { transform: translate(calc(var(--dx) * .7), var(--dy)); opacity: 1; } 100% { transform: translate(var(--dx), 40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .peek, .hd__board, .ripple, .drop { display: none; }
  .pcard:hover { animation: none; }
}

/* ===== 10-15 開くときのアニメを「光の三原色」に（本人：FVのDO MOREではなく開くとき） =====
   紺の画面で 赤・緑・青の Naminori AI が重なって白く光る → 地が白に変わり、紺とコーラルのロゴに落ち着く → ページへ */
.is-intro .intro { display: grid; place-items: center; align-content: center; gap: 18px; background: #0a1834; animation: introBg 3.6s ease forwards; }
@keyframes introBg { 0%, 52% { background: #0a1834; } 66% { background: #fff; } 84% { opacity: 1; visibility: visible; background: #fff; } 100% { opacity: 0; visibility: hidden; background: #fff; } }
.intro__bars, .intro__word { display: none !important; }
.intro__rgb { position: relative; margin: 0; font-family: var(--f-en); font-weight: 600; font-size: clamp(3rem, 9vw, 7.5rem); line-height: 1; letter-spacing: -0.01em; white-space: nowrap; }
.intro__l { position: absolute; left: 0; top: 0; mix-blend-mode: screen; opacity: 0; }
.intro__l--r { color: #ff2020; animation: inR 3.6s cubic-bezier(.2, .8, .2, 1) both; }
.intro__l--g { color: #20ff3a; animation: inG 3.6s cubic-bezier(.2, .8, .2, 1) both; }
.intro__l--b { color: #2a4dff; animation: inB 3.6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes inR { 0% { opacity: 0; transform: translate(-.6em, .05em); } 8% { opacity: 1; } 34% { opacity: 1; transform: none; } 50% { opacity: 1; } 60%, 100% { opacity: 0; transform: none; } }
@keyframes inG { 0% { opacity: 0; transform: translate(.05em, -.6em); } 10% { opacity: 1; } 36% { opacity: 1; transform: none; } 50% { opacity: 1; } 60%, 100% { opacity: 0; transform: none; } }
@keyframes inB { 0% { opacity: 0; transform: translate(.6em, .07em); } 12% { opacity: 1; } 38% { opacity: 1; transform: none; } 50% { opacity: 1; } 60%, 100% { opacity: 0; transform: none; } }
.intro__fin { color: var(--ink); opacity: 0; animation: inFin 3.6s ease both; }
.intro__fin b { color: var(--coral); font-weight: inherit; }
@keyframes inFin { 0%, 54% { opacity: 0; } 66%, 100% { opacity: 1; } }
.intro__sub { margin: 0; font-family: var(--f-en); font-weight: 500; font-size: clamp(.875rem, 1.2vw, 1rem); letter-spacing: .5em; color: var(--coral); opacity: 0; animation: inFin 3.6s ease .15s both; }

/* FV の DO MORE は普通に下からせり上がるだけ（三原色は開くときへ移した） */
.mo .rgb__l, .mo .hero-a__catch::before { display: none !important; }
.mo .rgb__fin { animation: catchUp 1s var(--ease) .2s both !important; display: inline-block; }
.is-intro .rgb__fin { animation-play-state: paused !important; }
@keyframes catchUp { from { opacity: 0; transform: translateY(18%); } to { opacity: 1; transform: none; } }

/* FV：何の会社かが分かる一文＋8事業のラベル */
.hero-a__pic { aspect-ratio: 16 / 4.4; }
.fvrow { display: flex; align-items: center; justify-content: space-between; gap: 16px 40px; flex-wrap: wrap; margin-top: clamp(16px, 2vw, 28px); }
.fvrow__h { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.5rem); font-weight: var(--ja-h-weight); letter-spacing: .04em; line-height: 1.3; color: var(--ink); word-break: auto-phrase; }
.fvrow__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 760px; justify-content: flex-end; }
.fvrow__tags a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 99px; font-size: var(--t-sm); color: var(--ink); background: #fff; transition: border-color .2s, background .2s, color .2s; }
.fvrow__tags a:hover { border-color: var(--navy); background: var(--navy); color: #fff; }
.fvrow__tags a:active { transform: scale(.97); }
.hero-a__txt { margin-top: clamp(12px, 1.6vw, 24px); }
@media (max-width: 860px) {
  .hero-a__pic { aspect-ratio: 16 / 9; }
  .fvrow { flex-direction: column; align-items: flex-start; gap: 14px; }
  .fvrow__tags { justify-content: flex-start; }
  .fvrow__tags a { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .is-intro .intro { display: none; } }
.fvrow__tags a { min-height: 44px; padding: 0 16px; }
.hero-a__pic { aspect-ratio: 16 / 3.6; }
.fvrow { display: grid; grid-template-columns: auto 1fr; align-items: center; }
.fvrow__tags { max-width: none; }
.hero-a__catch { font-size: clamp(5rem, 17.5vw, 21rem); }
@media (max-width: 860px) { .hero-a__pic { aspect-ratio: 16 / 9; } .fvrow { grid-template-columns: 1fr; } .hero-a__catch { font-size: clamp(3.5rem, 20.5vw, 9rem); } }
/* About：画面を止めるのをやめる（本人「スクロールストレスある」）。高さは普通、見えたら自動で塗られる */
.about-x.is-fill { height: auto; }
.about-x.is-fill .about-x__stick { position: static; min-height: 0; display: block; padding: clamp(72px, 9vw, 136px) 0; }
.about-x.is-fill .fc { transition: color .5s var(--ease); }

/* ===== Contact：水面と浮き輪 ===== */
.contact { position: relative; overflow: hidden; }
.pool { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; z-index: 1; pointer-events: none; }
.pool__svg { width: 100%; height: 100%; display: block; }
.pool__fill { fill: #dcf1f9; }
.pool__line { fill: none; stroke: var(--navy); stroke-width: 1.5; }
.contact .fx-canvas { z-index: 2; }
.contact__in { position: relative; z-index: 3; }
.lifering { position: relative; border: 0 !important; background: none !important; transform: translateY(var(--ry, 0)) rotate(var(--rt, 0deg)); transition: none !important; }
.lifering__ring { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .8s var(--ease); }
.lifering > svg:not(.lifering__ring) { position: relative; z-index: 1; width: 30%; color: var(--navy); }
.contact__in:hover .lifering { background: none !important; transform: translateY(var(--ry, 0)) rotate(var(--rt, 0deg)) !important; }
.contact__in:hover .lifering__ring { transform: rotate(180deg); }
.contact__in:hover .lifering > svg:not(.lifering__ring) { color: var(--coral); }
.contact__in:active .lifering__ring { transform: rotate(180deg) scale(.94); }
@media (prefers-reduced-motion: reduce) { .lifering { transform: none; } }
.contact__in { padding-bottom: clamp(200px, 20vw, 280px) !important; }
.pool { height: clamp(200px, 20vw, 280px); }
.lifering { width: clamp(96px, 9vw, 128px) !important; height: auto; aspect-ratio: 1; }
.lifering .lifering__ring { width: 100% !important; height: 100% !important; }
.contact__row { align-items: flex-end; }
@media (max-width: 560px) { .lifering { width: 84px !important; } }

/* ===== 10-15 About：網点のざらつき（リーズの数字と同じ作り）＋背面のグラデ（本人指定でグラデ禁止を外す） ===== */
@property --dot { syntax: "<percentage>"; inherits: false; initial-value: 48%; }
.about-x { position: relative; overflow: hidden; isolation: isolate; }
/* 背面：水色・コーラル・青のにじみがゆっくり漂う */
.about-x::before { content: ""; position: absolute; inset: -20%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38% 46% at 82% 22%, rgba(5, 168, 212, .28), transparent 70%),
    radial-gradient(34% 42% at 14% 86%, rgba(244, 99, 58, .20), transparent 70%),
    radial-gradient(30% 36% at 52% 60%, rgba(0, 128, 200, .14), transparent 72%),
    #f7f9fc;
  animation: aboutDrift 22s ease-in-out infinite alternate; }
@keyframes aboutDrift { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-3%, 2%) rotate(3deg); } 100% { transform: translate(2%, -2%) rotate(-2deg); } }
/* その上にうすい網点（右上ほど濃く） */
.about-x::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(18, 58, 122, .16) 32%, transparent 36%); background-size: 7px 7px;
  -webkit-mask-image: radial-gradient(70% 70% at 85% 15%, #000, transparent 75%); mask-image: radial-gradient(70% 70% at 85% 15%, #000, transparent 75%); }
/* 文字：塗られると網点で刷られる（点が育つ） */
.about-x.is-fill .fc.on {
  color: transparent;
  background-image: radial-gradient(circle, var(--dot-ink, var(--ink)) var(--dot), transparent calc(var(--dot) + 6%));
  background-size: 0.034em 0.034em;
  -webkit-background-clip: text; background-clip: text;
  animation: dotIn .9s var(--ease) both; }
.about-x.is-fill em .fc.on { --dot-ink: var(--coral); color: transparent; }
@keyframes dotIn { from { --dot: 6%; } to { --dot: 52%; } }
.about-x__p { position: relative; }
@media (prefers-reduced-motion: reduce) { .about-x::before { animation: none; } .about-x.is-fill .fc.on { animation: none; } }
.about-x.is-fill .fc.on { background-image: radial-gradient(circle, var(--dot-ink, var(--ink)) var(--dot), transparent calc(var(--dot) + 4%)); background-size: 0.042em 0.042em; }
@keyframes dotIn { from { --dot: 8%; } to { --dot: 64%; } }

/* ===== 事業：画面を止めない格子（10-15） ===== */
.ride.is-grid { height: auto !important; }
.ride.is-grid .ride__stick { position: relative; height: auto; display: block; overflow: hidden; }
.ride.is-grid .ride__track { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 2.4vw, 40px) clamp(16px, 1.8vw, 28px); width: auto; max-width: var(--max); margin: 0 auto; padding: clamp(28px, 3vw, 44px) var(--gut) 0; transform: none !important; }
.ride.is-grid .ride__panel { width: auto; --pw: 100%; }
.ride.is-grid .ride__panel a { height: 100%; max-height: none; display: flex; flex-direction: column; }
.ride.is-grid .ride__pic { flex: none; aspect-ratio: 16 / 10; position: relative; }
.ride.is-grid .ride__pic > img { position: absolute; inset: 0; }
.ride.is-grid .ride__pic--reels > img { position: static; }
.ride.is-grid .ride__txt { flex: 1; }
.ride.is-grid .ride__no { font-size: clamp(2.6rem, 3.6vw, 4rem); }
.ride.is-grid .ride__p { display: block; }
/* 見えたら下から順に（.is-near が付いたらカラー） */
.mo .ride.is-grid .ride__panel { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.mo .ride.is-grid .ride__panel.is-near { opacity: 1; transform: none; }
.ride.is-grid .ride__panel a:hover .ride__no { color: var(--coral); -webkit-text-stroke-color: var(--coral); }
.ride.is-grid .ride__panel:not(:hover) .ride__no { color: #fff; -webkit-text-stroke-color: var(--navy); }
/* 色は「見えたら一瞬カラー→2色へ戻る」でなく、ホバーでカラーに（見えた時は走査線だけ） */
.ride.is-grid .ride__panel.is-near .ride__pic img { filter: grayscale(1) contrast(1.15); mix-blend-mode: screen; opacity: .92; }
.ride.is-grid .ride__panel.is-near .ride__pic::after { opacity: .35; }
.ride.is-grid .ride__panel a:hover .ride__pic img, .ride.is-grid .ride__panel a:focus-visible .ride__pic img { filter: none; mix-blend-mode: normal; opacity: 1; }
.ride.is-grid .ride__panel a:hover .ride__pic::after, .ride.is-grid .ride__panel a:focus-visible .ride__pic::after { opacity: 0; }
.ride.is-grid .ride__pic { --ph: 100%; }
/* 下の海：ふつうの帯。ノリオはその上を往復 */
.ride.is-grid .ride__sea { position: relative; height: clamp(140px, 18vw, 220px); margin-top: clamp(32px, 4vw, 56px); display: block; cursor: crosshair; }
.ride.is-grid .ride__bg { width: 100%; height: 100%; transform: none !important; }
.ride.is-grid .ride__norio { position: absolute; left: 0; bottom: clamp(30px, 4vw, 60px); top: auto; height: clamp(110px, 13vw, 180px); animation: none; transition: none; }
.ride.is-grid .ride__wake { z-index: 3; }
.ride.is-grid .ride__head { padding-top: 0; }
@media (max-width: 1080px) { .ride.is-grid .ride__track { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .ride.is-grid .ride__track { grid-template-columns: 1fr; }
  .ride.is-grid .ride__panel { --pw: 100%; }
}
.ride.is-grid .ride__sea, .ride.is-grid .ride__norio { display: block; }

/* ===== 事業：大きな文字の目次（10-15 本人「格子は微妙」） ===== */
.blist { list-style: none; margin: 0 auto; padding: clamp(20px, 2.4vw, 36px) var(--gut) 0; max-width: var(--max); counter-reset: none; }
.brow { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1.1fr) minmax(0, 1fr) 96px 44px; align-items: center; gap: 24px; padding: clamp(18px, 2vw, 28px) 16px; border-bottom: 1px solid var(--line); color: var(--ink); overflow: hidden; isolation: isolate; }
.brow-li:first-child .brow { border-top: 1px solid var(--ink); }
.brow::before { content: ""; position: absolute; inset: 0; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); z-index: -1; }
.brow:hover::before, .brow:focus-visible::before { transform: scaleX(1); }
.brow__thumb { display: none; }
.brow__no { font-family: var(--f-en); font-weight: 600; font-size: var(--t-lg); color: var(--coral-ink); font-variant-numeric: tabular-nums; transition: color .3s; }
.brow__name { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: clamp(1.375rem, 2.4vw, 2.25rem); font-weight: var(--ja-h-weight); letter-spacing: .04em; line-height: 1.35; color: var(--navy); transition: color .3s, transform .45s var(--ease); word-break: auto-phrase; }
.brow__short { font-size: var(--t-sm); line-height: 1.7; color: var(--text); transition: color .3s; }
.brow__cat { font-family: var(--f-en); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); justify-self: end; transition: color .3s; }
.brow__arr { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; transition: background .3s, border-color .3s, color .3s, transform .45s var(--ease); }
.brow__arr svg { width: 18px; height: 18px; }
.brow:hover .brow__name, .brow:focus-visible .brow__name { color: #fff; transform: translateX(10px); }
.brow:hover .brow__short, .brow:hover .brow__cat, .brow:focus-visible .brow__short, .brow:focus-visible .brow__cat { color: rgba(255, 255, 255, .82); }
.brow:hover .brow__no, .brow:focus-visible .brow__no { color: var(--coral); }
.brow:hover .brow__arr, .brow:focus-visible .brow__arr { background: var(--coral); border-color: var(--coral); color: #fff; transform: rotate(-45deg); }
.brow .bcard__soon { font-size: 11px; }
.brow:hover .bcard__soon { color: #fff; }
/* 浮かぶ絵 */
.bprev { position: fixed; left: 0; top: 0; z-index: 120; width: clamp(240px, 22vw, 340px); aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: var(--navy); pointer-events: none; opacity: 0; scale: .85; transition: opacity .25s, scale .35s var(--ease); }
.bprev.is-on { opacity: 1; scale: 1; }
.bprev img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.bprev__type { display: none; position: absolute; inset: 0; place-items: center; color: #fff; font-family: var(--f-en); font-weight: 600; letter-spacing: .1em; font-size: 1.25rem; }
.bprev.is-type img { display: none; } .bprev.is-type .bprev__type { display: grid; }
/* 見えたら行が下から順に */
.mo .brow-li { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.mo .brow-li.is-in { opacity: 1; transform: none; }
.ride.is-grid .ride__head { padding-top: 0; }
@media (max-width: 860px) {
  .brow { grid-template-columns: 96px 1fr 28px; gap: 4px 16px; padding: 16px 0; }
  .brow__thumb { display: block; grid-row: 1 / 4; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--navy); position: relative; }
  .brow__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
  .brow__thumb.brow__thumb--contain img, .brow__thumb.brow__thumb--norio img { object-fit: contain; object-position: 50% 100%; }
  .brow__thumb--reels { display: flex; gap: 3px; padding: 6px; }
  .brow__thumb--reels img { width: auto; height: 100%; flex: 1; object-fit: cover; border-radius: 3px; }
  .brow__thumb--type { display: grid; place-items: center; color: #fff; font-family: var(--f-en); font-size: 10px; letter-spacing: .1em; text-align: center; padding: 6px; }
  .brow__no { grid-column: 2; font-size: var(--t-sm); }
  .brow__name { grid-column: 2; font-size: 1.25rem; }
  .brow__short { grid-column: 2; font-size: var(--t-xs); }
  .brow__cat { display: none; }
  .brow__arr { grid-column: 3; grid-row: 1 / 4; width: 28px; height: 28px; border: 0; }
}
@media (prefers-reduced-motion: reduce) { .bprev { display: none; } }

/* Pickup：ノリオのカードの背面を About と同じ「漂うグラデ＋網点」に（10-15 本人「ここ弱い・この感じで背面動かしたい」） */
.pcard__pic--norio { position: relative; isolation: isolate; overflow: hidden; background: #f7f9fc; }
.pcard__pic--norio::before { content: ""; position: absolute; inset: -30%; z-index: -2;
  background:
    radial-gradient(42% 50% at 78% 24%, rgba(5, 168, 212, .45), transparent 70%),
    radial-gradient(40% 46% at 18% 84%, rgba(244, 99, 58, .32), transparent 70%),
    radial-gradient(34% 40% at 50% 55%, rgba(0, 128, 200, .22), transparent 72%);
  animation: aboutDrift 14s ease-in-out infinite alternate; }
.pcard__pic--norio::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(circle, rgba(18, 58, 122, .22) 32%, transparent 36%); background-size: 6px 6px;
  -webkit-mask-image: radial-gradient(75% 75% at 80% 20%, #000, transparent 78%); mask-image: radial-gradient(75% 75% at 80% 20%, #000, transparent 78%); }
.pcard__pic--norio img { width: 62% !important; transform-origin: 50% 90%; animation: norioBob 3.4s ease-in-out infinite; transition: scale .5s var(--ease); }
@keyframes norioBob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
.pcard:hover .pcard__pic--norio img { scale: 1.1; transform: none; }
.pcard:hover .pcard__pic--norio::before { animation-duration: 5s; }
@media (prefers-reduced-motion: reduce) { .pcard__pic--norio::before, .pcard__pic--norio img { animation: none; } }
.pcard__pic--norio::before { background:
    radial-gradient(46% 56% at 80% 22%, rgba(5, 168, 212, .62), transparent 70%),
    radial-gradient(44% 52% at 16% 86%, rgba(244, 99, 58, .45), transparent 70%),
    radial-gradient(36% 42% at 50% 55%, rgba(0, 128, 200, .30), transparent 72%), #f4f8fc; }
.pcard__pic--norio::after { background-image: radial-gradient(circle, rgba(18, 58, 122, .32) 34%, transparent 38%); background-size: 7px 7px;
  -webkit-mask-image: linear-gradient(135deg, transparent 20%, #000 75%); mask-image: linear-gradient(135deg, transparent 20%, #000 75%); }
.pcard__pic--norio { display: grid; place-items: end center; }
.pcard__pic--norio img { width: auto !important; height: 92% !important; object-fit: contain; }
.pick .pcard__pic--norio img { object-fit: contain !important; object-position: 50% 100% !important; height: 90% !important; width: auto !important; max-width: 70%; padding: 0 !important; }
.pick .pcard__pic--norio { display: block; position: relative; }
.pick .pcard__pic--norio img { position: absolute; left: 50%; bottom: 0; height: 92% !important; width: auto !important; max-width: none; margin-left: -.3em; translate: -50% 0; }
/* About の背面：canvas の波（網点が波打つ＋下の波）。もとの動かない網点は隠す */
.about-wave { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.mo .about-x::after { display: none; }
@media (prefers-reduced-motion: reduce) { .about-wave { display: none; } }
/* About の背面：布（WebGL）。にじむグラデの ::before は布があるときは消す */
.about-silk { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3; pointer-events: none; }
.about-x.has-silk::before { display: none; }
@media (prefers-reduced-motion: reduce) { .about-silk { display: none; } .about-x.has-silk::before { display: block; animation: none; } }

/* 事業カード：最初からカラーでパキッと（10-15 本人「ポインター当ててからじゃなくて」）。ホバーは少し寄るだけ */
.ride.is-grid .ride__pic img,
.ride.is-grid .ride__panel.is-near .ride__pic img { filter: none !important; mix-blend-mode: normal !important; opacity: 1 !important; transition: transform .7s var(--ease); }
.ride.is-grid .ride__pic::after,
.ride.is-grid .ride__panel.is-near .ride__pic::after { opacity: 0 !important; }
.ride.is-grid .ride__pic { background: #eef3f8; }
.ride.is-grid .ride__pic--type { background: var(--navy); }
.ride.is-grid .ride__panel a:hover .ride__pic img { transform: scale(1.05); }
.ride.is-grid .ride__pic--reels img, .ride.is-grid .ride__panel a:hover .ride__pic--reels img { transform: none; }
.ride.is-grid .ride__panel a:hover .ride__pic--reels img { translate: 0 -4px; transition: translate .4s var(--ease); }
.mo .ride.is-grid .ride__panel { transform: translateY(16px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
/* ヘッダーは透けない白に（iPhone で後ろの文字が透けていた） */
.hd { background: #fff !important; }
.about-x__p { width: auto; max-width: 36em; }
/* 上の線のサーフボード：画面の端で半分切れて「謎の白い楕円」に見えていた → 線のすぐ下に全体が見えるように */
.hd__board { top: 2px; width: 46px; height: 14px; z-index: 3; }
.hd__board svg path:first-child { fill: #fff; }
@media (max-width: 860px) { .peek { width: 56px; height: 96px; right: 8px; } .peek.is-up { transform: translateY(30%); } }

/* 事業一覧のカードと事業ページの Next も、最初からフルカラーに（トップの事業カードとそろえる） */
.gcard__pic img, .bp-next__pic img { filter: none !important; mix-blend-mode: normal !important; opacity: 1 !important; transition: transform .7s var(--ease); }
.gcard__pic::after, .bp-next__pic::after { opacity: 0 !important; }
.gcard__pic, .bp-next__pic { background: #eef3f8; }
.gcard__pic--type, .bp-next__pic--type { background: var(--navy); }
.gcard:hover .gcard__pic img, .bp-next:hover .bp-next__pic img { transform: scale(1.05); }
.gcard__pic--reels img, .bp-next__pic--reels img, .gcard:hover .gcard__pic--reels img, .bp-next:hover .bp-next__pic--reels img { transform: none; }
/* 挿絵は中央合わせで見せる */
img[src*="/img/biz-0"], img[src*="/img/works-wave"] { object-position: 50% 50% !important; }

/* ===== 事業カード：まとまりごとの色＋大きさに強弱（10-15 本人「全部同じ色で単調・大きさが全部同じ」） ===== */
.ride__panel { --g: var(--navy); }
.ride__panel[data-g="creative"] { --g: #e2532b; }
.ride__panel[data-g="growth"] { --g: #0a6fb0; }
.ride__panel[data-g="food"] { --g: #0b6f8e; }
.ride.is-grid .ride__panel a { border: 0; overflow: hidden; border-radius: 4px; background: var(--g); }
.ride.is-grid .ride__txt { background: var(--g); color: #fff; }
.ride.is-grid .ride__h { color: #fff; }
.ride.is-grid .ride__p { color: rgba(255, 255, 255, .86); }
.ride.is-grid .ride__cat { color: rgba(255, 255, 255, .75); }
.ride.is-grid .ride__cat .bcard__soon { color: #fff; border-color: rgba(255, 255, 255, .7); }
.ride.is-grid .ride__no, .ride.is-grid .ride__panel:not(:hover) .ride__no { color: var(--g); -webkit-text-stroke: 0; }
.ride.is-grid .ride__panel a:hover .ride__no { color: #fff; -webkit-text-stroke: 1.5px var(--g); }
.ride.is-grid .ride__panel a:hover { transform: translateY(-4px); transition: transform .35s var(--ease); }
.ride.is-grid .ride__panel a:hover .ride__arr { transform: none; }
/* 大きさ：01 は 2×2、08 は横長（4列のとき） */
@media (min-width: 1081px) {
  .ride.is-grid .ride__track { grid-auto-flow: dense; }
  .ride.is-grid .ride__panel:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .ride.is-grid .ride__panel:nth-child(8) { grid-column: span 2; }
  .ride.is-grid .ride__panel:nth-child(1) .ride__pic, .ride.is-grid .ride__panel:nth-child(8) .ride__pic { flex: 1 1 auto; aspect-ratio: auto; min-height: 220px; }
  .ride.is-grid .ride__panel:nth-child(1) .ride__h { font-size: clamp(1.5rem, 2.2vw, 2rem); }
  .ride.is-grid .ride__panel:nth-child(1) .ride__p { font-size: var(--t-md); }
  .ride.is-grid .ride__panel:nth-child(1) .ride__no { font-size: clamp(4rem, 6vw, 6.5rem); }
  .ride.is-grid .ride__panel:nth-child(8) a { flex-direction: row; }
  .ride.is-grid .ride__panel:nth-child(8) .ride__pic { flex: 1.3 1 0; }
  .ride.is-grid .ride__panel:nth-child(8) .ride__txt { flex: 1 1 0; align-content: center; }
  .ride.is-grid .ride__panel:nth-child(8) .ride__no { top: auto; bottom: 14px; transform: none; }
}
@media (min-width: 561px) and (max-width: 1080px) {
  .ride.is-grid .ride__panel:nth-child(1), .ride.is-grid .ride__panel:nth-child(8) { grid-column: span 2; }
}
/* 番号：白地に色のふち（絵の上でも色の上でも見える） */
.ride.is-grid .ride__no, .ride.is-grid .ride__panel:not(:hover) .ride__no { color: #fff; -webkit-text-stroke: 1.5px var(--g); }
.ride.is-grid .ride__panel a:hover .ride__no { color: var(--coral); -webkit-text-stroke-color: #fff; }
/* 01：絵は16:10のまま全体を見せ、文字欄に一文と「くわしく見る」 */
.ride__lead, .ride__more { display: none; }
@media (min-width: 1081px) {
  .ride.is-grid .ride__panel:nth-child(1) .ride__pic { flex: none; aspect-ratio: 16 / 10; min-height: 0; }
  .ride.is-grid .ride__panel:nth-child(1) .ride__txt { flex: 1; align-content: center; gap: 10px; padding: 28px 32px; }
  .ride.is-grid .ride__panel:nth-child(1) .ride__lead { display: block; font-size: var(--t-lg); line-height: 1.6; color: #fff; font-weight: 500; }
  .ride.is-grid .ride__panel:nth-child(1) .ride__more { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; font-weight: 700; color: #fff; }
  .ride.is-grid .ride__panel:nth-child(1) .ride__more svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
  .ride.is-grid .ride__panel:nth-child(1) a:hover .ride__more svg { transform: translateX(6px); }
  /* 08：絵は16:10の形のまま（左右を切らない） */
  .ride.is-grid .ride__panel:nth-child(8) .ride__pic { flex: none; aspect-ratio: 16 / 10; height: 100%; width: auto; min-height: 0; }
}
/* 事業ページの頭の絵：挿絵は16:10のまま全体を見せる */
.bp-pic:has(img[src*="/img/biz-0"]), .bp-pic:has(img[src*="/img/works-wave"]) { aspect-ratio: 16 / 10 !important; }
/* 08 はふつうの大きさに戻し、空いた1枠を「事業をくわしく見る」カードに */
@media (min-width: 1081px) {
  .ride.is-grid .ride__panel:nth-child(8) { grid-column: auto; }
  .ride.is-grid .ride__panel:nth-child(8) a { flex-direction: column; }
  .ride.is-grid .ride__panel:nth-child(8) .ride__pic { aspect-ratio: 16 / 10; height: auto; width: auto; flex: none; }
  .ride.is-grid .ride__panel:nth-child(8) .ride__txt { flex: 1; align-content: start; }
  .ride.is-grid .ride__panel:nth-child(8) .ride__no { top: 0; bottom: auto; transform: translateY(-62%); }
}
.ride__cta a { display: flex !important; flex-direction: column; justify-content: space-between; height: 100%; min-height: 220px; padding: 28px; background: #fff !important; border: 1.5px solid var(--navy) !important; color: var(--navy); }
.ride__cta-en { font-family: var(--f-en); font-size: var(--t-sm); letter-spacing: .14em; text-transform: uppercase; color: var(--coral-ink); }
.ride__cta-ja { font-size: clamp(1.25rem, 1.8vw, 1.625rem); font-weight: var(--ja-h-weight); line-height: 1.5; letter-spacing: .04em; }
.ride__cta-arr { align-self: flex-end; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: #fff; transition: background .3s, transform .35s var(--ease); }
.ride__cta-arr svg { width: 22px; height: 22px; }
.ride__cta a:hover { background: var(--navy) !important; color: #fff; }
.ride__cta a:hover .ride__cta-en { color: var(--coral); }
.ride__cta a:hover .ride__cta-arr { background: var(--coral); transform: translateX(6px); }
.mo .ride.is-grid .ride__cta { opacity: 1; transform: none; }
@media (max-width: 1080px) { .ride__cta { display: none; } }
@media (max-width: 1080px) { .ride.is-grid .ride__pic { aspect-ratio: 16 / 10 !important; min-height: 0 !important; flex: none !important; } }
/* 01 の絵（works-wave）は 1600×905。枠をその比率にして切らない */
.ride__pic:has(img[src*="works-wave"]), .gcard__pic:has(img[src*="works-wave"]), .bp-next__pic:has(img[src*="works-wave"]), .bp-pic:has(img[src*="works-wave"]) { aspect-ratio: 1600 / 905 !important; }
.ride.is-grid .ride__panel .ride__pic:has(img[src*="works-wave"]), .ride.is-grid .ride__panel:nth-child(1) .ride__pic:has(img[src*="works-wave"]) { aspect-ratio: 1600 / 905 !important; }
@media (min-width: 1081px) {
  .ride.is-grid .ride__panel:nth-child(1) .ride__txt { align-content: end; padding: 32px 40px 40px; }
  .ride.is-grid .ride__panel:nth-child(1) .ride__lead { font-size: clamp(1.25rem, 1.7vw, 1.625rem); line-height: 1.55; font-weight: 600; margin-top: 8px; }
  .ride.is-grid .ride__panel:nth-child(1) .ride__more { margin-top: 16px; min-height: 44px; padding: 0 22px; border: 1px solid rgba(255,255,255,.6); border-radius: 99px; align-self: start; justify-self: start; }
  .ride.is-grid .ride__panel:nth-child(1) a:hover .ride__more { background: #fff; color: var(--navy); }
}

/* ===== 10-15 開くとき（短く2.3秒）：書体チカチカ → 三原色で「なみのりAI」 ===== */
.is-intro .intro { animation: introBg2 2.3s ease forwards; cursor: pointer; }
@keyframes introBg2 { 0%, 60% { background: #0a1834; } 70% { background: #fff; } 86% { opacity: 1; visibility: visible; background: #fff; } 100% { opacity: 0; visibility: hidden; background: #fff; } }
.intro__flick { position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%); font-size: clamp(2.5rem, 8vw, 6.5rem); line-height: 1; white-space: nowrap; color: #fff; animation: flickOut 2.3s linear both; }
@keyframes flickOut { 0%, 38% { opacity: 1; } 40%, 100% { opacity: 0; } }
.intro__rgb { font-family: var(--f-ja); font-weight: 700; letter-spacing: .02em; }
.intro__l--r { animation: inR2 2.3s cubic-bezier(.2, .8, .2, 1) both; }
.intro__l--g { animation: inG2 2.3s cubic-bezier(.2, .8, .2, 1) both; }
.intro__l--b { animation: inB2 2.3s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes inR2 { 0%, 38% { opacity: 0; transform: translate(-.5em, .05em); } 42% { opacity: 1; } 56% { opacity: 1; transform: none; } 64% { opacity: 1; } 72%, 100% { opacity: 0; transform: none; } }
@keyframes inG2 { 0%, 38% { opacity: 0; transform: translate(.05em, -.5em); } 43% { opacity: 1; } 57% { opacity: 1; transform: none; } 64% { opacity: 1; } 72%, 100% { opacity: 0; transform: none; } }
@keyframes inB2 { 0%, 38% { opacity: 0; transform: translate(.5em, .06em); } 44% { opacity: 1; } 58% { opacity: 1; transform: none; } 64% { opacity: 1; } 72%, 100% { opacity: 0; transform: none; } }
.intro__fin { animation: inFin2 2.3s ease both; }
@keyframes inFin2 { 0%, 64% { opacity: 0; } 72%, 100% { opacity: 1; } }
.intro__sub { animation: inFin2 2.3s ease .05s both; }

/* 演出は JS が .is-run を付けた瞬間から始める（読み込みの遅さで見逃さない） */
.intro:not(.is-run), .intro:not(.is-run) * { animation-play-state: paused !important; }
/* 01 の名前は正式ロゴ（白）＋「法人」 */
.ride__h--logo { display: flex; align-items: center; gap: 14px; }
.ride__h--logo img { height: clamp(40px, 3.6vw, 56px); width: auto; }
.ride__h--logo span { font-size: clamp(1.25rem, 1.9vw, 1.75rem); color: #fff; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.5); line-height: 1.2; }
@media (max-width: 1080px) { .ride__h--logo img { height: 36px; } .ride__h--logo span { font-size: var(--t-lg); } }
.ride__h--project .plogo { font-size: clamp(26px, 2.4vw, 34px); }
.ride__h--project .plogo__word { color: #fff; }
.ride__h--project .plogo__box { color: var(--coral); }
.ride__h--sns img { height: clamp(34px, 3vw, 44px); width: auto; }
.ride__h--project span { border-left: 0 !important; padding-left: 0 !important; }
.ride__h--project .plogo__box { font-size: .3em; letter-spacing: .32em; }
.ride__h--project .plogo__word { font-size: 1em; letter-spacing: -0.02em; line-height: 1; }
.bp-what li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ===== 9.5へ：お問い合わせフォーム ===== */
.contact__in { padding-bottom: clamp(32px, 4vw, 56px) !important; }
.cform { position: relative; z-index: 3; margin-bottom: clamp(200px, 20vw, 280px); }
.cform__t { font-size: var(--t-lg); font-weight: var(--ja-h-weight); color: var(--navy); margin: 0 0 20px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.cform__t span { font-size: var(--t-sm); font-weight: 400; color: var(--mute); }
.cform__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 24px; background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: clamp(20px, 2.6vw, 36px); }
.cform__f { display: grid; gap: 6px; }
.cform__f--wide { grid-column: 1 / -1; }
.cform label { font-size: var(--t-sm); font-weight: 700; color: var(--ink); }
.cform input, .cform select, .cform textarea { font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1px solid #b8c2d0; border-radius: 4px; min-height: 48px; padding: 10px 14px; outline: 2px solid transparent; outline-offset: 1px; transition: border-color .15s, background-color .15s; }
.cform textarea { resize: vertical; line-height: 1.7; }
.cform input:hover, .cform select:hover, .cform textarea:hover { border-color: var(--navy); }
.cform input:focus-visible, .cform select:focus-visible, .cform textarea:focus-visible { outline: 2px solid var(--coral); border-color: var(--navy); }
.cform [aria-invalid="true"] { border-color: #b42318; background: #fff6f5; }
.cform__err { min-height: 1.5em; font-size: 13px; color: #b42318; }
.cform__foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 20px; }
.cform__btn { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 28px; border-radius: 99px; background: var(--navy); color: #fff; font-weight: 700; transition: background .2s, transform .15s; }
.cform__btn svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.cform__btn:hover { background: var(--coral-ink); }
.cform__btn:hover svg { transform: translateX(4px); }
.cform__btn:active { transform: scale(.97); }
.cform__note { margin: 0; font-size: var(--t-sm); color: var(--mute); }
.cform__status { margin: 12px 0 0; font-size: var(--t-sm); color: var(--navy); font-weight: 700; min-height: 1.5em; }
@media (max-width: 760px) { .cform__grid { grid-template-columns: 1fr; } }
/* PROJECT の小さい文字を読める明るさに（紺の上で4.5:1以上） */
.ride__h--project .plogo__box { color: #ff9a7d; }
/* スマホののぞきノリオ：カードや文字に被らないよう、お問い合わせ付近とページ末だけで出る */
@media (max-width: 860px) { .peek:not(.is-near-end) { transform: translateY(100%) !important; } }
.cform__f, .cform input, .cform select, .cform textarea { min-width: 0; width: 100%; box-sizing: border-box; }
.cform__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .cform__grid { grid-template-columns: minmax(0, 1fr); } }

/* ===== 実際のアプリをパソコンとスマホに映した見せ方（個人スクール） ===== */
.bp-dev { position: relative; margin: 0; padding: clamp(28px, 4vw, 56px) clamp(16px, 6vw, 96px) clamp(36px, 5vw, 72px); border-radius: 4px; background: #eef4fa; display: grid; justify-items: center; overflow: hidden; }
.dev-mac { width: min(100%, 860px); }
.dev-mac__screen { background: #12151c; border-radius: 16px 16px 0 0; padding: 2.2% 2.2% 3%; box-shadow: inset 0 0 0 1px #2c313c; }
.dev-mac__screen img { display: block; width: 100%; height: auto; border-radius: 3px; }
.dev-mac__base { height: clamp(10px, 1.6vw, 18px); margin: 0 -7%; background: #c9ced6; border-radius: 0 0 14px 14px / 0 0 10px 10px; position: relative; }
.dev-mac__base::after { content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 45%; transform: translateX(-50%); background: #b3b9c3; border-radius: 0 0 8px 8px; }
.dev-phone { position: absolute; right: clamp(16px, 7vw, 120px); bottom: clamp(16px, 3vw, 40px); width: clamp(110px, 17vw, 230px); background: #12151c; border-radius: clamp(18px, 2.6vw, 36px); padding: clamp(5px, .7vw, 9px); box-shadow: 0 0 0 1px #2c313c; }
.dev-phone__screen { border-radius: clamp(14px, 2vw, 28px); overflow: hidden; position: relative; }
.dev-phone__screen::before { content: ""; position: absolute; left: 50%; top: 2.2%; width: 30%; height: 3.2%; transform: translateX(-50%); background: #12151c; border-radius: 99px; z-index: 1; }
.dev-phone__screen img { display: block; width: 100%; height: auto; }
.mo .bp-dev.is-in .dev-phone { animation: phoneIn .9s var(--ease) .25s both; }
@keyframes phoneIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .bp-dev { padding: 20px 12px 28px; } .dev-phone { right: 10px; bottom: 10px; } }
@media (prefers-reduced-motion: reduce) { .bp-dev .dev-phone { animation: none; } }
/* なみのりバイヤーのロゴ（バイヤーのサイトと同じ組み：Futura の NAMINORI＋手書きの buyer＋なみのりバイヤー） */
.blogo { position: relative; display: inline-block; text-align: center; line-height: 1.2; color: #fff; }
.blogo b { display: block; font-family: "futura-pt", "Jost", sans-serif; font-weight: 600; font-size: clamp(18px, 1.6vw, 22px); letter-spacing: .36em; padding-left: .36em; white-space: nowrap; }
.blogo em { position: absolute; right: -2.1em; top: -.6em; font-family: "La Belle Aurore", cursive; font-style: normal; font-weight: 400; font-size: clamp(18px, 1.6vw, 22px); color: #ffb39c; transform: rotate(-12deg); }
.blogo span { display: block; font-size: 12px; letter-spacing: .3em; opacity: .85; margin-top: 4px; }
.ride__h--buyer { padding-right: 2.4em; }
/* 03・04・07 のロゴは元の色のまま、白い札にのせる */
.lplate { display: inline-flex; align-items: center; background: #fff; border-radius: 4px; padding: 10px 14px; }
.lplate img { height: clamp(28px, 2.6vw, 38px); width: auto; display: block; }
.ride__h--buyer span, .ride__h--plate span { border-left: 0 !important; padding-left: 0 !important; }
.ride__h--plate .lplate { padding: 10px 14px !important; }
.bp-tlogo { line-height: 1; }
.plogo--xl { font-size: clamp(48px, 7vw, 104px); }
.plogo--xl .plogo__box { font-size: .26em; letter-spacing: .4em; color: var(--coral-ink); }
.plogo--xl .plogo__word { color: var(--ink); letter-spacing: -0.02em; }
/* 事業ページの題を正式ロゴに */
.bp-tlogo--img { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; }
.bp-tlogo--img img { height: clamp(64px, 8vw, 120px); width: auto; display: block; }
.bp-tlogo__sub { font-size: clamp(1.5rem, 3vw, 2.75rem); font-weight: var(--ja-h-weight); color: var(--ink); padding-left: 24px; border-left: 1.5px solid var(--line); line-height: 1.2; }
.blogo--ink { color: var(--ink); }
.blogo--ink em { color: var(--coral); }
.blogo--xl b { font-size: clamp(30px, 4.4vw, 60px); }
.blogo--xl em { font-size: clamp(30px, 4.4vw, 60px); }
.blogo--xl span { font-size: clamp(14px, 1.4vw, 18px); color: var(--mute); }
.bp-title h1.bp-tlogo .lift__in, .bp-title h1.bp-tlogo { overflow: visible; }
.bp-tlogo--img .lift__in { display: inline-flex; align-items: center; gap: 20px; flex-wrap: nowrap; }
@media (max-width: 560px) { .bp-tlogo--img .lift__in { gap: 12px; } .bp-tlogo--img img { height: 56px; } .bp-tlogo__sub { font-size: 1.25rem; padding-left: 12px; } }
.ride__h--sns img[src*="logo-sales"] { height: clamp(46px, 4vw, 60px); }

/* ===== 開くとき：最後は「Naminori AI」に、文字が核分裂するように割れて集まって着地 ===== */
.intro__rgb { display: none !important; }
.intro__fis { position: relative; margin: 0; font-family: "futura-pt", "Jost", sans-serif; font-weight: 600; font-size: clamp(3rem, 9vw, 7.5rem); line-height: 1; letter-spacing: -0.01em; white-space: nowrap; display: flex; }
.fl { position: relative; display: inline-block; }
.fl--sp { width: .28em; }
.fl__c { position: absolute; left: 0; top: 0; font-style: normal; mix-blend-mode: screen; opacity: 0; animation: fission 2.3s cubic-bezier(.2, .8, .2, 1) var(--d) both; }
.fl__c--r { color: #ff2020; } .fl__c--g { color: #20ff3a; } .fl__c--b { color: #2a4dff; }
.fl__fin { font-weight: 600; color: var(--ink); opacity: 0; animation: fisFin 2.3s ease both; }
.fl--ai .fl__fin { color: var(--coral); }
/* 38%：ひとつの白い字 → 46%：3色に割れて四方へ飛ぶ → 58%：集まって重なり白く光る → 70%：紺に */
@keyframes fission {
  0%, 36% { opacity: 0; transform: none; }
  40% { opacity: 1; transform: none; }
  48% { opacity: 1; transform: translate(calc(var(--x) * .9em), calc(var(--y) * .9em)) rotate(var(--rot)) scale(1.15); }
  60% { opacity: 1; transform: none; }
  66% { opacity: 1; }
  74%, 100% { opacity: 0; transform: none; }
}
@keyframes fisFin { 0%, 64% { opacity: 0; } 74%, 100% { opacity: 1; } }
.intro:not(.is-run) .fl__c, .intro:not(.is-run) .fl__fin { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .fl__c { display: none; } .fl__fin { opacity: 1; animation: none; } }
@keyframes flickOut { 0%, 37% { opacity: 1; } 38%, 100% { opacity: 0; } }

/* ===== フッター候補（?ft=a〜d で見比べ。a＝いまの形を整えたもの） ===== */
.ft__word:focus { outline: none; }
.ft__word:focus-visible { outline: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .08em; text-decoration-color: var(--coral); }
.ft__wave, .ft__norio, .ft__mq, .ft__logos { display: none; }
.ft { position: relative; overflow: hidden; }
.ft > .wrap { position: relative; z-index: 2; }

/* --- B：紺の面のフッター（白い文字・DO MORE は中抜きの線で、触れると塗られる） --- */
[data-ft="b"] .ft { background: var(--navy); color: #fff; padding-top: 96px; }
[data-ft="b"] .ft__map p, [data-ft="b"] .ft__map a, [data-ft="b"] .ft__bottom small { color: #fff; }
[data-ft="b"] .ft__map a { opacity: .82; }
[data-ft="b"] .ft__map a:hover { opacity: 1; }
[data-ft="b"] .pagetop { border-color: rgba(255,255,255,.35); color: #fff; }
[data-ft="b"] .pagetop:hover { background: #fff; color: var(--navy); }
[data-ft="b"] .ft__word { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.85); }
[data-ft="b"] .ft__word b { color: transparent; -webkit-text-stroke-color: var(--coral); }
[data-ft="b"] .ft__word .wl { transition: color .4s; }
[data-ft="b"] .ft:hover .ft__word .wl { color: #fff; }
[data-ft="b"] .ft:hover .ft__word b .wl { color: var(--coral); }
[data-ft="b"] .ft__bottom { border-top-color: rgba(255,255,255,.18); }
[data-ft="b"] .ft__bottom img { content: url(/group/img/logo-white.webp); }

/* --- C：波打ちぎわ（上が波の形・水色の地・DO MORE の上をノリオが行き来） --- */
[data-ft="c"] .ft { background: #e6f4fb; margin-top: 60px; padding-top: 56px; overflow: visible; }
[data-ft="c"] .ft__wave { display: block; position: absolute; left: 0; right: 0; top: -59px; height: 60px; overflow: hidden; }
[data-ft="c"] .ft__wave svg { width: 200%; height: 100%; fill: #e6f4fb; animation: ftWave 14s linear infinite; }
@keyframes ftWave { to { transform: translateX(-50%); } }
[data-ft="c"] .ft__norio { display: block; position: absolute; z-index: 3; left: 0; height: clamp(90px, 10vw, 150px); width: auto; bottom: clamp(120px, 14vw, 230px); animation: ftRide 16s ease-in-out infinite alternate; }
@keyframes ftRide { 0% { transform: translateX(4vw) scaleX(1) rotate(-6deg); } 49% { transform: translateX(80vw) scaleX(1) rotate(-6deg); } 51% { transform: translateX(80vw) scaleX(-1) rotate(-6deg); } 100% { transform: translateX(4vw) scaleX(-1) rotate(-6deg); } }
[data-ft="c"] .ft__word { color: var(--navy); }

/* --- D：流れる大きな文字＋8事業のロゴ一覧（DO MORE の固定文字はなし） --- */
[data-ft="d"] .ft__word { display: none; }
[data-ft="d"] .ft__map .ft__biz { display: none !important; }
[data-ft="d"] .ft__map { grid-template-columns: auto auto; }
[data-ft="d"] .ft__logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; list-style: none; margin: 48px 0 0; padding: 0; border-top: 1px solid var(--ink); }
[data-ft="d"] .ft__logos li { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
[data-ft="d"] .ft__logos li:nth-child(4n) { border-right: 0; }
[data-ft="d"] .ft__logos a { display: flex; align-items: center; gap: 14px; min-height: 104px; padding: 18px 20px; transition: background .25s; }
[data-ft="d"] .ft__logos a:hover { background: #f1f6fb; }
[data-ft="d"] .ft__ln { font-family: var(--f-en); font-size: var(--t-xs); color: var(--coral-ink); align-self: flex-start; }
[data-ft="d"] .ft__logos img { height: 36px; width: auto; max-width: 100%; }
[data-ft="d"] .ft__logos .plogo { font-size: 22px; }
[data-ft="d"] .ft__logos .blogo b { font-size: 15px; } [data-ft="d"] .ft__logos .blogo em { font-size: 16px; } [data-ft="d"] .ft__logos .blogo span { font-size: 10px; }
[data-ft="d"] .ft__mq { display: block; overflow: hidden; margin: 56px calc(50% - 50vw) 24px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
[data-ft="d"] .ft__mq-in { display: flex; align-items: center; gap: 40px; width: max-content; animation: ftMq 40s linear infinite; }
[data-ft="d"] .ft__mq span { font-family: var(--f-en); font-weight: 600; font-size: clamp(3.5rem, 10vw, 9rem); line-height: 1; color: var(--navy); white-space: nowrap; }
[data-ft="d"] .ft__mq span:nth-of-type(even) { color: transparent; -webkit-text-stroke: 1.5px var(--coral); }
[data-ft="d"] .ft__mq i { width: 18px; height: 18px; border-radius: 50%; background: var(--coral); flex: none; }
[data-ft="d"] .ft__mq:hover .ft__mq-in { animation-play-state: paused; }
@keyframes ftMq { to { transform: translateX(-50%); } }
@media (max-width: 860px) { [data-ft="d"] .ft__logos { grid-template-columns: 1fr 1fr; } [data-ft="d"] .ft__logos li:nth-child(2n) { border-right: 0; } [data-ft="d"] .ft__map { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .ft__wave svg, .ft__norio, .ft__mq-in { animation: none !important; } }
/* フッター DO MORE のジリジリ（三原色のずれ＋ときどき横に切れる） */
.ft__word { position: relative; will-change: transform, text-shadow; }
.ft__word.is-slice { clip-path: polygon(0 0, 100% 0, 100% 38%, 0 38%, 0 44%, 100% 44%, 100% 100%, 0 100%); }
.ft__word.is-slice::after { content: ""; }
@media (prefers-reduced-motion: reduce) { .ft__word { text-shadow: none !important; transform: none !important; clip-path: none !important; } }
/* DO MORE の下の日本語「もっと、やろう。」 */
.hero-a__ja { margin: clamp(10px, 1.2vw, 18px) 0 0; display: flex; align-items: center; gap: .2em; font-size: clamp(1.25rem, 2.2vw, 2rem); font-weight: 700; letter-spacing: .32em; color: var(--ink); line-height: 1; }
.hero-a__ja::before { content: ""; width: clamp(28px, 4vw, 64px); height: 2px; background: var(--coral); margin-right: .6em; }
.hero-a__ja span:last-child { color: var(--coral-ink); }
.mo .hero-a__ja span { display: inline-block; animation: jaIn .8s var(--ease) both; }
.mo .hero-a__ja span:nth-child(1) { animation-delay: .9s; } .mo .hero-a__ja span:nth-child(2) { animation-delay: 1.15s; }
.mo .hero-a__ja::before { transform-origin: left; animation: jaLine .7s var(--ease) .75s both; }
.is-intro .hero-a__ja span, .is-intro .hero-a__ja::before { animation-play-state: paused; }
@keyframes jaIn { from { opacity: 0; transform: translateY(40%); } to { opacity: 1; transform: none; } }
@keyframes jaLine { from { transform: scaleX(0); } to { transform: none; } }
/* About の補足文：右端にそろえる（本人「もうちょい右」） */
@media (min-width: 861px) { .about-x__p { width: fit-content; max-width: 36em; margin-left: auto; margin-right: 0; } }
/* FV：1画面目の下に次の背景（網点）が少しのぞくように詰める（本人「この下ちょっと下の見せたい」） */
@media (min-width: 861px) {
  .hero-a__pic, .hero-a__pic:has(img) { aspect-ratio: 16 / 3.1 !important; }
  .hero-a__catch { font-size: clamp(5rem, 15.5vw, 19rem); }
  .hero--a { padding-bottom: 20px !important; }
  .fvrow { margin-top: 14px; }
  .hero-a__ja { margin-top: 8px; }
}
@media (max-width: 860px) { .hero--a { padding-bottom: 16px !important; } }

/* ===== Pickup：目を引く形に（本人「注目されんな」「ここがらあき」） ===== */
.pick { padding-bottom: clamp(56px, 6vw, 88px) !important; }
.pick .wrap { position: relative; }
.pick .rail-nav { position: absolute; right: var(--gut); top: 0; margin: 0; }
.pick .sec-head { padding-right: 120px; }
.rail { gap: clamp(16px, 1.8vw, 28px); }
.pcard { position: relative; border: 0 !important; border-radius: 6px; overflow: hidden; color: #fff; background: var(--pc, var(--navy)); transition: transform .35s var(--ease); }
.rail > li:nth-child(1) .pcard { --pc: #0b6f8e; }
.rail > li:nth-child(2) .pcard { --pc: #111; }
.rail > li:nth-child(3) .pcard { --pc: #e2532b; }
.rail > li:nth-child(4) .pcard { --pc: var(--navy); }
.rail > li:nth-child(5) .pcard { --pc: #0a6fb0; }
.pcard:hover { transform: translateY(-6px); }
.pcard__pic { margin: 0; border-radius: 0; }
.pcard__body { position: relative; padding: 22px 24px 64px !important; gap: 10px !important; }
.pcard__cat { display: inline-flex !important; justify-self: start; padding: 4px 12px; border-radius: 99px; background: rgba(255,255,255,.18); color: #fff !important; font-size: 12px !important; letter-spacing: .08em !important; }
.pcard__h { color: #fff !important; font-size: clamp(1.25rem, 1.6vw, 1.5rem) !important; line-height: 1.45 !important; }
.pcard__body::after { content: "→"; position: absolute; right: 20px; bottom: 18px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--pc, var(--navy)); font-weight: 700; transition: transform .3s var(--ease), background .3s, color .3s; }
.pcard:hover .pcard__body::after { transform: translateX(4px); background: var(--coral); color: #fff; }
.rail > li:nth-child(3) .pcard:hover .pcard__body::after { background: #111; }
@media (max-width: 860px) { .pick .rail-nav { position: static; justify-content: flex-end; margin-top: 12px; } .pick .sec-head { padding-right: 0; } }
/* Pickup：色は紺1色に統一（本人「色多いと洗練されない」）。差し色はホバーの矢印のコーラルだけ */
.rail > li .pcard { --pc: var(--navy) !important; }
.pcard__cat { background: rgba(255,255,255,.12) !important; }
.rail > li .pcard:hover .pcard__body::after { background: var(--coral) !important; color: #fff !important; }
.pcard__pic--reels, .pcard__pic--logo { background: #0e2f66 !important; }
/* 1画面目の下にのぞく次の背景は、どの画面でも約44pxに（本人「幅半分でいい」） */
.hero--a { min-height: calc(100vh - 80px - 44px); min-height: calc(100svh - 80px - 44px); box-sizing: border-box; }
@media (max-width: 560px) { .hero--a { min-height: calc(100svh - 68px - 44px); } }
/* 「もっと、やろう。」の下に余白（本人「詰まらせすぎないで」） */
@media (min-width: 861px) { .hero-a__pic, .hero-a__pic:has(img) { aspect-ratio: 16 / 2.75 !important; } }
.hero--a { padding-bottom: 72px !important; }
@media (max-width: 860px) { .hero--a { padding-bottom: 56px !important; } }
@media (min-width: 1600px) { .hero-a__pic, .hero-a__pic:has(img) { aspect-ratio: 16 / 3.5 !important; } }
/* 「もっと、やろう。」をDO MOREから少し離して下げる */
.hero-a__ja { margin-top: clamp(20px, 2.4vw, 36px) !important; }
/* 西野さんの名前は画像（検索で読ませない）。まわりの文字と同じ高さに */
img.nm { display: inline-block; height: .92em; width: auto; vertical-align: -.08em; }
.ppl__name img.nm { height: .95em; }
.bp-proof__who img.nm { height: 1.05em; }

/* なみのりWEB：事業ページの頭から専用サイトへ（2026-10-16） */
.bp-headlink { display: inline-flex; align-items: center; gap: .7em; margin-top: 24px; min-height: 52px; padding: 0 28px; border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none; font-weight: 600; font-size: .9375rem; letter-spacing: .04em; transition: background .2s, transform .15s; }
.bp-headlink:hover { background: #0080c8; }
.bp-headlink:active { transform: translateY(1px); }
.bp-headlink svg { width: 1em; height: 1em; }

/* iPhoneのSafari）で横にスライドしないように（2026-10-16） */
.bp-grid > *, .bp-sec > * { min-width: 0; }
html,body{overflow-x:clip}
@supports not (overflow-x:clip){html,body{overflow-x:hidden}}

/* 小さいスマホ（320〜375px）で、表や並びの中身が列の幅を押し広げないように（2026-10-16） */
@media (max-width: 760px) { body *:not(svg):not(img):not(video):not(picture) { min-width: 0; } }

/* 改行させないまとまりは、入りきらないときだけ丸ごと次の行へ（スマホの横スライド防止） */
.nw { display: inline-block; white-space: normal; max-width: 100%; }

/* 2026-10-20 事業ページ：このサービスについて／よくある質問（検索で中身を読んでもらうため） */
.bp-about { border-top: 1px solid var(--ink); padding-top: 24px; font-size: var(--t-md); color: var(--ink); line-height: 1.95; text-wrap: pretty; max-width: 46em; }
.bp-about a { color: var(--accent); text-underline-offset: 4px; }
.bp-faq { border-top: 1px solid var(--ink); }
.bp-faq details { border-bottom: 1px solid var(--line); }
.bp-faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 32px 1fr 20px; align-items: baseline; gap: 4px; min-height: 64px; padding: 20px 0; font-size: var(--t-lg); font-weight: var(--ja-h-weight); color: var(--ink); line-height: 1.6; }
.bp-faq summary::-webkit-details-marker { display: none; }
.bp-faq summary::before { content: "Q"; font-family: var(--f-en); font-weight: 600; font-size: var(--t-sm); color: var(--accent); }
.bp-faq summary::after { content: "+"; font-family: var(--f-en); color: var(--accent); text-align: right; }
.bp-faq details[open] summary::after { content: "−"; }
.bp-faq details p { padding: 0 0 22px 36px; font-size: var(--t-sm); line-height: 1.9; }
.bp-faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ===== FV 案6（2026-10-23 本人決定）：DO MORE の文字の中に海＋ノリオの影＋事業の目次。オレンジは最後の着地だけ ===== */
.hero--x { min-height: 0; padding-bottom: clamp(40px, 7vh, 88px); }
.hero--x .hero-a__txt { position: relative; margin-top: clamp(8px, 2vh, 24px); display: block; }
.fvx-lab { display: flex; justify-content: space-between; align-items: center; margin: 0 0 18px; font: 500 12px/1 var(--f-en); letter-spacing: .3em; color: var(--mute); }
.fvx-lab b { font-weight: 600; color: #9aa3ae; transition: color .8s; }
.hero--x .hero-a__catch { white-space: nowrap; margin-left: -.04em; line-height: .82; letter-spacing: -.025em; font-size: clamp(4.5rem, 19vw, 22rem); }
.hero--x .rgb__fin, .hero--x .rgb__fin b { color: transparent; -webkit-text-fill-color: transparent; background-image: url(/group/img/ocean-scene.jpg); -webkit-background-clip: text; background-clip: text; background-size: auto 260%; background-position: var(--wx, 0px) var(--wy, 58%); transition: background-position .9s var(--ease); }
.hero--x .rgb__fin b { background-size: auto 340%; background-position: calc(var(--wx, 0px) * 1.6) var(--wy, 62%); filter: saturate(1.2) contrast(1.05); }
.fvx-dot { display: inline-block; width: .16em; height: .16em; border-radius: 50%; background: var(--coral); margin-left: .04em; transform: scale(0); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); -webkit-text-fill-color: initial; }
.hero--x .hero-a__ja { margin-top: clamp(20px, 3vh, 32px); font-size: clamp(18px, 2vw, 28px); letter-spacing: .12em; }
.hero--x .hero-a__ja span { color: var(--ink); }
.hero--x .hero-a__ja .w2 { transition: color .8s; }
.fvx-line { height: 1px; background: var(--line); margin-top: 22px; position: relative; overflow: hidden; }
.fvx-line i { position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 4.2s linear, background .8s; }
.hero--x.is-go .fvx-line i { transform: scaleX(1); }
.fvx-shadow { position: absolute; left: 0; top: 0; height: clamp(110px, 15vw, 240px); width: auto; pointer-events: none; z-index: 3; mix-blend-mode: multiply; opacity: .5; filter: blur(1.5px); transform: translateX(-140%); will-change: transform; }
/* 着地：ここで初めてオレンジ */
.hero--x.is-landed .fvx-lab b, .hero--x.is-landed .hero-a__ja .w2 { color: var(--coral); }
.hero--x.is-landed .fvx-line i { background: var(--coral); }
.hero--x.is-landed .fvx-dot { transform: scale(1); }
/* 事業の目次 */
.fvx { display: block; margin-top: clamp(40px, 7vh, 72px); }
.fvx-hd { display: flex; justify-content: space-between; font: 500 11px/1 var(--f-en); letter-spacing: .3em; color: var(--mute); padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.fvx .fvrow__h { font-size: clamp(15px, 1.3vw, 18px); font-weight: 600; color: var(--ink); margin: 18px 0 6px; }
.fvx-ix { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 28px; }
.fvx-ix li { position: relative; border-bottom: 1px solid var(--line); }
.fvx-ix li::after, .fvx-ix li::before { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.fvx-ix li::after { height: 1px; transition: transform .6s var(--ease); }
.fvx-ix li::before { height: 2px; z-index: 1; transition: transform .45s var(--ease), background .3s; }
.fvx-ix a { display: grid; grid-template-columns: 2.2em 1fr auto; align-items: baseline; gap: 6px; padding: 16px 0; min-height: 44px; color: var(--ink); text-decoration: none; font-size: clamp(14px, 1.1vw, 16px); font-weight: 600; letter-spacing: .02em; overflow: hidden; }
.fvx-ix b { font: 600 12px/1 var(--f-en); letter-spacing: .06em; color: #9aa3ae; transition: color .6s; }
.fvx-ix a > span { display: grid; overflow: hidden; line-height: 1.5; }
.fvx-ix a > span > * { grid-area: 1 / 1; }
.fvx-ix .nm { font-style: normal; transition: transform .45s cubic-bezier(.7, 0, .2, 1); }
.fvx-ix small { font-size: clamp(12px, .95vw, 13px); font-weight: 400; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform: translateY(110%); transition: transform .45s cubic-bezier(.7, 0, .2, 1); }
.fvx-ix i { font-style: normal; font-family: var(--f-en); font-size: 13px; color: #9aa3ae; transform: translateX(-4px); transition: transform .25s, color .25s; }
.fvx-ix a:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.hero--x .fvx-ix li a { opacity: .42; transition: opacity .5s; }
.hero--x .fvx-ix li.is-lit a, .hero--x.is-landed .fvx-ix li a, html:not(.mo) .hero--x .fvx-ix li a { opacity: 1; }
.fvx-ix li.is-lit::after, .hero--x.is-landed .fvx-ix li::after { transform: scaleX(1); }
.hero--x.is-landed .fvx-ix b { color: var(--coral); }
@media (hover: hover) {
  .fvx-ix a:hover .nm, .fvx-ix a:focus-visible .nm { transform: translateY(-110%); }
  .fvx-ix a:hover small, .fvx-ix a:focus-visible small { transform: none; }
  .fvx-ix a:hover i { transform: none; color: var(--ink); }
  .fvx-ix li:hover::before { transform: scaleX(1); }
  .hero--x.is-landed .fvx-ix li:hover::before { background: var(--coral); }
}
@media (max-width: 860px) {
  .hero--x .rgb__fin b { display: block; }
  .hero--x .hero-a__catch { line-height: .86; }
  .fvx-shadow { height: 120px; }
  .fvx-ix { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .fvx-ix a { font-size: 13px; padding: 14px 0; grid-template-columns: 2em 1fr auto; }
}
@media (max-width: 480px) { .hero--x .hero-a__ja { display: flex; flex-wrap: wrap; column-gap: .4em; } .hero--x .hero-a__ja span { white-space: nowrap; } }
@media (max-width: 360px) { .fvx-ix { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .fvx-shadow { display: none; } .hero--x .fvx-ix li a { opacity: 1; } }
/* 2026-10-23 本人「なんのサイトか分からない」→ 何の会社かの一文を DO MORE のすぐ下に大きく（案B） */
.fvx-lead { margin: clamp(20px, 3vh, 32px) 0 0; font-family: var(--f-ja); font-weight: 600; font-size: clamp(26px, 3.6vw, 56px); line-height: 1.3; letter-spacing: .02em; color: var(--ink); word-break: keep-all; }
.hero--x .hero-a__ja { margin-top: 14px; font-size: clamp(15px, 1.4vw, 20px); }
.fvx .fvx-ix { margin-top: 6px; }
/* 2026-10-23 本人「全部ランダムで流したい」→ DO MORE の中の絵を5種類、重ねて順に溶かして入れ替える（fv.js） */
.hero--x .rgb { position: relative; }
.fvx-bgl { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 1.4s ease; pointer-events: none; }
.mo .hero--x .rgb .fvx-bgl, .hero--x .rgb .fvx-bgl { animation: none !important; }
.fvx-bgl.is-on { opacity: 1; }
.fvx-bgl .fvx-dot { visibility: hidden; }
.hero--x .fvx-bgl.bg-deep, .hero--x .fvx-bgl.bg-deep b { background-image: url(/group/img/fv-bg-deep.webp); background-size: auto 160%; }
.hero--x .fvx-bgl.bg-curl, .hero--x .fvx-bgl.bg-curl b { background-image: url(/group/img/fv-bg-curl.webp); background-size: auto 160%; }
.hero--x .fvx-bgl.bg-dusk, .hero--x .fvx-bgl.bg-dusk b { background-image: url(/group/img/fv-bg-dusk.webp); background-size: auto 160%; }
.hero--x .fvx-bgl.bg-dark, .hero--x .fvx-bgl.bg-dark b { background-size: auto 420%; background-position: var(--wx, 0px) 88%; }
.hero--x .fvx-bgl.bg-dark b { background-size: auto 520%; }
/* 2026-10-24 本人「目次と About の接続が弱い・下に見に行こうってならない」→ 案A：SCROLL の線が下へ流れ続け、About の上端までつながる */
.hero--x { position: relative; }
.fvx-scroll { position: relative; width: max-content; margin: clamp(48px, 7vh, 80px) auto calc(-1 * clamp(40px, 7vh, 88px)); display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 44px; padding-top: 8px; text-decoration: none; z-index: 3; }
.fvx-scroll > span:first-child { font: 500 11px/1 var(--f-en); letter-spacing: .32em; margin-right: -.32em; color: var(--ink); }
.fvx-scroll i { display: block; width: 1px; height: 110px; background: var(--line); position: relative; overflow: hidden; }
.fvx-scroll i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 45%; background: var(--ink); animation: fvxScroll 1.9s cubic-bezier(.6, 0, .2, 1) infinite; }
.hero--x.is-landed .fvx-scroll i::after { background: var(--coral); }
.fvx-scroll:hover > span:first-child, .fvx-scroll:focus-visible > span:first-child { color: var(--coral); }
.fvx-scroll:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; }
@keyframes fvxScroll { from { transform: translateY(-100%); } to { transform: translateY(240%); } }
@media (max-width: 860px) { .fvx-scroll i { height: 84px; } }
@media (prefers-reduced-motion: reduce) { .fvx-scroll i::after { animation: none; transform: translateY(60%); } }

/* ===== 事業ページの仕上げ（2026-10-24 本人「各事業のサイトをまじで仕上げる」） ===== */
/* 何の事業かを冒頭で大きく */
.bp-head .bp-lead { font-size: clamp(22px, 2.4vw, 34px); font-weight: 600; line-height: 1.45; letter-spacing: .02em; }
/* 大きな番号：グループのFVと同じ「文字の中に海」 */
.bp-bignum { color: transparent; -webkit-text-stroke: 0; -webkit-text-fill-color: transparent; background: url(/group/img/fv-bg-deep.webp) 50% 50% / auto 180%; -webkit-background-clip: text; background-clip: text; opacity: .28; }
.bp-bignum.v-curl { background-image: url(/group/img/fv-bg-curl.webp); }
.bp-bignum.v-dusk { background-image: url(/group/img/fv-bg-dusk.webp); }
/* 料金の下：この事業について相談する */
.bp-ask { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "en t i" "en s i"; align-items: center; column-gap: clamp(16px, 3vw, 40px); row-gap: 6px; margin: clamp(8px, 2vw, 24px) 0 clamp(64px, 8vw, 112px); padding: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 44px); border-radius: var(--r); background: var(--ink); color: #fff; text-decoration: none; transition: background .25s var(--ease); }
.bp-ask__en { grid-area: en; font: 600 clamp(32px, 4vw, 56px)/1 var(--f-en); letter-spacing: -.01em; color: transparent; -webkit-text-fill-color: transparent; background: url(/group/img/fv-bg-deep.webp) 50% 50% / auto 260%; -webkit-background-clip: text; background-clip: text; filter: saturate(1.3) brightness(1.6); }
.bp-ask__t { grid-area: t; font-size: clamp(18px, 1.8vw, 24px); font-weight: 600; letter-spacing: .02em; }
.bp-ask__s { grid-area: s; font-size: 14px; color: #ffffffb0; }
.bp-ask i { grid-area: i; font-style: normal; width: 56px; height: 56px; border-radius: 50%; border: 1px solid #ffffff60; display: grid; place-items: center; font-family: var(--f-en); font-size: 20px; transition: background .25s, color .25s, transform .25s var(--ease); }
.bp-ask:hover { background: #0b2a50; }
.bp-ask:hover i { background: var(--coral); border-color: var(--coral); transform: translateX(4px); }
.bp-ask:active { transform: translateY(1px); }
.bp-ask:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
@media (max-width: 600px) { .bp-ask { grid-template-columns: 1fr auto; grid-template-areas: "en i" "t t" "s s"; row-gap: 10px; } }
/* 大きな番号は文字の後ろなので薄く（出てくる動きも薄いまま） */
.bp-bignum, .mo .bp-bignum { animation-name: bignumSoft; }
@keyframes bignumSoft { from { opacity: 0; transform: translateY(12%); } to { opacity: .28; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bp-bignum { animation: none; opacity: .28; } }

/* メンバーのプロフィール（2026-11-02 本人の名前で検索に出すためのページ） */
.mb-top { display: grid; grid-template-columns: minmax(0, 320px) 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: 32px; }
.mb-pic { margin: 0; }
.mb-pic img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); }
.mb-name { margin: 8px 0 0; font-size: clamp(2.25rem, 5vw, 4rem); font-weight: var(--ja-h-weight); letter-spacing: var(--ja-h-track); line-height: 1.25; color: var(--ink); }
.mb-kana { display: block; margin-top: 8px; font-size: var(--t-sm); font-weight: 500; letter-spacing: .2em; color: var(--mute); }
.mb-q { margin: 20px 0 12px; font-size: var(--t-lg); color: var(--coral-ink); font-weight: 600; }
.mb-car { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.mb-car li { display: grid; grid-template-columns: 8em 1fr; gap: 24px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--line); }
.mb-car__k { font-size: var(--t-sm); font-weight: 700; letter-spacing: .1em; color: var(--navy); }
.mb-car p { margin: 0; font-size: var(--t-md); color: var(--ink); line-height: 1.8; text-wrap: pretty; }
.mb-links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.mb-links li { border-bottom: 1px solid var(--line); }
.mb-links a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; padding: 22px 0; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 600; }
.mb-links a span { font-weight: 400; font-size: var(--t-sm); color: var(--mute); word-break: break-all; }
.mb-links a:hover span, .mb-links a:focus-visible span { color: var(--accent); }
.ppl__more { display: inline-block; margin-top: 12px; padding: 10px 0; font-size: var(--t-sm); font-weight: 600; color: var(--accent); text-underline-offset: 4px; }
@media (max-width: 760px) {
  .mb-top { grid-template-columns: 1fr; }
  .mb-pic { max-width: 220px; }
  .mb-car li { grid-template-columns: 1fr; gap: 4px; }
}