@charset "UTF-8";
/*
  WelluluWORK LP v1.6 共通スタイル（3 ページ共通）
  Figma: WelluluWORK「【共有】*トップ-v1.6」PC 1440 / SP 390
  数値は Figma 実測ダンプの値。モバイルファースト、768px 以上で PC レイアウト。

  共通部品（クラス一覧）
    .pc / .sp            … PC のみ / SP のみ表示（<br class="pc"> など改行にも使う）
    .site-header         … ヘッダー（PC: FV 枠内に重ねる / SP: 上部固定・メニューボタン .js-menu-btn）
    .sp-menu             … SP メニュー（body.is-menu-open で表示）
    .fv                  … ファーストビュー（.fv__copy コピー・.fv__logo ロゴ）。画面の縁は .screen-frame（固定表示）
    .deco                … 装飾画像（各セクション基準の絶対配置。--x/--y は 1440 幅の中央基準の座標）
    .sec-head            … 「//」付き見出し（.sec-head--row は SP で 2 段組）
    .cards / .card       … 記事カード（.card--biz4 黄ドット / .card--talk 青ドット＝Wellulu の Wellulu-Talk の色。EXPERT も記事のシリーズで出し分ける）
    .carousel            … EXPERT のスライダー（Swiper。.swiper > .cards.swiper-wrapper > .card.swiper-slide と .carousel__nav）
    .btn-line            … VIEW ALL・DOWNLOAD
    .logo-strip / .movie / .news / .download / .about（Wellulu・ECOTONE 紹介）
    .intro               … 「経営者の想いと、人の想いを、相性でつなぐ。」（.intro__lead / .intro__fig / .intro__defs）
    .check15 / .cta-lead … 「15指標でチェック」ブロックと、混在サイズの訴求文（アカウント登録不要！…）
    .cta-btn             … 影付きの大ボタン（--company 赤 / --seeker 青 / --check 橙）
    .site-footer / .sp-cta-bar（SP 下部固定）

  レイアウト幅の考え方
    PC は 1440 で Figma と一致させ、768〜1439 は余白とカード幅を縮める。
    Figma の線（stroke）はレイアウト寸法に含まれないものが多いので、
    含まれない線は border ではなく inset の box-shadow か ::after で描く。
*/

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, li, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  color: #000;
  background: #fff;
  /* Figma は約物を詰めない・小書き仮名を行頭に置かないので合わせる */
  text-spacing-trim: space-all;
  line-break: strict;
  /* Figma はグレースケールの AA で描く（A/B で全画面の差分 0.79% → 0.51%） */
  -webkit-font-smoothing: antialiased;
}
body.is-menu-open { overflow: hidden; }

@media (max-width: 767px) { .pc { display: none !important; } }
@media (min-width: 768px) { .sp { display: none !important; } }

/* 各セクションは独立した重なり順を持ち、装飾 .deco はその背面に置く */
/* 装飾の円などは画面外へはみ出す。body の overflow はビューポートへ伝播して hidden 扱いになり
   はみ出し量（scrollWidth）が残るため、main・header・footer 側で切る（clip は縦方向をそのまま見せられる） */
main, .site-footer { overflow-x: clip; }
main > section, main > div { position: relative; z-index: 0; }
.deco {
  position: absolute;
  z-index: -1;
  max-width: none;
  pointer-events: none;
  left: var(--sx, 0);
  top: var(--sy, 0);
}
@media (min-width: 768px) {
  .deco { left: calc(50% - 720px + var(--x, 0px)); top: var(--y, 0); }
}

/* ---------- header ---------- */
.site-header {
  position: fixed;
  z-index: 50;
  top: 0; left: 0; right: 0;
  height: 54px;
  padding: 0 8px;
  background: #fff;
}
.site-header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, #DCF2FA 0%, #C9A8DC 50%, #AEF8D1 100%);
}
.site-header__inner {
  display: flex; justify-content: space-between; align-items: center;
  height: 44px; margin-top: 5px;
}
.site-header__logo { display: block; width: 137.14px; height: 40px; }
.site-header__logo img { width: 137.14px; height: 40px; }
.site-header__menu { width: 54px; height: 54px; margin: -5px -5px -5px 0; display: grid; place-items: center; } /* 押せる範囲はヘッダーの高さいっぱい（54x54）。アイコンの位置は Figma のまま */
.site-header__menu img { width: 23px; height: 23px; }
.site-header__nav { display: none; }

