/**
 * File: main.css
 * Usage: トップページ＋共通ヘッダー/フッターのスタイル（モバイルファースト）。
 * Design: figma「まーける様」top
*/

/* ================================================
  デザイントークン
================================================ */
:root {
  --c-dark: #231815;
  --c-cream: #f5f5f5;
  --c-text: #231815;
  --c-muted: #8a817c;
  --c-line: #06c755;
  --c-border: #eaeaea;
  --c-soft: #f5f5f5;
  --font-en: 'Figtree', Arial, Helvetica, sans-serif;
  --font-jp: 'NotoSansJp', sans-serif;
  /* base.css の body と同じ。英字フォントを継承した和文を明示的に戻す時に使う */
  --maxw: 1080px;
  --radius: 12px;
  --sec-pad: 56px;
  --header-h: 64px;
}

/* ================================================
  共通エレメント
================================================ */
.el_brandRu {
  display: block;
  width: auto;
  height: 100%;
  color: inherit;
}

/* セクション見出し（ラベル + 英字大見出し） */
.bl_secHead {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bl_secHead__center {
  align-items: center;
  text-align: center;
}

.bl_secHead_label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.el_dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3px solid currentColor;
  flex: none;
}

.bl_secHead_en {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(2.5rem, 12vw, 3.5rem);
  line-height: 1;
  letter-spacing: 0.01em;
}

.bl_secHead_sub {
  margin-top: 12px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.7;
}

/* もっと見るボタン（ピル + 矢印） */
.el_moreBtn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  min-width: 180px;
  padding: 20px;
  border: 1px solid var(--c-dark);
  border-radius: 8px;
  font-weight: 400;
  color: var(--c-dark);
  transition: background 0.3s ease, color 0.3s ease;
}

/* テキスト（可変幅）と矢印（矢印幅のみ）を別コンテナに */
.el_moreBtn_label {
  flex: 1;
  text-align: center;
}

.el_moreBtn_arrow {
  flex: none;
  position: relative;
  width: 20px;
  height: 1.5px;
  background: currentColor;
}

.el_moreBtn_arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.el_moreBtn:hover {
  background: var(--c-dark);
  color: #fff;
}

/* 一覧へ戻る系のボタン（記事一覧・事業一覧など）は矢印を逆向き（←）にする */
.el_moreBtn__reverse .el_moreBtn_arrow {
  transform: scaleX(-1);
}

.el_moreBtn__onDark {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--c-cream);
}

.el_moreBtn__onDark:hover {
  background: #fff;
  color: var(--c-dark);
}

/* タグ・カテゴリー */
.el_tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid currentColor;
  border-radius: 100px;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.el_cat {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  background: #d9d9d9;
  border-radius: 4px;
  font-size: 0.75rem;
  /* 12px */
  letter-spacing: 0.03em;
  color: var(--c-dark);
}

/* スライダーのドット */
.bl_dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.el_dot2 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(35, 24, 21, 0.2);
}

.el_dot2.is_active {
  background: var(--c-dark);
}

.hp_dark .el_dot2 {
  background: rgba(255, 255, 255, 0.3);
}

.hp_dark .el_dot2.is_active {
  background: #fff;
}

/* ================================================
  スクロールで淡く表示（.js_fade）
  高さの 10svh ぶんが画面に入ったら is_inview が付く（index.js）。
  JS が動く環境（html.js_on）でだけ隠す＝JS無効でも内容は見える。
================================================ */
.js_on .js_fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.js_on .js_fade.is_inview {
  opacity: 1;
  /* 表示後は transform を消す（transform が残ると position: fixed の
     子要素の基準がずれるため） */
  transform: none;
}

/* モーション低減設定：アニメーションせず最初から表示 */
@media (prefers-reduced-motion: reduce) {
  .js_on .js_fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* 横スクロール（モバイルのカルーセル） */
.js_snap {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.js_snap::-webkit-scrollbar {
  display: none;
}

.js_snap>* {
  scroll-snap-align: start;
  flex: 0 0 82%;
}

/* ================================================
  ヘッダー（base.css を上書きしてホワイトに）
================================================ */
.ly_header {
  background: transparent;
  height: var(--header-h);
  padding: 0;
}

/* SP: ヘッダーは浮遊するピル。展開しても下を押し下げないよう absolute */
.bl_headerCont {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 0;
  right: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  padding: 8px 20px;
  background: var(--c-soft);
  border-radius: 100px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(35, 24, 21, 0.1);
  color: var(--c-dark);
  transition: border-radius 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.ly_header.is_menuOpen .bl_headerCont {
  border-radius: 24px;
}

/* メニュー展開中は背面のページをスクロールさせない（html に .hp_scrollLock）。
   ただし html を overflow:hidden にするとスクロールコンテナが無くなり
   position: sticky が効かなくなる＝スクロール位置によってはヘッダーごと
   画面外に取り残されてしまう。そのため展開中だけ fixed に切り替えて画面上部に固定する。 */
.ly_header.is_menuOpen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* トップ行（ロゴ + ハンバーガー） */
.bl_headerBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
}

/* ロゴ（左） */
/* トップページのみ、ロゴを包む h1。見た目に影響を与えないための透過コンテナ
   （フォント指定は不要＝中のテキストは .hp_visuallyHidden で視覚的に非表示） */
.bl_header_logoTtl {
  display: flex;
  align-items: center;
}

.bl_header_logo {
  display: flex;
  align-items: center;
  padding: 0;
  color: var(--c-dark);
}

.bl_header_logo svg {
  display: block;
  width: auto;
  height: 30px;
}

/* ハンバーガー（2本線 → ✕） */
.el_humb {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.el_humb span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--c-dark);
  border-radius: 999px;
  transition: transform 0.3s ease;
}

.ly_header.is_menuOpen .el_humb span:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}

.ly_header.is_menuOpen .el_humb span:nth-child(2) {
  transform: translateY(-4px) rotate(-45deg);
}

/* SP: 展開メニュー */
.bl_spMenu {
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s ease;
}

.ly_header.is_menuOpen .bl_spMenu {
  opacity: 1;
}

.bl_spMenu_list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 16px 0 8px;
}

