/* デザインA の KV / About(旧 Red-orange-2 の KV・About を差し替え)。
   元の style.css と衝突しないよう、クラスはすべて da- 接頭辞。 */
:root {
  --da-bg: #f7f7f7;
  --da-ink: #1a1a1a;
  --da-ink-2: #3a3a3a;
  --da-font-en: "Jost", "Noto Sans JP", sans-serif;
  --da-font-ja: "Noto Sans JP", sans-serif;
}
:where(.da-top, .da-header) :where(*) { margin: 0; padding: 0; box-sizing: border-box; }
.da-top, .da-header {
  font-family: var(--da-font-ja);
  line-height: normal;
  font-feature-settings: normal;
  color: var(--da-ink);
  -webkit-font-smoothing: antialiased;
}
.da-header a { color: inherit; text-decoration: none; }
/* KV + About を一つの地(#f7f7f7)にまとめる。KV の図形が About へはみ出して続くため、
   セクションごとに背景を持たせると図形が隠れる */
.da-top { position: relative; background: none; }
/* 地は body に持たせる。.da-top 自身に背景色を置くと、Service の暗転(body の下地色を
   --svc-dark で沈める)に追従せず、About の下端に境界線が出る。
   Red-orange と同じく、下地そのものを連続的に沈めてシームレスに切り替える */
