/* =============================================================
   style.css — 04-professional コンパイル済み
   ⚠ このファイルは style.scss から自動生成される想定。
     手で編集せず、SCSS側を直して再コンパイルしてください。
     再ビルドコマンド例: sass assets/css/style.scss assets/css/style.css
   ============================================================= */

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== :root（CSS変数） ===== */
:root {
  --color-white: #fff;
  --color-black: #222;
  --color-text: #333;
  --color-gray: #dbdbdb;
  --color-grayLight: #fafafa;
  --color-grayDark: #6b6b6b;

  --pro-dark: #3B4043;
  --pro-darkMid: #5E5E5E;
  --pro-textGray: #555;
  --pro-grayLight: #f5f5f5;
  --pro-grayBorder: #e0e0e0;
  --pro-overlay: rgba(0, 0, 0, 0.4);

  --color-accent: #3B4043;
  --color-sub: #f0f0f0;

  --color-link: var(--color-accent);
  --color-link-hover: var(--pro-darkMid);
  --color-header-bg: var(--pro-dark);
  --color-header-text: var(--color-white);
  --color-footer-bg: var(--pro-dark);
  --color-footer-text: var(--color-white);
  --color-cta-bg: var(--pro-dark);
  --color-section-alt: var(--pro-grayLight);

  --fontsize-xxl: 2.5rem;
  --fontsize-xl:  1.875rem;
  --fontsize-l:   1.25rem;
  --fontsize-m:   1rem;
  --fontsize-s:   0.875rem;
  --fontsize-xs:  0.75rem;

  --spacing-scale: 1;
}
@media (max-width: 479px) {
  :root { --spacing-scale: 0.65; }
}

/* ===== html / body ===== */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}
@media screen and (max-width: 1024px) { html { font-size: 14px; } }
@media screen and (max-width: 479px)  { html { font-size: 12px; } }

body {
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", sans-serif;
  font-weight: 400;
  font-size: var(--fontsize-m);
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-white);
}

a { transition: color 0.3s ease; }
a:hover { color: var(--color-link-hover); }

/* ===== js-fadein ===== */
.js-fadein {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.js-fadein.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Layout ===== */
.ly_main { display: block; }

/* ===== Helper: margin/padding ===== */
.mt-40  { margin-top:    calc(2.5rem  * var(--spacing-scale)); }
.mb-40  { margin-bottom: calc(2.5rem  * var(--spacing-scale)); }
.ml-40  { margin-left:   calc(2.5rem  * var(--spacing-scale)); }
.mr-40  { margin-right:  calc(2.5rem  * var(--spacing-scale)); }
.pt-40  { padding-top:    calc(2.5rem * var(--spacing-scale)); }
.pb-40  { padding-bottom: calc(2.5rem * var(--spacing-scale)); }

.mt-60  { margin-top:    calc(3.75rem * var(--spacing-scale)); }
.mb-60  { margin-bottom: calc(3.75rem * var(--spacing-scale)); }
.ml-60  { margin-left:   calc(3.75rem * var(--spacing-scale)); }
.mr-60  { margin-right:  calc(3.75rem * var(--spacing-scale)); }
.pt-60  { padding-top:    calc(3.75rem * var(--spacing-scale)); }
.pb-60  { padding-bottom: calc(3.75rem * var(--spacing-scale)); }

.mt-80  { margin-top:    calc(5rem    * var(--spacing-scale)); }
.mb-80  { margin-bottom: calc(5rem    * var(--spacing-scale)); }
.ml-80  { margin-left:   calc(5rem    * var(--spacing-scale)); }
.mr-80  { margin-right:  calc(5rem    * var(--spacing-scale)); }
.pt-80  { padding-top:    calc(5rem   * var(--spacing-scale)); }
.pb-80  { padding-bottom: calc(5rem   * var(--spacing-scale)); }

.mt-120 { margin-top:    calc(7.5rem  * var(--spacing-scale)); }
.mb-120 { margin-bottom: calc(7.5rem  * var(--spacing-scale)); }
.ml-120 { margin-left:   calc(7.5rem  * var(--spacing-scale)); }
.mr-120 { margin-right:  calc(7.5rem  * var(--spacing-scale)); }
.pt-120 { padding-top:    calc(7.5rem * var(--spacing-scale)); }
.pb-120 { padding-bottom: calc(7.5rem * var(--spacing-scale)); }

.mt-140 { margin-top:    calc(8.75rem * var(--spacing-scale)); }
.mb-140 { margin-bottom: calc(8.75rem * var(--spacing-scale)); }
.mt-160 { margin-top:    calc(10rem   * var(--spacing-scale)); }
.mb-160 { margin-bottom: calc(10rem   * var(--spacing-scale)); }
.mt-170 { margin-top:    calc(10.625rem * var(--spacing-scale)); }
.mb-170 { margin-bottom: calc(10.625rem * var(--spacing-scale)); }

.mt-200 { margin-top:    calc(12.5rem * var(--spacing-scale)); }
.mb-200 { margin-bottom: calc(12.5rem * var(--spacing-scale)); }
.ml-200 { margin-left:   calc(12.5rem * var(--spacing-scale)); }
.mr-200 { margin-right:  calc(12.5rem * var(--spacing-scale)); }
.pt-200 { padding-top:    calc(12.5rem * var(--spacing-scale)); }
.pb-200 { padding-bottom: calc(12.5rem * var(--spacing-scale)); }

.mt-240 { margin-top:    calc(15rem   * var(--spacing-scale)); }
.mb-240 { margin-bottom: calc(15rem   * var(--spacing-scale)); }

/* ===== Helper: display ===== */
@media screen and (min-width: 481px) and (max-width: 1240px) { .hp_sp { display: none !important; } }
@media screen and (min-width: 897px) and (max-width: 1240px) { .hp_sp-tab { display: none !important; } }
@media screen and (max-width: 896px) { .hp_pc { display: none !important; } }
@media screen and (max-width: 479px) { .hp_tab { display: none !important; } }
@media screen and (min-width: 897px) and (max-width: 1240px) { .hp_tab { display: none !important; } }

/* ===== Helper: text ===== */
.hp_tac  { text-align: center; }
.hp_tal  { text-align: left; }
.hp_tar  { text-align: right; }
.hp_fwB  { font-weight: 700; }
.hp_wsnw { white-space: nowrap; }

/* =============================================================
   Blocks
   ============================================================= */

/* ----- bl_header ----- */
.bl_header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: var(--pro-dark);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.bl_header.__transparent { background: transparent; }
/* スクロール時：白背景＋暗テキストへ反転（白セクションでも読みやすく） */
.bl_header.__transparent.is-scrolled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--pro-grayBorder);
}