.bl_spMenu_list li a {
  display: block;
  padding: 12px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--c-dark);
  transition: opacity 0.3s ease;
}

.bl_spMenu_list li a:hover {
  opacity: 0.6;
}

.bl_spMenu_line {
  margin: 8px auto 20px;
}

/* 背景オーバーレイ */
.bl_spOverlay {
  position: fixed;
  z-index: 1;
  inset: 0;
  background: rgba(35, 24, 21, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.ly_header.is_menuOpen .bl_spOverlay {
  opacity: 1;
  visibility: visible;
}

/* ナビ右グループ（pill + LINEボタン）はPCのみ表示（base.css で制御） */
.bl_header_nav {
  align-items: center;
  gap: 20px;
}

/* ナビピル（動く部分） */
.bl_header_navPill {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 32px;
  background: var(--c-soft);
  border-radius: 120px;
  -webkit-filter: drop-shadow(3px 4px 2px rgba(35, 24, 21, 0.25));
  filter: drop-shadow(3px 4px 2px rgba(35, 24, 21, 0.25));
}

/* ピル内のロゴアイコン：トップでは非表示、スクロールで右へスッと展開（トップへ戻るリンク） */
.bl_header_navPill_icon {
  flex: none;
  display: flex;
  align-items: center;
  width: 0;
  margin-right: -28px;
  /* 閉じている間はピルの gap(28px) を打ち消す */
  opacity: 0;
  overflow: hidden;
  transition:
    width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    margin-right 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s ease 0.05s;
}

.bl_header_navPill_icon img {
  flex: none;
  /* 展開途中で潰れないように（クリップで見せる） */
  display: block;
  width: auto;
  height: 30px;
}

.ly_header.is_scrolled .bl_header_navPill_icon {
  width: 18px;
  margin-right: 0;
  opacity: 1;
}

/* スクロール時はトップのロゴを隠す（ブランドはピル内アイコンへ。PCのみ） */
.bl_header_logo {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.bl_header_nav_ul {
  display: flex;
  align-items: center;
  gap: 28px;
}

.bl_header_nav_ul .bl_header_nav_ul_li a {
  padding-inline: 0;
  border-right: none;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1rem;
  color: #000;
  line-height: 1.6;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

.bl_header_nav_ul .bl_header_nav_ul_li a:hover {
  opacity: 0.6;
}

/* LINEボタン */
.el_lineBtn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 12px 22px;
  background: var(--c-line);
  color: #fff;
  font-weight: 700;
  border-radius: 50px;
  text-align: center;
  white-space: nowrap;
  -webkit-filter: drop-shadow(4px 4px 2px rgba(0, 69, 0, 0.25));
  filter: drop-shadow(4px 4px 2px rgba(0, 69, 0, 0.25));
  transition: opacity 0.3s ease;
}

.el_lineBtn:hover {
  opacity: 0.85;
}

.el_lineBtn_main {
  font-size: 1.125rem;
  line-height: 1;
}

.el_lineBtn_sub {
  font-size: 0.5rem;
  line-height: 1;
}

/* ================================================
  レイアウト共通
================================================ */
/* 横はみ出しの切り抜きは clip を使う。
   overflow-x: hidden にすると overflow-y が auto に計算され、<main> 自体が
   スクロールコンテナになってしまう。すると .js_fade の translateY(24px) が
   スクロール可能領域として扱われ、ホイール操作がページではなく <main> に
   吸われて「スクロールが一度止まる」症状が出る。
   clip はスクロールコンテナを作らないため、この問題が起きない。
   （hidden は clip 未対応ブラウザ向けのフォールバック。以下の各 main も同様） */
.ly_top {
  overflow-x: hidden;
  overflow-x: clip;
  /* FV を最上部（ヘッダーの背面）から開始させる */
  margin-top: calc(-1 * var(--header-h));
}

.ly_sec {
  padding-block: var(--sec-pad);
}

/* ================================================
  FV / Hero
================================================ */
.ly_fv {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* SP: テキストはセクション下部 */
  min-height: 100svh;
  color: var(--c-dark);
  overflow: hidden;
}

/* パーティクルアニメーションの canvas。
   position: fixed でビューポート全体に固定し、FV〜ABOUT US〜TRACK RECORD の
   背面をスクロールしても動かない「背景」として貫通表示する（各セクションの
   背景を透過にしているため、コンテンツの隙間から常に見える）。
   BUSINESS セクション（暗色・不透明な自己完結デザイン）に到達したらフェードアウトする。
   z-index は -1 とし、通常の（position指定のない）ページコンテンツより
   必ず背面に来るようにする（0 だと positioned 要素として扱われ、逆に前面に来てしまう）。 */
.bl_fv_canvas {
  position: fixed;
  inset: 0;
  /* canvas は置換要素のため、inset:0 だけでは意図通りに埋まらない
     （固有サイズ 300x150 に依存しうる）。width/height を明示して確実に埋める。 */
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.8s ease;
}

/* FV のコンテンツ幅（ly_cont は使わず FV 専用。左右 80px の余白） */
.bl_fv_body {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-inline: 20px;
}

.bl_fv {
  padding-block: 40px 48px;
}

.bl_fv_lead {
  margin-top: 24px;
  font-size: 0.875rem;
  line-height: 1.9;
  color: #555049;
}

.bl_fv_ttl {
  font-feature-settings: 'palt';
  font-size: clamp(1.5rem, 6.5vw, 2rem);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

/* タイプライター演出のカーソル（words-inc.co.jp の Typed.js 実装を参考に、
   .js_typeCursor--blink が付いている間だけ 0.7s 周期で点滅させる） */
.js_typeCursor {
  display: inline-block;
  opacity: 1;
}

.js_typeCursor.js_typeCursor--blink {
  -webkit-animation: fvTypeBlink 0.7s ease infinite;
  animation: fvTypeBlink 0.7s ease infinite;
}

@-webkit-keyframes fvTypeBlink {
  50% {
    opacity: 0;
  }
}

@keyframes fvTypeBlink {
  50% {
    opacity: 0;
  }
}

/* ================================================
  ABOUT US
================================================ */
.ly_about {
  position: relative;
  overflow: hidden;
}

.ly_about .ly_cont {
  position: relative;
  z-index: 1;
}

/* このセクションのラベルは大きめ（英字のみ） */
.bl_secHead_label__lg {
  font-family: var(--font-en);
  font-size: 1.25rem;
}

.ly_about .bl_about_ttl {
  margin-top: 16px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
}

.bl_about_txt {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 1.6em;
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--c-dark);
}

.bl_about_txt strong {
  font-weight: 700;
}

/* ================================================
  TRACK RECORD
================================================ */
/* コンテナは広め：コンテンツ実寸 1280px（padding 20px×2 込みで 1320px） */
.ly_track .ly_cont {
  max-width: 1320px;
}

.bl_track {
  position: relative;
  background: var(--c-soft);
  border-radius: 24px;
  padding: 40px 20px;
}

/* SPは見出しの下にボタン。
   ここは .bl_secHeadRow のような横並びにはできない：
   TRACK RECORD は「RECORD」だけで 187px（45px時）あり、
   ボタンと並べると 375px 幅ではカードからはみ出す。 */
.bl_track_head {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* このセクションのラベルは大きめ */
.ly_track .bl_secHead_label {
  font-size: 1.25rem;
}

.ly_track .el_dot {
  width: 18px;
  height: 18px;
  border-width: 4px;
}

.bl_track_list {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 各実績は白いカード */
.bl_track_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: #fff;
  border-radius: 4px;
  padding: 28px 16px;
  text-align: center;
}

.bl_track_item_label {
  font-size: 1.125rem;
  font-weight: 700;
}

.bl_track_item_num {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(3rem, 16vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  /* カウントアップ中の桁ブレを抑える */
}

.bl_track_item_unit {
  /* 単位は「件超」等の和文を含むため、親 .bl_track_item_num の --font-en 継承を戻す */
  font-family: var(--font-jp);
  font-size: 0.37em;
  font-weight: 800;
  letter-spacing: 0;
  margin-left: 2px;
}

.bl_track_note {
  margin-top: 12px;
  text-align: right;
  font-size: 0.75rem;
  color: var(--c-muted);
}

/* ================================================
  BUSINESS（ダーク）
================================================ */
.hp_dark {
  background: var(--c-dark);
  color: var(--c-cream);
}

.ly_business {
  border-radius: 20px;
  /* 中心ノードの波紋が角丸のダーク面からはみ出さないようにする */
  overflow: hidden;
}

.ly_business .bl_secHead {
  color: var(--c-cream);
}

.ly_business .bl_secHead_label {
  font-size: 1.125rem;
}

/* ヘッダー行（見出し + VIEW MORE） */
.bl_bizHead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

/* スライダー本体 */
.bl_bizSlider {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* 対応範囲（放射ツリー） */
.bl_radial {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1;
  margin: 0 auto;
}

.bl_radial_lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.bl_radial_line {
  stroke: rgba(255, 255, 255, 0.15);
  stroke-width: 1;
  transition: stroke 1s ease;
}

.bl_radial_line.is_active {
  stroke: #fff;
}

.bl_radial_node {
  position: absolute;
  transform: translate(-50%, -50%) scale(1);
  white-space: nowrap;
  z-index: 2;
  background-color: var(--c-dark);
  transition: color 1s ease, border-color 1s ease, box-shadow 1s ease,
    transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 中心ノード（波紋付き） */
.bl_radial_center {
  top: 78%;
  left: 10%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.4;
  color: #fff;
}

.bl_radial_center::before,
.bl_radial_center::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  transform: scale(1);
  opacity: 0;
  pointer-events: none;
}

.bl_radial_center.is_ripple::before {
  -webkit-animation: bizRipple 2.2s ease-out forwards;
  animation: bizRipple 2.2s ease-out forwards;
}

.bl_radial_center.is_ripple::after {
  -webkit-animation: bizRipple 2.2s ease-out 0.4s forwards;
  animation: bizRipple 2.2s ease-out 0.4s forwards;
}

@-webkit-keyframes bizRipple {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }

  100% {
    transform: scale(12);
    opacity: 0;
  }
}

@keyframes bizRipple {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }

  100% {
    transform: scale(12);
    opacity: 0;
  }
}

/* グループノード */
.bl_radial_group {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-weight: 700;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
}

.bl_radial_group.is_active {
  color: #fff;
  border-color: #fff;
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.4), 0 0 60px rgba(255, 255, 255, 0.15);
  transform: translate(-50%, -50%) scale(1.08);
}

/* リーフノード */
.bl_radial_leaf {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
}

.bl_radial_leaf.is_active {
  color: #fff;
  border: 1px solid #fff;
  border-radius: 100px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.35), 0 0 50px rgba(255, 255, 255, 0.12);
  transform: translate(-50%, -50%) scale(1.05);
}

/* スライド + ナビゲーション（右カラム） */
.bl_bizCol {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

/* 全スライドを同じグリッドセルに重ねる。
   高さは常に「最も高いスライド」に揃うため、切り替え時に下のナビが動かない。 */
.bl_bizSlides {
  display: grid;
  width: 100%;
  /* グリッドアイテムの初期値 min-width:auto によって、中の固定幅イラスト画像
     （.bl_bizSlide_img img）ぶんだけ縮まらなくなるのを防ぐ（Grid blowout対策） */
  min-width: 0;
}

.bl_bizSlide {
  grid-area: 1 / 1;
  align-self: start;
  width: 100%;
  min-width: 0;
  /* 同上。.bl_bizSlides に加えてアイテム自身にも指定しておく */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.bl_bizSlide.is_active {
  opacity: 1;
  visibility: visible;
}

/* 画像はPCのみ表示（SPでは非表示） */
.bl_bizSlide_img {
  display: none;
  justify-content: center;
  width: 100%;
}

.bl_bizSlide_img img {
  width: 240px;
  max-width: 100%;
  height: auto;
}

.bl_bizSlide_info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 4px;
  width: 100%;
  max-width: 348px;
}

.bl_bizSlide_ttl {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.bl_bizSlide_desc {
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: var(--c-cream);
}

/* ナビゲーション（スライド直下） */
.bl_bizNav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.bl_bizNav_arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.bl_bizNav_arrow:hover {
  opacity: 0.6;
}

.bl_bizNav_arrow svg {
  display: block;
  width: 42px;
  height: 21px;
}

.bl_bizNav_dots {
  display: flex;
  align-items: center;
  gap: 14px;
}

.el_bizDot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #d9d9d9;
  cursor: pointer;
  transition: all 0.3s ease;
}

.el_bizDot.is_active {
  background: transparent;
  box-shadow: inset 0 0 0 2px #d9d9d9;
}

/* ================================================
  WORKS / COLUMN / カードカルーセル共通
================================================ */
/* 見出し＋もっと見るボタンの行。SP・PCとも横並び（見出し左・ボタン右下揃え） */
.bl_secHeadRow {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 40px;
}

/* SPは見出しの横に収めるため、ボタンは最小幅なし・余白小さめ
   （PCではデザイン実寸に戻す） */
.bl_secHeadRow .el_moreBtn {
  min-width: 0;
  gap: 8px;
  padding: 8px;
}

/* カード全体をリンク化（投稿詳細へ） */
.bl_workCard_link {
  display: block;
  color: inherit;
  transition: opacity 0.3s ease;
}

.bl_workCard_link:hover {
  opacity: 0.75;
}

.bl_workCard_img,
.bl_columnCard_img {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background: var(--c-soft);
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #D9D9D9;
}

.bl_workCard_img img,
.bl_columnCard_img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.bl_workCard_ttl {
  margin-top: 16px;
  font-size: 1rem;
  /* 16px */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.03em;
  color: var(--c-dark);
}

.bl_workCard_client {
  margin-top: 12px;
  font-size: 0.875rem;
  /* 14px */
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: var(--c-dark);
}

.bl_workCard_term {
  margin-top: 6px;
  font-size: 0.875rem;
  /* 14px */
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: var(--c-dark);
}

.bl_workCard_term span {
  margin-right: 8px;
}

/* WORKS Swiper */
.bl_cardSlider .swiper {
  /* はみ出したスライドを隠す（スライダーの左右クリップ） */
  overflow: hidden;
}

.bl_cardSlider .swiper-slide {
  height: auto;
  /* カード高さは内容に合わせる（上揃え） */
}

/* コントロール行（ドット + 矢印） */
.bl_cardSlider_ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  /* SPは中央 */
  gap: 24px;
  margin-top: 24px;
}

/* ページネーション（ドット）
   Design: figma 281-3987 … 直径12px・間隔8px・#d9d9d9。
   カレントは塗りではなく「白抜きのリング」（2pxの輪郭＋中は白）。
   スライド数が多いページでもドットは最大5個まで（swiper.js の dynamicBullets）。
   Swiper 既定のインライン配置に任せる（flex + gap にすると
   dynamicBullets の位置計算がずれるため）。 */
.bl_cardSlider_ctrl .bl_cardSlider_dots {
  position: static;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto !important;
  /* Swiper 標準CSSの width:100% を無効化 */
}

.bl_cardSlider_dots .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #d9d9d9;
  opacity: 1;
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* カレント：白抜きのリング */
.bl_cardSlider_dots .swiper-pagination-bullet-active {
  background: #fff;
  border: 2px solid #d9d9d9;
}

/* ドットは常に等倍。Swiper のCSSが scale() を掛けてくる場合に備えて打ち消す
   （ページネーションを .swiper の外に置いているため、Swiper 側の
     「カレントだけ等倍に戻す」ルールが効かず全ドットが縮んでしまうため） */
.bl_cardSlider_dots .swiper-pagination-bullet {
  transform: none !important;
}

/* 矢印 */
.bl_cardSlider_arrows {
  display: flex;
  align-items: center;
  gap: 16px;
}

.bl_cardSlider_arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.bl_cardSlider_arrowIcon {
  display: block;
}

/* 1つの矢印SVGを共有。「前へ」は180°回転（デザインの点対称に合わせる） */
.js_cardPrev .bl_cardSlider_arrowIcon {
  transform: rotate(180deg);
}

.bl_cardSlider_arrow:hover {
  opacity: 0.6;
}

.bl_cardSlider_arrow.swiper-button-disabled {
  opacity: 0.25;
  cursor: default;
}

/* ================================================
  MEMBERS
================================================ */
.ly_members {
  background: #fff;
  overflow: hidden;
}

.bl_members {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-block: 60px 48px;
}

/* 見出し（SP: 左上と右下に45°の斜線） */
.bl_members_head {
  position: relative;
  z-index: 2;
  /* 右下の斜線をカードより前面に出す */
  width: 100%;
  max-width: 440px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 13px;
  /* デザインの見出し〜カード間 27px（flexのgap 14px + 13px） */
}

/* 斜線は長さ60px（＝デザインの42.4×42.4の対角）。中心を基準に配置する */
.bl_members_head::before,
.bl_members_head::after {
  content: '';
  position: absolute;
  width: 60px;
  height: 1px;
  background: var(--c-dark);
  pointer-events: none;
}

/* 左上 */
.bl_members_head::before {
  left: 56px;
  top: 8px;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* 右下（見出しの下端より少し下まで伸びる） */
.bl_members_head::after {
  right: 70px;
  bottom: 20px;
  transform: translate(50%, 50%) rotate(-45deg);
}

.bl_members_ttl {
  position: relative;
  z-index: 1;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.6;
  text-align: center;
  letter-spacing: 0.02em;
  color: var(--c-dark);
}

.bl_members_ttl .hp_lg {
  font-size: 2.25rem;
}

/* メンバーバナー（SP: 横長・斜めに切り抜く）
   デザイン実寸は 375×224。傾きは clip-path で再現する。
   2枚は点対称（マスクが180°回転）なので、切れる辺が上下で逆になる。
     左（宇都木）：上辺フラット、下辺が右へ向かって上がる（右端 204 / 左端 224）
     右（小樋）  ：下辺フラット、上辺が右へ向かって上がる（左端 30 / 右端 0） */
.bl_memberCard {
  position: relative;
  width: 100%;
  height: 224px;
  overflow: hidden;
}

.bl_memberCard__l {
  background: linear-gradient(90deg, #d9d9d9 0%, #ededed 60%, #fff 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 91.07%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 91.07%, 0 100%);
  /* 204 / 224 */
}

.bl_memberCard__r {
  background: linear-gradient(270deg, #d9d9d9 0%, #ededed 60%, #fff 100%);
  -webkit-clip-path: polygon(0 13.39%, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 13.39%, 100% 0, 100% 100%, 0 100%);
  /* 30 / 224 */
}

/* ブランドロックアップ（markeru + る）… デザイン: 160×192 / top 16px */
.bl_memberCard_brand {
  position: absolute;
  top: 16px;
  height: 192px;
  z-index: 0;
  color: var(--c-dark);
}

.bl_memberCard_brand img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  /* img{max-width:100%} による横方向の潰れ／伸びを防ぐ */
}

.bl_memberCard__l .bl_memberCard_brand {
  left: 10.67%;
  /* 40 / 375 */
}

.bl_memberCard__r .bl_memberCard_brand {
  right: 11.73%;
  /* (375 - 331) / 375 */
}

/* 写真（切り抜き）… 高さはデザイン実寸。左右位置は375px基準の比率 */
.bl_memberCard_photo {
  position: absolute;
  bottom: 0;
  z-index: 1;
  width: auto;
  max-width: none;
  /* img{max-width:100%} による横方向の潰れを防ぐ */
}

.bl_memberCard__l .bl_memberCard_photo {
  left: 32%;
  /* 120 / 375 */
  height: 174px;
}

/* 小樋はカード下端より少し下まではみ出し、カード側で切り抜く */
.bl_memberCard__r .bl_memberCard_photo {
  left: 24.8%;
  /* 93 / 375 */
  bottom: -19px;
  height: 185px;
}

/* バナー内の名前プレート（SP） */
.bl_memberPlate__inBanner {
  position: absolute;
  z-index: 2;
  gap: 6px;
}

.bl_memberCard__l .bl_memberPlate__inBanner {
  top: 21px;
  right: 18.93%;
  /* (375 - 256 - 48) / 375 */
}

.bl_memberCard__r .bl_memberPlate__inBanner {
  top: 51px;
  left: 10.67%;
  /* 40 / 375 */
}

/* バナー内プレートの実寸（名前28px幅 / 肩書き14px幅）。PCでは非表示なので影響なし */
.bl_memberPlate__inBanner .bl_memberPlate_name {
  padding: 8px 4px 8px 2px;
  line-height: 1;
  letter-spacing: 0.05em;
}

.bl_memberPlate__inBanner .bl_memberPlate_role {
  padding: 6px 2px;
  line-height: 1.04;
}

/* 名前プレート（縦書き・共通） */
.bl_memberPlate {
  display: flex;
  gap: 4px;
  align-items: flex-start;
}

.bl_memberPlate_name {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  background: var(--c-dark);
  color: #fff;
  /* 中身は日本語の氏名（例: 宇都木 孝典）。--font-en（Figtree）は和文グリフを持たず
     Arial/Helvetica にも無いためブラウザ標準フォントへ後退してしまう。付けない＝body の
     Noto Sans JP を使う。 */
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  line-height: 1.2;
  padding: 8px 6px;
}

.bl_memberPlate_role {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  /* 英字（CEO / Founder など）は横倒しにせず、1文字ずつ正立させて縦に積む */
  -webkit-text-orientation: upright;
  text-orientation: upright;
  background: var(--c-dark);
  color: #fff;
  font-size: 0.625rem;
  letter-spacing: 0;
  line-height: 1.1;
  padding: 5px 2px;
}

/* 縦組み内で正立させたくない記号（丸括弧・スラッシュ）は通常の向きに戻す */
.hp_vPunct {
  -webkit-text-orientation: mixed;
  text-orientation: mixed;
}

/* 名前行（漢字=PC / ローマ字=SP）+ × */
.bl_members_namesJp {
  display: none;
}

.bl_members_namesEn {
  display: flex;
  align-items: center;
  gap: 32px;
  font-family: var(--font-en);
  font-size: 0.625rem;
  letter-spacing: 0.02em;
  color: var(--c-dark);
}

.el_cross {
  display: inline-flex;
  flex: none;
  color: var(--c-dark);
}

.el_cross img {
  display: block;
  width: 100%;
  height: 100%;
}

.bl_members_namesEn .el_cross {
  width: 22px;
  height: 22px;
}

/* ボタン */
.bl_members_btn {
  margin-top: 8px;
}

/* ================================================
  COLUMN
================================================ */
.bl_columnCard_link {
  display: block;
  color: inherit;
  transition: opacity 0.3s ease;
}

.bl_columnCard_link:hover {
  opacity: 0.75;
}

.bl_columnCard_date {
  margin-top: 8px;
  font-size: 0.75rem;
  /* 12px */
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--c-dark);
}

.bl_columnCard_ttl {
  margin-top: 8px;
  font-size: 1rem;
  /* 16px */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.03em;
  color: var(--c-dark);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bl_columnCard_cats {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ================================================
  CONTACT
================================================ */
.ly_contact {
  padding-bottom: 120px;
}

/* SPは 見出し → 本文 → ボタン の順に並べる。
   DOMは head（見出し+ボタン）→ 本文 の順なので、head を display: contents で
   解体して中身を .bl_contact 直下のフレックスアイテムにし、order で並べ替える。
   （PC（768px〜）では head を通常のブロックに戻す） */
.bl_contact {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  padding: 48px clamp(0.875rem, 0.4256rem + 2.2472vw, 1.5rem);
  overflow: hidden;
}

.bl_contact::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url(../img/contact-bg.webp) center / cover no-repeat;
  pointer-events: none;
}

/* ::before（背景画像）より前面に出す。head を解体した時の中身も対象にする */
.bl_contact>*,
.bl_contact_head>* {
  position: relative;
}

.bl_contact_head {
  display: contents;
}

.bl_contact .bl_secHead {
  order: 1;
}

.bl_contact_body {
  order: 2;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bl_contact_btns {
  order: 3;
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bl_contact_btns .el_moreBtn {
  width: 100%;
}

.bl_contact_ttl {
  font-size: clamp(1.125rem, 1.0179rem + 0.5357vw, 1.5rem);
  font-weight: 500;
  letter-spacing: 0.03em;
}

.bl_contact_txt {
  font-size: 0.875rem;
  /* 14px */
}

/* ================================================
  フッター（base.css を上書き）
================================================ */
.ly_footer {
  background: var(--c-dark);
  color: var(--c-cream);
  padding-block: 56px 24px;
  text-align: left;
}

.bl_footer_cont {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.bl_footer_logo {
  display: block;
  color: var(--c-cream);
}

.bl_footer_logo img {
  display: block;
  height: 168px;
  width: auto;
}

/* ナビ：SPは2カラム（ul は display:contents で解体してグリッドに流す） */
.bl_footer_nav {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  gap: 16px 48px;
  /* 中身は「トップ」「会社概要」等の和文リンク。Arial 指定は誤り（body の Noto Sans JP に委ねる） */
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.03em;
}

.bl_footer_nav_col {
  display: contents;
}

.bl_footer_nav_col a {
  transition: opacity 0.3s ease;
}

.bl_footer_nav_col a:hover {
  opacity: 0.7;
}

/* 下部：ポリシー + コピーライト */
.bl_footer_bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 32px;
  margin-top: 40px;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.7);
}

.bl_footer_policy {
  color: inherit;
  transition: opacity 0.3s ease;
}

.bl_footer_policy:hover {
  opacity: 0.7;
}

.bl_footer_copy {
  color: rgba(255, 255, 255, 0.5);
}

/* ================================================
  デスクトップ（768px〜）
================================================ */
@media screen and (min-width: 768px) {
  :root {
    --sec-pad: 100px;
    --header-h: 100px;
  }

  .bl_secHead_en {
    font-size: clamp(4rem, 2.8571rem + 2.381vw, 5rem);
  }

  .bl_secHead_sub {
    font-size: 1.125rem;
  }

  /* もっと見るボタン：PCはテキストに左右余白を付与 */
  .el_moreBtn_label {
    padding-inline: 28px;
  }

  /* カルーセルはグリッドに展開 */
  .js_snap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
  }

  .js_snap>* {
    flex: initial;
  }

  .bl_dots {
    display: none;
  }

  /* ヘッダー：高さを --header-h に固定（FV を背面へ潜り込ませるため） */
  .ly_header {
    height: var(--header-h);
  }

  /* PC: ピル化を解除し、透明ヘッダーに戻す */
  .bl_headerCont {
    position: relative;
    inset: auto;
    z-index: auto;
    display: block;
    width: 100%;
    padding: 14px 20px;
    background: none;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
  }

  .bl_headerBar {
    height: auto;
  }

  /* SP専用パーツはPCで非表示 */
  .el_humb,
  .bl_spMenu,
  .bl_spOverlay {
    display: none;
  }

  .bl_header_logo {
    height: auto;
  }

  .bl_header_logo svg {
    width: clamp(7.5rem, 4.5rem + 6.25vw, 10.125rem);
    height: auto;
  }

  /* スクロールでトップのロゴを隠す（ピル内アイコンがブランドを担う） */
  .ly_header.is_scrolled .bl_header_logo {
    opacity: 0;
    visibility: hidden;
  }

  .bl_header_nav {
    display: flex;
    gap: 24px;
  }

  /* FV：PCはテキストを左下に配置。ネットワーク/ロゴは右側に表示 */
  .ly_fv {
    align-items: flex-end;
  }

  /* コンテンツ幅は 100vw - 160px（左右 80px 余白） */
  .bl_fv_body {
    max-width: calc(100vw - 160px);
    margin-inline: auto;
    padding-inline: 0;
  }

  /* iPad等タブレット幅は左右の余白が大きすぎるため縮小 */
  @media screen and (max-width: 1023px) {
    .bl_fv_body {
      max-width: calc(100vw - 80px);
    }
  }

  .bl_fv {
    max-width: 880px;
    padding-block: 60px 96px;
  }

  .bl_fv_lead {
    font-size: 1rem;
  }

  .bl_fv_ttl {
    /* コンテナは 880px で頭打ちになる一方、旧上限3.5remのままだと広い画面ほど
       文字が伸びて880pxを超えてしまう。「現場とWebをつなぐ、唯一のパートナー。」が
       nowrap で確実に収まるよう、実測ベースで上限・下限・傾きを調整（880px容器で
       安全に収まる上限は約3.15rem のため、余裕を見て3remに設定） */
    font-size: clamp(2.25rem, 1.4rem + 2vw, 3rem);
    /* 中途半端な位置で折り返されないようにする（sm_only の <br> は非表示のまま） */
    white-space: nowrap;
  }

  /* ABOUT */
  .bl_secHead_label__lg {
    font-size: 1.75rem;
  }

  .ly_about .bl_about_ttl {
    margin-top: 20px;
    font-size: clamp(1.75rem, 0.6071rem + 2.381vw, 2.75rem);
  }

  .bl_about_txt {
    margin-top: 40px;
    max-width: none;
    text-align: center;
  }

  /* TRACK RECORD */
  .ly_track {
    padding-bottom: clamp(5rem, -3.5714rem + 17.8571vw, 12.5rem);
  }

  .bl_track {
    padding: 60px clamp(1.25rem, -3.0357rem + 8.9286vw, 5rem) 40px;
  }

  .ly_track .bl_secHead_label {
    font-size: clamp(1.25rem, 0.9643rem + 0.5952vw, 1.5rem);
  }

  .ly_track .el_dot {
    width: 24px;
    height: 24px;
    border-width: 5px;
  }

  /* 見出し（左）とボタン（右）を上段に並べる */
  .bl_track_head {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }

  .bl_track_list {
    flex-direction: row;
    margin-top: 40px;
    gap: clamp(1.75rem, 0.1786rem + 3.2738vw, 3.125rem);
  }

  .bl_track_item {
    flex: 1;
    min-width: 0;
    padding: 32px 16px;
  }

  .bl_track_item_label {
    font-size: clamp(1.125rem, 0.9821rem + 0.2976vw, 1.25rem);
  }

  .bl_track_item_num {
    font-size: clamp(3.75rem, -0.5357rem + 8.9286vw, 7.5rem);
  }

  /* BUSINESS */
  .ly_business {
    margin-inline: clamp(1.25rem, -3.0357rem + 8.9286vw, 5rem);
  }

  .ly_business .bl_secHead_label {
    font-size: 1.5rem;
  }

  .bl_bizHead,
  .bl_secHeadRow {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0;
  }

  /* PCはボタンをデザイン実寸（他セクションの el_moreBtn と同じ）に戻す */
  .bl_secHeadRow .el_moreBtn {
    min-width: 180px;
    gap: 0;
    padding: 20px;
  }

  /* WORKS：PCは上下の余白を広めに取る */
  .ly_works {
    padding-block: 200px;
  }

  /* WORKS スライダー操作：PCは右寄せ */
  .bl_cardSlider_ctrl {
    justify-content: flex-end;
    gap: 40px;
    margin-top: 32px;
  }

  /* MEMBERS は 960px 未満まで SP レイアウト（横長バナー）のまま。
     3カラムのPCレイアウトは 960px 以上でのみ有効にする
     （768〜959px では1カラムが約250〜320pxしかなく、ロゴ・人物写真が収まらないため）。
     → PC用の指定は下の @media (min-width: 960px) にまとめている */

  /* CONTACT：ダーク帯は最大1400px（他セクションの1080より広い）。
     ページ側の「.ly_company .ly_cont」等（詳細度 0,2,0）に負けないよう
     セクションの2クラスで指定して 0,3,0 にする */
  .ly_sec.ly_contact .ly_cont {
    max-width: 1440px;
    /* 20px×2 padding 込みでコンテンツ実寸 1400px */
  }

  .bl_contact {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: clamp(2rem, -1.4286rem + 7.1429vw, 5rem);
    padding: 67px clamp(2.5rem, -4.6429rem + 14.881vw, 8.75rem);
  }

  /* SPの display: contents / order を解除（見出し+ボタンを左カラムに戻す） */
  .bl_contact_head {
    display: block;
    flex: 0 1 auto;
  }

  .bl_contact .bl_secHead,
  .bl_contact_body,
  .bl_contact_btns {
    order: 0;
  }

  .bl_contact_btns {
    flex-direction: row;
    gap: clamp(1.75rem, 0.8929rem + 1.7857vw, 2.5rem);
    margin-top: clamp(1.75rem, 0.8929rem + 1.7857vw, 2.5rem);
  }

  /* ボタンはデザイン実寸（他セクションの el_moreBtn と同じ）に戻す。
     flex: 1 でラベルの長さに関わらず「お問い合わせ」「公式LINE」の幅を揃える */
  .bl_contact_btns .el_moreBtn {
    flex: 1;
    width: auto;
    /* ラベルを nowrap にする関係で、最長ラベル「お問い合わせ」が1行で収まる幅
       （実測214px）を下回らないようにする。180pxのままだと折り返しなしでは
       はみ出してしまうため引き上げた。 */
    min-width: 220px;
    padding: 20px;
  }

  /* ボタン幅が縮んだ際、ラベルが2行に折り返さないようにする */
  .bl_contact_btns .el_moreBtn_label {
    white-space: nowrap;
  }

  .bl_contact_body {
    flex: 0 1 500px;
    margin-top: 0;
  }

  .bl_contact_ttl {
    font-size: clamp(1.125rem, 0.6964rem + 0.8929vw, 1.5rem);
  }

  /* フッター：ロゴ左・ナビ右（デザイン準拠） */
  .bl_footer_cont {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
  }

  .bl_footer_logo img {
    height: clamp(280px, 28vw, 410px);
  }

  .bl_footer_nav {
    display: flex;
    justify-content: flex-end;
    gap: 56px;
    font-size: clamp(1.25rem, 0.6786rem + 1.1905vw, 1.75rem);
  }

  .bl_footer_nav_col {
    display: flex;
    flex-direction: column;
    gap: 26px;
  }

  .bl_footer_bottom {
    justify-content: flex-end;
    gap: 12px 40px;
    margin-top: 40px;
  }
}

/* ================================================
  タブレット（768〜1023px）: 横並びナビが収まらないため
  ピル／LINEボタン／文字を圧縮して1行に収める

  ヘッダーが使える幅 = viewport − ly_header の margin(20+20)
                       − bl_headerCont の padding(20+20) ＝ viewport − 80px。
  768px では 688px しか無いため、ロゴ + ナビ一式をこの中に収める。
================================================ */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .bl_header_nav {
    gap: 10px;
  }

  .bl_header_navPill {
    padding: 10px 14px;
    gap: 20px;
  }

  .bl_header_nav_ul {
    gap: 12px;
  }

  .bl_header_nav_ul .bl_header_nav_ul_li a {
    font-size: 0.875rem;
    white-space: nowrap;
  }

  .el_lineBtn {
    padding: 9px 12px;
  }

  .el_lineBtn_main {
    font-size: 1rem;
  }

  .bl_header_logo svg {
    width: 7rem;
  }

  /* 端数で1〜2px はみ出しても内容が切れないよう、ナビ側を縮められるようにする */
  .bl_headerBar {
    gap: 12px;
  }

  .bl_header_logo {
    flex: none;
  }

  .bl_header_nav {
    min-width: 0;
  }

  /* CONTACT：この幅では2ボタンが横に収まらないため縦積み。
     align-items はデフォルト（stretch）のままにし、ラベルの長さに関わらず
     2つのボタンの横幅を揃える（flex-start だと文字数分だけ幅が変わってしまう）。 */
  .bl_contact_btns {
    flex-direction: column;
  }
}

/* ================================================
  ヘッダー：十分な幅がある場合のみピルを中央に固定
  （狭いPC幅ではロゴ／LINEと重なるため右寄せのまま）
================================================ */
@media screen and (min-width: 1024px) {
  .bl_header_navPill {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

/* ================================================
  BUSINESS：ラジアル図とスライドの横並び2カラム
  768〜959px は1カラムが狭く、スライド内の固定幅イラスト画像（280px）が
  収まらず見切れてしまうため（MEMBERSと同じ理由）、960px 未満は
  SPと同じ縦積みレイアウトのままにする。
================================================ */
@media screen and (min-width: 960px) {
  .bl_bizSlider {
    flex-direction: row;
    align-items: center;
    margin-top: 40px;
    gap: 24px;
  }

  .bl_radial {
    flex: 1 1 320px;
    width: 100%;
    min-width: 0;
    max-width: 460px;
    margin: 0;
  }

  .bl_radial_center {
    width: 120px;
    height: 120px;
    font-size: 13px;
  }

  .bl_radial_group {
    font-size: 15px;
    padding: 7px 16px;
  }

  .bl_radial_leaf {
    font-size: 14px;
  }

  .bl_bizCol {
    flex: 1;
    min-width: 0;
  }

  .bl_bizSlide {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 348px;
    max-width: 100%;
    margin-inline: auto;
  }

  .bl_bizSlide_img {
    display: flex;
  }

  .bl_bizSlide_img img {
    width: 280px;
  }

  .bl_bizSlide_info {
    align-items: flex-start;
    text-align: left;
  }

  .bl_bizSlide_ttl {
    font-size: 1.5rem;
  }

  .bl_bizSlide_desc {
    font-size: 1rem;
  }
}

/* ================================================
  MEMBERS：3カラムのフルブリードバンド（写真 | 中央テキスト | 写真）
  960px 未満は1カラムが狭すぎてロゴ・人物写真が収まらないため、
  SPの横長バナーのままにする。
================================================ */
@media screen and (min-width: 960px) {
  .ly_members {
    background: var(--c-soft);
  }

  .bl_members {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas:
      "ml .      mr"
      "ml head   mr"
      "ml names  mr"
      "ml button mr"
      "ml .      mr";
    align-items: center;
    justify-items: center;
    gap: 0;
    padding: 0;
    min-height: 680px;
  }

  /* 見出し（PCは斜線なし） */
  .bl_members_head {
    grid-area: head;
    align-self: end;
    margin-bottom: 0;
  }

  .bl_members_head::before,
  .bl_members_head::after {
    content: none;
  }

  .bl_members_ttl {
    font-size: clamp(1.125rem, 0.125rem + 2.0833vw, 2rem);
    line-height: 1.5;
  }

  .bl_members_ttl .hp_lg {
    font-size: clamp(2rem, 0.2857rem + 3.5714vw, 3.5rem);
  }

  /* 名前（PC=漢字プレート） */
  .bl_members_names {
    grid-area: names;
    margin-block: 40px;
  }

  .bl_members_namesEn {
    display: none;
  }

  .bl_members_namesJp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
  }

  .bl_members_namesJp .bl_memberPlate {
    gap: 6px;
  }

  .bl_members_namesJp .bl_memberPlate_name {
    font-size: clamp(1.75rem, 0.6071rem + 2.381vw, 2.75rem);
    padding: 10px;
    letter-spacing: 0.08em;
  }

  .bl_members_namesJp .bl_memberPlate_role {
    font-size: 0.75rem;
    padding: 8px 3px;
  }

  .bl_members_namesJp .el_cross {
    width: clamp(3rem, 0.1429rem + 5.9524vw, 5.5rem);
    height: clamp(3rem, 0.1429rem + 5.9524vw, 5.5rem);
  }

  /* ボタン */
  .bl_members_btn {
    grid-area: button;
    align-self: start;
    margin-top: 0;
  }

  /* バナー（左右・縦長）。SPの斜めカットはPCでは使わない */
  .bl_memberCard {
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    height: auto;
    background: #d9d9d9;
  }

  .bl_memberCard__l {
    grid-area: ml;
    -webkit-clip-path: none;
    clip-path: none;
  }

  .bl_memberCard__r {
    grid-area: mr;
    -webkit-clip-path: none;
    clip-path: none;
  }

  .bl_memberPlate__inBanner {
    display: none;
  }

  /* ロゴ・人物写真は「高さ基準」。カード高さ(680px)に対する比率なので、
     画面が広くなっても縦にはみ出さない（横は overflow: hidden で切り抜く）。 */
  .bl_memberCard_brand {
    top: 40px;
    height: 58%;
  }

  .bl_memberCard__l .bl_memberCard_brand {
    left: 40px;
  }

  .bl_memberCard__r .bl_memberCard_brand {
    left: 40px;
  }

  .bl_memberCard_photo {
    height: 96%;
    width: auto;
    max-width: none;
    /* img{max-width:100%} による横方向の潰れを防ぐ（アスペクト比維持） */
  }

  .bl_memberCard__l .bl_memberCard_photo {
    left: 50%;
    height: 90%;
    right: auto;
    transform: translateX(-50%);
  }

  /* 小樋。高さ基準で拡大し、はみ出しはカードで切り抜く（SPの bottom: -19px は解除） */
  .bl_memberCard__r .bl_memberCard_photo {
    height: 85%;
    bottom: 0;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

/* ================================================
  MEMBERS：960〜1199px だけ画像を縮める
  この範囲は1カラムが 320〜400px しかなく、上の「高さ基準」のままだと
  ロゴ・人物写真が横にはみ出す。ここだけ幅基準にして画面幅に応じて縮める。
  1199px でちょうど 1200px 以上と同じ大きさ（ロゴ305 / 宇都木408 / 小樋500）に
  なるよう補間しているため、1200px をまたいでも大きさが飛ばない。
  ※ 1200px 以上（デザイン実寸）には一切影響しない
================================================ */
@media screen and (min-width: 960px) and (max-width: 1199px) {

  /* ロゴ: 960px→240px … 1199px→305px */
  .bl_memberCard__l .bl_memberCard_brand,
  .bl_memberCard__r .bl_memberCard_brand {
    width: calc(240px + (100vw - 960px) * 0.272);
    height: auto;
  }

  .bl_memberCard_brand img {
    width: 100%;
    height: auto;
    max-width: 100%;
  }

  /* 宇都木: 960px→260px … 1199px→408px */
  .bl_memberCard__l .bl_memberCard_photo {
    width: calc(260px + (100vw - 960px) * 0.6192);
    height: auto;
    max-width: none;
  }

  /* 小樋: 960px→333px … 1199px→500px（カード幅を少し超えて切り抜かれる） */
  .bl_memberCard__r .bl_memberCard_photo {
    width: calc(333px + (100vw - 960px) * 0.6987);
    height: auto;
    max-width: none;
  }
}

/* ================================================
  ワイド（1280px〜）
================================================ */
@media screen and (min-width: 1280px) {
  .bl_radial {
    width: 480px;
    max-width: 480px;
  }
}