body { background-color: var(--da-bg); }
/* 暗転は body の背景色を毎回塗り替えず、固定の暗幕の不透明度だけで表す
   (不透明度はコンポジタだけで処理でき、再描画が走らないのでスクロールが滑らか) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #171717;
  opacity: calc(var(--svc-dark, 0) * .88);
  will-change: opacity;
  pointer-events: none;
}

/* ---------- Header (pill) ---------- */
  .da-header {
    position: fixed;
    top: 45px;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 10;
    width: min(1200px, calc(100% - 48px));
    height: 69px;
    padding: 0 59px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, .42);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-radius: 999px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .04);
    /* Red-orange-2 と同じ: 下スクロールで消え、上スクロールで現れる。
       移動はごく小さく、主に不透明度で「ふわっと」出入りさせる */
    transition:
      opacity    .3s cubic-bezier(.22, 1, .36, 1),
      transform  .3s cubic-bezier(.22, 1, .36, 1),
      visibility 0s linear 0s;
  }
  .da-header.is-hidden {
    opacity: 0;
    transform: translateY(-6px);
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity    .3s cubic-bezier(.22, 1, .36, 1),
      transform  .3s cubic-bezier(.22, 1, .36, 1),
      visibility 0s linear .3s;
  }
  @media (prefers-reduced-motion: reduce) {
    .da-header, .da-header.is-hidden { transition: none; }
  }
  .da-header__logo img { display: block; height: 32px; width: auto; }
  .da-nav { display: flex; gap: 48px; }
  .da-nav__link {
    font-family: var(--da-font-en);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--da-ink);
    line-height: 1;
    padding: 4px 0;
  }
  /* Red-orange-2 と同じ: マスクの中で前面が上へ抜け、同じ文字が下から入る */
  .da-nav__link-flip { display: inline-block; position: relative; overflow: hidden; vertical-align: middle; }
  .da-nav__link-face { display: block; will-change: transform; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
  .da-nav__link-face--front { transform: translateY(0); }
  .da-nav__link-face--back { position: absolute; top: 0; left: 0; transform: translateY(105%); }
  .da-nav__link:hover .da-nav__link-face--front { transform: translateY(-105%); }
  .da-nav__link:hover .da-nav__link-face--back { transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    .da-nav__link-face, .da-nav__link:hover .da-nav__link-face { transition: none; }
  }
  /* 821〜1040px: ロゴとメニューがくっつかないよう、余白とメニュー間隔を詰める */
  @media (max-width: 1040px) {
    .da-header { padding: 0 36px; }
    .da-nav { gap: 28px; }
  }

  /* ---------- KV ---------- */
  .da-hero {
    position: relative;
    /* 最初の画面にキャッチコピーまで収める。高さは画面に合わせ、広すぎる画面では 940px で止める */
    height: clamp(620px, 100vh, 940px);
    height: clamp(620px, 100svh, 940px);
    /* 図形は次のセクションへはみ出して続く。横方向だけ body 側で切る */
    overflow: visible;
  }
  /* 図形は画面に固定。スクロールしてもその場に留まり、キャッチコピーだけが上へ流れる */
  .da-hero__shapes {
    z-index: 0;
    pointer-events: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  /* About が来たら、流動的な図形(pink / red)だけふわっと消す。薄い glow は残す */
  .da-hero__shapes [data-blob="pink"],
  .da-hero__shapes [data-blob="spl"],
  .da-hero__shapes [data-blob="red"] { transition: opacity 1.4s cubic-bezier(.22, 1, .36, 1); }
  .da-hero__shapes.is-about [data-blob="pink"],
  .da-hero__shapes.is-about [data-blob="spl"],
  .da-hero__shapes.is-about [data-blob="red"] { opacity: 0; }
  .da-hero__defs { position: absolute; width: 0; height: 0; }
  /* 図形は左右の端に固定し、画面幅に合わせて拡大縮小する(両端が切れない) */
  .da-hero__half { position: absolute; top: 0; width: min(50vw, 760px); height: auto; max-width: none; }
  /* SP だけの左下の図形 */
  .da-hero__bl { display: none; }
  .da-hero__half--l { left: 0; }
  .da-hero__half--r { right: 0; }
  .da-hero__copy {
    position: absolute;
    left: 50%;
    top: calc(50% + 40px);
    transform: translate(-50%, -50%);
    width: min(1200px, calc(100% - 48px));
  }
  /* 日本語を大きく(見出し)、英語を小さく下に置く */
  .da-hero__ja {
    font-family: "LINE Seed JP", var(--da-font-ja);
    font-weight: 700;
    color: #303030;
    font-size: clamp(30px, 4.4vw, 63px);
    letter-spacing: .06em;
    line-height: 1.25;
    white-space: nowrap;
  }
  .da-hero__en {
    margin-top: 14px;
    font-family: "Oxygen", var(--da-font-en);
    font-weight: 400;
    font-size: clamp(15px, 1.55vw, 22px);
    letter-spacing: .18em;
    line-height: 1.6;
  }
  .da-hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 36px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-family: var(--da-font-en);
    font-size: 9px;
    letter-spacing: .12em;
  }
  /* 細いラインの上を小さな円が上下に往復する */
  .da-hero__scroll i { position: relative; display: block; width: 1px; height: 56px; background: rgba(26, 26, 26, .25); }
  .da-hero__scroll i::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    border-radius: 50%;
    background: var(--da-ink);
    animation: da-scroll-dot 2s cubic-bezier(.65, 0, .35, 1) infinite alternate;
  }
  @keyframes da-scroll-dot {
    from { top: 0; }
    to   { top: calc(100% - 7px); }
  }
  @media (prefers-reduced-motion: reduce) { .da-hero__scroll i::after { animation: none; } }

  /* ---------- About ---------- */
  /* 大きな円の中に文字を置く。上の余白は KV のキャッチコピーが画面上部へ流れ切るのを待つ分 */
  .da-about {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    padding: 60vh 0 18vh;
    overflow-x: clip;
    color: #fff;
    text-align: center;
  }
  .da-about__circle {
    --d: min(max(52vw, 720px), 96vw);
    width: var(--d);
    aspect-ratio: 1;
    /* 正円ではなく、KV の流動的な図形に合わせたわずかに歪な円。ゆっくり形が変わる */
    border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%;
    animation: da-about-morph 14s ease-in-out infinite alternate;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 8px 60px;
    background: linear-gradient(135deg, #f2a898 0%, #ee7a64 22%, #e8604a 45%, #dc5e46 68%, #b5503d 100%);
  }
  @keyframes da-about-morph {
    0%   { border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%; }
    25%  { border-radius: 46% 54% 44% 56% / 55% 45% 57% 43%; }
    50%  { border-radius: 52% 48% 58% 42% / 44% 54% 46% 56%; }
    75%  { border-radius: 43% 57% 49% 51% / 57% 43% 53% 47%; }
    100% { border-radius: 56% 44% 45% 55% / 49% 57% 43% 51%; }
  }
  @media (prefers-reduced-motion: reduce) { .da-about__circle { animation: none; } }
  .da-eyebrow {
    font-family: var(--da-font-en);
    font-weight: 500;
    font-size: 18px;
    letter-spacing: .28em;
    padding-left: .28em;
  }
  .da-about__title {
    margin-top: 56px;
    font-weight: 700;
    font-size: 23px;
    letter-spacing: .15em;
  }
  .da-about__body {
    margin-top: 36px;
    font-size: 14px;
    letter-spacing: .06em;
    line-height: 2;
    color: rgba(255, 255, 255, .95);
  }
  .da-about__body p + p { margin-top: 13px; }

  /* ---------- SP ---------- */
  @media (max-width: 820px) {
    .da-header { top: 16px; height: 56px; padding: 0 24px; }
    .da-hero { height: clamp(560px, 100svh, 900px); }
    .da-hero__half { width: 90vw; }
    .da-hero__half--l { left: -30vw; }
    .da-hero__half--r { right: -30vw; }
    /* キャッチコピーはファーストビューの中央あたりへ(SCROLL の位置は据え置き) */
    .da-hero__scroll { bottom: auto; top: calc(clamp(560px, 100svh, 720px) - 36px); transform: translate(-50%, -100%); }
    .da-hero__copy { bottom: auto; top: 50%; transform: translate(-50%, -50%); }
    .da-hero__ja { font-size: min(28px, 7.4vw); white-space: nowrap; letter-spacing: .04em; }
    .da-hero__en { font-size: 14px; }
    .da-about { padding: 50vh 0 12vh; }
    .da-about__circle { --d: 168vw; flex-shrink: 0; padding: 0 34px 36px; }
    .da-about__title { margin-top: 32px; font-size: min(18px, 4.8vw); letter-spacing: .1em; white-space: nowrap; }
    .da-about__body { margin-top: 28px; font-size: 12.5px; letter-spacing: .04em; }
    .da-about__body p { text-wrap: balance; }
    /* 円は画面より広いので、文字の幅は画面基準で抑える */
    .da-about__circle > * { max-width: calc(100vw - 56px); }
  }

/* SP: ハンバーガー(開くとピルの下にメニューが出る) */
.da-burger { display: none; }
@media (max-width: 820px) {
  .da-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 40px; height: 40px; padding: 0 8px; margin-right: -8px;
    background: none; border: 0; cursor: pointer;
  }
  .da-burger span { display: block; height: 1.5px; background: var(--da-ink); transition: transform .3s, opacity .3s; }
  .da-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
  .da-burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.75px) rotate(0deg); }
  .da-nav {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    padding: 8px 24px; background: rgba(255,255,255,.92);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-radius: 24px; box-shadow: 0 6px 24px rgba(0,0,0,.06);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .25s, transform .25s, visibility 0s linear .25s;
  }
  .da-nav.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .da-nav__link { padding: 16px 0; border-bottom: 1px solid #f1f1f1; font-size: 14px; }
  .da-nav__link:last-child { border-bottom: 0; }
}