.bl_header_inner {
  /* 画面端まで広げる。コンテンツ最大幅にしない */
  width: 100%;
  padding-left:  clamp(1rem, 3vw, 3rem);
  padding-right: clamp(1rem, 3vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}
@media screen and (max-width: 896px) {
  .bl_header_inner { height: 64px; }
}
.bl_header_logo {
  font-family: "Outfit", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: var(--color-white);
  transition: color 0.3s ease;
}
.bl_header_logo::first-letter { font-size: 1.4em; }

.bl_header_nav { display: flex; gap: 2.5rem; }
.bl_header_nav a {
  font-family: "Outfit", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--color-white);
  position: relative;
  transition: color 0.3s ease;
}
.bl_header_nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 1px;
  background: currentColor;
  transition: width 0.3s ease;
}
.bl_header_nav a:hover::after { width: 100%; }

.bl_header_burger {
  width: 32px; height: 24px;
  position: relative;
}
.bl_header_burger span {
  position: absolute;
  left: 0;
  width: 100%; height: 2px;
  background: var(--color-white);
  transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;
}
.bl_header_burger span:nth-child(1) { top: 0; }
.bl_header_burger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.bl_header_burger span:nth-child(3) { bottom: 0; }
.bl_header_burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.bl_header_burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bl_header_burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

/* スクロール時の色反転：白背景に暗テキスト・暗バーガー */
.bl_header.__transparent.is-scrolled .bl_header_logo,
.bl_header.__transparent.is-scrolled .bl_header_nav a {
  color: var(--pro-dark);
}
.bl_header.__transparent.is-scrolled .bl_header_burger span {
  background: var(--pro-dark);
}

