/* /about/ リニューアル版（2026-10-31 移植）
   元：~/Desktop/AI/kaihatsu/waltsu-about/css/renewal.css を .abr の中だけに効くよう閉じ込めたもの
   （:root と body の指定は .abr へ、html と body.drawer-open は削除）。ヘッダー・フッターは既存の common.css。
   後半はローディング（loading/loading.css をそのまま。wl-* だけに効く）。直すときは元ファイル側を直して再移植する */
/* ============================================================
   waltsu について — リニューアル版
   参考：kamikumashinrin.com（角丸の白カード・ピル型ボタン・ドット地・斜めの帯文字・キャラの散らし）
   配色：ワルツの青 #036eb8 ／ 空色 #2ea7e0 ／ 淡い青 #e8f1f9 ／ 差し色 #f29d00 ／ CTA #c23219
   ============================================================ */
.abr {
  --blue: #036eb8;
  --blue-dark: #085898;
  --sky: #2ea7e0;
  --sky-soft: #a9dcf3;
  --soft: #e8f1f9;
  --orange: #f29d00;
  --orange-soft: #fdebcc;
  --red: #c23219;
  --ink: #0a2540;
  --text: #1c2a3a;
  --mute: #5b6b7f;
  --white: #fff;

  --font-jp: "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "Yu Gothic Medium", "Yu Gothic", "Helvetica Neue", Arial, sans-serif;
  --font-head: "Zen Maru Gothic", "Zen Kaku Gothic New", "Hiragino Maru Gothic ProN", sans-serif;
  --font-en: "Lato", "Zen Kaku Gothic New", "Helvetica Neue", Arial, sans-serif;
  --font-lato: "Lato", "Helvetica Neue", Arial, sans-serif;

  --container: 1240px;
  --pad: clamp(18px, 4vw, 48px);
  --r-xl: 44px;
  --r-lg: 28px;
  --r-md: 18px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  --dots-white: radial-gradient(circle, #fff 1.1px, transparent 1.4px);
  --dots-blue: radial-gradient(circle, rgba(3, 110, 184, .13) .9px, transparent 1.2px);
}

.abr, .abr * { box-sizing: border-box; }

.abr {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.9;
  color: var(--text);
  background: var(--soft) var(--dots-white) 0 0 / 8px 8px;
  overflow-x: clip;
}
.abr img, .abr video, .abr svg { display: block; max-width: 100%; }
.abr img { height: auto; }
.abr a { color: inherit; text-decoration: none; }
.abr ul, .abr ol { margin: 0; padding: 0; list-style: none; }
.abr h1, .abr h2, .abr h3, .abr p, .abr figure { margin: 0; }
.abr button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
.abr strong { font-weight: 700; color: var(--ink); }
.abr .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); }

.abr .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.abr .br-sp { display: none; }


/* ---- 共通部品 ---- */
.abr .pill {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 22px 12px 28px;
  border: 2px solid var(--blue); border-radius: 999px;
  background: #fff; color: var(--ink);
  font-family: var(--font-head); font-weight: 700; font-size: 16px; line-height: 1.4;
  transition: transform .25s var(--ease), background .25s;
}
.abr .pill__arrow {
  width: 18px; height: 18px; flex: none;
  display: grid; place-items: center; color: inherit;
  transition: transform .2s var(--ease);
} /* 本番のボタンと同じく、丸なしの「>」だけ */
.abr .pill__arrow svg { width: 16px; height: 16px; }
.abr .pill:hover { transform: translateY(-2px); }
.abr .pill:hover .pill__arrow { transform: translateX(3px); }
.abr .pill--blue { background: var(--blue); color: #fff; }
.abr .pill--red { background: var(--red); border-color: var(--red); color: #fff; }

.abr .sec-head { text-align: center; margin-bottom: 40px; }
.abr .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-en); font-weight: 700; font-size: 15px; letter-spacing: .14em;
  color: var(--blue); background: #fff; border: 1.5px solid var(--blue); border-radius: 999px;
  padding: 2px 16px; line-height: 1.7; margin-bottom: 16px;
}
.abr .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.abr .title {
  font-family: var(--font-head); font-weight: 900; color: var(--ink);
  font-size: clamp(26px, 3.6vw, 44px); line-height: 1.4; letter-spacing: .02em;
}
.abr .lead { max-width: 760px; margin: 18px auto 0; font-size: 17px; line-height: 2; }
.abr .on-blue .eyebrow { color: var(--blue); border-color: #fff; }
.abr .on-blue .title, .abr .on-blue .lead, .abr .on-blue strong { color: #fff; }

/* 出現アニメ（ローディングが消えてから始める） */
.abr .rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.abr .rv.is-in { opacity: 1; transform: none; }
.abr .rv[data-delay="1"] { transition-delay: .12s; }
.abr .rv[data-delay="2"] { transition-delay: .24s; }
.abr .rv[data-delay="3"] { transition-delay: .36s; }

/* キャラのゆれ */
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }


/* ============================================================
   ヘッダー
   ============================================================ */












.abr .hd__burger {
  position: absolute; right: 20px; top: 22px; width: 56px; height: 56px; border-radius: 50%;
  background: #fff; border: 2px solid var(--blue); display: none; place-items: center; z-index: 60;
}
.abr .hd__burger span { display: block; width: 24px; height: 3px; border-radius: 3px; background: var(--blue); margin: 4px 0; transition: transform .3s var(--ease), opacity .3s; }
.abr .hd__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.abr .hd__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.abr .hd__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ドロワー（SP） */
.abr .drawer {
  position: fixed; inset: 0; z-index: 50;
  background: var(--soft) var(--dots-white) 0 0 / 8px 8px;
  padding: 100px var(--pad) 120px; overflow: auto;
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s;
}
.abr .drawer.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }










/* ============================================================
   ファーストビュー（横にのぞくスライダー）
   ============================================================ */
.abr .fv { position: relative; padding: 14px 0 0; }
.abr .fv__slider { position: relative; height: clamp(400px, 46vw, 640px); overflow: clip; overflow-clip-margin: 0; }
.abr .fv__slide {
  position: absolute; top: 0; left: 50%; height: 100%;
  width: var(--slide-w); transform: translateX(-50%);
  border-radius: 26px; overflow: hidden; background: var(--sky-soft);
  opacity: 0; pointer-events: none;
  transition: transform .95s var(--ease), opacity .6s var(--ease);
}
.abr .fv { --slide-w: min(78vw, 1180px); --slide-gap: 22px; }
.abr .fv__slide video, .abr .fv__slide img { width: 100%; height: 100%; object-fit: cover; }
.abr .fv__slide video { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; }
.abr .fv__slide video.is-playing { opacity: 1; }
.abr .fv__slide.is-active { opacity: 1; pointer-events: auto; z-index: 2; }
.abr .fv__slide.is-prev { opacity: 1; transform: translateX(calc(-50% - var(--slide-w) - var(--slide-gap))); }
.abr .fv__slide.is-next { opacity: 1; transform: translateX(calc(-50% + var(--slide-w) + var(--slide-gap))); }
.abr .fv__slide.is-prev, .abr .fv__slide.is-next { filter: saturate(.85); }
.abr .fv__slide.is-prev::after, .abr .fv__slide.is-next::after { content: ""; position: absolute; inset: 0; background: rgba(232, 241, 249, .25); }