/* ---------- ページを開いたときの「ふわっ」とした登場 ----------
   図形 → ヘッダー → キャッチコピー(日本語 → 英語) → SCROLL の順に、
   透明度と、ごく小さな移動・ぼかしの解消で現れる。
   fill-mode は backwards: 終わったあとは通常のスタイルに戻るので、
   ヘッダーの出没(transform)や図形の動きと干渉しない */
@keyframes da-fade-up {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to   { opacity: 1; transform: none;             filter: blur(0); }
}
@keyframes da-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes da-shape-in {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: none; }
}
.da-hero__half {
  animation: da-shape-in 1.9s cubic-bezier(.22, 1, .36, 1) backwards;
}
.da-hero__half--l { transform-origin: 0 0; }
.da-hero__half--r { transform-origin: 100% 0; animation-delay: .12s; }
.da-header      { animation: da-fade 1.2s cubic-bezier(.22, 1, .36, 1) .35s backwards; }
.da-hero__ja    { animation: da-fade-up 1.3s cubic-bezier(.22, 1, .36, 1) .55s backwards; }
.da-hero__en    { animation: da-fade-up 1.5s cubic-bezier(.22, 1, .36, 1) .75s backwards; }
.da-hero__scroll { animation: da-fade 1.2s ease 1.5s backwards; }
@media (prefers-reduced-motion: reduce) {
  .da-hero__half, .da-header, .da-hero__ja, .da-hero__en, .da-hero__scroll { animation: none; }
}

/* お知らせ: 記事カード全体をクリック可能にする(タイトルのリンクを全面に広げる) */
.news__link { color: inherit; text-decoration: none; }
.news__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* 代表写真: 人物が右寄りなので、右側を中心にトリミングする */
.team__photo img { object-position: 72% 20%; }