/* ----- bl_spNav ----- */
.bl_spNav {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100vh;
  background: var(--pro-dark);
  z-index: 49;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.bl_spNav[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}
.bl_spNav_list { text-align: center; }
.bl_spNav_list li + li { margin-top: 1.5rem; }
.bl_spNav_list a {
  font-family: "Outfit", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.75rem;
  letter-spacing: 0.04em;
  color: var(--color-white);
}

/* ----- bl_fv-pro ----- */
.bl_fv-pro {
  position: relative;
  width: 100%;
  height: 90vh;
  max-height: 800px;
  overflow: hidden;
}
@media screen and (max-width: 479px) {
  .bl_fv-pro { height: 70vh; max-height: 600px; }
}
.bl_fv-pro_bg {
  position: absolute;
  inset: 0;
}
/* スライド本体（JSで is-active を巡回）
   transform は JS（Web Animations API）が制御。
   CSS animation/transition だと is-active 解除時に
   transform が一瞬 scale(1) にスナップして見えるため。 */
.bl_fv-pro_slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2s ease-in-out;
  will-change: opacity;
}
.bl_fv-pro_slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);  /* JS実行前の初期スケール（チラつき防止） */
  transform-origin: center;
  will-change: transform;
}
.bl_fv-pro_slide.is-active { opacity: 1; }
.bl_fv-pro_overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}
.bl_fv-pro_inner {
  position: relative;
  z-index: 2;
  height: 100%;
  width: 100%;
  /* 横幅は整然と区切らず、ウインドウ幅100%に対して左寄せ */
  padding-left: clamp(1.5rem, 5vw, 6rem);
  padding-right: 4%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding-bottom: 6rem;
}
@media screen and (max-width: 479px) {
  .bl_fv-pro_inner { padding-bottom: 4rem; }
}
/* タイトル：マスクスライドアップで出現 */
.bl_fv-pro_ttl {
  font-family: "Outfit", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(3rem, 13vw, 12rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--color-white);
  margin: 0;
}
.bl_fv-pro_ttl_line {
  display: block;
  overflow: hidden;
}
.bl_fv-pro_ttl_text {
  display: inline-block;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); /* expo-out */
}

/* キャッチ：fade + slide-up */
.bl_fv-pro_catch {
  margin-top: 2rem;
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", sans-serif;
  font-weight: 500;
  font-size: clamp(1.15rem, 3vw, 2.25rem);
  letter-spacing: 0.08em;
  color: var(--color-white);
}
.bl_fv-pro_catch_text {
  display: inline-block;
  transition: opacity 0.9s ease-out,
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* === FV テキストの出現アニメ ===
   .js-enabled は <head> インラインスクリプトで付与。
   JS無効ならテキストはそのまま表示（フォールバック）。 */
.js-enabled .bl_fv-pro_ttl_text {
  transform: translateY(110%);
}
.js-enabled .bl_fv-pro_ttl.is-revealed .bl_fv-pro_ttl_text {
  transform: translateY(0);
}
.js-enabled .bl_fv-pro_ttl.is-revealed .bl_fv-pro_ttl_line:nth-child(2) .bl_fv-pro_ttl_text {
  transition-delay: 0.15s;
}
.js-enabled .bl_fv-pro_catch_text {
  opacity: 0;
  transform: translateY(20px);
}
.js-enabled .bl_fv-pro_catch.is-revealed .bl_fv-pro_catch_text {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}
.bl_fv-pro_side {
  position: absolute;
  right: 2rem; top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.bl_fv-pro_vertical {
  writing-mode: vertical-rl;
  font-family: "Outfit", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  letter-spacing: 0.3em;
  color: var(--color-white);
  opacity: 0.7;
}

/* ----- bl_container ----- */
.bl_container { width: 100%; }
.bl_container.__dark {
  background: var(--pro-dark);
  padding: 7.5rem 0;
  color: var(--color-white);
}
@media screen and (max-width: 479px) {
  .bl_container.__dark { padding: 4.5rem 0; }
}
.bl_container_inner {
  width: 100%;
  max-width: 1240px;
  margin-left: auto; margin-right: auto;
  padding-left: 4%; padding-right: 4%;
}

/* ----- bl_media ----- */
.bl_media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
@media screen and (max-width: 896px) {
  .bl_media { grid-template-columns: 1fr; gap: 2rem; }
}
.bl_media.__rev .bl_media_img { order: 2; }
@media screen and (max-width: 896px) {
  .bl_media.__rev .bl_media_img { order: initial; }
}
.bl_media_img img {
  width: 100%; height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ----- bl_heading-pro ----- */
.bl_heading-pro .--en {
  display: block;
  font-family: "Outfit", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-black);
  margin: 0;
}
.bl_heading-pro .--jp {
  display: block;
  margin-top: 0.5em;
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", sans-serif;
  font-weight: 400;
  font-size: var(--fontsize-s);
  letter-spacing: 0.08em;
  color: var(--pro-textGray);
}
.bl_heading-pro.__center { text-align: center; }
.bl_container.__dark .bl_heading-pro .--en { color: var(--color-white); }
.bl_container.__dark .bl_heading-pro .--jp { color: rgba(255, 255, 255, 0.7); }

/* ----- bl_text (lead / body / caption) ----- */
.bl_lead_ttl {
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", sans-serif;
  font-weight: 600;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  line-height: 1.6;
  color: var(--color-black);
}
.bl_body {
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", sans-serif;
  font-weight: 400;
  font-size: var(--fontsize-m);
  line-height: 2;
  color: var(--pro-textGray);
}
.bl_caption {
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", sans-serif;
  font-weight: 400;
  font-size: var(--fontsize-s);
  line-height: 1.7;
  color: var(--pro-textGray);
}

/* ----- bl_giantLogo ----- */
.bl_giantLogo {
  width: 100%;
  overflow: hidden;
  padding: 5rem 0;
  text-align: center;
}
.bl_giantLogo_text {
  font-size: clamp(3rem, 12vw, 10rem);
  font-family: "Outfit", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--pro-textGray);
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  display: inline-block;
  margin: 0;
}

/* ----- bl_serviceCard ----- */
.bl_serviceCard_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media screen and (min-width: 481px) and (max-width: 896px) {
  .bl_serviceCard_grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 479px) {
  .bl_serviceCard_grid { grid-template-columns: 1fr; }
}
.bl_serviceCard {
  display: block;
  background: var(--color-white);
  overflow: hidden;
  color: var(--color-black);
  transition: transform 0.3s ease;
}
.bl_serviceCard_img { overflow: hidden; }
.bl_serviceCard_img img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.bl_serviceCard:hover .bl_serviceCard_img img { transform: scale(1.05); }
.bl_serviceCard_body { padding: 1.25rem 1.5rem; }
.bl_serviceCard_ttl {
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", sans-serif;
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--color-black);
  margin: 0;
}