.abr .fv__copy { position: absolute; z-index: 5; left: calc(50% - var(--slide-w) / 2 + 30px); bottom: 36px; }
.abr .fv__tag {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 999px; padding: 6px 18px 6px 8px;
  font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 14px;
}
.abr .fv__tag span { font-family: var(--font-en); font-size: 12px; letter-spacing: .14em; background: var(--ink); color: #fff; border-radius: 999px; padding: 3px 12px; line-height: 1.4; }
.abr .fv__title { line-height: 1; }
.abr .fv__title span {
  display: inline-block; background: var(--blue); color: #fff;
  font-family: var(--font-head); font-weight: 900; font-size: clamp(26px, 3.4vw, 48px); line-height: 1.2;
  padding: .12em .45em .14em; border-radius: 12px; margin-top: 8px;
  box-shadow: 0 0 0 4px rgba(232, 241, 249, .9);
}
/* 写真の枚数（スライドの位置）：中央写真の下に、横長のバーで並べる */
.abr .fv__dots {
  position: absolute; z-index: 5; left: 50%; transform: translateX(-50%);
  top: calc(14px + clamp(400px, 46vw, 640px) + 18px);
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none;
}
.abr .fv__dots li { display: flex; }
.abr .fv__dots button { width: 28px; height: 6px; border-radius: 999px; background: rgba(3, 110, 184, .22); transition: width .3s, background-color .3s; }
.abr .fv__dots button[aria-current] { width: 48px; background: var(--orange); }

/* 右下：実績の丸（顧客満足度・年間継続率） */
.abr .fv__awards { position: absolute; z-index: 6; margin: 0; gap: 16px; right: calc(50% - var(--slide-w) / 2 + 36px); bottom: 70px; }
.abr .fv__awards .award { width: 156px; height: 156px; box-shadow: 0 0 0 5px rgba(255, 255, 255, .9); }
.abr .fv__awards .award__value { font-size: 46px; }
.abr .fv__awards .award__note { color: var(--ink); background: rgba(255, 255, 255, .92); border-radius: 999px; padding: 1px 10px; margin-top: 10px; font-size: 10px; width: max-content; }
/* 左下：写真の切れ目に立つ執事（mawaru-right-2） */
.abr .fv__butler { position: absolute; z-index: 6; height: 240px; left: calc(50% - var(--slide-w) / 2 - 92px); bottom: -34px; pointer-events: none; }
/* 右上：執事＋まわる文字、お知らせカード */










/* ============================================================
   大切にしていること（FV 直下）
   ============================================================ */
.abr .philo { padding: 96px 0 72px; position: relative; z-index: 3; }
.abr .philo .sec-head { margin-bottom: 0; }
.abr .philo__kicker { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--blue); letter-spacing: .08em; margin: -4px 0 8px; }
/* 文節（<wbr>）でだけ折り返す。語の途中で切れないように。はみ出すときだけ任意の位置で折る */
.abr .philo__lead p { word-break: keep-all; overflow-wrap: anywhere; }
.abr .philo__lead p + p { margin-top: 1em; }
.abr .philo__lead strong { color: var(--blue); }
.abr .philo__lead b { font-weight: 700; color: var(--ink); }   /* 太字だけ（青の強調とは別） */
/* 重要箇所：太字＋淡いマーカー（選ばれてきた理由・小さな会社に頼むメリット。2026-10-31） */
.abr .hl { font-weight: 700; color: var(--ink); background: linear-gradient(transparent 58%, rgba(242, 157, 0, .24) 58%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .1em; }

/* ============================================================
   イントロ（弧の文字・太陽・本文・執事・写真）
   ============================================================ */









.abr .awards { display: flex; gap: 20px; margin-top: 34px; flex-wrap: wrap; }
.abr .award {
  width: 180px; height: 180px; border-radius: 50%; position: relative;
  display: grid; place-content: center; text-align: center; color: #fff; background: var(--blue);
}
.abr .award--orange { background: var(--orange); }
.abr .award::before { content: ""; position: absolute; inset: 8px; border: 2px dashed rgba(255, 255, 255, .8); border-radius: 50%; }
.abr .award__label { font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.abr .award__value { font-family: var(--font-en); font-size: 54px; line-height: 1; margin-top: 2px; }
.abr .award__value small { font-size: 18px; font-family: var(--font-jp); font-weight: 700; margin-left: 2px; }
.abr .award__sub { font-size: 12px; opacity: .9; }
.abr .award__note { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; color: var(--mute); margin-top: 8px; }















/* WHAT */

 /* 見出しを外したので本文1列 */













/* 丘と雲（青いブロックへの橋渡し） */
.abr .hills { position: relative; z-index: 2; margin-top: calc(40px - 5.5vw); } /* SVG 上部の空き（高さの約3割）を相殺して、注記→波の頂上を約40pxに */
.abr .hills svg { width: 100%; height: auto; }


/* ============================================================
   対応領域（青いブロック）
   ============================================================ */
.abr .range { background: var(--blue); color: #fff; padding: 10px 0 110px; position: relative; }
/* 2つの事業ブロック（共通部品 .biz／common.css）を about の見た目に合わせる：面は透明・丸ゴシック・角丸 28px（2026-11-01 深夜に TOP 流の形へ組み直し） */
.abr .biz { --biz-panel: transparent; --biz-font-head: var(--font-head); padding: 0; margin-top: 54px; }
.abr .biz__card { border-color: transparent; border-radius: var(--r-lg); } /* 青地の上なので罫線は消し、角丸は about の大きさに */




















/* ============================================================
   3つの理由（空色の外枠に白いカード）
   ============================================================ */
.abr .why { background: linear-gradient(to bottom, rgba(46, 167, 224, 0) 0, var(--sky) var(--why-fade, 220px)); padding: 36px 18px 60px; position: relative; } /* 上の「大切にしていること」から水色へグラデーションでつなぐ */
/* ---- 3つの理由のカルーセル（中央のカードを大きく、左右はぼかして重ねる） ---- */




.abr .cycle__card { position: absolute; top: 0; left: 50%; width: var(--cw); aspect-ratio: 1 / .6; margin-left: calc(var(--cw) / -2); background: #fff; border-radius: 22%; transition: transform .6s var(--ease), filter .6s, opacity .6s; z-index: 1; opacity: 0; pointer-events: none; }
.abr .cycle__card.is-current { z-index: 5; opacity: 1; pointer-events: auto; outline: 1px solid var(--ink); outline-offset: -1px; }
.abr .cycle__card.is-left, .abr .cycle__card.is-right { z-index: 2; opacity: 1; filter: blur(2px); cursor: pointer; pointer-events: auto; }
.abr .cycle__card.is-left { transform: translate(-58%, 96px); }
.abr .cycle__card.is-right { transform: translate(58%, 96px); }
.abr .cycle__link { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 8%; color: var(--ink); text-decoration: none; }





.abr .cycle__btn--prev { left: calc(50% - var(--cw) / 2 - 40px); }
.abr .cycle__btn--next { right: calc(50% - var(--cw) / 2 - 40px); }

.abr .cycle__link:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.abr .why__card {
  max-width: 1320px; margin: 0 auto; position: relative;
  background: #fff var(--dots-blue) 0 0 / 7px 7px; border-radius: var(--r-xl);
  padding: 25px var(--pad) 50px;
}





.abr .reasons { margin-top: 30px; }
.abr .reason { display: grid; grid-template-columns: 1fr 400px; gap: 56px; padding: 48px 0; border-top: 2px dashed rgba(3, 110, 184, .3); align-items: center; } /* 左に文、右にイラスト（参考 kamikumashinrin の FLOW の形） */
.abr .reason:first-child { border-top: 0; padding-top: 20px; } /* 帯の下（01 の上）は点線なし・余白も詰める */
.abr .reason__label { font-family: var(--font-en); letter-spacing: .14em; font-size: 14px; color: #fff; background: var(--blue); border-radius: 999px; padding: 3px 16px; display: inline-block; margin-bottom: 14px; }
.abr .reason__fig { width: 100%; height: auto; justify-self: center; } /* mawaru と小物を重ねた1枚絵（背景透過） */
.abr .reason__title { font-family: var(--font-head); font-weight: 900; font-size: clamp(23px, 2.5vw, 34px); color: var(--ink); line-height: 1.45; }
.abr .reason__catch { margin-top: 10px; font-family: var(--font-head); font-weight: 900; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: var(--blue); } /* TOP の REASON と同じ一文（2026-11-01） */
.abr .reason__text { margin-top: 22px; line-height: 2.1; }
.abr .reason__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 14px; }
.abr .reason__head .reason__label { margin-bottom: 0; }








/* ============================================================
   斜めの帯文字
   ============================================================ */
/* ---- サービスの頭：白い板にタイトル画像と、右下で本を読む執事 ---- */
.abr .svc__hero { position: relative; margin-top: 30px; background: #fff var(--dots-blue) 0 0 / 7px 7px; border-radius: var(--r-xl); padding: 52px 56px 0; display: grid; grid-template-columns: 1fr 400px; gap: 24px 40px; align-items: end; color: var(--ink); }
.abr .svc__hero-text { padding-bottom: 52px; align-self: center; }   /* PC：執事の下端に揃えず、文字を上に寄せる（2026-10-31） */
.abr .svc__ttl { margin: 0; }
.abr .svc__ttl img { display: block; width: min(100%, 640px); height: auto; }
.abr .svc__catch { margin-top: 28px; font-family: var(--font-head); font-weight: 900; font-size: 30px; line-height: 1.4; color: var(--blue); }
.abr .svc__lead { margin-top: 12px; font-weight: 700; line-height: 2; max-width: 560px; }
.abr .svc__lead strong { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.abr .svc__study { display: block; width: 100%; height: auto; justify-self: end; }
/* ---- サービスの木（SERVICE）：対応領域・事業領域・初めての方へ を統合（2026-10-31） ---- */
/* 02 の配下メニュー：縦の枝で「サイト制作」にぶら下がる */

.abr .why .first__card--why { margin: 40px auto 0; max-width: 1320px; padding-top: 56px; color: var(--text); } /* 選ばれてきた理由の白いカードの下に、同じ幅で並べる */
 /* 執事を外したので上の余白は通常 */
.abr .first__card .eyebrow { border-color: var(--blue); }
.abr .band-wrap { position: relative; z-index: 4; overflow: clip; padding: 30px 0; margin: -30px 0; }
.abr .band { position: relative; width: 112vw; margin: 0 -6vw; background: #fff; padding: 10px 0; border-top: 2px solid var(--blue); border-bottom: 2px solid var(--blue); overflow: hidden; }
.abr .band--tilt { transform: rotate(-2.4deg); }

.abr .band__track { display: flex; white-space: nowrap; width: max-content; animation: marq 36s linear infinite; }
.abr .band__track span { font-family: var(--font-en); font-weight: 700; font-size: clamp(34px, 4.2vw, 60px); line-height: 1.1; color: var(--blue); padding-right: .5em; }
.abr .band__track em { color: var(--orange); font-style: normal; }
/* 選ばれてきた理由の節の中に置く帯：画面いっぱいに広げ、白いカードの上の縁にかぶせる */
.abr .why__bandwrap { margin: -6px -18px -120px; }
/* この帯だけ太く、文字も大きく */
.abr .band--reason { padding: 20px 0; border-top-width: 7px; border-bottom-width: 7px; }
.abr .band--reason .band__track span { font-size: clamp(48px, 6vw, 88px); }
/* 見出しを外した節では、帯がかぶる分だけリードを下げる */
.abr .why__card > .sr-only + .reasons { margin-top: 84px; }
/* 選ばれてきた理由の帯：日本語は英字の書体に無いので、見出しと同じ丸ゴシックで少し小さく */
.abr .band--reason .band__track em { font-family: var(--font-head); font-weight: 900; font-size: .78em; margin-left: .2em; }
.abr .band__butler { display: inline-block; height: 1.25em; width: auto; vertical-align: -.22em; margin-right: .18em; } /* Reason の R の左に、のぞき込む執事 */
@keyframes marq { to { transform: translateX(-50%); } }

/* ============================================================
   初めての方へ（写真の帯＋青いふちのカード）
   ============================================================ */
.abr .first { position: relative; padding: 0 0 80px; margin-top: -40px; }





.abr .first__card {
  position: relative; max-width: 1320px; margin: -50px auto 0;
  background: #fff var(--dots-blue) 0 0 / 7px 7px; border: 3px solid var(--blue); border-radius: var(--r-xl);
  padding: 90px var(--pad) 56px; text-align: center;
}

.abr .first__title {
  display: inline-block; background: var(--blue); color: #fff; font-family: var(--font-head); font-weight: 900;
  font-size: clamp(24px, 3.2vw, 42px); line-height: 1.45; padding: .25em .8em; border-radius: 12px;
}

.abr .first__card .eyebrow { display: flex; width: fit-content; margin: 0 auto 16px; }
.abr .first__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; margin-top: 44px; text-align: left; }
.abr .first__item { display: flex; gap: 16px; align-items: flex-start; }
.abr .first__badge { flex: none; width: 76px; height: 76px; display: grid; place-items: center; font-family: var(--font-en); font-size: 26px; color: #fff; background: var(--orange); }
.abr .first__item:nth-child(1) .first__badge { clip-path: var(--starburst); background: var(--orange); width: 84px; height: 84px; }
.abr .first__item:nth-child(2) .first__badge { border-radius: 50%; background: var(--blue); }
.abr .first__item:nth-child(3) .first__badge { border-radius: 22px; transform: rotate(8deg); background: var(--sky); }
.abr .first__item:nth-child(4) .first__badge { clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); background: var(--orange); }
.abr .first__item:nth-child(5) .first__badge { border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%; background: var(--blue-dark); }
.abr .first__item h3 { font-family: var(--font-head); font-weight: 900; font-size: 18px; color: var(--ink); line-height: 1.5; }
.abr .first__item p { font-size: 14px; margin-top: 6px; }
.abr .first__item a { text-decoration: underline; text-decoration-color: var(--sky); text-underline-offset: 4px; }

/* ============================================================
   AI の使い方
   ============================================================ */














 /* 吹き出しを執事の顔の高さに */


/* ============================================================
   数字で見る
   ============================================================ */
.abr .nums { position: relative; padding: 200px 0 0; overflow: hidden; } /* 2026-10-31 水色を 70px 広げて英字を入れる（薄い部分の形と見出しまでの距離は同じ） */
/* 見出しの上に弧を描く白い英字（もとはイントロの「We are waltsu.」） */
.abr .nums__arc { position: absolute; left: 50%; top: -10px; width: 1700px; transform: translateX(-50%); pointer-events: none; overflow: visible; }
.abr .nums__dome { fill: var(--sky); } /* 上の「選ばれる理由」の水色をアーチの外側に回し、数字の節をドーム形に切り抜く */
.abr .nums__arc text { font-family: var(--font-en); font-weight: 700; font-size: 150px; fill: #fff; letter-spacing: .02em; }

.abr .nums > .container { position: relative; z-index: 1; } /* 背景の「Numbers」より本文を手前に */











/* 見出しを色の帯にのせる（参考：「フォレストワーカー募集」の帯見出し） */
.abr .title--band { display: table; margin: 12px auto 0; background: var(--blue); color: #fff; padding: .14em .6em .2em; line-height: 1.3; letter-spacing: .04em; }
/* ---- 数字バッジ（形のちがうバッジを横一列に並べる（1000px 以下は 3列、SP は 2列）。参考：ステッカー風の待遇バッジ） ----
   バランスの決まり：列は同じ幅／バッジの見た目の大きさをそろえる／イラストはどれも右上の同じ位置・同じ大きさ／傾きは控えめ */
.abr .nbadges { --s: clamp(145px, 14.6vw, 210px); display: grid; grid-template-columns: repeat(6, auto); justify-content: center; place-items: center; gap: 40px 0; margin: 64px calc(50% - 50vw + 20px) 0; padding: 0; list-style: none; } /* 横一列 */
@media (min-width: 1001px) { .abr .nbadges > .nb { margin-inline: calc(var(--s) * -.07); } } /* 横一列のときは隣どうし少し重ねる */
@media (max-width: 1000px) { .abr .nbadges { grid-template-columns: repeat(3, auto); gap: 40px 16px; } }
.abr .nb { position: relative; width: var(--s); height: var(--s); display: grid; place-items: center; text-align: center; color: #fff; }
.abr .nb::before, .abr .nb::after { content: ""; position: absolute; pointer-events: none; }
.abr .nb::before { inset: 0; z-index: 0; }
.abr .nb__in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; line-height: 1.15; transform: rotate(var(--tilt, 0deg)); }
.abr .nb__val { font-family: var(--font-en); font-size: calc(var(--s) * .3); line-height: 1; white-space: nowrap; }
.abr .nb__val small, .abr .nb__val .pre { font-family: var(--font-head); font-weight: 900; font-size: calc(var(--s) * .09); margin-left: 2px; }
.abr .nb__val .pre { margin: 0 2px 0 0; }
.abr .nb__lbl { font-family: var(--font-head); font-weight: 900; font-size: calc(var(--s) * .092); margin-top: 6px; white-space: nowrap; }
.abr .nb__sub { font-size: calc(var(--s) * .062); font-weight: 700; margin-top: 3px; opacity: .85; white-space: nowrap; }
/* イラスト：どのバッジも右上の同じ位置（バッジの基準の大きさ --s から計算） */


/* 1. ギザギザの丸（オレンジ） */
.abr .nb--burst { --tilt: -4deg; }
.abr .nb--burst::before { background: var(--orange); border-radius: 50%; clip-path: var(--starburst); }
/* 2. 丸（白地に青い縁＋点線） */
.abr .nb--circle { --tilt: 3deg; color: var(--blue); }
.abr .nb--circle::before { inset: 0; background: #fff; border: 3px solid var(--blue); border-radius: 50%; }
.abr .nb--circle::after { inset: 9px; border: 2px dashed rgba(3, 110, 184, .35); border-radius: 50%; }
.abr .nb--circle .nb__lbl { color: var(--ink); }
.abr .nb--circle .nb__sub { color: var(--mute); opacity: 1; }
/* 3. 横長の楕円（青に白の点線） */
.abr .nb--pill { --tilt: -3deg; width: calc(var(--s) * 1.24); height: calc(var(--s) * .78); }
.abr .nb--pill::before { background: var(--blue); border-radius: 999px; transform: rotate(-3deg); }
.abr .nb--pill::after { inset: 9px; border: 2px dashed rgba(255, 255, 255, .6); border-radius: 999px; transform: rotate(-3deg); }

/* 4. ひし形（方眼の淡いオレンジ） */
.abr .nb--diamond { color: var(--ink); }
.abr .nb--diamond::before { inset: 11%; background: var(--orange-soft) linear-gradient(rgba(242, 157, 0, .18) 1px, transparent 1px) 0 0 / 10px 10px, var(--orange-soft) linear-gradient(90deg, rgba(242, 157, 0, .18) 1px, transparent 1px) 0 0 / 10px 10px; border: 3px solid var(--orange); border-radius: 16px; transform: rotate(45deg); }
.abr .nb--diamond .nb__val { color: var(--blue); }
/* 5. 山型（水色） */
.abr .nb--dome { --tilt: 3deg; width: calc(var(--s) * 1.14); height: calc(var(--s) * .8); }
.abr .nb--dome::before { background: var(--sky); border-radius: 999px 999px 18px 18px; transform: rotate(3deg); }
.abr .nb--dome .nb__in { margin-top: 8%; }

/* 6. 角丸の札（紺に白の縁） */
.abr .nb--ticket { --tilt: -3deg; }
.abr .nb--ticket::before { inset: 4%; background: var(--ink); border-radius: 30%; transform: rotate(-3deg); }
.abr .nb--ticket::after { inset: calc(4% + 8px); border: 2px solid rgba(255, 255, 255, .35); border-radius: 26%; transform: rotate(-3deg); }
.abr .nb--ticket .nb__val small { color: var(--orange); }

/* バッジをやんわり上下に揺らす（transform は出現アニメ .rv が使うので、translate / rotate で動かす）。
   6つが同じ動きにならないよう、周期と開始をずらす */
.abr .nb { animation: nb-float 5s ease-in-out infinite; }
.abr .nb:nth-child(2) { animation-duration: 5.6s; animation-delay: -1.2s; }
.abr .nb:nth-child(3) { animation-duration: 4.6s; animation-delay: -2.6s; }
.abr .nb:nth-child(4) { animation-duration: 5.3s; animation-delay: -.6s; }
.abr .nb:nth-child(5) { animation-duration: 4.9s; animation-delay: -3.4s; }
.abr .nb:nth-child(6) { animation-duration: 5.8s; animation-delay: -1.9s; }
@keyframes nb-float {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50%      { translate: 0 -8px; rotate: 1.2deg; }
}
@media (prefers-reduced-motion: reduce) {
  .abr .cycle__card { transition: none; } .abr .nb { animation: none; } }

.abr .nums__notes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 20px; margin: 40px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--mute); }

/* ============================================================
   メンバー
   ============================================================ */
@media (min-width: 601px) {
  .abr .biz__menu-desc { text-align: left; } /* 折れない語の手前で字間が開くので、about の幅では左揃え */
}
.abr .member { padding: 40px 0 80px; position: relative; }
/* メンバー紹介の導入：太枠＋ずらした影のカード、執事が右下から枠にかかる */







/* 「初めての方へ」と同じ囲み（白地＋青ドット＋青枠） */
/* メンバー紹介の頭：「初めての方へ」と同じ形 */
.abr .mhead { text-align: center; }
.abr .mhead .eyebrow { display: flex; width: fit-content; margin: 0 auto 16px; }

.abr .member__card { max-width: 1320px; background: #fff var(--dots-blue) 0 0 / 7px 7px; border: 3px solid var(--blue); border-radius: var(--r-xl); padding-top: 70px; padding-bottom: 64px; }
.abr .member__card .mcard__photo { background: #fff; }
.abr .member__card .mcard__photo::after { border-color: #fff; } /* 縁のジリジリを囲みの白地に合わせる */
.abr .member__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 26px; margin-top: 50px; }
.abr .mcard { position: relative; text-align: center; }
.abr .mcard__photo { position: relative; width: 240px; height: 240px; margin: 0 auto; overflow: hidden; border-radius: 42% 58% 55% 45% / 48% 40% 60% 52%; background: var(--soft); }
.abr .mcard:nth-child(2n) .mcard__photo { border-radius: 58% 42% 48% 52% / 40% 52% 48% 60%; }
.abr .mcard:nth-child(3n) .mcard__photo { border-radius: 50% 50% 38% 62% / 60% 38% 62% 40%; }
/* 縁が動く：楕円の形がゆっくり変わる（カードごとに速さと始まりをずらす） */
.abr .mcard__photo { animation: blob-morph 9s ease-in-out infinite; }
.abr .mcard:nth-child(2n) .mcard__photo { animation-duration: 11s; animation-delay: -4s; }
.abr .mcard:nth-child(3n) .mcard__photo { animation-duration: 13s; animation-delay: -8s; }
@keyframes blob-morph {
  0%, 100% { border-radius: 42% 58% 55% 45% / 48% 40% 60% 52%; }
  33%      { border-radius: 58% 42% 48% 52% / 40% 52% 48% 60%; }
  66%      { border-radius: 50% 50% 38% 62% / 60% 38% 62% 40%; }
}
/* 縁がジリジリ：縁の内側に背景色の帯を重ね、帯だけを #jitter（index.html 冒頭の SVG）でゆがめる。写真はゆがめない */
.abr .mcard__photo::after {
  content: ""; position: absolute; inset: -16px; z-index: 1; pointer-events: none;
  border-radius: inherit; border: 26px solid var(--soft); filter: url(#jitter);
}
.abr .mcard__photo img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); border-radius: inherit; object-fit: cover; object-position: center 20%; transition: transform .6s var(--ease); }
.abr .mcard:hover .mcard__photo img { transform: scale(1.04); }
/* オンマウス：写真が浮く・名前の帯がオレンジに・右に矢印の丸が出る */
.abr .mcard > a { display: block; }
.abr .mcard__photo { transition: translate .35s var(--ease); }
.abr .mcard:hover .mcard__photo { translate: 0 -4px; }
.abr .mcard__photo img { transition: transform .6s var(--ease), filter .35s; }
.abr .mcard__tag { transition: background-color .3s, translate .35s var(--ease); }
.abr .mcard:hover .mcard__tag { translate: 0 -4px; } /* 写真と一緒に少し上がるだけ */
.abr .mcard__tag::after { content: ""; position: absolute; right: -38px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8 4l4 4-4 4' fill='none' stroke='%23f29d00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; border: 2px solid var(--orange); opacity: 0; scale: .5; transition: opacity .3s, scale .3s var(--ease); }
.abr .mcard > a:focus-visible { outline: 3px solid var(--orange); outline-offset: 6px; border-radius: 12px; }
@media (hover: none) { .abr .mcard:hover .mcard__photo, .abr .mcard:hover .mcard__tag { translate: none; } .abr .mcard:hover .mcard__tag { background: var(--blue); } .abr .mcard:hover .mcard__tag::after { opacity: 0; } }
.abr .mcard__tag { position: relative; z-index: 2; display: inline-block; margin-top: -26px; background: var(--blue); color: #fff; border-radius: 8px; padding: 10px 18px 8px; text-align: left; }
.abr .mcard__role { position: absolute; left: 10px; top: -14px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 4px; white-space: nowrap; }
.abr .mcard__name { font-family: var(--font-head); font-weight: 900; font-size: 20px; line-height: 1.3; }
.abr .mcard__name small { font-size: 12px; font-weight: 700; margin-left: 8px; opacity: .9; }
.abr .mcard__tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }
.abr .mcard__tags li { font-size: 12px; font-weight: 700; background: #fff; border: 1.5px solid var(--sky); color: var(--blue); border-radius: 999px; padding: 2px 12px; }
.abr .sec-foot { text-align: center; margin-top: 44px; }

/* ============================================================
   事例（青いブロック）
   ============================================================ */
.abr .case { background: var(--blue); color: #fff; padding: 70px 0 80px; position: relative; }
.abr .case__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.abr .wcard { background: #fff; color: var(--text); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.abr .wcard__photo { aspect-ratio: 16 / 10; overflow: hidden; }
.abr .wcard__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.abr .wcard:hover .wcard__photo img { transform: scale(1.03); }
.abr .wcard { position: relative; transition: translate .35s var(--ease), box-shadow .35s var(--ease); } /* 出現アニメが transform を使うので持ち上げは translate で */
.abr .wcard__title a { transition: color .25s; }
.abr .wcard__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* カード全体をクリック範囲に */
.abr .wcard:hover { translate: 0 -4px; box-shadow: 0 10px 24px rgba(0, 30, 70, .18); } /* 控えめに浮かせるだけ */
.abr .wcard__photo { position: relative; }
.abr .mcard__photo::before { content: "詳しく見る →"; position: absolute; z-index: 2; display: grid; place-items: center; background: rgba(3, 50, 100, .55); color: #fff; font-family: var(--font-head); font-weight: 900; font-size: 15px; letter-spacing: .08em; opacity: 0; transition: opacity .3s; pointer-events: none; }
.abr .mcard__photo::before { content: "PROFILE →"; inset: 6px; border-radius: inherit; }
.abr .wcard:hover .wcard__title a { color: var(--blue); }
.abr .wcard:has(a:focus-visible) { outline: 3px solid var(--orange); outline-offset: 3px; }
@media (hover: none) { .abr .wcard:hover { translate: none; box-shadow: none; } .abr .mcard:hover .mcard__photo::before { opacity: 0; } }
.abr .wcard__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.abr .wcard__client { font-size: 12px; font-weight: 700; color: var(--mute); }
.abr .wcard__title { font-family: var(--font-head); font-weight: 900; font-size: 18px; color: var(--ink); line-height: 1.5; }
.abr .wcard__meta { margin-top: auto; padding-top: 12px; border-top: 1.5px dashed rgba(3, 110, 184, .3); font-size: 12px; }
.abr .wcard__meta div { display: flex; gap: 10px; align-items: baseline; }
.abr .wcard__meta dt { color: var(--mute); font-weight: 700; flex: none; }
.abr .wcard__meta dd { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.abr .wcard__service { background: var(--soft); border-radius: 999px; padding: 1px 10px; font-weight: 700; color: var(--blue); }
/* カードの中身（写真／会社名／タイトル／カテゴリー）を subgrid で横一列にそろえる。
   タイトルが長いカードに合わせて、点線とカテゴリーの位置がどのカードも同じ高さになる（SP の横スクロールも同じ） */
.abr .wcard { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
.abr .wcard__body { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 6px; }
.abr .wcard__meta { margin-top: 6px; align-self: start; }
.abr .case .sec-foot .pill { border-color: #fff; }

/* ============================================================
   サービス（次に見る）
   ============================================================ */










/* ============================================================
   FAQ
   ============================================================ */











/* ============================================================
   お問合せ CTA
   ============================================================ */
.abr .cta { position: relative; background: var(--blue-dark); color: #fff; overflow: hidden; padding: 90px 0; text-align: center; }
.abr .cta__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.abr .cta__bg { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 88, 152, .55), rgba(10, 37, 64, .85)); }
.abr .cta .container { position: relative; }
.abr .cta__title { font-family: var(--font-head); font-weight: 900; font-size: clamp(28px, 4vw, 48px); line-height: 1.4; }
.abr .cta__title-em { display: block; font-size: .6em; color: var(--orange-soft); margin-bottom: 4px; }
.abr .cta__lead { margin-top: 16px; font-weight: 500; }
.abr .cta__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 1080px; margin: 40px auto 0; }
.abr .ctacard { display: flex; flex-direction: column; align-items: center; background: #fff; color: var(--ink); border-radius: var(--r-lg); padding: 28px 32px 34px; text-decoration: none; transition: translate .3s var(--ease), box-shadow .3s var(--ease); }
.abr .ctacard--consult { border-top: 8px solid var(--red); }
.abr .ctacard--doc { border-top: 8px solid var(--blue); }
.abr .ctacard__ill { width: auto; max-width: 100%; height: 280px; object-fit: contain; } /* 2枚の絵の高さをそろえ、ボタンの位置を左右で合わせる */
.abr .ctacard__kicker { margin-top: 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: #fff; background: var(--orange); border-radius: 999px; padding: 2px 14px; }
.abr .ctacard__title { margin-top: 10px; font-family: var(--font-head); font-weight: 900; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.4; }
.abr .ctacard__btn { margin-top: auto; }
.abr .ctacard__title { margin-bottom: 20px; }
.abr .ctacard:hover { translate: 0 -4px; box-shadow: 0 14px 30px rgba(0, 20, 50, .3); }
.abr .ctacard:hover .pill__arrow { transform: translateX(3px); }
.abr .ctacard:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }


@media (max-width: 860px) { .abr .cta__cards { grid-template-columns: 1fr; gap: 18px; } .abr .ctacard { padding: 20px 18px 26px; } .abr .ctacard__ill { height: auto; width: min(100%, 360px); } }
@media (hover: none) { .abr .ctacard:hover { translate: none; box-shadow: none; } }




/* ============================================================
   フッター（白い大きなカード）
   ============================================================ */


























/* 固定CTA（PC） */
.abr .float { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: grid; gap: 8px; opacity: 0; transform: translateY(16px); transition: opacity .4s var(--ease), transform .4s var(--ease); pointer-events: none; }
.abr .float.is-show { opacity: 1; transform: none; pointer-events: auto; }
.abr .float .pill { box-shadow: none; }

/* 固定CTAバー（SP） */






/* クッキー */





/* ============================================================
   レスポンシブ
   ============================================================ */

@media (max-width: 1120px) {
  
  
  .abr .hd__burger { display: grid; }
  
  
  
  
  
  .abr .member__grid, .abr .case__grid, .abr .first__list { grid-template-columns: repeat(2, 1fr); }
  
  
}
/* FV：1340〜861px は見出しと実績の丸が重なるので、丸と見出しを幅に合わせて縮める
   （見出しのいちばん長い行は約12.9文字分。丸2つと左右の余白を引いた残りに収める） */
@media (min-width: 861px) and (max-width: 1340px) {
  .abr .fv { --aw: clamp(112px, 11.4vw, 156px); }
  .abr .fv__awards { gap: 20px; right: calc(50% - var(--slide-w) / 2 + 24px); }
  .abr .fv__awards .award { width: var(--aw); height: var(--aw); }
  .abr .fv__awards .award__label { font-size: 12px; }
  .abr .fv__awards .award__value { font-size: calc(var(--aw) * .28); }
  .abr .fv__awards .award__note { font-size: 9px; padding: 2px 8px; line-height: 1.4; white-space: normal; word-break: keep-all; width: max-content; max-width: calc(var(--aw) + 6px); text-align: center; border-radius: 10px; }
  .abr .fv__title span { font-size: min(clamp(26px, 3.4vw, 48px), calc((var(--slide-w) - 30px - 24px - 20px - 2 * var(--aw) - 64px) / 12.9)); }
}
@media (max-width: 860px) {
  .abr { font-size: 15px; }
  .abr .br-sp { display: inline; }
  
  .abr .fv { --slide-w: 88vw; --slide-gap: 14px; }
  .abr .fv__slider { height: 104vw; max-height: 500px; }   /* 2026-10-31 SP の写真を低く（120vw→104vw） */
  .abr .fv__copy { left: calc(50% - var(--slide-w) / 2 + 16px); bottom: 24px; right: calc(50% - var(--slide-w) / 2 + 16px); }
  .abr .fv__title span { font-size: clamp(18px, 5.6vw, 30px); border-radius: 8px; margin-top: 6px; }
  .abr .fv__dots { top: calc(14px + min(104vw, 500px) + 14px); gap: 6px; }
  .abr .fv__dots button { width: 20px; height: 5px; }
  .abr .fv__dots button[aria-current] { width: 36px; }
  .abr .fv__butler { height: 120px; left: -4px; bottom: auto; top: calc(14px + min(104vw, 500px) - 98px); }
  .abr .fv__awards { position: static; justify-content: center; gap: 14px 24px; margin: 40px 0 30px; }
  .abr .fv__awards .award { width: 140px; height: 140px; }
  .abr .fv__awards .award__value { font-size: 40px; }
  .abr .fv__awards .award__note { background: none; padding: 0; margin-top: 6px; }
  
  
  
  
  
  

  .abr .philo { padding: 70px 0 44px; }
  .abr .philo__lead { text-align: center; }   /* SP も中央揃え（2026-10-31） */
  
  
  
  
  
  
  .abr .awards { justify-content: center; gap: 14px 28px; }
  .abr .award { width: 150px; height: 150px; }
  .abr .award__value { font-size: 44px; }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .abr .why { padding: 24px 10px 40px; --why-fade: 140px; }
  .abr .why__bandwrap { margin: -4px -10px -74px; }
  .abr .why__card > .sr-only + .reasons { margin-top: 44px; }
  
  
  .abr .cycle__card { border-radius: 18%; }
  .abr .cycle__card.is-left { transform: translate(-64%, 44px); }
  .abr .cycle__card.is-right { transform: translate(64%, 44px); }
  
  
  
  .abr .cycle__btn--prev { left: calc(50% - var(--cw) / 2 - 18px); }
  .abr .cycle__btn--next { right: calc(50% - var(--cw) / 2 - 18px); }
  .abr .first__item h3 { font-size: 17px; } /* 「途中で担当は変わりますか？」が1行に収まる大きさ */
  .abr .band--reason { padding: 14px 0; border-top-width: 4px; border-bottom-width: 4px; }
  .abr .band--reason .band__track span { font-size: 46px; }
  .abr .why__card { padding: 25px 20px 40px; border-radius: 30px; }
  
  .abr .reason { grid-template-columns: 1fr; gap: 18px; padding: 34px 0; }
  .abr .reason__fig { width: min(100%, 300px); }
  .abr .band__track span { font-size: 34px; }
  .abr .first { margin-top: -24px; }
  
  
  
  .abr .first__card { margin: -30px 10px 0; padding: 70px 18px 40px; border-radius: 30px; }
  
  .abr .why .first__card--why { margin: 24px 0 0; padding-top: 40px; }
  
  .abr .svc__hero { margin-top: 16px; grid-template-columns: 1fr; gap: 6px; padding: 34px 20px 0; border-radius: 30px; }
  .abr .svc__hero-text { padding-bottom: 0; }
  .abr .svc__ttl img { width: min(100%, 300px); margin: 0 auto; }
  .abr .svc__catch { font-size: 22px; margin-top: 22px; text-align: center; }
  .abr .svc__lead { font-size: 14px; }
  .abr .svc__study { width: 250px; justify-self: center; margin-top: 8px; }
  
  
  
  
  
  .abr .member__card { margin: 0 18px; padding: 50px 18px 40px; border-radius: 30px; }
  /* 「メンバーを紹介します。」の「す。」だけが次の行に残らないように。78px は枠の外と内の余白と枠線、12 は11字と帯の内側の余白1字分（r88） */
  @media (max-width: 380px) { .abr .member__card .first__title { padding-inline: .5em; font-size: min(24px, calc((100vw - 78px) / 12.1)); } }
  
  .abr .first__list { grid-template-columns: 1fr; gap: 22px; }
  .abr .member__grid { grid-template-columns: 1fr; }
  
  
  
  .abr .nbadges { --s: 150px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 0; margin-top: 44px; }
  .abr .nums__notes { justify-content: flex-start; flex-direction: column; font-size: 11px; }
  .abr .nums { padding-top: 84px; padding-bottom: 0; }
  .abr .nums__arc { width: 1100px; top: -48px; }
  .abr .nums__arc text { font-size: 120px; }
  
  
  
  .abr .mcard__photo { width: 200px; height: 200px; }
  .abr .case__grid { display: grid; grid-template-columns: none; grid-template-rows: repeat(4, auto); grid-auto-flow: column; grid-auto-columns: 82vw; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding: 0 0 10px; margin: 36px calc(var(--pad) * -1) 0; padding-left: var(--pad); scrollbar-width: none; }
  .abr .case__grid::-webkit-scrollbar { display: none; }
  .abr .case__grid .wcard { scroll-snap-align: start; }
  .abr .cta { padding: 70px 0 160px; }
  
  
  
  
  
  
  
  .abr .float { display: none; }
  
  
}
@media (prefers-reduced-motion: reduce) {
  .abr .mcard__photo { animation: none; }
  .abr .mcard__photo::after { filter: none; }
  .abr .rv { opacity: 1; transform: none; transition: none; }
  .abr .band__track { animation: none !important; }
}

/* ---- 「わっ」の動き（ビクッと跳ねる。驚き線は外した）。2.5〜5秒の不定期で再生（js/renewal.js 7） ---- */
.abr .wa { position: relative; display: inline-block; white-space: nowrap; }
.abr .wa i { font-style: normal; display: inline-block; color: var(--orange); }
.abr .wa i { transform-origin: 50% 100%; }
.abr .wa.play i { animation: wa-jolt .7s cubic-bezier(.17, .88, .30, 1.28) both; }
.abr .wa.play i:nth-child(2) { animation-delay: .06s; }
@keyframes wa-jolt {
  0%   { transform: translateY(0) scale(1); }
  12%  { transform: translateY(0) scale(1.12, .86); }
  35%  { transform: translateY(-.3em) scale(1.14); }
  60%  { transform: translateY(0) scale(1); }
  75%  { transform: translateY(-.06em) scale(1.03); }
  100% { transform: translateY(0) scale(1); }
}

/* ---- 2026-10-31 SP の調整（しゅんすけ指示）：理由とメリットのカードの余白を広く／数字の見出しを大きく／注釈は右揃え／サービスの執事は中央 ---- */
@media (max-width: 860px) {
  .abr .why { padding-left: 18px; padding-right: 18px; }
  .abr .why__bandwrap { margin-left: -18px; margin-right: -18px; }
  .abr .why__card { padding: 32px 22px 44px; }
  .abr .why .first__card--why { padding: 44px 22px 44px; }
  .abr .first__list { gap: 30px; }
  .abr .first__item { gap: 14px; }
  .abr .first__badge { width: 60px; height: 60px; font-size: 22px; }
  .abr .first__item:nth-child(1) .first__badge { width: 66px; height: 66px; }
  .abr .title--band { font-size: clamp(24px, 7.6vw, 34px); padding-inline: .4em; letter-spacing: .02em; white-space: nowrap; }   /* 1行のまま大きく */
  .abr .nums__notes { align-items: flex-end; text-align: right; }
  .abr picture:has(> .svc__study) { justify-self: center; }
  .abr .svc__study { margin-inline: auto; }
  .abr .why__card > .sr-only + .reasons { margin-top: 30px; }   /* Reason の帯と 01 の間を詰める */
  .abr .reasons > .reason:first-of-type { padding-top: 0; }
  .abr .reason__title { font-size: 28px; }
  .abr .nbadges { row-gap: 12px; }   /* 数字で見る：丸の行間と注釈までを詰める */
  .abr .nums__notes { margin-top: 16px; }
  .abr .case__grid { overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }   /* 事例：横スクロールだけ（縦・斜めに揺れない） */
  .abr .member__grid { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 36px -18px 0; padding: 6px calc(18vw - 13px) 12px; }   /* メンバー：横スクロール。1人目を中央から始める（カード 64vw。枠の幅は 100vw - 26px。2026-11-03 しゅんすけ指示） */
  .abr .member__grid::-webkit-scrollbar { display: none; }
  .abr .member__grid > .mcard { flex: 0 0 64vw; scroll-snap-align: center; }   /* 写真を大きく・名前は1行 */
  .abr .member__grid > .rv, .abr .case__grid > .rv { opacity: 1; transform: none; }   /* 横に隠れたカードが出現待ちのまま残らないように */
  .abr .cta { padding-bottom: 60px; }   /* リッチCTAの下（固定バーはここで隠れるので 160px は不要） */
  .abr .case__grid { padding-left: 9vw; padding-right: 9vw; scroll-padding-inline: 9vw; }   /* 事例：1枚目を中央から始め、左へ送る（カード 82vw＋左右 9vw） */
  .abr .case__grid .wcard { scroll-snap-align: center; }
  .abr .nums { padding-top: 144px; }   /* 数字：弧を下から始める分だけ見出しも下げる */
  .abr .nums__arc { width: 700px; max-width: none; top: 20px; }   /* 共通の max-width:100% で 393px に縮み、丸みがつぶれて上が切れていた */
  .abr .nums__arc text { font-size: 150px; }   /* 表示で約62px */
  .abr .mcard__photo { width: 230px; height: 230px; }
  .abr .mcard__name { white-space: nowrap; }
}

/* SP（2026-11-03 しゅんすけ指示）：REASON・小さな会社に頼むメリット・waltsu のサービスの白いカードは左右の余白を詰める。
   事業カードの中身は TOP に揃える（about の行の高さ・見出しの書体・p の余白リセットを戻す。青地と角丸は about のまま） */
@media (max-width: 600px) {
  .abr .why__card, .abr .why .first__card--why, .abr .svc__hero { padding-inline: 14px; }
  .abr .first__item h3 { text-wrap: balance; } /* 幅が広がって「…設けていませ／ん。」と語尾だけ残るので、行の長さを揃える */
  .abr .biz { --biz-font-head: inherit; font-size: 16px; line-height: 1.7; }
  .abr .biz__no, .abr .biz__label { margin-bottom: 12px; }
  .abr .biz__text { margin-top: 12px; }
}


/* ===== ローディング ===== */
/* ============================================================
   waltsu ローディング画面 「About waltsu」
   流れ：①右上で小さく会釈 → ②左下で一瞬だけ指さし → ③胸に手を当てた執事が
   中央下からせり上がり、弾んで着地 → ④両手を広げると同時に「About waltsu」が
   1文字ずつ跳ねて出る → ⑤幕が上がるように退場（執事は下へ）
   状態クラス（s-*, is-*）と data-frame は assets/js/loading.js が時刻表どおりに付与。
   時間の調整は JS、見た目の調整はここ。
   ============================================================ */
.wl-load {
  --wl-bg: #e8f1f9;            /* ブランドの淡い青（waltsu-renewal の --color-primary-soft） */
  --wl-dot: #ffffff;
  --wl-ink: #0a2540;
  --wl-shadow: 10, 37, 64;     /* 影の色（rgb） */
  --wl-ease: cubic-bezier(.65, 0, .35, 1);
  --wl-pop: cubic-bezier(.17, .88, .30, 1.28);
  --wl-land: cubic-bezier(.22, .9, .32, 1.18);   /* せり上がりの着地（5%ほど行き過ぎて戻る） */
  --wl-curtain: cubic-bezier(.76, 0, .24, 1);    /* 退場の幕 */
  --wl-main-h: min(50vh, 540px);                 /* 大きい子の高さ。影と文字の位置もこれに追従 */

  position: fixed;
  inset: 0;
  z-index: 99999;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--wl-bg) radial-gradient(circle, var(--wl-dot) 1.1px, transparent 1.4px) 0 0 / 8px 8px;
}
.wl-load figure { position: absolute; margin: 0; }
.wl-load figure img {
  max-width: none;            /* サイト側の img{max-width:100%} に幅0の枠で潰されないように */
  display: block;
  height: 100%;
  width: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* 足元の影。小さい2人は figure の擬似要素、大きい子は地面に置いた .wl-load__ground */
.wl-load__peek::after,
.wl-load__blink::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 1.2%;
  width: 78%;
  height: 6%;
  transform: translate(-50%, 50%);
  background: radial-gradient(ellipse at center, rgba(var(--wl-shadow), .22), rgba(var(--wl-shadow), 0) 70%);
}

/* ① 右上で小さく会釈（最初から見えていて、0.6s で消える） */
.wl-load__peek {
  height: 240px;
  left: calc(50% + 200px);
  bottom: calc(50% + 30px);
  opacity: 1;
  transition: opacity .4s var(--wl-ease);
}
.wl-load.s-peek-out .wl-load__peek { opacity: 0; }

/* ② 左下に一瞬だけ現れて指さす（1.2s のうち 0.3s ほど見える） */
.wl-load__blink {
  height: 344px;
  right: calc(50% + 120px);
  bottom: calc(50% - 194px);
  opacity: 0;
  transform-origin: 50% 100%;
}
.wl-load.s-blink .wl-load__blink { animation: wl-bling 1.2s var(--wl-ease) both; }
@keyframes wl-bling {
  0%   { opacity: 0; transform: scale(1); }
  10%  { opacity: 1; }
  26%  { opacity: 1; }
  34%  { opacity: 0; }
  100% { opacity: 0; transform: scale(1.2); }
}

/* ③ 大きい子：中央下からせり上がり、少し行き過ぎて戻る（着地の弾み） */
.wl-load__main {
  height: var(--wl-main-h);
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  transition: transform .55s var(--wl-land);
}
.wl-load.s-main .wl-load__main { transform: translate(-50%, 0); }

/* 地面の影：せり上がりに合わせて広がる */
.wl-load__ground {
  position: absolute;
  left: 50%;
  bottom: calc(var(--wl-main-h) * .027);           /* 足の裏の高さ（コマの余白ぶん） */
  width: calc(var(--wl-main-h) * .52);
  height: calc(var(--wl-main-h) * .07);
  transform: translate(-50%, 50%) scale(.3);
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(var(--wl-shadow), .30), rgba(var(--wl-shadow), 0) 70%);
  transition: transform .55s var(--wl-land), opacity .35s var(--wl-ease);
}
.wl-load.s-main .wl-load__ground { transform: translate(-50%, 50%) scale(1); opacity: 1; }

/* コマの置き場。幅0の軸を中央に立て、各コマをその軸で中央揃え。待機中は呼吸の揺れ */
.wl-load__turn {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 100%;
  transform-origin: 50% 100%;
}
.wl-load.s-main .wl-load__turn { animation: wl-breathe 2.6s ease-in-out .7s infinite; }
@keyframes wl-breathe {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(.992, 1.012); }
}
.wl-load__turn img {
  max-width: none;
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity .1s .22s;                    /* 出ていく側：次が入り切ってから消す */
}
.wl-load__main[data-frame="greet"] .wl-frame--greet,
.wl-load__main[data-frame="open"]  .wl-frame--open {
  opacity: 1;
  z-index: 2;                                      /* 入ってくる側：上に重ねてフェードイン */
  transition: opacity .25s var(--wl-ease);
}
/* 胸に手（mawaru-3）は両手を広げる（mawaru-1）と別の絵で背丈も立ち位置も違う。
   96.7% に縮め、足を 2.31% 上げ、頭の中心が揃うよう右へ 16.04% ずらす（透過PNGの計測値。
   コマを替えたら測り直す） */
.wl-load__turn .wl-frame--greet {
  height: 96.7%;
  bottom: 2.31%;
  transform: translateX(calc(-50% + 16.04%));
}

/* ④ 「About」は1文字ずつ跳ねて出る → 続けて waltsu ロゴ */
.wl-load__text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--wl-main-h) + 48px);
  margin: 0 auto;
  text-align: center;
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 7vw, 96px);
  line-height: 1.1;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: var(--wl-ink);
}
.wl-load__word { display: inline-block; }
.wl-load__word i {
  display: inline-block;
  font-style: normal;
  opacity: 0;
  transform: translateY(.6em) scale(.6);
}
.wl-load__word i.is-space { width: .26em; }
.wl-load__logo {
  display: inline-block;
  height: .86em;
  width: auto;
  vertical-align: -.06em;
  margin-left: .24em;
  opacity: 0;
  transform: translateY(.6em) scale(.6);
}
.wl-load.s-text .wl-load__word i {
  animation: wl-letter .55s var(--wl-pop) both;
  animation-delay: calc(var(--i) * 42ms);
}
.wl-load.s-text .wl-load__logo {
  animation: wl-letter .6s var(--wl-pop) both;
  animation-delay: var(--logo-delay, .34s);
}
@keyframes wl-letter {
  from { opacity: 0; transform: translateY(.6em) scale(.6); }
  to   { opacity: 1; transform: none; }
}

/* ⑤ 退場：幕が上がり、執事は下へ、文字と影は消える */
.wl-load.is-leaving {
  transform: translateY(-100%);
  transition: transform .8s var(--wl-curtain);
}
.wl-load.is-leaving .wl-load__main {
  transform: translate(-50%, 110%);
  transition: transform .45s cubic-bezier(.5, 0, .75, 0);
}
.wl-load.is-leaving .wl-load__ground {
  opacity: 0;
  transform: translate(-50%, 50%) scale(.3);
  transition: transform .4s ease-in, opacity .3s ease-in;
}
.wl-load.is-leaving .wl-load__text { opacity: 0; transition: opacity .35s var(--wl-ease); }
.wl-load.is-done { display: none; }

/* 再生し直すときの初期化中は動かさない（JS が一瞬だけ付ける） */
.wl-load.is-reset, .wl-load.is-reset * { transition: none !important; animation: none !important; }

/* 再生中はページをスクロールさせない（JS が付け外し） */
body.wl-locked { overflow: hidden; }

/* SP */
@media (max-width: 800px) {
  .wl-load { --wl-main-h: min(42vh, 380px); }
  .wl-load__peek  { height: 120px; left: calc(50% + 60px);  bottom: calc(50% + 100px); }
  .wl-load__blink { height: 180px; right: calc(50% + 40px); bottom: calc(50% - 50px); }
  .wl-load__text  { font-size: clamp(30px, 9.4vw, 52px); bottom: calc(var(--wl-main-h) + 36px); }
}

/* 動きを減らす設定の人には動かさない（JS 側も短い時刻表に切り替わる） */
@media (prefers-reduced-motion: reduce) {
  .wl-load, .wl-load * { transition: none !important; animation: none !important; }
  .wl-load__word i, .wl-load__logo { opacity: 1; transform: none; }
}

/* 一時停止のスイッチ：<html data-loading="off"> のときは最初から出さない（復活は HTML の印を消すだけ） */
html[data-loading="off"] .wl-load { display: none; }

/* PC：事業カードの余白を TOP・/service/ とそろえる。.abr p, .abr h3 の margin: 0 が .biz__ の余白を消していた（2026-11-03 しゅんすけ指示）。
   「本気でつく／り直した話。」と語の途中で折らない。SP は触らない */
@media (min-width: 601px) {
  .abr .biz { line-height: 1.7; }
  .abr .biz__no, .abr .biz__label { margin-bottom: 12px; }
  .abr .biz__text { margin-top: 12px; }
  .abr .wcard__title,
  .abr .first__item h3 { word-break: auto-phrase; } /* 「クイ／ックに対応」も同じ */
}