/* お知らせのサムネイル: 横長のロゴは切らずに全体を収める */
.news__thumb img[src$="news-logotype-a.svg"] { object-fit: contain; background: #fff; }

/* KV 日本語キャッチコピーの「AI」だけ少し大きく */
.da-hero__ai { font-size: 1.14em; position: relative; top: .025em; letter-spacing: .1em; }

/* お知らせのサムネイルは切らずに、枠の中へ全体を収める(余白は枠の地色) */
.news__list--rows .news__thumb { background: #fff; padding: 14px; box-sizing: border-box; }
.news__list--rows .news__thumb img { object-fit: contain; }

/* 句読点での改行は SP だけ */
.da-sp-br { display: none; }
@media (max-width: 820px) { .da-sp-br { display: inline; } }

/* SP: 事業内容の動画を、各タイトルの下・本文の上へ(順序だけ入れ替える) */
@media (max-width: 767px) {
  .service--brushup .service__text { display: contents; }
  .service--brushup .service__title { order: 1; margin-bottom: 0; }
  .service--brushup .service__image { order: 2; }
  .service--brushup .service__desc { order: 3; margin-bottom: 0; }
  .service--brushup .service__link { order: 4; align-self: flex-start; }
  /* 会社概要の背景写真は、スクロールやポインタで動かさず固定する */
  /* position: relative が要点。スライドは absolute なので、transform を外すと
     基準が会社概要全体に移って写真が縦に伸びる。写真の枠を基準に戻す */
  .company--figma .cmp__slides { position: relative; transform: none; transition: none; }
}

@media (max-width: 820px) {
  .da-hero__bl {
    display: block;
    position: absolute;
    left: 0;
    bottom: -3vh;
    width: 100vw;
    height: auto;
    /* 図形が枠(viewBox)の端で四角く切れないように */
    overflow: visible;
    animation: da-shape-in 1.9s cubic-bezier(.22, 1, .36, 1) .25s backwards;
  }
}

/* 「、」の後ろの空きを詰める(全角の右半分の余白 + 字間のうち半分ほど) */
.da-comma { margin-right: -.3em; }
/* About までは戻るボタンを #E15F48 に */
.to-top.is-on-about { background: #FF2400; }
/* 代表写真はモノクロ */
.team__photo img { filter: grayscale(1); }

/* お知らせの上余白 */
.news--brushup { padding-top: 100px; }

/* お知らせの矢印: More と同じく、矢印が回転しながら抜け、もう1本が回転しながら入る */
.news__arrow { width: 18px; height: 18px; overflow: hidden; }
.news__arrow-a { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.news__arrow-a svg {
  display: block;
  transform: rotate(0deg);
  transition: transform .4s cubic-bezier(.16, .5, .25, 1);
}
.news__arrow-a--hover svg { transform: rotate(0deg) translate(-140%); }
@media (hover: hover) and (pointer: fine) {
  .news__item:hover .news__arrow { transform: translateY(-50%); }
  .news__item:hover .news__arrow-a--default svg { transform: rotate(0deg) translate(140%); }
  .news__item:hover .news__arrow-a--hover svg { transform: rotate(0deg) translate(0); }
}
@media (prefers-reduced-motion: reduce) { .news__arrow-a svg { transition: none; } }

/* 会社概要の見出し(Company / 会社概要)の裏だけ、写真を白っぽくぼかして読みやすくする。
   見出しの背後に、縁がなだらかに消えるマスク付きのすりガラスを敷く(輪郭は出ない) */
@media (min-width: 768px) {
  .company--figma .cmp__label::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -140px;
    top: -110px;
    right: -240px;
    bottom: -100px;
    background: rgba(255, 255, 255, .42);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0,0,0,.75) 30%, rgba(0,0,0,.35) 60%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 0%, rgba(0,0,0,.75) 30%, rgba(0,0,0,.35) 60%, transparent 100%);
    pointer-events: none;
  }
}
@media (min-width: 768px) { .company--figma .cmp__en { color: #2e2e2e; } }

/* 見出しの白ぼかしは、見出しの箱(clip-path)で切られると縁が四角く見える。
   登場後は切り抜きの範囲を十分に広げ、ぼかしがなだらかに消えるところまで見せる */
@media (min-width: 768px) {
  .company--figma.is-in .cmp__label { clip-path: inset(-300px -400px -300px -400px); }
}

/* ヘッダーのアンカーリンクの着地位置。About は円が画面の上寄りに見える位置へ
   (セクション上部の余白が長いので、そのまま先頭に合わせると空白が目立つ) */
#about { scroll-margin-top: -35vh; }