/* ----- bl_caseCard ----- */
.bl_caseCard_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
@media screen and (min-width: 481px) and (max-width: 896px) {
  .bl_caseCard_grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 479px) {
  .bl_caseCard_grid { grid-template-columns: 1fr; }
}
.bl_caseCard { display: block; color: var(--color-black); }
.bl_caseCard_img { overflow: hidden; }
.bl_caseCard_img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.bl_caseCard:hover .bl_caseCard_img img { transform: scale(1.05); }
.bl_caseCard_body { padding-top: 1.25rem; }
.bl_caseCard_ttl {
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", sans-serif;
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--color-black);
  margin: 0;
}
.bl_caseCard_excerpt {
  margin-top: 0.75rem;
  font-size: var(--fontsize-s);
  line-height: 1.7;
  color: var(--pro-textGray);
}
.bl_caseCard_more {
  display: inline-block;
  margin-top: 1rem;
  font-family: "Outfit", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--pro-darkMid);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* ----- bl_clientLogos ----- */
.bl_clientLogos_grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2rem;
  align-items: center;
}
@media screen and (min-width: 481px) and (max-width: 896px) {
  .bl_clientLogos_grid { grid-template-columns: repeat(3, 1fr); }
}
@media screen and (max-width: 479px) {
  .bl_clientLogos_grid { grid-template-columns: repeat(2, 1fr); }
}
.bl_clientLogos_grid img {
  max-height: 60px;
  width: auto;
  margin: 0 auto;
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.bl_clientLogos_grid img:hover {
  filter: grayscale(0);
  opacity: 1;
}

/* ----- bl_newsList ----- */
.bl_newsList {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.bl_newsList_item { border-bottom: 1px solid var(--pro-grayBorder); }
.bl_newsList_item:first-child { border-top: 1px solid var(--pro-grayBorder); }
.bl_newsList_link {
  display: flex;
  align-items: baseline;
  gap: 2rem;
  padding: 1.5rem 0;
  transition: color 0.3s ease;
}
@media screen and (max-width: 479px) {
  .bl_newsList_link {
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem 0;
  }
}
.bl_newsList_link:hover .bl_newsList_ttl { color: var(--pro-darkMid); }
.bl_newsList_date {
  font-family: "Outfit", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--pro-darkMid);
  flex-shrink: 0;
  min-width: 6rem;
}
.bl_newsList_ttl {
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", sans-serif;
  font-weight: 500;
  font-size: var(--fontsize-m);
  color: var(--color-black);
  transition: color 0.3s ease;
}

/* ----- bl_cta-pro ----- */
.bl_cta-pro {
  position: relative;
  background-color: var(--pro-dark);
  /* サンプル背景画像（Unsplash）。案件では assets/images/cta-bg.jpg に差し替え */
  background-image:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    url('https://images.unsplash.com/photo-1505691938895-1758d7feb511?auto=format&fit=crop&w=1600&q=80');
  background-size: cover;
  background-position: center;
  color: var(--color-white);
}
.bl_cta-pro_inner {
  width: 100%;
  max-width: 1240px;
  margin-left: auto; margin-right: auto;
  padding-left: 4%; padding-right: 4%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 220px;
}
@media screen and (max-width: 896px) {
  .bl_cta-pro_inner { grid-template-columns: 1fr; min-height: 0; }
}
.bl_cta-pro_tel,
.bl_cta-pro_mail { padding: 3rem 2rem; }
@media screen and (max-width: 896px) {
  .bl_cta-pro_tel,
  .bl_cta-pro_mail { padding: 2.5rem 1rem; text-align: center; }
}
.bl_cta-pro_tel { border-right: 1px solid rgba(255,255,255,0.2); }
@media screen and (max-width: 896px) {
  .bl_cta-pro_tel {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }
}
.bl_cta-pro_mail {
  display: block;
  color: var(--color-white);
  transition: opacity 0.3s ease;
}
.bl_cta-pro_mail:hover { opacity: 0.75; color: var(--color-white); }
.bl_cta-pro_label {
  font-family: "Outfit", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.7);
}
.bl_cta-pro_label span { margin-left: 0.5em; }
.bl_cta-pro_number {
  margin-top: 0.5rem;
  font-family: "Outfit", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  line-height: 1;
  letter-spacing: 0.02em;
}
.bl_cta-pro_hours,
.bl_cta-pro_sub {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
}