@media (min-width: 768px) {
  .site-header {
    position: fixed;
    top: 10px; left: 10px; right: 10px;
    height: 92px;
    padding: 16px;
    background: none;
  }
  .site-header::after { content: none; }
  .site-header__inner { height: 60px; margin: 0; padding: 0 16px 0 40px; border-radius: 50px; transition: background-color .3s; }
  /* 80px 以上スクロールしたら白い角丸の帯（Figma「一定スクロール後のヘッダーデザイン」。最上部に戻ると透明） */
  .is-scrolled .site-header__inner { background: #fff; }
  /* 固定ヘッダーの帯の外側（透明な余白）は、下の本文のクリックを妨げない */
  .site-header { pointer-events: none; }
  .site-header__inner { pointer-events: auto; }
  .site-header__logo, .site-header__logo img { width: 137px; height: 40px; }
  .site-header__nav { display: block; }
  .site-header__menu { display: none; }
  .site-header__nav ul { display: flex; align-items: center; }
  /* ナビ項目の幅は HTML の style で Figma の値に固定（文字幅の切り上げ分のずれを防ぐ）。
     幅は Chrome の文字幅ちょうどなので、字幅がわずかに広い Safari でも折り返さないよう nowrap */
  .site-header__nav a {
    display: block;
    padding: 0 16px;
    font-size: 12px; line-height: 18px; color: #333;
    white-space: nowrap;
  }
  .site-header__nav li + li a { box-shadow: inset 1px 0 0 #333; }
}

/* ---------- SP menu ---------- */
.sp-menu {
  position: fixed; z-index: 100; inset: 0;
  display: none;
  flex-direction: column;
  background: #fff;
  overflow-y: auto;
}
body.is-menu-open .sp-menu { display: flex; }
.sp-menu__head {
  flex: none;
  display: flex; justify-content: space-between; align-items: center;
  height: 54px; padding: 0 8px;
}
.sp-menu__close { width: 44px; height: 44px; display: grid; place-items: center; }
.sp-menu__close img { width: 23px; height: 23px; }
.sp-menu__body {
  flex: 1 0 auto;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 17px; /* Figma は space-between。項目の多いメニュー（企業 8 項目）でも収まる最小間隔 */
}
.sp-menu__nav a {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  height: 70px;
  font-size: 13px; line-height: 20px; color: #333;
}
.sp-menu__nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--grad-line, linear-gradient(90deg, #DCF2FA 0%, #C9A8DC 50%, #AEF8D1 100%));
}
.sp-menu__sites { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 0; }
.sp-menu__site {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  width: 320px; height: 44px; border-radius: 4px;
  font-size: 13px; line-height: 20px; color: #fff;
}
.sp-menu__site img { position: absolute; left: 284px; top: 12px; width: 20px; height: 20px; }
.sp-menu__site--company { background: #E54E4E; }
.sp-menu__site--seeker { background: #386CCD; }
.sp-menu__foot { display: flex; flex-direction: column; gap: 24px; }
.sp-menu__closebtn {
  display: flex; justify-content: center; align-items: center;
  width: calc(100% - 32px); height: 44px; margin: 0 16px;
  background: #fff; border-radius: 4px; box-shadow: inset 0 0 0 1px #D9D9D9;
  font-size: 13px; line-height: 20px; color: #333;
}
.sp-menu__copy {
  box-shadow: inset 0 1px 0 #333;
  padding-top: 1px;
  text-align: center; font-size: 10px; line-height: 18px; color: #333;
  translate: -0.25px 0; /* Figma は字幅を整数に丸めて中央寄せするため少し左（A/B 実測 2.3%→0.74%） */
}

/* ---------- FV ----------
   SP は Figma の 390 幅の見た目を、画面幅に比例して拡大・縮小する（数値は 390 幅の px。--u = 画面幅 / 390）。
   PC は --u = 1px なので数値そのまま（PC 用の値は下の min-width: 768px で上書き）。
   SP の装飾は --fx / --fy / --fw（390 幅での x・y・幅）で置く */
.fv { --u: 1px; height: 100svh; min-height: calc(650 * var(--u)); }
@media (max-width: 767px) {
  .fv { --u: calc(100vw / 390); }
  .fv .deco.sp { left: calc(var(--fx) * var(--u)); top: calc(var(--fy) * var(--u)); width: calc(var(--fw) * var(--u)); }
}
.fv__copy { position: absolute; left: calc(16 * var(--u)); top: calc(50% - 78.5 * var(--u)); }
.fv__copy h1 {
  font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700;
  font-size: calc(28 * var(--u)); line-height: calc(40 * var(--u)); white-space: nowrap;
}
.fv__copy p {
  margin-top: calc(10 * var(--u)); padding-left: calc(3 * var(--u));
  font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700;
  font-size: calc(12 * var(--u)); line-height: calc(18 * var(--u));
}
.fv__logo { position: absolute; left: calc(50% - 70 * var(--u)); bottom: calc(198 * var(--u)); width: calc(140 * var(--u)); height: calc(79 * var(--u)); }
.screen-frame { display: none; }
/* Figma の SP 座標から端末ステータスバー 50px を除く。ロゴ・矢印は既存 SVG の該当部分を使う。 */
@media (max-width: 767px) {
  .fv { height: calc(801 * var(--u)); min-height: 0; }
  .fv__body {
    position: absolute; inset: 0;
  }
  .fv__copy { top: calc(322 * var(--u)); }
  .fv__brand {
    position: absolute; left: calc(50% - 70 * var(--u)); top: calc(574 * var(--u));
    width: calc(140 * var(--u)); text-align: center;
  }
  .fv__brand-logo, .fv__brand-arrow { display: block; overflow: hidden; margin: 0 auto; }
  .fv__brand img { width: calc(140 * var(--u)); height: calc(79 * var(--u)); max-width: none; }
  .fv__brand-logo { width: calc(140 * var(--u)); height: calc(41 * var(--u)); }
  .fv__brand-text {
    margin-top: calc(4 * var(--u));
    font-family: "Noto Sans JP", sans-serif; font-weight: 500; color: #000;
    font-size: calc(10 * var(--u)); line-height: calc(15 * var(--u)); white-space: nowrap;
  }
  .fv__brand-arrow { width: calc(20 * var(--u)); height: calc(22 * var(--u)); margin-top: calc(16 * var(--u)); }
  .fv__brand-arrow img { margin: calc(-57 * var(--u)) 0 0 calc(-60 * var(--u)); }
}

@media (min-width: 768px) {
  .fv { min-height: 700px; }
  /* Figma（1440×1024）の位置で円に対して固定。低い画面では下部ロゴの 20px 上まで（字形の下端 = top + 222px、ロゴ上端 = 下から 209px） */
  .fv__copy { left: max(40px, calc(50% - 620px)); top: min(392px, calc(100% - 451px)); }
  .fv__copy h1 { padding-left: 1em; font-size: 80px; line-height: 120px; }
  .fv__copy p { padding-left: 8px; font-size: 20px; line-height: 24px; }
  /* ロゴも Figma（1440×1024）の位置より下へは行かせない。低い画面では従来どおり下端基準 */
  .fv__logo { left: calc(50% - 150px); top: min(815px, calc(100% - 209px)); bottom: auto; width: 300px; height: 169px; }
  /* 画面の縁: 画面の四隅に固定し、スクロールしても追従する（Figma「一定スクロール後のヘッダーデザイン」） */
  .screen-frame { display: block; position: fixed; inset: 0; z-index: 55; pointer-events: none; }
  .screen-frame i { position: absolute; }
  .screen-frame i:nth-child(1) { left: 0; top: 0; bottom: 0; width: 10px; background: linear-gradient(180deg, #5360F8 20.19%, #E5DBF1 93.75%); }
  .screen-frame i:nth-child(2) { right: 0; top: 0; bottom: 0; width: 10px; background: linear-gradient(180deg, #E7FF6E 0%, #7CEBEE 93.75%); }
  .screen-frame i:nth-child(3) { left: 0; right: 0; bottom: 0; height: 10px; background: linear-gradient(90deg, #E5DBF1 0%, #D29FD5 22.12%, #5EEFCB 57.69%, #7CEBEE 100%); }
  .screen-frame i:nth-child(4) { left: 0; right: 0; top: 0; height: 10px; background: linear-gradient(90deg, #5360F8 0%, #B469D4 64.84%, #E7FF6E 93.75%); }
}

/* ---------- section head ---------- */
.sec-head { padding: 0 16px; }
.sec-head h2 {
  display: flex; align-items: flex-end; gap: 8px;
  font-weight: 400;
}
.sec-head__mark { flex: none; width: 16.86px; height: 27px; }
.sec-head__mark img { width: 17px; height: 27px; max-width: none; } /* 書き出し SVG は枠（16.86）より大きい 17px。縮めない */
.sec-head__en { min-width: var(--w, 0); font-family: "Roboto", sans-serif; font-weight: 400; font-size: 27px; line-height: 27px; white-space: nowrap; } /* Figma は文字幅を整数に切り上げて次の要素を並べる（--w / --wp に Figma の幅） */
.sec-head__ja { padding-bottom: 3px; font-size: 12px; line-height: 13px; font-weight: 400; white-space: nowrap; }
.sec-head--row h2 { align-items: flex-start; gap: 10px; }
.sec-head--row .sec-head__txt { display: flex; flex-direction: column; gap: 8px; }
.sec-head--row .sec-head__ja { padding-bottom: 3px; }

@media (min-width: 768px) {
  .sec-head { padding: 0 max(86px, calc(50% - 634px)); }
  .sec-head h2, .sec-head--row h2 { align-items: flex-end; gap: 8px; }
  .sec-head--row .sec-head__txt { flex-direction: row; align-items: flex-end; gap: 8px; }
  .sec-head__mark { width: 22.48px; height: 36px; }
  .sec-head__mark img { width: 23px; height: 36px; }
  .sec-head__en { min-width: var(--wp, 0); font-size: 36px; line-height: 36px; }
  .sec-head__ja, .sec-head--row .sec-head__ja { padding-bottom: 0; font-size: 14px; line-height: 28px; font-weight: 500; }
}

/* ---------- article cards ---------- */
.articles__body { margin-top: 25px; padding: 0 16px; }
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 15px; row-gap: 30px;
}
.card { position: relative; }
.card::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 4px);
}
.card__link { display: block; margin: 0 -1.25px; padding-bottom: 20px; }
.card__img { width: 100%; aspect-ratio: 1; object-fit: cover; }
/* 記事が未公開で画像が無いときの仮の枠（Figma の仮箱と同じグレー）／記事数をそろえるための空き枠（何も描かない） */
.card__img--empty { display: block; background: #C7C7C7; }
.card--blank::after { content: none; }
/* SP のカード画像は x=14.75 / 201.25 の 1/4 px 位置。Chrome は 0.5 刻みに寄せるので、Figma の描画位置に合う側へ寄せる（A/B: 1.46%→0.10%） */
@media (max-width: 767px) {
  .card::after { left: -1.25px; right: -1.25px; } /* SP の破線は中身の幅（174）で描かれている（A/B: 1.82%→0.48%） */
  .cards > li:nth-child(odd) .card__img { translate: -0.25px 0; }
  .cards > li:nth-child(even) .card__img { translate: 0.25px 0; }
}
.card__cat {
  display: flex; align-items: flex-start; gap: 6px;
  height: 15px; margin-top: 14px; /* Figma はテキスト枠の高さを整数に切り上げる（14.4→15） */
  font-size: 12px; line-height: 14.4px; color: #333;
}
.card__cat::before { content: ""; flex: none; width: 12px; height: 12px; margin-top: 1.5px; border-radius: 50%; background: #000; }
.card--biz4 .card__cat::before { background: #EEDC98; }
.card--talk .card__cat::before { background: #96D3E5; }
/* サムネは Wellulu の記事カード（jquery.inview）と同じく、画面に入ったらぼかしから戻す。.inview は common.js が付け外しする。SP は即表示 */
@media (min-width: 768px) {
  .card__img { animation: card-thumb-in .3s ease-in-out; }
}
.card.inview .card__img { animation: none; opacity: 0; }
@keyframes card-thumb-in {
  0% { filter: blur(100px); opacity: 0; clip-path: inset(0); }
  25% { filter: blur(25px); }
  50% { filter: blur(80px); }
  75% { filter: blur(40px); }
  to { filter: blur(0); opacity: 1; clip-path: inset(0); }
}
.card__title { margin-top: 7px; font-size: 14px; line-height: 21px; font-weight: 500; }
/* 「“」の前で Chrome も改行できるようにして、Safari と同じ位置で折り返す（中間幅で Chrome だけ「く“」ごと送っていた） */
.card__title--loose { line-break: loose; }
.card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.card__tags li {
  display: flex; align-items: center; gap: 1px;
  padding: 2px 4px; border-radius: 8px;
  font-size: 10px; line-height: 10px; color: #333; white-space: nowrap;
}
.card__tags li::before { content: "#"; width: 6px; font-size: 10px; } /* Figma の「#」は 6px 幅の枠（タグ幅が整数になる） */

.btn-line {
  display: flex; justify-content: center; align-items: center;
  width: 160px; height: 44px; margin: 50px auto 0;
  border: 1px solid #333; border-radius: 4px;
  font-size: 16px; line-height: 24px; font-weight: 400; color: #333;
}

@media (min-width: 768px) {
  .articles__body { margin-top: 30px; padding: 0 max(86px, calc(50% - 634px)); }
  .cards { grid-template-columns: repeat(4, minmax(0, 280px)); justify-content: space-between; column-gap: 24px; row-gap: 60px; }
  .card__link { margin: 0; padding-bottom: 24px; }
  .card__cat { height: 18px; margin-top: 16px; font-size: 12px; line-height: 18px; }
  .card__cat::before { margin-top: 3px; }
  .card__title { margin-top: 8px; font-size: 18px; line-height: 27px; }
  .card__tags { margin-top: 20px; }
  .card__tags li { padding: 1px 4px 3px; font-size: 11px; line-height: 18px; } /* Figma は文字を 1px 上に描く（A/B: 帯 6.4%→2.1%） */
  .card__tags li::before { font-size: 12px; width: 7px; }
  .btn-line { height: 40px; margin-top: 60px; }
}

/* ---------- logo strip ---------- */
.logo-strip[hidden] { display: none; }
.logo-strip__viewport { overflow: hidden; }
.logo-strip__track { display: flex; width: max-content; margin-inline: auto; }
.logo-strip__set { flex: none; }
.logo-strip__list { display: flex; width: max-content; gap: 8px; }
.logo-strip li { flex: none; width: 100px; height: 66px; }
.logo-strip a, .logo-strip img { display: block; width: 100%; height: 100%; }
.logo-strip a { scroll-margin-block: 120px; }
.logo-strip img { object-fit: contain; }
.logo-strip a:focus-visible { outline: 2px solid #333; outline-offset: -2px; }
.logo-strip__note { margin-top: 8px; padding-inline: 16px; text-align: center; font-size: 12px; line-height: 18px; font-weight: 500; color: #333; }
@media (min-width: 768px) {
  .logo-strip { margin-inline: 10px; }
  .logo-strip__list { gap: 16px; }
  .logo-strip li { width: 150px; height: 100px; }
  .logo-strip__note { margin-top: 16px; }
}

/* ---------- branding movie ---------- */
.movie { padding: 100px 16px; }
.movie__frame { display: block; position: relative; width: 355px; height: 202px; margin: 0 auto; }
.movie__frame::before {
  content: ""; position: absolute; left: 5px; top: 5px; width: 350px; height: 197px; border-radius: 8px;
  background: var(--grad-movie);
}
.movie__frame iframe { display: block; position: relative; width: 350px; height: 197px; border: 0; border-radius: 8px; }
/* 枠は x=17.5 の半端位置。Chrome は画像を整数 px に寄せて描くため translate で Figma と同じ 17.5 に戻す（A/B: 4.6%→0.005%） */
@media (max-width: 767px) { .movie__frame { translate: -0.5px 0; } }
.movie__copy {
  width: 305px; margin: 20px auto 0;
  font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500;
  font-size: 22px; line-height: 30px; white-space: nowrap;
}
:root {
  --grad-movie: linear-gradient(90deg, #6F93FE 0%, #9098FE 20%, #B89FFF 40%, #E1A5FE 60%, #F4ACBF 80%, #FEB368 100%);
  --grad-news: linear-gradient(90deg, #FC6B33 0%, #E19424 12.5%, #84B342 25%, #32C66A 37.5%, #16A5BC 50%, #018CFB 62.5%, #018DFC 100%);
}
@media (min-width: 768px) {
  .movie { padding: 0; }
  .movie__inner { width: min(1100px, calc(100% - 172px)); margin-left: max(86px, calc(50% - 460px)); }
  .movie__frame { width: 1010px; height: 571px; margin: 0 0 0 auto; max-width: 100%; }
  .movie__frame::before { left: 10px; top: 10px; width: calc(100% - 10px); height: auto; aspect-ratio: 1000 / 561; border-radius: 16px; }
  .movie__frame iframe { width: calc(100% - 10px); height: auto; aspect-ratio: 1000 / 562; border-radius: 16px; }
  .movie__copy { width: 692px; margin: 40px 0 0 auto; font-size: 50px; line-height: 80px; }
}

/* ---------- SVG の見出し ----------
   Figma で「svg_」と名付けられた見出しは、Figma が書き出した SVG（文字はアウトライン化済み）を見出しの中に置く。
   幅と位置の補正は見出しの font-size 基準（em）なので、既存の可変の字の大きさにそのまま追従する。
   --mt / --mb で、元の文字の行の高さ（後ろの要素の位置）を保つ */
.svg-head { display: block; max-width: none; width: var(--w); height: auto; margin: var(--mt, 0) 0 var(--mb, 0) var(--ml, 0); }
@media (max-width: 767px) {
  .svg-head { width: var(--w-sp); margin: var(--mt-sp, 0) 0 var(--mb-sp, 0) var(--ml-sp, 0); }
}

/* ---------- NEWS ---------- */
.news__list { padding: 0 16px; margin-top: 25px; }
.news__list li { position: relative; padding: 20px 0; }
/* 区切り線は Figma（v1.7）の Line と同じく行の境目の中央（1px 線の中心が境目）に置く */
.news__list li::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.5px; height: 1px;
  background: var(--grad-news);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 4px);
          mask: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 4px);
}
.news__item { display: flex; flex-direction: column; gap: 8px; }
.news__date { font-size: 12px; line-height: 18px; }
.news__title { font-size: 14px; line-height: 21px; }
a.news__item .news__title { text-decoration: underline; }
@media (min-width: 768px) {
  .news__list { padding: 0 max(86px, calc(50% - 634px)); margin-top: 20px; }
  .news__list li { padding: 35px 30px; }
  .news__item { flex-direction: row; gap: 8px; width: 768px; max-width: 100%; }
  .news__date { flex: none; width: 250px; font-size: 16px; line-height: 26px; }
  .news__title { flex: 1; font-size: 16px; line-height: 26px; }
}

/* ---------- download ---------- */
.download { padding: 0 16px; }
.download__box { position: relative; z-index: 0; padding: 44px 20px; height: 552.45px; }
/* 背景 SVG は preserveAspectRatio="none" を付けて複製済み。390 / 1440 では等倍、他の幅では箱いっぱいに伸縮する */
.download__bg { position: absolute; z-index: -1; left: 0; top: 0; width: calc(100% + 2px); height: 553px; max-width: none; }
.download__inner { display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 10px; }
.download__inner h2 { font-size: 22px; line-height: 35px; font-weight: 700; }
.download__card {
  display: flex; flex-direction: column; align-items: center; gap: 30px;
  width: 100%; padding: 30px 40px; background: #fff;
}
.download__text { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; }
.download__text h3 { height: 23px; font-size: 14px; line-height: 22.4px; font-weight: 700; }
.download__text p { align-self: stretch; font-size: 10px; line-height: 16px; }
.download__text img { width: 218px; height: 108.45px; object-fit: contain; }
.download .btn-line { margin: 0; }
@media (min-width: 768px) {
  .download { padding: 0 max(86px, calc(50% - 634px)); }
  .download__box { height: 669px; padding: 44px 24px; }
  .download__bg { width: 100%; height: 669px; }
  .download__card { width: 580px; max-width: 100%; }
  .download__text h3 { height: auto; font-size: 18px; line-height: 29px; }
  .download__text p { font-size: 12px; line-height: 19px; text-align: center; }
  .download__text img { width: 500px; height: 249px; }
  .download .btn-line { height: 40px; }
}

/* ---------- about (Wellulu / ECOTONE) ---------- */
.about { padding: 0 16px; }
.about__box {
  display: flex; flex-direction: column; align-items: center; gap: 40px;
  padding: 20px 20px 32px; border-radius: 20px; background: #F6F6F6;
}
.about__img { width: 318px; height: 225px; margin-bottom: -0.89px; }
.about__text { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; width: 100%; }
.about__text > * { align-self: stretch; }
.about__head { display: flex; flex-direction: column; gap: 6px; }
.about__kicker { font-size: 12px; line-height: 17px; font-weight: 700; }
.about__title { min-height: 35px; font-size: 24px; line-height: 34.5px; font-weight: 700; }
.about__desc { font-size: 14px; line-height: 25.2px; }
.about--ecotone .about__desc { min-height: 101px; }
.about__link { align-self: flex-end !important; display: block; width: 50px; height: 50px; }
@media (min-width: 768px) {
  .about { padding: 0 max(86px, calc(50% - 634px)); }
  .about__box { flex-direction: row-reverse; justify-content: center; height: 388px; padding: 46px 80px; }
  .about__img { flex: none; width: 420px; height: 296px; margin: 0; }
  .about__text { width: 510px; align-items: flex-start; gap: 28px; }
  .about__title { min-height: 0; font-size: 32px; line-height: 48px; }
  .about--ecotone .about__desc { min-height: 0; }
  /* 510px 幅に 1 行ちょうど（余り約 1px）。字幅がわずかに広い Safari で 1 字早く折り返すので、ECOTONE の箱だけ右へ 4px 広げる（左揃えで見た目は変わらない。Wellulu の説明文は余りが大きく、広げると Chrome で 1 字多く入ってしまう） */
  .about__desc { font-size: 16px; line-height: 30px; }
  .about--ecotone .about__desc { margin-right: -4px; }
  .about__link { align-self: flex-start !important; }
}

/* ---------- CTA buttons ---------- */
.cta-btn {
  position: relative;
  display: flex; align-items: center;
  width: 300px; height: 55px; padding: 0 16px 0 25px;
  border-radius: 8px; box-shadow: 3px 3px 0 #666;
  color: #fff; font-size: 18px; line-height: 36px; font-weight: 700;
}
.cta-btn__label { display: block; position: relative; top: -1.5px; translate: 0 0.5px; width: 259px; text-align: center; white-space: nowrap; } /* SP は Figma が 1px 上（実測。top は整数に丸められるので translate と併用） */
.cta-btn__corner img, .cta-btn__arrow img { width: 100%; height: 100%; }
.cta-btn__corner { position: absolute; left: 264px; top: 19px; width: 32px; height: 32px; }
.cta-btn__arrow { position: absolute; left: 282.35px; top: 37.5px; width: 9px; height: 8px; }
.cta-btn--company { background: #E54E4E; }
.cta-btn--seeker { background: #386CCD; }
.cta-btn--check { background: #FF7312; }
@media (min-width: 768px) and (hover: hover) {
  .cta-btn:hover, .btn-line:hover { opacity: .8; }
}
/* Figma 上は rotate -180° 表記だが実体は左右反転のため、外接矩形の上端は元の y のまま */
.cta-btn__spark { position: absolute; left: 303px; top: -22px; width: 26px; height: 22px; max-width: none; }
@media (min-width: 768px) {
  .cta-btn { width: 410px; height: 80px; padding: 0 16px 0 0; justify-content: center; border-radius: 16px; box-shadow: 6px 6px 0 #666; font-size: 24px; line-height: 36px; }
  .cta-btn__label { top: 0; translate: none; width: auto; }
  .cta-btn--seeker { justify-content: flex-start; padding-left: 40px; }
  .cta-btn__corner { left: 352px; top: 22px; width: 50px; height: 50px; }
  .cta-btn__arrow { left: 375px; top: 48px; width: 22px; height: 20px; }
  .cta-btn__spark { left: 396.56px; top: -28px; width: 44px; height: 37px; }
}

/* ---------- footer ---------- */
.site-footer { padding: 32px 40px; box-shadow: inset 0 1px 0 #333; }
.site-footer__links { display: flex; flex-direction: column; gap: 8px; }
.site-footer__links a { display: flex; align-items: center; height: 44px; font-size: 13px; line-height: 20px; color: #333; }
.site-footer__copy {
  margin-top: 24px; padding-top: 1px; box-shadow: inset 0 1px 0 #333;
  font-size: 10px; line-height: 18px; color: #333;
}
@media (min-width: 768px) {
  .site-footer { display: flex; justify-content: space-between; align-items: center; height: 86px; padding: 24px 32px 34px; box-shadow: none; }
  .site-footer__links { flex-direction: row; gap: 0; }
  /* Figma は文字幅を整数に切り上げて並べるため、リンク幅は Figma の値（--w）で固定する */
  .site-footer__links a { width: var(--w, auto); height: 28px; padding: 0 16px; font-size: 14px; line-height: 28px; box-shadow: inset 1px 0 0 #333; }
  .site-footer__links li:last-child a { box-shadow: inset 1px 0 0 #333, inset -1px 0 0 #333; }
  .site-footer__copy { margin: 0; padding: 0; box-shadow: none; font-size: 12px; line-height: 18px; }
}

/* ---------- SP 下部固定 CTA ---------- */
.sp-cta-bar {
  position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
  height: 145px; padding-top: 8px;
  background: #fff; text-align: center;
}
.sp-cta-bar::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
  background: var(--grad-bar, linear-gradient(90deg, #DCF2FA 0%, #C9A8DC 50%, #AEF8D1 100%));
}
.sp-cta-bar__lead { font-size: 14px; line-height: 24px; font-weight: 700; }
.sp-cta-bar__lead strong { display: block; color: #FF7312; }
.sp-cta-bar__lead b { font-size: 20px; color: #FF7312; }
.sp-cta-bar__lead > span { display: block; height: 24px; } /* 字サイズ混在でも行の箱は 24（.cta-lead と同じ考え方） */
.sp-cta-bar__btns { display: flex; justify-content: center; gap: 16px; padding: 8px 0; }
.sp-cta-bar__btns a {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  width: 180px; height: 44px; border-radius: 8px; box-shadow: 3px 3px 0 #666;
  font-size: 12px; line-height: 24px; font-weight: 700; color: #fff;
}
.sp-cta-bar__btns .is-company { background: #E54E4E; }
.sp-cta-bar__btns .is-seeker { background: #386CCD; justify-content: flex-start; padding-left: 10px; }
.sp-cta-bar__btns .is-check { background: #FF7312; }
.sp-cta-bar__corner { position: absolute; left: 157px; top: 21px; width: 20px; height: 20px; }
.sp-cta-bar__arrow { position: absolute; left: 167.7px; top: 32.72px; width: 6px; height: 5px; }
@media (max-width: 767px) {
  body.has-cta-bar { padding-bottom: 144.32px; } /* 2026-10-17 版: 下部バーが本文の 0.68px 上に重なる位置へ */
}

/* ---------- intro（経営者の想いと、人の想いを、相性でつなぐ。） ---------- */
.intro { padding: 0 16px; }
.intro__lead { display: flex; flex-direction: column; gap: 40px; }
.intro__lead h2 {
  font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500;
  font-size: 28px; line-height: 40px; white-space: nowrap;
}
.intro__lead p { font-size: 14px; line-height: 28px; }
.intro__fig { display: flex; flex-direction: column; align-items: center; gap: 40px; margin-top: 40px; }
.intro__service { width: 358px; height: 151px; }
.intro__indicators { width: 358px; height: 120px; }
.intro__defs { display: flex; flex-direction: column; gap: 40px; align-self: stretch; }
.intro__def h3 {
  display: flex; align-items: center;
  padding-bottom: 8px; border-bottom: 1px solid #000;
  font-weight: 500; white-space: nowrap;
}
.intro__def h3 small { font-size: 12px; line-height: 24px; }
.intro__def h3 span { font-size: 16px; line-height: 26px; }
.intro__def p { margin-top: 16px; font-size: 12px; line-height: 24px; }

@media (min-width: 768px) {
  .intro { width: min(1100px, calc(100% - 172px)); margin: 50px 0 0 max(86px, calc(50% - 460px)); padding: 0; }
  .intro__lead { flex-direction: row; gap: 80px; }
  .intro__lead h2 { flex: none; width: 388px; font-size: 50px; line-height: 80px; }
  .intro__lead p { width: 531px; padding: 24px 0; white-space: nowrap; }
  .intro__fig { margin-top: 100px; }
  .intro__service { width: 980px; height: 412px; }
  .intro__indicators { width: 1000px; height: 333px; }
  .intro__defs { flex-direction: row; justify-content: space-between; align-items: flex-start; padding-left: 80px; }
  .intro__def:nth-child(1) { width: 498px; }
  .intro__def:nth-child(2) { width: 470px; }
  .intro__def p { font-size: 10px; line-height: 20px; white-space: nowrap; }
}

/* ---------- check15（働く環境を、15指標でチェック） ---------- */
.check15 {
  margin-top: 100px;
  height: 1171px; padding: 40px 0;
  background: #F2F7F5;
  overflow: hidden;
}
.check15__main { display: grid; grid-template-areas: "head" "lead" "img" "know"; }
.check15__head { grid-area: head; padding: 0 20px; }
.check15__head h2 {
  font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500;
  font-size: 28px; line-height: 40px; white-space: nowrap;
  height: 80px;
}
/* Figma は「15」だけ字サイズが大きく、2 行目が少し上に詰まる（テキスト枠 158 = 80 + 78） */
.check15__l2 { display: block; position: relative; top: -1px; }
.check15__num { font-size: 30px; position: relative; } /* SP 30px / PC 56px（A/B 実測） */
/* 2026-10-17 版: 見出しの下に説明文（PC は「について、」の後で改行、SP は 358 幅で自動折り返し） */
.check15__lead { grid-area: lead; margin: 40px 16px 0; font-size: 14px; line-height: 28px; font-weight: 500; }
.check15__img { grid-area: img; margin-top: 20px; }
.check15__img img { width: 390px; height: 297px; }
.check15__know { grid-area: know; width: 300px; margin: 20px auto 0; }
.check15__know h3 {
  padding: 8px 0; border-bottom: 1px solid #000;
  text-align: center; font-size: 14px; line-height: 21px; font-weight: 500;
}
.check15__know ul { width: 194px; margin: 16px auto 0; padding-left: 8px; font-size: 12px; line-height: 24px; white-space: nowrap; }

.check15__cta {
  width: 358px; margin: 40px auto 0; padding: 40px 0;
  background: #fff;
  border-top: 4px solid; border-bottom: 4px solid;
  border-image: var(--grad-cta-line) 1;
}
:root { --grad-cta-line: linear-gradient(90deg, #DCF2FA 0%, #C9A8DC 50%, #AEF8D1 100%); }
.cta-lead { text-align: center; font-size: 20px; line-height: 35px; white-space: nowrap; }
.cta-lead strong { display: block; color: #FF7312; font-size: 24px; font-weight: 700; }
.cta-lead b { color: #FF7312; font-size: 30px; font-weight: 700; }
/* Figma は行内で最大の字サイズ（30px）を基準に基準線を置く。CSS も同じ計算になるよう
   「無料」に行高 35 を持たせ、行の箱だけ 35 に固定する */
.cta-lead > span { display: block; height: 35px; }
.cta-lead i { font-style: normal; font-weight: 700; }
/* 2026-10-16 版: ボタンの外枠（装飾線の分 22px を上に含む 326x77）を縦に並べる。左余白 24 は Figma どおり */
.check15__btns { display: flex; flex-direction: column; align-items: center; gap: 32px; margin-top: 16px; padding-left: 24px; }
.check15__btn { position: relative; width: 326px; height: 77px; padding-top: 22px; }
.check15__spark { position: absolute; left: 300px; top: 0; width: 26px; height: 22px; }
.check15__spark img { width: 100%; height: 100%; }
.cta-btn__corner img { display: block; }

@media (min-width: 768px) {
  .check15 {
    height: 927px; padding: 40px 16px;
    background: linear-gradient(53.9deg, #D1F4E6 0%, #F4F7F6 100%); /* Figma PNG から当てはめ（残差 平均 0.36 階調） */
  }
  .check15__inner { width: min(1100px, 100%); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 40px; }
  .check15__main {
    width: 100%;
    grid-template-areas: "head img" "lead img" "know img";
    grid-template-columns: 545px minmax(0, 555px);
    grid-template-rows: auto auto 1fr;
    height: 547px;
  }
  .check15__head { padding: 40px 0 0; }
  .check15__head h2 { height: 158px; font-size: 50px; line-height: 80px; }
  .check15__l2 { top: -2.5px; }
  .check15__num { font-size: 56px; }
  .check15__img { margin: 0; padding-top: 40px; }
  .check15__lead { width: 531px; margin: 60px 0 0; }
  .check15__img img { width: 555px; height: 421.8px; }
  .check15__know { margin: 60px 0 0; }
  .check15__know h3 { font-size: 20px; line-height: 28px; }
  .check15__know ul { width: 225px; margin: 16px 0 0; font-size: 14px; line-height: 28px; }
  /* 2026-10-16 版: CTA は白枠＋上下 4px のグラデ線の箱（SP と同じ）。文言は個別のテキストを下揃えで並べる */
  .check15__cta { width: 100%; margin: 0; padding: 40px 0; display: flex; flex-direction: column; align-items: center; gap: 22px; }
  .cta-lead { display: flex; justify-content: center; align-items: flex-end; }
  .check15__cta .cta-lead { padding-left: 20px; } /* 2026-10-17 版: 行の左に 20px の余白 */
  .cta-lead strong { display: inline; font-size: 30px; }
  .cta-lead > span.cta-lead__rest { display: flex; align-items: flex-end; gap: 8px; }
  .cta-lead__free { display: flex; align-items: flex-end; }
  .cta-lead__free > span { min-width: 60px; font-size: 20px; line-height: 20px; } /* Figma は文字幅を整数に切り上げ（60） */
  .cta-lead__free b { margin-left: -3px; line-height: 35px; }
  .cta-lead__rest > i { display: none; }
  .cta-lead__tail { font-size: 20px; line-height: 22px; }
  .check15__btns { flex-direction: row; justify-content: center; align-self: stretch; gap: 20px; margin: 0; padding: 0; }
  .check15__btn { width: 470px; height: 115px; padding: 28px 0 0 30px; }
  .check15__spark { left: 426.56px; width: 44px; height: 37px; }
}
@media (min-width: 1440px) {
  .check15 > .deco.pc { left: auto; right: 0; }
}

/* ---------- Figma との文字の縦位置差の補正 ----------
   Noto Sans JP の縦位置は、字サイズと行高の組み合わせによって Figma と 1〜1.5px ずれる。
   nudge.py（要素ごとに縦位置を総当たりで A/B）で、差分が明確に減るものだけを当てている。
   レイアウト寸法は変えない（relative のずらしのみ）。 */
.cta-lead strong { position: relative; top: -1.5px; }
.intro__def h3 span { position: relative; top: -1.5px; }
.sec-head__en { position: relative; top: 1px; }
.sec-head__ja { position: relative; top: -1px; }
.about__kicker { position: relative; top: -1px; translate: 0 -0.5px; }
.about__title { translate: 0 -0.5px; }
.about__desc { position: relative; top: 0.5px; translate: 0 -0.5px; } /* top と translate で描画経路が変わり Figma に近づく（A/B: 2.88%→1.89%） */
.site-footer__links a { translate: 0 -0.5px; }
@media (min-width: 768px) {
  .fv__copy p { position: relative; top: 0.5px; }
  .news__title { position: relative; top: -1.5px; }
  .download__text p { position: relative; top: -1.5px; }
  .about__kicker, .about__title, .site-footer__links a { top: 0; translate: none; }
  .about__title, .about__desc { position: relative; top: -1px; }
  .about__desc { translate: none; }
  /* Wellulu 枠は中身が y=60.5 の半端位置。top は整数に丸められるので translate で 0.5px 単位を当てる */
  .about--wellulu .about__kicker, .about--wellulu .about__title { translate: 0 -0.5px; }
  .about--wellulu .about__desc { translate: 0 0.5px; }
  .sec-head__en, .sec-head__ja { top: 0; }
}

/* ---------- 中間幅（Figma の 390 / 1440 以外）での崩れ防止 ----------
   1440 と 390 の見た目は変えない。その間・その外側の幅で、はみ出し・欠けが出ないようにする。 */
.intro__service, .intro__indicators, .check15__img img, .download__text img, .about__img { max-width: 100%; }
@media (max-width: 389px) {
  .movie__copy { width: auto; font-size: 5.64vw; }
  .movie__frame { width: 100%; height: auto; }
  .movie__frame::before { width: calc(100% - 5px); height: auto; aspect-ratio: 350 / 197; }
  .movie__frame iframe { width: calc(100% - 5px); height: auto; aspect-ratio: 350 / 197; }
  .check15__cta { width: auto; margin-left: 16px; margin-right: 16px; }
  .check15__btns { padding-left: 0; }
  .check15__btn { width: min(326px, 100%); }
  .check15__btn .cta-btn { width: calc(100% - 26px); }
  .check15__spark { left: auto; right: 0; }
  .check15__img img { width: 100%; height: auto; }
  .cta-btn { width: 100%; max-width: 300px; }
  .cta-btn__corner { left: auto; right: 4px; }
  .cta-btn__arrow { left: auto; right: 8.65px; }
  .cta-btn__label { width: auto; flex: 1; }
  .sp-cta-bar__btns { gap: 8px; padding-left: 8px; padding-right: 8px; }
  .sp-cta-bar__btns a { flex: 1; width: auto; font-size: 3.08vw; }
  .sp-cta-bar__corner { left: auto; right: 3px; }
  .sp-cta-bar__arrow { left: auto; right: 6.3px; }
  .sec-head__en { min-width: 0; font-size: 6.92vw; }
  .cta-btn { font-size: 4.6vw; }
}
@media (min-width: 768px) and (max-width: 1439px) {
  .fv__copy h1 { font-size: 5.556vw; line-height: 1.5; }
  .movie__copy { width: auto; max-width: 692px; font-size: 3.472vw; line-height: 1.6; }
  .intro__service, .intro__indicators, .check15__img img, .download__text img, .about__img { height: auto; }
  .check15 { height: auto; min-height: 927px; }
  .check15__main { height: auto; grid-template-columns: minmax(0, 545px) minmax(0, 555px); column-gap: 24px; }
  .check15__lead { width: auto; max-width: 531px; }
  .check15__lead br { display: none; } /* 1440 用の改行は、幅が狭いと短い行が残るので外す */
  .check15__btns { flex-wrap: wrap; justify-content: center; }
  .intro__defs { padding-left: clamp(0px, calc(100% - 1020px), 80px); } /* 1200〜1439 で右端がはみ出さないよう左余白を縮める（1440 で 80） */
  .check15__btn { width: auto; max-width: 470px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  /* ナビが収まらない幅では SP と同じメニューボタンに切り替える */
  .site-header__nav { display: none; }
  .site-header__menu { display: grid; }
  .intro__lead { flex-direction: column; gap: 40px; }
  .intro__lead p, .intro__def p { width: auto; white-space: normal; }
  .intro__defs { flex-direction: column; align-items: stretch; gap: 40px; padding-left: 0; }
  .intro__def:nth-child(n) { width: auto; }
  .about__box { flex-direction: column; height: auto; padding: 46px 40px; }
  .about__text { width: 100%; }
  .site-footer { flex-wrap: wrap; height: auto; gap: 16px; }
  .site-footer__links { flex-wrap: wrap; row-gap: 8px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- ホバー（Figma の COMMON/Parts/btn/text-14 の hover 変種: 文字色 #959595） ---------- */
@media (hover: hover) {
  .site-header__nav a:hover, .site-footer__links a:hover { color: #959595; }
}

/* =====================================================================
   2026-10-16 追加: 動き・固定表示・アンカー
   ===================================================================== */

/* ---------- 滑らかスクロールとアンカーの止まる位置 ---------- */
html { scroll-behavior: smooth; }
/* Lenis 1.3.1 の CSS（dist/lenis.css と同じ）。Lenis が読み込めないときは上の scroll-behavior で滑らかにする */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }
[id] { scroll-margin-top: 64px; }            /* SP: 固定ヘッダー 54px の下 */
@media (min-width: 768px) {
  [id] { scroll-margin-top: 110px; }         /* PC: 縁 10px＋ヘッダー 92px の下 */
}

/* ---------- SP メニュー項目のホバー（Figma の menu-btn hover 変種: 不透明度 0.8） ---------- */
@media (hover: hover) {
  .sp-menu__nav a:hover { opacity: .8; }
}

/* ---------- VIEW ALL / DOWNLOAD: 1 文字ずつ跳ねる（Wellulu の .btn と同じ動き） ---------- */
.btn-line__txt { display: inline-flex; position: relative; top: -1px; } /* inline-flex にすると基準線が 1px 下がるので戻す（A/B: 帯 0.37%→0.001%） */
.btn-line__txt span { display: inline-block; }
@keyframes up40 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-40%); }
}
@media (hover: hover) {
  .btn-line:hover .btn-line__txt span { animation: up40 .3s ease-in-out; }
  .btn-line:hover .btn-line__txt span:nth-child(1) { animation-delay: .2s; }
  .btn-line:hover .btn-line__txt span:nth-child(2) { animation-delay: .3s; }
  .btn-line:hover .btn-line__txt span:nth-child(3) { animation-delay: .4s; }
  .btn-line:hover .btn-line__txt span:nth-child(4) { animation-delay: .5s; }
  .btn-line:hover .btn-line__txt span:nth-child(5) { animation-delay: .6s; }
  .btn-line:hover .btn-line__txt span:nth-child(6) { animation-delay: .7s; }
  .btn-line:hover .btn-line__txt span:nth-child(7) { animation-delay: .8s; }
  .btn-line:hover .btn-line__txt span:nth-child(8) { animation-delay: .9s; }
}

/* ---------- EXPERT のスライダー（Swiper 8.4.7。Wellulu の FEATURES と同じ動き。設定は common.js） ----------
   左右に無限ループ（矢印は常に押せる）。JS が見えている記事をまとめて 1 スライド（.carousel__group）にし、1 スライドずつ送る:
   PC は 4 記事を横 1 列（768〜1023px は 2 記事）、SP は 2 段×2 列（1,2 / 3,4）の 4 記事。
   Swiper が動かないときは .cards の一覧表示のまま（全記事が見える） */
.carousel .swiper-initialized .swiper-wrapper { display: flex; gap: 0; }
.carousel .swiper-slide { height: auto; }
.carousel__group { display: flex; }
.carousel__group > ul { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); }
@media (max-width: 1023px) {
  .carousel__group > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  /* SP のカードは中身が 1.25px ずつ左右にはみ出す（Figma どおり）ので、その分だけ見える範囲を広げる
     （overflow-clip-margin は Safari が未対応のため clip-path で切る。画面外へのはみ出しは main の overflow-x: clip が止める） */
  .carousel .swiper { overflow: visible; clip-path: inset(0 -1.25px); }
  /* 段の高さは全ページでそろえる（送る途中で 2 段目がずれないよう、組の段を subgrid で共有する） */
  .carousel .swiper-initialized .swiper-wrapper { display: grid; grid-auto-flow: column; grid-template: auto auto / none; row-gap: 30px; }
  .carousel__group, .carousel__group > ul { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
  /* SP のカード画像は 1/4 px 位置（左列 -0.25 / 右列 +0.25。.cards の同じ補正を 2 列の組に当てる） */
  .carousel__group li:nth-child(odd) .card__img { translate: -0.25px 0; }
  .carousel__group li:nth-child(even) .card__img { translate: 0.25px 0; }
}
/* Swiper の移動用レイヤー上では、SP の 0.25px 寄せた画像の端がはみ出して描かれるため、枠で切る（変更前と画素単位で一致） */
.carousel .card__link picture { overflow: hidden; }
.carousel__nav { display: flex; justify-content: center; gap: 18px; margin-top: 50px; }
.carousel__nav button { display: block; }
.carousel__nav img { width: auto; height: 44px; }
@media (min-width: 768px) {
  .carousel__nav { gap: 60px; margin-top: 60px; }
  .carousel__nav img { height: 53px; }
}
@media (hover: hover) {
  /* 記事カード（EXPERT・Wellulu／WelluluWORK）は Wellulu の card.css・default.css と同じく薄く透ける:
     カード 0.7（0.3 秒）とリンク 0.8（0.5 秒）が重なる。transition は hover 中だけ（カーソルを離すとすぐ戻る）。
     画像の拡大は Wellulu に無いので付けない */
  .card:hover { opacity: .7; transition: opacity .3s; }
  .card__link:hover { opacity: .8; transition: .5s; }
  .carousel__nav button:hover { transform: scale(1.2); transition: transform .3s ease, opacity .3s ease; }
}

/* 複製はスクロール時だけ追加し、境界にもロゴ間と同じ余白を付ける。 */
.logo-strip.is-scrolling .logo-strip__track { margin-inline: 0; animation: logo-flow var(--logo-duration) linear infinite; }
.logo-strip.is-scrolling .logo-strip__set { padding-right: 8px; }
.logo-strip:has(a:focus-visible) .logo-strip__track { animation: none; }
@keyframes logo-flow { to { transform: translateX(-50%); } }
@media (min-width: 768px) {
  .logo-strip.is-scrolling .logo-strip__set { padding-right: 16px; }
}

/* ---------- オープニング（ECOTONE の TOP を参考。CSS だけで動き、必ず消える） ----------
   0.3 秒後から 0.6 秒でロゴが浮き上がる → 2.2 秒からロゴが 1.2 倍に拡大しながら 1.2 秒で消える
   → 白地は 2.6 秒から 1.6 秒で消える（合計約 4.2 秒） */
.splash {
  position: fixed; z-index: 1000; inset: 0;
  display: grid; place-items: center;
  background: #fff;
  animation: splash-bg 1.6s 2.6s forwards;
}
.splash img {
  width: min(685px, 66.66%); height: auto; /* ECOTONE と同じ高さ 200px（685x200）。上限も ECOTONE と同じ画面幅の 66.66% */
  animation: splash-in .6s .3s both, splash-out 1.2s 2.2s forwards;
}
@keyframes splash-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes splash-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(1.2); } }
@keyframes splash-bg { to { opacity: 0; visibility: hidden; } }