/* ----- bl_footer ----- */
.bl_footer {
  background: var(--pro-dark);
  color: var(--color-white);
  padding: 4rem 0 1.5rem;
}
.bl_footer_inner {
  width: 100%;
  max-width: 1240px;
  margin-left: auto; margin-right: auto;
  padding-left: 4%; padding-right: 4%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 3rem;
  align-items: center;
}
@media screen and (max-width: 896px) {
  .bl_footer_inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
  }
}
.bl_footer_logo {
  font-family: "Outfit", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.04em;
}
.bl_footer_nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  justify-content: center;
}
.bl_footer_nav a {
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.85);
}
.bl_footer_nav a:hover { color: var(--color-white); }

.bl_footer_social {
  display: flex;
  align-items: center;
  gap: 1rem;
}
@media screen and (max-width: 896px) {
  .bl_footer_social { justify-content: center; }
}
.bl_footer_social_label {
  font-family: "Outfit", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.7);
}
.bl_footer_social a {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  color: var(--color-white);
  transition: background 0.3s ease, color 0.3s ease;
}
.bl_footer_social a:hover {
  background: var(--color-white);
  color: var(--pro-dark);
}
.bl_footer_copyright {
  margin-top: 3rem;
  text-align: center;
  font-family: "Outfit", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.5);
}

/* =============================================================
   Elements
   ============================================================= */

/* ----- el_btn ----- */
.el_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  padding: 1rem 2rem;
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--color-white);
  background: var(--pro-darkMid);
  border: 1px solid var(--pro-darkMid);
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.el_btn:hover {
  background: var(--pro-dark);
  border-color: var(--pro-dark);
  color: var(--color-white);
}
.el_btn--arrow::after {
  content: '→';
  margin-left: 0.75em;
  transition: transform 0.3s ease;
}
.el_btn--arrow:hover::after { transform: translateX(4px); }

/* ----- el_btn__submit ----- */
.el_btn__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  padding: 1.25rem 2.5rem;
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--color-white);
  background: var(--pro-dark);
  border: 1px solid var(--pro-dark);
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}
.el_btn__submit:hover {
  background: var(--pro-darkMid);
  border-color: var(--pro-darkMid);
  color: var(--color-white);
}
.el_btn__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* =============================================================
   Sub-page components (KV / breadcrumbs / form / dl-company / news article)
   ============================================================= */

/* ----- bl_kv-pro ----- */
.bl_kv-pro {
  position: relative;
  width: 100%;
  height: 40vh;
  max-height: 360px;
  min-height: 280px;
  overflow: hidden;
}
@media screen and (max-width: 479px) {
  .bl_kv-pro { height: 30vh; min-height: 200px; }
}
.bl_kv-pro_bg {
  position: absolute;
  inset: 0;
}
.bl_kv-pro_bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bl_kv-pro_bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.bl_kv-pro_inner {
  position: relative;
  z-index: 2;
  height: 100%;
  width: 100%;
  max-width: 1240px;
  margin-left: auto; margin-right: auto;
  padding-left: 4%; padding-right: 4%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-top: 80px;
}
@media screen and (max-width: 896px) {
  .bl_kv-pro_inner { padding-top: 64px; }
}
.bl_kv-pro_ttl {
  font-family: "Outfit", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--color-white);
  margin: 0;
}
.bl_kv-pro_ttl .--jp {
  display: block;
  margin-top: 0.5em;
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.8);
}

/* ----- bl_breadcrumbs ----- */
.bl_breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", sans-serif;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
}
.bl_breadcrumbs a {
  color: rgba(255, 255, 255, 0.85);
  transition: opacity 0.3s ease;
}
.bl_breadcrumbs a:hover {
  opacity: 0.7;
  color: rgba(255, 255, 255, 0.85);
}
.bl_breadcrumbs_sep { color: rgba(255, 255, 255, 0.5); }

.bl_breadcrumbs.__light { color: var(--pro-textGray); }
.bl_breadcrumbs.__light a { color: var(--pro-textGray); }
.bl_breadcrumbs.__light a:hover { color: var(--color-black); }
.bl_breadcrumbs.__light .bl_breadcrumbs_sep { color: var(--pro-grayBorder); }

/* ----- bl_dl-company ----- */
.bl_dl-company {
  width: 100%;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", sans-serif;
}
@media (min-width: 481px) {
  .bl_dl-company {
    display: grid;
    grid-template-columns: 200px 1fr;
    column-gap: 3rem;
  }
}
.bl_dl-company dt,
.bl_dl-company dd {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--pro-grayBorder);
}
.bl_dl-company dt {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-black);
}
.bl_dl-company dd {
  margin: 0;
  color: var(--pro-textGray);
  line-height: 1.8;
}
.bl_dl-company > *:first-of-type,
.bl_dl-company > dt:first-of-type + dd {
  border-top: 1px solid var(--pro-grayBorder);
}
@media screen and (max-width: 479px) {
  .bl_dl-company dt { padding-bottom: 0; border-bottom: none; }
  .bl_dl-company dd { padding-top: 0.5rem; }
}

/* ----- bl_form ----- */
.bl_form {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", sans-serif;
}
.bl_form_row { margin-top: 2rem; }
.bl_form_row:first-child { margin-top: 0; }
.bl_form_label {
  display: block;
  margin-bottom: 0.75rem;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-black);
}
.bl_form_label .--required {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.15em 0.6em;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--color-white);
  background: var(--pro-darkMid);
  vertical-align: middle;
  letter-spacing: 0.04em;
}
.bl_form_input,
.bl_form_textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-black);
  background: var(--color-white);
  border: 1px solid var(--pro-grayBorder);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.bl_form_input:focus,
.bl_form_textarea:focus {
  outline: none;
  border-color: var(--pro-darkMid);
  box-shadow: 0 0 0 3px rgba(94, 94, 94, 0.1);
}
.bl_form_textarea {
  min-height: 200px;
  resize: vertical;
  line-height: 1.7;
}
.bl_form_check {
  margin-top: 2.5rem;
  text-align: center;
}
.bl_form_check label {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--pro-textGray);
}
.bl_form_check label a {
  color: var(--color-link);
  border-bottom: 1px solid currentColor;
}
.bl_form_check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--pro-darkMid);
  cursor: pointer;
}
.bl_form_submit {
  margin-top: 3rem;
  text-align: center;
}

/* ----- bl_newsLayout (article + sidebar 2カラム) ----- */
.bl_newsLayout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 4rem;
  align-items: flex-start;
}
@media screen and (max-width: 896px) {
  .bl_newsLayout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

/* ----- bl_newsArticle ----- */
.bl_newsArticle {
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", sans-serif;
}
.bl_newsArticle_meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.bl_newsArticle_date {
  font-family: "Outfit", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--pro-darkMid);
}
.bl_newsArticle_cat {
  display: inline-block;
  padding: 0.25em 0.75em;
  font-size: 0.75rem;
  color: var(--color-white);
  background: var(--pro-darkMid);
}
.bl_newsArticle_ttl {
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.4;
  color: var(--color-black);
  margin: 0 0 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--pro-grayBorder);
}
.bl_newsArticle_body {
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", sans-serif;
  font-size: 1rem;
  line-height: 2;
  color: var(--pro-textGray);
}
.bl_newsArticle_body h2 {
  margin-top: 3rem;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-black);
}
.bl_newsArticle_body h3 {
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-black);
}
.bl_newsArticle_body p { margin-top: 1.5rem; }
.bl_newsArticle_body p:first-child { margin-top: 0; }
.bl_newsArticle_body ul,
.bl_newsArticle_body ol {
  margin-top: 1.5rem;
  padding-left: 1.5rem;
}
.bl_newsArticle_body ul { list-style: disc; }
.bl_newsArticle_body ol { list-style: decimal; }
.bl_newsArticle_body li { margin-top: 0.5rem; }
.bl_newsArticle_body a {
  color: var(--color-link);
  border-bottom: 1px solid currentColor;
}
.bl_newsArticle_body a:hover { color: var(--color-link-hover); }
.bl_newsArticle_body img {
  margin: 2rem 0;
  max-width: 100%;
}
.bl_newsArticle_back {
  margin-top: 4rem;
  text-align: center;
}

/* ----- bl_newsSidebar ----- */
.bl_newsSidebar {
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", sans-serif;
}
.bl_newsSidebar_block { margin-top: 2.5rem; }
.bl_newsSidebar_block:first-child { margin-top: 0; }
.bl_newsSidebar_ttl {
  font-family: "Outfit", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  color: var(--color-black);
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--pro-grayBorder);
}
.bl_newsSidebar_list li + li { margin-top: 0.75rem; }
.bl_newsSidebar_list a {
  display: block;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--pro-textGray);
}
.bl_newsSidebar_list a:hover { color: var(--color-black); }
.bl_newsSidebar_date {
  display: block;
  font-family: "Outfit", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.75rem;
  color: var(--pro-darkMid);
  margin-bottom: 0.25rem;
}

/* =============================================================
   ▼▼▼ Noble Arc 案件オーバーライド ▼▼▼
   ヒアリング反映:
     - カラー基調: 紺(ネイビー)ベース + 金(ゴールド)を差し色にごく一部
       （テンプレのモノクロ基調を「黒→紺」に置換。金は限定使用）
     - 見出し(大きい和文): 明朝(Noto Serif JP) / 本文: ゴシック / 英文: Outfit維持
     - ロゴ: 提供の虹色グラデロゴ画像をヘッダー・フッターに採用
   ※テンプレ本体(style.scss)は変更せず、本ファイル末尾でのみ上書き。
   ============================================================= */

:root {
  /* 紺ベースへ置換（ヘッダー/フッター/暗セクション/CTA/ボタンに波及） */
  --pro-dark:        #233a63;   /* メインネイビー（やや明るめの紺） */
  --pro-darkMid:     #33507f;   /* ネイビー中間（ボタン等） */
  --color-accent:    #233a63;

  /* 案件用エイリアス */
  --color-navy:      #233a63;
  --color-navy-dark: #1a2c4b;
  --color-gold:      #c2a45a;   /* イエローゴールド（差し色・ごく一部） */
  --color-gold-dark: #a98a40;

  --color-link:       var(--color-navy);
  --color-link-hover: var(--color-navy-dark);
}

/* ----- 見出しの明朝化（大きい和文のみ。小さい和文・本文はゴシックのまま） ----- */
.bl_lead_ttl,
.bl_fv-pro_catch,
.bl_newsArticle_ttl {
  font-family: "Noto Serif JP", "游明朝", "YuMincho", "ヒラギノ明朝 ProN", serif;
}
.bl_lead_ttl    { font-weight: 600; }
.bl_fv-pro_catch{ font-weight: 500; letter-spacing: 0.06em; }

/* ----- ロゴ画像（ヘッダー / フッター） ----- */
/* 提供ロゴはアーチ部分がカラフルで紺背景に映える。テキスト部は暗色のため、
   将来的には白抜きロゴの用意を推奨（handoff参照）。現状は提供版をそのまま使用。 */
.bl_header_logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.bl_header_logo img { height: 42px; width: auto; }
@media screen and (max-width: 896px) {
  .bl_header_logo img { height: 34px; }
}
/* スクロールで白背景反転時もロゴ画像はそのまま（暗テキストが読めるようになる） */

.bl_footer_logo img { height: 40px; width: auto; }
@media screen and (max-width: 896px) {
  .bl_footer_logo img { margin: 0 auto; }
}

/* ----- 金アクセント（ごく一部） ----- */
/* 巨大アウトラインロゴ：金の輪郭に */
.bl_giantLogo_text {
  -webkit-text-stroke-color: var(--color-gold);
}
/* FV縦書きラベル：金 */
.bl_fv-pro_vertical { color: var(--color-gold); opacity: 0.85; }
/* 中央セクション見出しの下に金の短い罫線 */
.bl_heading-pro.__center .--en {
  position: relative;
  padding-bottom: 0.5em;
}
.bl_heading-pro.__center .--en::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 48px;
  height: 2px;
  background: var(--color-gold);
}

/* ----- bl_genreList（買取対応ジャンル：3×3 アイコンカード） ----- */
.bl_genreList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 3カラム＝1枠が1カラム分の幅 */
  gap: 1.5rem;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 481px) and (max-width: 896px) {
  .bl_genreList { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
@media screen and (max-width: 479px) {
  .bl_genreList { grid-template-columns: repeat(2, 1fr); gap: 0.875rem; }
}
.bl_genreList_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2.5rem 1rem;
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", sans-serif;
  background: var(--color-white);
  border: 1px solid var(--pro-grayBorder);
  text-align: center;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
@media screen and (max-width: 479px) {
  .bl_genreList_item { padding: 1.75rem 0.75rem; gap: 0.75rem; }
}
.bl_genreList_icon {
  font-size: 1.875rem;
  line-height: 1;
  color: var(--color-navy);
  transition: color 0.3s ease;
}
.bl_genreList_name {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-navy);
}
.bl_genreList_item:hover {
  transform: translateY(-4px);
  border-color: var(--color-navy);
  box-shadow: 0 12px 28px rgba(35, 58, 99, 0.10);
}
/* 宝縁（紹介制）ジャンルは金アクセント */
.bl_genreList_item.__gold { border-color: var(--color-gold); background: rgba(194, 164, 90, 0.06); }
.bl_genreList_item.__gold .bl_genreList_icon,
.bl_genreList_item.__gold .bl_genreList_name { color: var(--color-gold-dark); }
.bl_genreList_item.__gold:hover {
  border-color: var(--color-gold-dark);
  box-shadow: 0 12px 28px rgba(194, 164, 90, 0.18);
}

/* ----- bl_media_img __square（代表写真：正方形固定・頭が切れないように） ----- */
/* 既定の bl_media_img img は aspect-ratio:4/3 で上下がトリミングされ頭が切れる。
   代表写真は正方形(1280×1280)なので 1:1 固定＋上基準で全体を表示する。 */
.bl_media_img.__square img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top center;
}

/* ----- bl_contactTel（お問い合わせ：電話中心ブロック） ----- */
.bl_contactTel {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding: 3.5rem 2rem;
  border: 1px solid var(--pro-grayBorder);
  background: var(--pro-grayLight);
}
.bl_contactTel_label {
  font-family: "Outfit", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  color: var(--color-gold-dark);
}
.bl_contactTel_number {
  display: inline-block;
  margin-top: 0.75rem;
  font-family: "Outfit", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(2.25rem, 6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--color-navy);
}
.bl_contactTel_number:hover { color: var(--color-navy); }
.bl_contactTel_hours {
  margin-top: 1rem;
  font-size: 0.95rem;
  color: var(--pro-textGray);
}
.bl_contactTel_note {
  max-width: 640px;
  margin: 2rem auto 0;
  font-size: 0.85rem;
  line-height: 1.9;
  color: var(--pro-textGray);
  text-align: left;
}

/* ----- 飲食店事業など補足テキストブロック ----- */
.bl_noteBox {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  padding: 2.5rem 2.5rem;
  background: var(--pro-grayLight);
  border-left: 3px solid var(--color-gold);
}
@media screen and (max-width: 479px) {
  .bl_noteBox { padding: 1.75rem 1.5rem; }
}
.bl_noteBox_ttl {
  font-family: "Noto Serif JP", "游明朝", "YuMincho", serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--color-navy);
  margin: 0 0 1rem;
}

/* ----- 実績(Works)カードのカテゴリーバッジ（caseCard内・金） ----- */
.bl_caseCard_cat {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.2em 0.7em;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-gold-dark);
  border: 1px solid var(--color-gold);
  background: rgba(194, 164, 90, 0.08);
}
/* =============================================================
   ▲▲▲ Noble Arc 案件オーバーライド ▲▲▲
   ============================================================= */