@charset "UTF-8";
/* ==============================================================================================
   Theme - Light Monochrome
   moon-x.com のトンマナに合わせた配色。値はブラウザの計算済みスタイルから実測した。
     基調背景 #f4f4f4 / セクション #eeeeee / フッター #383838
     文字 #000000 / 補助 #333333 / 罫線 #cacaca
   ============================================================================================== */

/* --- CSS Custom Properties --- */
:root {
  /* 背景 */
  /* 背景は moon-x の「実際に画面に出るピクセル色」に合わせる。
     CSS指定値(#f4f4f4)ではなく、グラデ/質感レイヤー込みの実表示は
     #e5e5e5〜#e7e7e7 帯だった（ピクセル最頻色を実測）。純白は使わない。 */
  --color-bg: #f5f5f5;            /* ページ基調（moon-x 実表示の中央値） */
  --color-bg-secondary: #dedede;  /* 区切りセクション（一段濃い） */
  --color-bg-card: #ececec;       /* カード面（一段明るく、影で分離） */
  --color-bg-footer: #383838;
  --color-bg-deep: #d6d6d6;       /* 濃いめの区切り */

  /* 文字 */
  --color-text: #333333;
  --color-text-muted: #888888;
  --color-text-heading: #000000;
  --color-text-inverse: #ffffff;

  --color-border: #cacaca;

  /* かつてのゴールド枠。モノクロ化にあたり、1変数が罫線・文字・背景の
     3役を兼ねていたため役割ごとに値を分けた。名称は参照箇所が多く、
     一括改名は別途行う。 */
  /* かつてのゴールド。用途別に色を分ける（指示: ゴールドは背景に応じ白か黒、
     面の黒はフッター黒 #383838 に統一）。
     文字・アイコン用は黒。背景/面用は下の --color-fill-* を使う。 */
  --color-gold: #000000;              /* 明るい背景上の文字・アイコン強調 */
  --color-gold-light: #333333;
  --color-gold-hover: #000000;
  --color-gold-dark: #000000;
  /* グラデーションは面として使われるため、フッター黒基調に */
  --color-gold-gradient: linear-gradient(-135deg, #383838, #4a4a4a);
  --color-gold-gradient-reverse: linear-gradient(-135deg, #4a4a4a, #383838);

  /* 面の黒（背景・ボタン地・帯）: フッター黒に統一 */
  --color-fill-dark: #383838;
  --color-fill-dark-hover: #4a4a4a;

  /* 罫線用（旧ゴールドが border に使われていた箇所の移行先） */
  --color-rule: #cacaca;
  --color-rule-strong: #333333;

  --color-shadow: rgba(0, 0, 0, 0.08);
  --color-accent-red: #c36c6c;

  /* タイポグラフィ（moon-x.com の実測値） */
  --font-en: "Outfit", sans-serif;
  --font-jp: "MFW-UDShinGoNTPro-Regular", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-jp-medium: "MFW-UDShinGoNTPro-Medium", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-jp-bold: "MFW-UDShinGoNTPro-DeBold", "Hiragino Kaku Gothic ProN", sans-serif;
  --lh-heading: 1.4;
  --lh-body: 1.4;
  --lh-tight: 1.2;
  --ls-heading: 0.06em;
  --ls-body: 0.03em;
}

/* --- Base (font: serif style inspired by roju.jp) --- */
body {
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
  font-family: var(--font-en), var(--font-jp-medium) !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  letter-spacing: 0.15em;
}

/* --- Links --- */
a {
  color: var(--color-gold);
}
a:hover {
  color: var(--color-gold-hover);
}
/* 暗いチャコール背景のボタンは、上の a:hover(=var(--color-gold-hover)=#000)による
   黒文字化で文字が消えるため、ホバー時も白を維持する（資料DL/お問い合わせ完了ボタン） */
.contact-new_complete_btn,
.contact-new_complete_btn:hover {
  color: #fff !important;
}

/* --- Gradient Utilities (override green → gold) --- */
.u-gradient::before {
  background: var(--color-gold-gradient) !important;
}
.u-gradient::after {
  background: var(--color-gold-gradient-reverse) !important;
}
.u-gradient2 {
  background: var(--color-gold-gradient) !important;
}
.u-font-gradient {
  background-image: var(--color-gold-gradient) !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.u-font-gradient.-gradient-reverse {
  background-image: var(--color-gold-gradient-reverse) !important;
}
.u-bg-grad {
  background: #e1e1e1 !important;
}

/* --- Background Utility Overrides --- */
.u-bg-gray,
.u-bg-white {
  background: var(--color-bg-secondary) !important;
}

/* --- Image hover overlay (green → gold) --- */
.u-img-hover::after {
  background: var(--color-gold-gradient) !important;
}

/* --- Shadows on dark bg --- */
.u-shadow {
  box-shadow: 0 4px 30px var(--color-shadow) !important;
}

/* --- Header --- */
.l-header {
  background: rgba(248, 248, 248, 0.5) !important;
  margin-top: -10px !important;
  padding-bottom: 1.6rem !important;
}
.l-header .c-container-xl.l-header__inr {
  width: 94% !important;
  margin-left: 4% !important;
  margin-right: 2% !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
@media screen and (max-width: 768px) {
.l-header {
    padding-top: 15px !important;
  }
}
.c-logo-img {
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}
.c-logo-img a {
  display: block;
}
.c-logo-img img {
  height: 3.8rem;
  width: auto;
  display: block;
}
@media screen and (max-width: 768px) {
.l-header .c-container-xl.l-header__inr {
    width: 95% !important;
    margin-left: 5% !important;
  }
  .c-logo-img {
    margin-left: 1.5rem !important;
  }
  .l-header .c-logo {
    height: 3rem !important;
    min-width: 18rem !important;
  }
}
.l-header__nav__list a {
  color: #000 !important;
  font-family: var(--font-jp-medium) !important;
}
.l-header__nav__list li {
  font-family: var(--font-jp-medium) !important;
  font-size: 1.5rem !important;
}
.l-header__nav .c-button {
  font-family: var(--font-jp-medium) !important;
}
.l-header__nav__list a:hover {
  color: var(--color-gold-hover) !important;
}
/* ヘッダーナビ: ホバーでテキストがロール（ボタンと同じ挙動） */
.l-header__nav__list li a {
  display: inline-flex !important;
  align-items: center;
  gap: 0.35em;
}
.l-nav-roll {
  display: inline-block;
  overflow: hidden;
  height: 1.5em;
  line-height: 1.5;
  vertical-align: bottom;
}
.l-nav-roll__in {
  display: flex;
  flex-direction: column;
  transition: translate 350ms cubic-bezier(0.77, 0, 0.175, 1);
}
.l-nav-roll__in > span {
  display: block;
  height: 1.5em;
  line-height: 1.5;
  white-space: nowrap;
}
.l-header__nav__list li a:hover .l-nav-roll__in {
  translate: 0 -1.5em;
}
.l-header__nav {
  flex: 1 !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  margin-right: 2rem !important;
}
.l-header__cta {
  flex-shrink: 0;
  margin: 0;
}
.l-header__cta .c-button {
  font-family: var(--font-jp-medium) !important;
}
.l-header__nav-upper {
  text-align: right;
  margin-bottom: 0.3rem;
  font-size: 1.3rem !important;
  font-weight: normal;
  letter-spacing: 0.05em;
  margin-right: 30px;
}
.l-header__nav-upper a {
  color: #000 !important;
  text-decoration: none;
}
.l-header__nav-upper a:hover {
  color: var(--color-gold-hover) !important;
}
.l-header__nav-divider {
  color: var(--color-text-muted);
  margin: 0 0.3em;
}
.l-header__nav-lower {
  display: flex;
  align-items: center;
}
.l-header__nav__list a {
  white-space: nowrap !important;
}
@media screen and (max-width: 959px) {
.l-header__cta {
    margin-left: auto !important;
  }
}
@media screen and (max-width: 768px) {
.l-header__nav-upper {
    display: none;
  }
  .l-header__cta {
    display: none;
  }
}
.l-header__nav__list a i {
  font-size: 0.7em;
  margin-left: 0.4em;
  opacity: 0.6;
}

/* --- Logo --- */
/* If logo-white is already used, keep it; otherwise we invert */
.c-logo {
  filter: brightness(0) invert(1);
}
.c-logo.-white {
  filter: none;
}

/* --- Footer --- */
.l-footer {
  background: var(--color-bg-footer) !important;
  color: var(--color-text) !important;
  border-radius: 15px 15px 0 0;
  padding-top: 3rem !important;
}
.l-footer__copy .c-txt-s {
  color: var(--color-text-muted) !important;
}
.l-footer__copyright {
  color: #ececec !important;
}
.l-footer__fb {
  color: var(--color-gold) !important;
}

/* --- NEWバッジ（公開7日以内の投稿） --- */
.c-new-badge {
  display: inline-block;
  background: #e74c3c;
  color: #fff !important;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 3px;
  margin-right: 8px;
  letter-spacing: 0.06em;
  vertical-align: middle;
  font-family: var(--font-en), sans-serif;
  transform: translateY(-1px);
}

/* --- Buttons --- */
.c-button {
  border-color: var(--color-gold) !important;
  color: var(--color-text) !important;
}
.c-button:hover {
  background: var(--color-fill-dark-hover) !important;
  color: #fff !important; /* ホバー背景が暗色(#4a4a4a)のため白文字（旧#0b0c10は黒で不可視） */
}
.c-button.-clearwhite {
  border: none !important;
  color: #fff !important;
  background: var(--color-gold-gradient) !important;
  padding: 1.2rem 2rem !important;
  border-radius: 5px !important;
  width: auto !important;
}
.c-button.-clearwhite:hover {
  background: var(--color-gold-gradient-reverse) !important;
  color: #fff !important;
}
/* ヘッダーのお問い合わせボタン: ホバーでふわっと浮き上がる */
.l-header__cta .c-button.-clearwhite {
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
}
.l-header__cta .c-button.-clearwhite:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
}
.c-button.-wmax {
  border-color: var(--color-gold) !important;
  color: var(--color-text) !important;
}
.c-button.-wmax:hover {
  background: var(--color-fill-dark-hover) !important;
  color: #fff !important; /* ホバー背景が暗色(#4a4a4a)のため白文字（旧#0b0c10は黒で不可視） */
}
.c-button.u-gradient {
  border: none !important;
  color: #fff !important;
  background: transparent !important;
}
.c-button.u-gradient:hover {
  color: #fff !important;
}
.c-button.-shadow.u-gradient {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* --- Arrow icons --- */
.c-arrow.-type2 {
  border: none !important;
  width: auto !important;
  height: auto !important;
}
/* Replace arrow icon inside circle with Font Awesome */
.c-arrow.-type2 .c-arrow__obj::after {
  content: "\f054" !important;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-size: 1.2rem;
  color: var(--color-gold);
  display: block !important;
  position: static !important;
  transform: none !important;
}
.c-arrow.-type2 .c-arrow__obj::after {
  /* Keep default; gold override on hover */
}
.t-top-news__link:hover + .t-top-news__flex .c-arrow.-type2 {
  background: transparent !important;
}
.t-top-news__link:hover + .t-top-news__flex .c-arrow.-type2 .c-arrow__obj::after {
  color: var(--color-gold-hover) !important;
}
/* お知らせバッジ: 通常=黒枠・透明背景・黒文字 / ホバー=黒背景・白文字 */
.t-top-news__cat.u-gradient {
  color: #000 !important;
  border: 1px solid #000 !important;
  transition: color 0.3s ease, background 0.3s ease !important;
}
.t-top-news__cat.u-gradient::before,
.t-top-news__cat.u-gradient::after {
  background: transparent !important;   /* 通常は背景なし（透明） */
}
/* ホバー: 背景を黒に */
.t-top-news__link:hover + .t-top-news__flex .t-top-news__cat.u-gradient::before,
.t-top-news__link:hover + .t-top-news__flex .t-top-news__cat.u-gradient::after,
.t-top-news__cat.u-gradient:hover::before,
.t-top-news__cat.u-gradient:hover::after {
  background: #000 !important;
}
/* ホバー: 文字を白に */
.t-top-news__link:hover + .t-top-news__flex .t-top-news__cat.u-gradient,
.t-top-news__cat.u-gradient:hover {
  color: #fff !important;
}
.c-arrow-round.u-gradient {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* --- Content / Cards --- */
.c-contents {
  background: var(--color-bg-secondary) !important;
  color: var(--color-text) !important;
}
.c-card {
  color: var(--color-text) !important;
}
.c-card__title {
  color: var(--color-text-heading) !important;
}
.c-card__label {
  color: var(--color-text-muted) !important;
}
.c-card__label.-type2 {
  color: var(--color-gold) !important;
}

/* --- Headings (serif, elegant) --- */
.c-heading-sec__jp {
  color: var(--color-text-heading) !important;
  font-family: var(--font-jp-medium) !important;
}
.c-heading-sec__en {
  color: var(--color-gold) !important;
  font-family: var(--font-en), var(--font-jp-medium) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.c-heading-accent {
  color: var(--color-gold) !important;
  font-family: var(--font-en), var(--font-jp-medium) !important;
  letter-spacing: 0.025em;
}
.c-heading-l {
  color: var(--color-text-heading) !important;
  font-family: var(--font-jp-medium) !important;
}
.c-heading-s {
  color: var(--color-text-heading) !important;
  font-family: var(--font-jp-medium) !important;
}

/* --- Text ---
   moon-x.com 実測に寄せる: 本文16px / 行間1.7 / 字間0.05em / ウェイト。
   従来は line-height:2.375 と緩く、締まりが無かった。 */
.c-txt-l,
.c-txt-m,
.c-txt-s {
  color: var(--color-text) !important;
  letter-spacing: 0.05em !important;
  /* 代替のUD新ゴMediumが参照サイトのゴシックMB101より細く見えるため、
     本文はDeBoldでしっかり見せる（安村さんの指示） */
  font-family: var(--font-jp-bold) !important;
}
.c-txt-l {
  font-size: 1.5rem !important;
  line-height: 1.8 !important;
}
.c-txt-m {
  font-size: 1.5rem !important;
  line-height: 1.8 !important;
}
@media screen and (max-width: 768px) {
.c-txt-l {
    font-size: 1.5rem !important;
  }
  .c-heading-sec__en {
    font-size: 1.3rem !important;
  }
  .t-top-movie .c-txt-l[style*="text-align:center"] {
    text-align: left !important;
  }
  .c-txt-m {
    font-size: 1.5rem !important;
    line-height: 1.7 !important;
  }
}
.c-link {
  color: var(--color-text) !important;
  text-underline-offset: 0.5em !important;
}
.c-link:hover {
  color: var(--color-gold-hover) !important;
}

/* --- Font overrides: all headings & UI elements → serif --- */
h1, h2, h3, h4, h5, h6,
.c-heading-sec__jp,
.c-heading-sec__en,
.c-heading-accent,
.c-heading-l,
.c-heading-s,
.c-heading-m,
.c-heading-xl,
.t-main-slogan__main,
.t-top-recruit__text__heading,
.t-top-recruit__text__en,
.t-top-news__title h3,
.t-article-header__title,
.c-card__title,
.l-sitemap__label__en,
.l-sitemap__label__jp,
.c-button {
  font-family: var(--font-jp-medium) !important;
}
.c-heading-sec__en,
.c-heading-accent,
.t-main-slogan__en,
.t-top-recruit__text__en,
.l-sitemap__label__en {
  font-family: var(--font-en), var(--font-jp-medium) !important;
  letter-spacing: 0.05em;
}
.c-button {
  letter-spacing: 0.05em;
}

/* --- Hero Section (roju.jp style dark overlay) --- */
.c-hero {
  position: relative;
  background: var(--color-bg) !important;
}
.c-hero__heading::before {
  display: none !important;
}
/* ヒーロー英語タイトル(上): 白文字＋サイトマップの黒の完全な角丸背景 */
.c-hero__heading__en {
  color: #ffffff !important;
  background: rgba(0, 0, 0, 0.8);
  display: block;
  width: -webkit-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.2rem;
  padding: 0.35em 1.1em;
  border-radius: 999px;
}
/* ヒーロー日本語タイトル(下): 黒文字＋背景はトップヒーローと同色 #e1e1e1（幅はテキスト量に応じて可変） */
.c-hero__heading__jp {
  color: rgba(0, 0, 0, 0.8) !important;
  background: rgba(225, 225, 225, 0.85);
  display: block;
  width: -webkit-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding: 0.1em 0.45em;
}
/* スマホのみ: ヒーロー日本語タイトルの上下パディングを増やす（PCは0.1emのまま不変） */
@media screen and (max-width: 768px) {
  .c-hero__heading__jp {
    padding: 0.35em 0.45em;
  }
}
/* roju.jp method: reduce image opacity directly instead of overlay */
.c-hero__bg__inr img,
.c-hero__bg__inr .js-objectfit,
.c-hero .js-parallax-img__inr img {
  opacity: 1 !important;
}
/* Bottom gradient fade into page background */
.c-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
  z-index: 11;
  pointer-events: none;
}
/* Ensure slogan text sits above overlay */
.t-main-slogan {
  z-index: 1000 !important;
}
.t-main-slogan__en {
  color: rgba(255, 255, 255, 0.6);
}

/* --- Top Page: News --- */
.t-top-news {
  border-top-color: var(--color-border) !important;
}
.t-top-news li {
  border-bottom-color: var(--color-border) !important;
}
.t-top-news__time {
  color: var(--color-text-muted) !important;
}
.t-top-news__title h3 {
  color: var(--color-text-heading) !important;
  font-weight: normal !important;
}

/* --- Top Page: Movie Section --- */
.t-top-movie {
  background: var(--color-bg-secondary) !important;
  margin-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
@media screen and (max-width: 959px) {
.t-top-movie {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media screen and (max-width: 768px) {
.t-top-movie {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 6rem !important;
  }
}

/* --- 画像オーバーレイ（汎用） --- */
/* 使い方: 要素に .img-overlay を追加。透明度変更は .img-overlay--20 .img-overlay--40 等 */
/* ::before を使用（::after と競合しないため） */
.img-overlay {
  position: relative;
}
.img-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(11, 12, 16, 0.3);
  z-index: 1;
  pointer-events: none;
}
.img-overlay--20::before { background: rgba(11, 12, 16, 0.2); }
.img-overlay--40::before { background: rgba(11, 12, 16, 0.4); }
.img-overlay--50::before { background: rgba(11, 12, 16, 0.5); }
.img-overlay--60::before { background: rgba(11, 12, 16, 0.6); }
.img-overlay--70::before { background: rgba(11, 12, 16, 0.7); }
/* 「選ばれるための価値づくり」(POINT.01/03) の右カラム画像のみ暗幕を外す */
#point01 .img-overlay::before,
#point03 .img-overlay::before { display: none !important; }
/* POINT.02: rad.png（ダイアグラム）は暗幕を外し、切れないよう全体表示 */
#point02 .img-overlay::before { display: none !important; }
#point02 .c-ratioobj__target {
  object-fit: contain !important;
  object-position: center !important;
}
/* スマホ: POINT.02(RAD)の rad-sp.png（縦長）を固定比率箱から解放し、
   コンテンツ幅いっぱい×自然な高さで表示（PCは rad.png のまま不変） */
@media screen and (max-width: 768px) {
  #point02 .c-ratioobj {
    height: auto !important;
  }
  #point02 .c-ratioobj::after {
    display: none !important;
  }
  #point02 .c-ratioobj__target,
  #point02 .c-ratioobj img {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    object-fit: initial !important;
  }
}
/* トップ: ヒーロー直下スライダーをさらに小さく */
.top-hero-slider { margin-top: 6px !important; }
.top-hero-slider .js-loopSlider { height: 160px !important; }
@media screen and (max-width: 768px) {
  .top-hero-slider .js-loopSlider { height: 140px !important; }
}
/* スライダー各画像 左上のカテゴリラベル（黒半透明帯・白文字・英語は小さめ） */
.top-hero-slider .js-loopSlider__cell { position: absolute; }
.top-hero-slider .slide-label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.6rem 1.1rem 0.7rem;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  pointer-events: none;
}
.top-hero-slider .slide-label__jp {
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.top-hero-slider .slide-label__en {
  font-size: 0.95rem;
  line-height: 1.2;
  opacity: 0.85;
  font-family: var(--font-en), var(--font-jp-medium);
  letter-spacing: 0.03em;
}
@media screen and (max-width: 768px) {
  .top-hero-slider .slide-label { padding: 0.4rem 0.7rem 0.5rem; }
  .top-hero-slider .slide-label__jp { font-size: 1.0rem; }
  .top-hero-slider .slide-label__en { font-size: 0.8rem; }
}

/* --- About: Mission images overlay --- */
.t-about-mission__pict__img img,
.t-about-mission__pict__img .u-img-fit,
.t-about-mission__pict__img .js-objectfit {
  filter: brightness(0.9) !important;
  -webkit-filter: brightness(0.9) !important;
}

/* --- Top Page: About image text overlay --- */
.t-top-about-pict {
  position: relative !important;
}
.t-top-about-pict__text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  color: #fff;
  font-family: var(--font-jp-medium);
  font-size: clamp(20px, 2.5vw, 40px);
  letter-spacing: 0.1em;
  line-height: 1.8;
  text-align: center;
  white-space: nowrap;
}

/* --- SP-only line break --- */
.sp-br { display: none; }
.sp-only { display: none; }
@media screen and (max-width: 768px) {
.sp-br { display: block; }
  br.sp-only { display: inline; }
  .t-top-about-pict__text {
    top: 45% !important;
    color: #ffffff !important;
    font-weight: bold !important;
  }
  /* 背景画像の明るさ（黒下地に対する画像の不透明度）
     ※後方の共通ルール(0.5)に勝つよう親クラスを足して詳細度を上げる */
  .t-top-about-pict .t-top-about-pict__img-wrap img {
    opacity: 0.7 !important;
  }
}

/* --- Top Page: About image overlay (same as FV) --- */
.t-top-about-pict {
  background-color: #000 !important;
  overflow: hidden;
}
.t-top-about-pict__img-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
}
.t-top-about-pict__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5 !important;
  transform: scale(1.15);
  transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.t-top-about-pict.is-visible .t-top-about-pict__img-wrap img {
  transform: scale(1);
}

/* --- Top Page: About Section --- */
.t-topAbout {
  background: var(--color-bg-card);
  border-radius: 15px;
}

/* --- Top Page: Business Section --- */
.t-top-business-column {
  background: var(--color-bg-card) !important;
  border-radius: 15px;
}
.t-top-business-column__text {
  color: var(--color-text) !important;
}
.t-top-business-column__text .c-heading-l {
  color: #000000 !important;
}
/* Text cover hover effect: mask matches card bg, reveal gold text */
.ef-txt-cover.-nom {
  color: #fff !important;
}
.ef-txt-cover.-hv {
  color: #000000 !important;
}
.ef-txt-cover.-hv::after {
  background-color: #181a1e !important;
}
.ef-txt-cover[data-txt]::after {
  color: #000000 !important;
}
.t-top-business-column__text .c-txt-m {
  color: var(--color-text) !important;
}
.t-top-business-accent::after {
  display: none !important;
  content: none !important;
}

/* --- Top Page: Recruit Section --- */
.t-top-recruit {
  border: 1px solid var(--color-border);
  background: none !important;
}
.t-top-recruit:not(.t-top-recruit--rad)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../image/top/recruit.png) no-repeat center center/cover;
  transform: scale(1.15);
  transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 0;
}
.t-top-recruit:not(.t-top-recruit--rad).is-visible::before {
  transform: scale(1);
}
.t-top-recruit--rad {
  background: var(--color-bg-card) !important;
}
.t-top-recruit--rad::after {
  display: none !important;
}
.t-top-recruit--rad .t-top-recruit__text__heading {
  font-size: 3.4rem !important;
}
.t-top-recruit--rad .t-top-recruit__text__heading {
  display: inline-block !important;
}
.t-top-recruit--rad .t-top-recruit__text__heading::after {
  width: 100% !important;
}
.t-top-recruit--rad {
  padding: 6.8rem 3rem !important;
}
.t-top-recruit--rad .t-top-recruit__text {
  width: 100% !important;
}
@media screen and (max-width: 768px) {
.t-top-recruit--rad {
    padding: 3rem 1.5rem !important;
    border-radius: 10px !important;
  }
}
.t-top-recruit:not(.t-top-recruit--rad) .t-top-recruit__text {
  background: rgba(11, 12, 16, 0.75) !important;
  padding: 2.5rem 7rem !important;
  border-radius: 0;
  position: relative;
  z-index: 2;
}
/* リクルート本文: 暗い背景の上でも読めるよう白文字に固定（txtcropのspan子要素も含む） */
.t-top-recruit .t-top-recruit__text__copy,
.t-top-recruit .t-top-recruit__text__copy * {
  color: #ffffff !important;
}
/* リクルートのボタン（エントリーはこちら）も白文字・白枠で読めるように */
.t-top-recruit .fv-btn,
.t-top-recruit .fv-btn * {
  color: #ffffff !important;
  border-color: #ffffff !important;
}
/* 黒いカード（.t-top-recruit__text）を下寄せに（上パディング大・下パディング小。背景画像は不変） */
.t-top-recruit:not(.t-top-recruit--rad) {
  padding-top: 40rem !important;
  padding-bottom: 0 !important;
}
/* 黒いカードを幅いっぱいに広げる */
.t-top-recruit:not(.t-top-recruit--rad) .t-top-recruit__text {
  width: 100% !important;
}
/* 見出し・RECRUIT を左揃え、見出しを小さく */
.t-top-recruit:not(.t-top-recruit--rad) .t-top-recruit__text {
  text-align: left !important;
}
.t-top-recruit:not(.t-top-recruit--rad) .t-top-recruit__text__heading {
  font-size: 2.4rem !important;
  margin: 1rem 0 0.5rem !important;
}
/* 見出し・RECRUIT を白で固定（ホバーで黒くならないように・内側spanも含む） */
.t-top-recruit .t-top-recruit__text__heading,
.t-top-recruit .t-top-recruit__text__heading *,
.t-top-recruit .t-top-recruit__text__en,
.t-top-recruit:hover .t-top-recruit__text__heading,
.t-top-recruit:hover .t-top-recruit__text__heading *,
.t-top-recruit:hover .t-top-recruit__text__en {
  color: #ffffff !important;
}
/* 本文とボタンを2カラム（本文=左、ボタン=右）・本文は左揃え */
.t-top-recruit .t-top-recruit__row {
  display: flex !important;
  align-items: center !important;
  gap: 4rem !important;
  text-align: left !important;
  margin-top: 0.5rem !important;
}
.t-top-recruit .t-top-recruit__row .t-top-recruit__text__copy {
  flex: 1 1 auto !important;
  text-align: left !important;
  margin: 0 !important;
}
.t-top-recruit .t-top-recruit__row .u-space-s {
  flex: 0 0 auto !important;
  margin: 0 !important;
  transform: translateY(-60px) !important;
}
.t-top-recruit::after {
  background: rgba(11, 12, 16, 0.1) !important;
}
.t-top-recruit:hover::after {
  background: rgba(11, 12, 16, 0.05) !important;
}
.t-top-recruit__text__heading::after {
  background: var(--color-fill-dark) !important;
}
.t-top-recruit:not(.t-top-recruit--rad) .t-top-recruit__text__heading {
  font-size: 2.4rem !important;
  display: inline-block !important;
}
.t-top-recruit:not(.t-top-recruit--rad) .t-top-recruit__text__heading::after {
  width: 100% !important;
  background: #ffffff !important;
  height: 1px !important;
  margin-top: 0.8rem !important;
}
@media screen and (max-width: 768px) {
.t-top-recruit--rad .t-top-recruit__text__heading {
    font-size: 2.2rem !important;
    white-space: nowrap !important;
  }
  .t-top-recruit--rad .t-top-recruit__text__heading .u-inline-block {
    display: inline !important;
  }
  .t-top-recruit .t-top-recruit__text__copy {
    text-align: left !important;
  }
  /* リクルート: スマホは本文とボタンを縦積みに（PCの横並びflexだと本文幅が潰れて
     1文字ずつ縦書きのように崩れるため。max-width:768px内なのでPCは不変） */
  .t-top-recruit .t-top-recruit__row {
    display: block !important;
    margin-top: 1.6rem !important; /* 見出し↔本文の隙間を広げる（SP） */
  }
  .t-top-recruit .t-top-recruit__row .t-top-recruit__text__copy {
    width: 100% !important;
  }
  /* リクルート本文: スマホのみ1・2文目を非表示（3文目のみ表示。PCは全文表示のまま） */
  .recruit-copy-sp-hide {
    display: none !important;
  }
  .t-top-recruit .t-top-recruit__row .u-space-s {
    transform: none !important;
    padding-top: 0 !important;            /* .u-space-s既定の padding-top:3rem を解除（隙間の主因） */
    margin-top: 0.4rem !important;        /* ボタン上の隙間を狭める（SP） */
    text-align: center !important;
  }
  hr.contact-divider {
    display: block !important;
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 2rem 0;
  }
  .c-flex.-flex-ftcontact .c-heading-s {
    text-align: center !important;
  }
  /* CTAボタン（無料相談はこちら／資料ダウンロード）の→矢印をSPのみ非表示 */
  .about-cta-card__label .fa-arrow-right {
    display: none !important;
  }
  .t-top-recruit:not(.t-top-recruit--rad) .t-top-recruit__text__heading {
    font-size: 2.1rem !important;
  }
  .t-top-recruit:not(.t-top-recruit--rad) .t-top-recruit__text {
    padding: 2.5rem 2rem !important;
  }
  /* リクルート: スマホは画面幅いっぱい。100vwは横スクロールバー幅ぶんはみ出すため使わず、
     コンテナ(.c-container-m)の90%幅をSPだけ100%に解除して端まで広げる（PCは768px外で不変） */
  .c-container-m:has(.t-top-recruit:not(.t-top-recruit--rad)) {
    width: 100% !important;
    max-width: 100% !important;
  }
  .t-top-recruit:not(.t-top-recruit--rad) {
    border: none !important;                 /* 左右ボーダー除去 */
    border-radius: 0 !important;             /* 背景画像の角丸を削除（page_top.css:485の10pxを上書き） */
    padding: 28rem 0 0 !important;           /* 画像高さを抑え拡大crop緩和＋左右0で黒背景を端まで */
  }
  .t-top-news-wrap,
  .t-top-news {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

/* --- Sidebar --- */
.l-side {
  background: linear-gradient(to bottom, #d8d8d8 0%, #e1e0e0 100%) !important;
  border-right: 1px solid #cacaca !important;
  color: var(--color-text);
  box-shadow: none !important;
}
.l-side__copyright {
  filter: brightness(0.7);
}
.l-side__copyright img {
  width: 1.2rem !important;
  height: 28rem !important;
}
.c-toggle.u-gradient {
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
}
.c-scroll {
  color: var(--color-text-muted);
}
.c-scroll__txt__copy span,
.c-scroll__txt__copy::after {
  transition: none !important;
}
.c-scroll__round {
  border-color: var(--color-gold) !important;
}
.c-scroll__arrow__line {
  background: var(--color-fill-dark) !important;
}
.c-scroll__arrow::before,
.c-scroll__arrow::after {
  background: var(--color-fill-dark) !important;
  transition: none !important;
}

/* --- Sitemap Overlay --- */
/* 土台は透明に（明るい背景は .l-sitemap__bg が担当）。旧ダークテーマの黒背景を消して開いた瞬間の黒フラッシュを防止 */
.l-sitemap {
  background: transparent !important;
}
.l-sitemap__inr {
  background: var(--color-bg-card) !important;
  align-items: flex-start !important;
}
.l-sitemap__bg {
  background: var(--color-bg) !important;
}
.l-sitemap__nav__list {
  border-top-color: var(--color-bg) !important;
}
.l-sitemap__nav__list > li {
  border-bottom-color: var(--color-bg) !important;
}
.l-sitemap__label__en {
  color: var(--color-gold) !important;
}
.l-sitemap__label__jp {
  color: var(--color-text) !important;
}
.l-sitemap__dir a,
.l-sitemap__dir li a {
  color: #555555 !important;
  opacity: 1 !important;
}
.l-sitemap__dir a:hover {
  color: var(--color-gold-hover) !important;
}

/* --- Forms (Contact page compatibility) --- */
select {
  background: var(--color-bg-card) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea {
  background: var(--color-bg-card) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

/* --- ROJU-style section header gold line (before heading) --- */
.c-heading-sec:not(.-heading-small) .c-heading-sec__en::before {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background-color: var(--color-fill-dark);
  margin-bottom: 0.8rem;
}
/* --- Diamond Model heading with background image --- */
.dmd-heading {
  background-color: #0b0c10 !important;
  background-image: url(../image/top/dmd-bg.png) !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  padding: 5rem 4rem;
  position: relative;
  margin-bottom: 0;
  border-radius: 15px 15px 0 0;
  overflow: hidden;
}
.dmd-heading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}
.dmd-heading > * {
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
.dmd-heading {
    padding: 3rem 2rem;
    margin-left: -2rem;
    margin-right: -2rem;
    border-radius: 0 !important;
    background-position: calc(100% + 50px) center !important;
  }
}

.c-heading-sec:not(.-heading-small) .c-heading-sec__en::before {
  margin-left: 0 !important;
  margin-right: auto !important;
}
.u-font-center.c-heading-sec:not(.-heading-small) .c-heading-sec__en::before,
.u-font-center .c-heading-sec:not(.-heading-small) .c-heading-sec__en::before,
[style*="text-align:center"] .c-heading-sec:not(.-heading-small) .c-heading-sec__en::before,
[style*="text-align: center"] .c-heading-sec:not(.-heading-small) .c-heading-sec__en::before,
.c-heading-sec:not(.-heading-small)[style*="text-align:center"] .c-heading-sec__en::before,
.c-heading-sec:not(.-heading-small)[style*="text-align: center"] .c-heading-sec__en::before,
.top-movie-heading .c-heading-sec__en::before {
  margin-left: auto !important;
  margin-right: auto !important;
}
@media screen and (max-width: 768px) {
.c-heading-sec:not(.-heading-small) .c-heading-sec__en::before {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* SVG hover effect */
.yourcompany-svg .svg-piece {
  overflow: visible;
}
.yourcompany-svg .svg-piece > path {
  fill: #383838;
  stroke: #4a4a4a;
  stroke-width: 2;
  transition: all 0.3s ease;
  cursor: pointer;
}
.yourcompany-svg .svg-piece text {
  fill: #e1e1e1;
  font-family: var(--font-jp-medium);
  font-size: 18px;
  letter-spacing: 0.05em;
  pointer-events: none;
}
/* SVG center label */
.svg-center__title {
  fill: #000000;
  font-family: var(--font-jp-medium);
  font-size: 24px;
  letter-spacing: 0.1em;
}
.svg-center__en {
  fill: var(--color-gold);
  font-family: var(--font-en), var(--font-jp-medium);
  font-size: 14px;
  letter-spacing: 0.1em;
}
/* 中心のビルアイコンを #282828 に（黒→brightness0→invert0.157≒#282828） */
.yourcompany-svg .svg-center image {
  filter: brightness(0) invert(0.157);
}

.yourcompany-svg .svg-piece {
  transition: transform 0.3s ease;
  transform-origin: center center;
}
.yourcompany-svg .svg-icon-g {
  transition: transform 0.3s ease;
}
.yourcompany-svg .svg-icon-g path {
  fill: #e1e1e1 !important;
  transition: fill 0.3s ease;
}
.yourcompany-svg .svg-piece:hover {
  transform: scale(1.08);
}
.yourcompany-svg .svg-piece:hover > path {
  fill: #e6e6e6;
}
.svg-center .svg-center__title,
.svg-center .svg-center__en {
  transition: fill 0.3s ease;
}
.svg-center.is-glow .svg-center__title {
  fill: #333333;
}
.svg-center.is-glow .svg-center__en {
  fill: #333333;
}
.yourcompany-svg .svg-piece:hover text {
  fill: #000;
}
.yourcompany-svg .svg-piece:hover foreignObject i {
  color: #000 !important;
}
.yourcompany-svg .svg-piece:hover .svg-icon-g path {
  fill: #000 !important;
}

/* SVG Popup */
.svg-popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 999999;
  justify-content: center;
  align-items: center;
}
.svg-popup-overlay.is-open {
  display: flex;
}
.svg-popup {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 3rem 3.5rem 3rem;
  max-width: 500px;
  width: calc(100% - 60px);
  margin: 0 30px;
  position: relative;
  animation: popupIn 0.3s ease;
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--color-gold, #383838) rgba(255,255,255,0.08);
}
.svg-popup::-webkit-scrollbar {
  width: 10px;
}
.svg-popup::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.08);
  border-radius: 5px;
}
.svg-popup::-webkit-scrollbar-thumb {
  background: var(--color-fill-dark);
  border-radius: 5px;
  border: 2px solid var(--color-bg-card);
}
.svg-popup::-webkit-scrollbar-thumb:hover {
  background: var(--color-fill-dark-hover);
}
@keyframes popupIn {
from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.svg-popup__close {
  position: sticky;
  top: -1.5rem;
  float: right;
  margin-right: -1.5rem;
  margin-top: -2.5rem;
  z-index: 10;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 1.8rem;
  cursor: pointer;
  transition: color 0.3s;
}
.svg-popup__close:hover {
  color: #fff;
}
.svg-popup__badge {
  display: inline-block;
  background: var(--color-fill-dark);
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: bold;
  padding: 0.3rem 1rem;
  border-radius: 3px;
  letter-spacing: 0.1em;
  margin-right: 1rem;
  vertical-align: middle;
  font-family: var(--font-jp-medium);
}
.svg-popup__title-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 1.2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--color-border);
}
.svg-popup__title {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif !important;
  font-size: 1.8rem;
  color: #333333;
  border-left: 3px solid var(--color-gold) !important;
  padding-left: 1.0rem !important;
  letter-spacing: 0.08em;
  margin: 0;
  padding: 0;
  border: none;
  line-height: 1.8;
}
.svg-popup__lead {
  font-family: var(--font-jp-bold) !important;
  font-size: 1.4rem;
  color: var(--color-text);
  line-height: 1.8;
  letter-spacing: 0.08em;
  margin-bottom: 2rem;
}
.svg-popup__highlight {
  border: 1px solid var(--color-gold);
  border-radius: 5px;
  padding: 1.2rem 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  font-size: 1.4rem;
  color: var(--color-text);
  line-height: 1.8;
  letter-spacing: 0.08em;
}
.svg-popup__changes-label {
  font-size: 1.2rem;
  color: var(--color-gold-hover);
  font-weight: bold;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}
.svg-popup__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.svg-popup__list li {
  font-size: 1.4rem;
  color: var(--color-text);
  padding: 0.6rem 0;
  padding-left: 1.5rem;
  position: relative;
  letter-spacing: 0.05em;
}
.svg-popup__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.1rem;
  width: 6px;
  height: 6px;
  background: var(--color-fill-dark);
  border-radius: 50%;
}

.svg-popup__btn-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 2rem;
}
.svg-popup__btn-wrap--sp {
  display: none;
}
@media screen and (max-width: 768px) {
.svg-popup__btn-wrap--pc {
    display: none;
  }
  .svg-popup__btn-wrap--sp {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
  }
}
.svg-popup__btn {
  font-size: 1.3rem !important;
  padding: 1rem 2rem !important;
  min-width: auto !important;
}
.t-top-recruit--rad .fv-btn {
  min-width: 26rem !important;
  font-size: 1.6rem !important;
}

.model-svg-wrap img {
  pointer-events: none;
}

/* --- Worry Cards (2x2 grid) --- */
.worry-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-top: 5rem;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 6rem;
}
.worry-card {
  background: var(--color-bg-card);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.worry-card__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.worry-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
.worry-card__text {
  padding: 1.8rem;
  font-size: 2rem;
  font-weight: bold;
  color: var(--color-text-heading) !important;
  font-family: var(--font-jp-medium);
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
}
.worry-card:hover {
  border-color: var(--color-gold);
  transition: border-color 0.3s ease;
}
.worry-card:hover .worry-card__text {
  color: var(--color-gold-hover) !important;
  transition: color 0.3s ease;
}
.worry-card__img {
  position: relative;
}
.worry-card__img::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: var(--color-gold-gradient);
  pointer-events: none;
}
.worry-card:hover .worry-card__img::after {
  opacity: 0.5;
}
.worry-card__img img {
  transition: transform 0.4s ease !important;
}
.worry-card:hover .worry-card__img img {
  transform: scale(1.08) !important;
}
.worry-card__text .fa-check {
  color: var(--color-gold);
  font-size: 1.2rem;
  flex-shrink: 0;
}
@media screen and (max-width: 768px) {
.worry-cards {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .worry-card__text {
    font-size: 1.8rem !important;
  }
}

.t-top-movie__copy {
  text-align: center;
  margin-top: 3rem;
  color: #000000 !important;
  font-family: var(--font-jp-medium);
  font-size: clamp(16px, 1.8vw, 24px);
  letter-spacing: 0.1em;
  line-height: 1.8;
}


/* --- Remove leaf icon, override line decorations → gold --- */
.c-heading-sec:not(.-heading-inline) .c-heading-sec__jp::after {
  content: none !important;
  display: none !important;
}
.c-heading-sec:not(.-heading-inline) .c-heading-sec__jp::before {
  background: var(--color-fill-dark) !important;
}
.c-contents::before {
  content: none !important;
  display: none !important;
}

/* --- Breadcrumb --- */
.c-breadcrumb,
.c-breadcrumb ul li,
.c-breadcrumb a {
  color: #000000 !important;
}
.c-breadcrumb ul li a {
  border-bottom-color: #000000 !important;
}
.c-breadcrumb a:hover {
  color: var(--color-gold-hover) !important;
}

/* --- Sub-page hero --- */
.c-hero-sub {
  position: relative;
}

/* --- Pagination --- */
.c-pager a {
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}
.c-pager a:hover {
  background: var(--color-fill-dark-hover) !important;
  color: #fff !important; /* ホバー背景が暗色(#4a4a4a)のため白文字（旧#0b0c10は黒で不可視） */
}

/* --- Table --- */
table {
  border-color: var(--color-border) !important;
}
th {
  background: var(--color-bg-secondary) !important;
  color: var(--color-text-heading) !important;
  border-color: var(--color-border) !important;
}
td {
  background: var(--color-bg-card) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

/* --- Green line accents → Gold --- */
[style*="border-left"] {
  border-left-color: var(--color-gold) !important;
}

/* --- Selection highlight --- */
/* --- Scroll Reveal Animation --- */
.js-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.js-reveal[data-delay="1"] { transition-delay: 0.1s; }
.js-reveal[data-delay="2"] { transition-delay: 0.2s; }
.js-reveal[data-delay="3"] { transition-delay: 0.3s; }
.js-reveal[data-delay="4"] { transition-delay: 0.4s; }

/* --- Image Zoom-in on reveal (roju.jp style) --- */
.js-img-zoom {
  overflow: hidden;
}
.js-img-zoom img {
  transform: scale(1.15);
  transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.js-img-zoom.is-visible img {
  transform: scale(1);
}
/* Auto-apply to common image containers */
.c-ratioobj,
.worry-card__img,
.t-top-about-pict,
.js-parallax-img__inr,
.t-business-attempt__pict .c-ratioobj,
.c-card__thumb .c-ratioobj {
  overflow: hidden;
}
.img-zoom-ready img {
  transform: scale(1.15);
  transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.img-zoom-ready.is-zoomed img {
  transform: scale(1);
}

::selection {
  background: var(--color-fill-dark);
  color: #ffffff;
}
::-moz-selection {
  background: var(--color-fill-dark);
  color: #ffffff;
}


/* ==============================================================================================
   Page-Specific Overrides
   ============================================================================================== */

/* --- About Page --- */
.t-about-effort {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-border) !important;
}
.t-about-message {
  border-top-color: var(--color-border) !important;
  border-bottom: none !important;
}
.t-about-message > .c-txt-l {
  text-align: center !important;
}
@media screen and (max-width: 768px) {
.t-about-message > .c-txt-l {
    text-align: left !important;
  }
}
.t-about-message__work {
  color: var(--color-text-muted) !important;
}
@media screen and (max-width: 768px) {
.t-about-message + div[style*="display:flex"] {
    flex-direction: column !important;
  }
  .t-about-message div[style*="display:flex"] {
    flex-direction: column !important;
    max-width: 100% !important;
  }
}
/* --- Model click area hover --- */
.model-click:hover span {
  color: #000000 !important;
}

/* --- Flow card hover --- */
.flow-card:hover {
  background: #c6c4c1 !important;
  border-color: #cacaca !important;
}
.flow-card:hover::after {
  color: #000000 !important;
}

/* --- RAD flow: PC layout (grid with display:contents) --- */
.rad-flow-wrap {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0 1.5rem;
}
.rad-phase {
  display: contents;
}
.rad-phase__cards {
  display: contents;
}
.rad-phase--design .rad-phase__label {
  grid-column: 1 / 6;
  grid-row: 1;
}
.rad-phase--execute .rad-phase__label {
  grid-column: 6 / 9;
  grid-row: 1;
}
.rad-flow-wrap .flow-card {
  grid-row: 2;
  margin-top: -1.5rem;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rad-flow-wrap .flow-card::after {
  content: "\f05a";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.6rem;
  color: #000000;
  margin-top: auto;
  padding-top: 1rem;
}

/* --- RAD page responsive --- */
@media screen and (max-width: 768px) {
/* 基本構造ボックス */
  .rad-model-box {
    padding: 3rem 1.5rem !important;
  }

  /* === フェーズ帯+カード: 左ラベル＋右カード縦並び === */
  .rad-flow-wrap {
    display: block !important;
  }
  .rad-phase {
    display: flex !important;
    margin-bottom: 1.5rem !important;
  }
  .rad-phase--design .rad-phase__label {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), 50% 100%, 0 calc(100% - 2rem)) !important;
  }
  .rad-phase--execute .rad-phase__label {
    clip-path: polygon(0 0, 50% 2rem, 100% 0, 100% calc(100% - 2rem), 50% 100%, 0 calc(100% - 2rem)) !important;
    padding-top: 3rem !important;
  }
  .rad-phase__label {
    writing-mode: vertical-rl !important;
    text-orientation: upright !important;
    letter-spacing: 0.15em !important;
    font-size: 1.9rem !important;
    padding: 2rem 1.4rem 3rem 0.3rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 8rem !important;
    flex-shrink: 0 !important;
  }
  .rad-phase__cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.8rem !important;
    flex: 1 !important;
    padding: 0.8rem !important;
    margin-left: -2rem !important;
    position: relative !important;
    z-index: 2 !important;
  }
  /* カード: 横レイアウト */
  .rad-flow-wrap .flow-card {
    margin-top: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1.2rem !important;
    padding: 2rem 1.5rem !important;
    text-align: left !important;
  }
  .rad-flow-wrap .flow-card p {
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1 !important;
  }
  .rad-flow-wrap .flow-card h4 {
    writing-mode: horizontal-tb !important;
    font-size: 1.5rem !important;
    margin: 0 !important;
    flex: 1 !important;
  }
  .rad-flow-wrap .flow-card::after {
    content: "\f05a" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 2rem !important;
    color: #000000 !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* (5カラム → 1カラム is now handled by .rad-area-grid responsive rule) */
  /* (画像の最小高さ調整 is now handled by .rad-cover-photo responsive rule) */
  /* === SVGモデル: 縦長ダイヤモンドに回転 === */
  /* PC用SVG非表示、SP用SVG表示 */
  .model-frame-pc {
    display: none !important;
  }
  .model-frame-sp {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
  .rad-model-frame .model-click {
    display: none !important;
  }
  .rad-model-box {
    background: #fff !important;
  }
  .rad-model-frame {
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  .rad-slogan-intro,
  .dm-slogan-intro {
    text-align: center !important;
  }
  /* SVGコンテナの高さ確保 */
  .rad-model-frame {
    min-height: 45rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* 上: 企業の特徴（PC左→SP上）横書き */
  .model-click[data-model="company"] {
    top: 2% !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
  }
  .model-click[data-model="company"] span {
    font-size: 1.8rem !important;
  }
  /* 下: 顧客の期待（PC右→SP下）横書き */
  .model-click[data-model="customer"] {
    top: auto !important;
    bottom: 2% !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
  }
  .model-click[data-model="customer"] span {
    font-size: 1.8rem !important;
  }
  /* 右: 市場の設定（PC上→SP右）縦書き */
  .model-click[data-model="market"] {
    top: 50% !important;
    left: auto !important;
    right: 2% !important;
    transform: translateY(-50%) !important;
    text-align: center !important;
  }
  .model-click[data-model="market"] span {
    writing-mode: vertical-rl !important;
    text-orientation: mixed !important;
    font-size: 1.6rem !important;
    white-space: nowrap !important;
  }
  /* 左: 価値の発信（PC下→SP左）縦書き */
  .model-click[data-model="output"] {
    top: 50% !important;
    bottom: auto !important;
    left: 2% !important;
    right: auto !important;
    transform: translateY(-50%) !important;
    text-align: center !important;
  }
  .model-click[data-model="output"] span {
    writing-mode: vertical-rl !important;
    text-orientation: mixed !important;
    font-size: 1.6rem !important;
    white-space: nowrap !important;
  }
  /* 中央: 選ばれる理由 縦書き */
  .model-click[data-model="reason"] {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
  .model-click[data-model="reason"] {
    border: 1px solid #8a7a55 !important;
    padding: 1rem 0.5rem !important;
  }
  .model-click[data-model="reason"] span {
    writing-mode: vertical-rl !important;
    text-orientation: upright !important;
    font-size: 2rem !important;
    letter-spacing: 0.15em !important;
  }
  /* (導線セクション responsive is now handled by .rad-cta-section responsive rule) */
}

/* --- Diamond phase spacing --- */
.diamond-phase {
  padding-bottom: 8rem !important;
}

/* --- C20 card hover --- */
/* --- Area card hover --- */
.area-card:hover {
  border-color: #cacaca !important;
}
.area-card:hover img {
  transform: scale(1.08) !important;
}
.area-card:hover span {
  background: #383838 !important;
  color: #ffffff !important;
  border-color: #383838 !important;
}

.c20-card:hover {
  border-color: #cacaca !important;
  background: #c6c4c1 !important;
}
.c20-card:hover .fa-circle-info {
  color: #000000 !important;
}

/* --- Method & Step card hover --- */
.method-card:hover,
.step-card:hover {
  border-color: #cacaca !important;
}
.method-card:hover img:not([alt="Crafars"]),
.step-card:hover img:not([alt="Crafars"]),
.rad-card:hover img:not([alt="Crafars"]) {
  transform: scale(1.08) !important;
}
.method-card:hover span,
.step-card:hover span {
  background: #383838 !important;
  color: #ffffff !important;
  border-color: #383838 !important;
}

/* --- RAD card hover --- */
.rad-card:hover {
  border-color: #cacaca !important;
}
.rad-card:hover img:not([alt="Crafars"]) {
  transform: scale(1.08) !important;
}
.rad-card:hover span {
  background: #383838 !important;
  color: #ffffff !important;
  border-color: #383838 !important;
}

/* --- Merit card hover --- */
.merit-card:hover {
  background: #383838 !important;
  border-color: #383838 !important;
}
.merit-card:hover .c-txt-l {
  color: #ffffff !important;
}

/* --- Infobox border gold --- */
.c-infobox {
  border-color: var(--color-gold) !important;
  background: #111 !important;
}
.c-infobox::before {
  width: calc(30% - 4rem) !important;
  height: calc(100% - 4rem) !important;
  top: 2rem !important;
  left: 2rem !important;
  border-radius: 10px !important;
  transform: none !important;
}
.merit-summary-row {
  display: flex;
  gap: 3rem;
  margin-top: 7rem;
}
.merit-summary-col {
  flex: 1;
}
.merit-summary-col .t-about-effort__heading {
  font-size: 2.2rem;
}
.merit-summary-img {
  margin-bottom: 3rem;
}
.merit-summary-img img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
@media screen and (max-width: 768px) {
.merit-summary-row {
    flex-direction: column;
  }
}
.merit-flow-1::before { background: url(../image/merit/meter_1.png) no-repeat center center/contain !important; }
.merit-flow-2::before { background: url(../image/merit/meter_2.png) no-repeat center center/contain !important; }
.merit-flow-3::before { background: url(../image/merit/meter_3.png) no-repeat center center/contain !important; }
.merit-flow-4::before { background: url(../image/merit/meter_4.png) no-repeat center center/contain !important; }
.merit-flow-5::before { background: url(../image/merit/meter_5.png) no-repeat center center/contain !important; }
.c-infobox::after {
  background: var(--color-fill-dark) !important;
  width: 1px !important;
  height: 3rem !important;
}
.merit-flow-chevron {
  position: absolute;
  bottom: calc(-3rem - 5px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 101;
  color: var(--color-gold);
  font-size: 1.2rem;
  line-height: 1;
}
.c-heading-approach {
  border-bottom-color: var(--color-gold) !important;
  font-size: 3rem !important;
}
/* スマホのみ: アプローチ見出し（顧客に選ばれる/人に投資できる/事業の質が上がる等）を少し縮小 */
@media screen and (max-width: 768px) {
  .c-heading-approach {
    font-size: 2.4rem !important;
  }
}
.c-num {
  background: var(--color-gold-gradient) !important;
}

/* --- About Effort Section (for merit page) --- */
.t-about-effort {
  display: flex;
  align-items: flex-start;
  margin-top: 6rem;
  padding: 4rem;
  background-color: var(--color-bg-secondary) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 2px;
  box-sizing: border-box;
}
@media screen and (max-width: 768px) {
.t-about-effort {
    display: block;
    margin-top: 3rem;
    padding: 2rem;
  }
}
.t-about-effort__block:first-of-type {
  width: 27%;
}
@media screen and (max-width: 768px) {
.t-about-effort__block:first-of-type {
    width: 100%;
  }
}
.t-about-effort__block:nth-of-type(2) {
  display: flex;
  align-items: center;
  align-self: stretch;
  width: 73%;
  padding-left: 4rem;
  box-sizing: border-box;
}
@media screen and (max-width: 768px) {
.t-about-effort__block:nth-of-type(2) {
    width: 100%;
    margin-top: 1.7rem;
    padding-left: 0;
  }
}
.t-about-effort__pict {
  border-radius: 5px;
  overflow: hidden;
}
.t-about-effort__heading {
  margin-bottom: 0.7rem;
  font-size: 2.8rem;
  line-height: 1.4;
  font-family: var(--font-jp-medium) !important;
}
@media screen and (max-width: 768px) {
.t-about-effort__heading {
    margin-bottom: 0.5rem;
    font-size: 1.6rem;
  }
}

/* --- Case Study Page --- */
.c-txt-lead,
.c-txt-xl,
.c-txt-l2 {
  color: var(--color-text) !important;
}
.c-txt-notice {
  color: var(--color-text-muted) !important;
}
.t-case-task {
  border-color: var(--color-border) !important;
  background: var(--color-bg-secondary) !important;
}
.t-case-task dt {
  color: var(--color-gold) !important;
}
.t-case-task__sec + .t-case-task__sec {
  border-top-color: var(--color-border) !important;
}
.t-case-tack__list li {
  color: var(--color-text-heading) !important;
}
.t-case-tack__list li::before {
  background-color: var(--color-fill-dark) !important;
}
.t-case-author {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-border) !important;
}
.t-case-author__label {
  background-color: var(--color-fill-dark) !important;
  color: #0d0d0d !important;
}
.t-case-author__company {
  color: var(--color-text-heading) !important;
}
.t-case-comment {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-border) !important;
}
.t-case-comment__txt {
  color: var(--color-text) !important;
}
.t-case-attempt__body p {
  color: var(--color-text) !important;
}
.t-case-attempt-number {
  color: var(--color-gold) !important;
}
.t-case-attempt-number::before {
  background: var(--color-fill-dark) !important;
}

/* --- News / Article Page --- */
.t-article-header {
  border-bottom-color: var(--color-border) !important;
}
.t-article-body p {
  color: var(--color-text) !important;
}
.t-article-body a {
  color: var(--color-gold) !important;
}
.t-article-body h2 {
  color: var(--color-text-heading) !important;
}
.t-article-body h2::before {
  background: var(--color-border) !important;
}
.t-article-body h3 {
  color: var(--color-text-heading) !important;
  border-bottom-color: var(--color-border) !important;
}
.t-article-body ol,
.t-article-body ul {
  color: var(--color-text) !important;
}
.t-article-body ul li::before {
  background: var(--color-text) !important;
}
.t-article-body blockquote {
  background: var(--color-bg-secondary) !important;
}
.t-article-body blockquote p {
  color: var(--color-text-muted) !important;
}
.t-article-body figcaption {
  color: var(--color-text-muted) !important;
}
.t-article-info__time {
  color: var(--color-text) !important;
}
.t-article-info__cat {
  color: #fff !important; /* 暗いチャコール背景(#383838)のバッジ。--color-gold は実体#000のため白を明示 */
}
.t-article-info__cat::before {
  color: var(--color-text-muted) !important;
}
.t-article-header__title {
  color: var(--color-text-heading) !important;
}

/* --- Recruit Page --- */
.t-interview-number {
  color: var(--color-gold) !important;
}
.t-interview-number::before {
  background: var(--color-fill-dark) !important;
}
.t-flow-graph {
  background: var(--color-bg-secondary) !important;
}
.t-flow-graph__list::after {
  background: var(--color-border) !important;
}
.t-flow-graph__list li {
  background: var(--color-bg-card) !important;
  color: var(--color-text) !important;
}
.t-flow-graph__list li::before {
  background: var(--color-fill-dark) !important;
  color: #0d0d0d !important;
}
.t-flow-graph__list li:last-child {
  color: var(--color-gold-light) !important;
}
.t-flow-graph__list li:last-child::before {
  background: var(--color-fill-dark-hover) !important;
}

/* --- Business Page --- */
.t-whatdo__point {
  color: var(--color-gold-light) !important;
}
.t-whatdo__point > span {
  border-bottom-color: var(--color-gold-light) !important;
}
.t-whatdo2 {
  background-color: var(--color-bg-secondary) !important;
}
.t-whatdo2__heading {
  color: var(--color-text-heading) !important;
}
.t-whatdo2__list {
  border-bottom-color: var(--color-border) !important;
}
.t-whatdo2__list li {
  color: var(--color-text) !important;
  border-top-color: var(--color-border) !important;
}
.t-whatdo2__list li span::after {
  background: var(--color-gold-gradient) !important;
}
.t-whatdo2__list--check li {
  display: flex !important;
  align-items: center;
  gap: 0.8em;
}
.t-whatdo2__list--check li span {
  padding-left: 0 !important;
}
.t-whatdo2__list--check li span::after {
  display: none !important;
}
.t-whatdo2__list--check li .fa-check {
  color: var(--color-gold);
  font-size: 1.4rem;
  flex-shrink: 0;
}
.t-whatdo3__head {
  background-color: var(--color-fill-dark) !important;
  color: #0d0d0d !important;
}
.t-whatdo3__heading {
  color: #0d0d0d !important;
}
.t-whatdo3__body {
  background-color: var(--color-bg-secondary) !important;
}
.t-whatdo3__list li {
  color: var(--color-text) !important;
  font-size: 1.5rem !important;
}
.t-whatdo3__list li::before {
  background-color: var(--color-fill-dark) !important;
}
.merit-list-green li {
  padding-left: 2.2rem !important;
}
.merit-list-green li::before {
  content: "\f00c" !important;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  color: #4caf50 !important;
  background-color: transparent !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  font-size: 1.2rem !important;
  top: 0.3rem !important;
}
.t-business-column::after {
  background: var(--color-border) !important;
}
.t-business-list {
  border-top-color: var(--color-border) !important;
}
.t-business-list__block {
  border-bottom-color: var(--color-border) !important;
}
.t-business-sec + .t-business-sec {
  border-top-color: var(--color-border) !important;
}
.t-aspect-nav li {
  border-top-color: var(--color-border) !important;
}
.t-aspect-nav li:last-child {
  border-bottom-color: var(--color-border) !important;
}
.t-aspect-nav li a {
  color: var(--color-text) !important;
}
.t-aspect-nav__arrow {
  border-color: var(--color-text) !important;
}
.t-aspect-nav li a:hover .t-aspect-nav__arrow {
  background-color: var(--color-fill-dark) !important;
  border-color: var(--color-gold) !important;
}
@media screen and (max-width: 768px) {
.t-business-attempt-heading {
    font-size: 2.2rem !important;
  }
  .worry-bottom-text {
    margin-top: 0 !important;
  }
}
.t-business-attempt {
  border-top: none !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.t-business-attempt__pict .c-ratioobj img {
  filter: brightness(0.9);
}
/* クラファーズの考え方 の写真3枚を角丸に */
.t-business-attempt__pict .c-ratioobj {
  border-radius: 8px !important;
  overflow: hidden !important;
}
.t-business-attempt-number {
  color: var(--color-gold) !important;
  font-family: var(--font-en), var(--font-jp-medium) !important;
  letter-spacing: 0.025em;
  font-size: 1.3rem !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
}
.t-business-attempt-number::before,
.t-business-attempt-number:before {
  background: #f26d3f !important;
  width: 3rem !important;
}
.t-business-attempt__sec {
  border-top-color: var(--color-border) !important;
  align-items: stretch !important;
}
.t-business-attempt__pict {
  display: flex !important;
}
.t-business-attempt__pict .c-ratioobj {
  width: 100% !important;
  height: 100% !important;
  padding-top: 0 !important;
}
.t-business-attempt__pict .c-ratioobj img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.t-flow dt {
  color: var(--color-bg-secondary) !important;
  background-color: var(--color-fill-dark) !important;
}
.t-flow dt span::before {
  color: var(--color-gold) !important;
  background-color: var(--color-bg-secondary) !important;
}
.t-flow dd {
  color: var(--color-text) !important;
  background-color: var(--color-bg-secondary) !important;
}
.t-business-flow {
  background: var(--color-bg-secondary) !important;
}
.t-business-flow__inr {
  background: var(--color-bg-card) !important;
  border-bottom-color: var(--color-border) !important;
}
.t-business-flow .c-column {
  border-right-color: var(--color-border) !important;
}
.t-business-flow .c-column__block {
  border-left-color: var(--color-border) !important;
}
.t-business-flow__heading {
  background: #0b0c10 !important;
  color: var(--color-gold) !important;
}
.t-business-flow__label.-flow1 {
  background: #4a4a4a !important;
}
.t-business-flow__label {
  height: 7rem !important;
}
.t-business-flow__label span {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  padding: 0.5rem 0 !important;
  box-sizing: border-box !important;
}
.t-business-flow__label .top-flow-label-span {
  display: block !important;
  padding: 1.2rem 0 !important;
  text-align: center !important;
}
.t-business-flow__label .top-flow-label-span i {
  display: inline-block !important;
  vertical-align: baseline !important;
}
.t-business-flow__label.-flow1 .top-flow-label-span i { color: #383838 !important; }
.t-business-flow__label.-flow2 .top-flow-label-span i { color: #9d8e60 !important; }
.t-business-flow__label.-flow3 .top-flow-label-span i { color: #383838 !important; }
.t-business-flow__label.-flow4 .top-flow-label-span i { color: #e8d08a !important; }
.t-business-flow__label.-flow1 span::before,
.t-business-flow__label.-flow2 span::before,
.t-business-flow__label.-flow3 span::before {
  background-image: none !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
  border-width: 1rem 0 1rem 1rem !important;
  border-color: transparent !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translate(100%, -50%) !important;
  background: none !important;
}
.t-business-flow__label.-flow1 span::before {
  border-left-color: #4a4a4a !important;
}
.t-business-flow__label.-flow2 span::before {
  border-left-color: #3a3a3a !important;
}
.t-business-flow__label.-flow3 span::before {
  border-left-color: #333 !important;
}
@media screen and (max-width: 768px) {
.t-business-flow__label.-flow1 span::before,
  .t-business-flow__label.-flow2 span::before,
  .t-business-flow__label.-flow3 span::before,
  .t-business-flow__label.-flow4 span::before {
    display: block !important;
    border-width: 1rem 1rem 0 1rem !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    right: auto !important;
    left: 50% !important;
    top: auto !important;
    bottom: 0 !important;
    transform: translate(-50%, 100%) !important;
    background: none !important;
    background-image: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  .t-business-flow__label.-flow1 span::before {
    border-top-color: #4a4a4a !important;
  }
  .t-business-flow__label.-flow2 span::before {
    border-top-color: #3a3a3a !important;
  }
  .t-business-flow__label.-flow3 span::before {
    border-top-color: #333 !important;
  }
  .flow4-arrow {
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    border-width: 1rem 1rem 0 1rem !important;
    border-color: #181818 transparent transparent transparent !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translate(-50%, 100%) !important;
  }
}
.flow4-arrow {
  display: none;
}
/* --- Wider buttons (except FV and popup) --- */
/* --- Section buttons (unified) --- */
.section-btn {
  min-width: 30rem !important;
  max-width: 100% !important;
  font-size: clamp(13px, 1.2vw, 16px) !important;
  padding: 1.6rem 2.5rem 1.6rem 3rem !important;
}
@media screen and (max-width: 768px) {
.svg-popup__btn {
    width: 100% !important;
    display: flex !important;
    box-sizing: border-box !important;
    font-size: 3.8vw !important;
    min-width: 0 !important;
  }
  .svg-popup__btn-wrap {
    width: 100% !important;
  }
  .section-btn {
    min-width: 0 !important;
    width: 100% !important;
    display: flex !important;
    font-size: 3.8vw !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    padding: 1.8rem 2rem !important;
    box-sizing: border-box !important;
  }
}

.fv-btn {
  max-width: 100% !important;
}
.fv-text .fv-btn,
.svg-popup .fv-btn {
  min-width: 22rem !important;
}
@media screen and (max-width: 768px) {
.t-business-flow {
    margin-left: -2rem !important;
    margin-right: -2rem !important;
  }
  .t-business-flow__inr {
    border: 1px solid #333 !important;
    border-radius: 5px;
  }
  .t-business-flow__label {
    font-size: 1.8rem !important;
  }
  .t-business-flow__label small {
    font-size: 0.65em !important;
  }
  .t-business-flow__body {
    padding: 2.5rem 2rem !important;
  }
  .t-business-flow__body .c-txt-xs {
    font-size: 1.4rem !important;
  }
}
.t-business-flow__label::before,
.t-business-flow__label::after {
  display: none !important;
}
.t-business-flow .c-column {
  border-right: none !important;
}
.t-business-flow .c-column__block {
  border-left: 1px solid var(--color-border) !important;
}
.t-business-flow__label.-flow2 {
  background: #3a3a3a !important;
}
.t-business-flow__label.-flow2::before {
  background: #333 !important;
}
.t-business-flow__label.-flow3 {
  background: #333 !important;
}
.t-business-flow__label.-flow3::before {
  background: #2a2a2a !important;
}
.t-business-flow__label.-flow4 {
  background: #2a2a2a !important;
}
.t-business-flow__label.-flow4::before {
  background: #0b0c10 !important;
}
.t-consulting-map__info dd {
  color: var(--color-text-muted) !important;
}
.t-consulting-map__info ol {
  border-top-color: var(--color-border) !important;
}
.t-consulting-map__info ol li:last-child {
  border-bottom-color: var(--color-border) !important;
}
.t-consulting-map__info ol.map-type-asia li::before {
  background: var(--color-fill-dark) !important;
}
.t-consulting-map__info ol.map-type-jp li::before {
  background: var(--color-fill-dark-hover) !important;
}

/* --- Contact / Form Page --- */
.t-form input,
.t-form select,
.t-form textarea {
  border-color: var(--color-border) !important;
  background: var(--color-bg-card) !important;
  color: var(--color-text) !important;
}
.t-form input:focus,
.t-form select:focus,
.t-form textarea:focus {
  border-color: var(--color-gold) !important;
  background: var(--color-bg-card) !important;
}
.t-form input:hover,
.t-form select:hover,
.t-form textarea:hover {
  border-color: var(--color-gold) !important;
  background: rgba(115, 103, 76, 0.08) !important;
}
.t-form table {
  border-color: var(--color-border) !important;
}
.t-form table td,
.t-form table th {
  border-color: var(--color-border) !important;
}
.t-form table th {
  background: var(--color-bg-secondary) !important;
  color: var(--color-text-heading) !important;
}
.t-form table td {
  background: var(--color-bg-card) !important;
}
.label-radio::before {
  background: var(--color-bg-card) !important;
  border-color: var(--color-border) !important;
}
.t-form input[type="radio"] + .label-radio::after {
  background: var(--color-fill-dark) !important;
}
.label-checkbox::before {
  background: var(--color-bg-card) !important;
  border-color: var(--color-border) !important;
}
.t-form-requiredInfo__inr {
  background: var(--color-bg-secondary) !important;
}
.t-form-requiredInfo__heading {
  color: var(--color-text-heading) !important;
}
.t-form-requiredInfo__txt {
  color: var(--color-text) !important;
}
.t-form-requiredInfo__txt > span {
  color: var(--color-gold) !important;
}
.t-form-sec__label {
  color: var(--color-gold) !important;
}
.t-form--check {
  border-top-color: var(--color-border) !important;
}
.t-form--check .t-form-sec {
  border-bottom-color: var(--color-border) !important;
}
.t-form-information {
  background: var(--color-bg-secondary) !important;
}
.t-form-infobox {
  border-color: var(--color-border) !important;
}
.t-form-submit__txt {
  color: var(--color-text-muted) !important;
}
.t-form-submit__txt a {
  color: var(--color-gold) !important;
}
.t-form-phone__notice {
  color: var(--color-text-muted) !important;
}
.c-phone__number {
  color: #000000 !important;
}

/* --- Company Page (table-heavy) --- */
.c-table-def {
  border-color: var(--color-border) !important;
}
.c-table-def dt,
.c-table-def dd {
  border-color: var(--color-border) !important;
}
.c-table-def dt {
  background: var(--color-bg-secondary) !important;
  color: var(--color-text-heading) !important;
}
.c-table-def dd {
  background: var(--color-bg-card) !important;
  color: var(--color-text) !important;
}

/* --- Sub-page hero overlay for dark (roju.jp style) --- */
.c-hero-sub {
  position: relative !important;
}
/* roju.jp method: reduce image opacity directly */
.c-hero-sub .js-parallax-img__inr img,
.c-hero-sub .c-hero__bg__inr img {
  opacity: 0.26 !important;
}
.c-hero-sub::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
  z-index: 11;
  pointer-events: none;
}

/* --- Green dot/line decorations → Gold --- */
.c-list-dot li::before {
  background: var(--color-fill-dark) !important;
}
.c-line-green,
.c-border-green {
  border-color: var(--color-gold) !important;
}
.c-num-circle {
  background: var(--color-fill-dark) !important;
  color: #0d0d0d !important;
}

/* --- Infinite scroll support cards --- */
.support-scroll {
  overflow: hidden;
  width: 100%;
}
.support-scroll__track {
  display: flex;
  gap: 2.5rem;
  will-change: transform;
}
.support-scroll__card {
  flex: 0 0 36rem;
  min-width: 36rem;
  text-align: center;
}
/* 支援領域: セクション上の余白を狭める + カード群の下に60pxパディング */
.t-top-business-accent .t-top-sec {
  margin-top: 4rem !important;
}
.t-top-business-accent .support-scroll {
  padding-bottom: 90px !important;
}
/* 支援領域カード: 背景 #ececec・ボーダーなし・角丸（.area-card 共通ルールを上書き。diamond側には影響なし） */
.support-scroll__card.area-card {
  background: #ececec !important;
  border: none !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  padding-bottom: 20px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
  transition: box-shadow 0.3s ease !important;
}
/* ホバーでドロップシャドウを消す */
.support-scroll__card.area-card:hover {
  box-shadow: none !important;
}
/* 画像の下に10pxパディング（画像とラベルの間に余白） */
.support-scroll__card .c-card__thumb {
  padding-bottom: 10px !important;
}
/* 画像は上だけ角丸（右下・左下は角丸にしない）: カードのoverflow:hiddenで上角はカードに沿い、下辺は直角 */
.support-scroll__card .c-card__thumb,
.support-scroll__card .c-card__thumb .c-ratioobj {
  border-radius: 0 !important;
}
/* 支援領域ラベルをチャコールグレーの「バッジ」（完全な角丸=ピル）に。上の行に単独配置 */
.support-scroll__card .c-card__label {
  display: inline-block !important;
  background: #383838 !important;
  color: #ffffff !important;
  padding: 0.3rem 1rem !important;
  border-radius: 999px !important;
  font-size: 1rem !important;
  margin-bottom: 0.8rem !important;
}
/* ホバー時もバッジ文字は白のまま（共通の黒文字ホバーを上書き・高詳細度） */
.support-scroll__card.area-card:hover .c-card__label,
.t-top-business-accent .support-scroll__card:hover .c-card__label {
  color: #ffffff !important;
}
/* 見出し（勝ち筋設計 等）はバッジの下の行に */
.support-scroll__card .c-card__title {
  display: block !important;
}
/* 見出しの下の小さな説明（ポップアップ1行目） */
.support-scroll__card .support-card__desc {
  font-size: 1.1rem !important;
  color: #666666 !important;
  line-height: 1.6 !important;
  margin-top: 0.6rem !important;
  padding: 0 1.5rem !important;
}
.support-scroll__card .c-card__title {
  font-size: 2rem !important;
}
.support-scroll__card .c-card__label {
  font-size: 1.3rem !important;
}
.support-card__vertical {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  writing-mode: vertical-rl !important;
  text-orientation: upright !important;
  white-space: nowrap !important;
  font-family: var(--font-jp-medium) !important;
  font-size: clamp(1.2rem, 1.5vw, 1.6rem) !important;
  letter-spacing: 0.15em !important;
  transform: none !important;
  font-weight: bold !important;
  color: #fff !important;
  background: var(--color-fill-dark) !important;
  padding: 1.5rem 0.8rem !important;
  height: 100% !important;
  box-sizing: border-box !important;
  z-index: 2 !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: flex-start !important;
  transition: background 0.4s ease, color 0.4s ease !important;
}
.support-scroll__card:hover .u-img-hover::after {
  opacity: 0 !important;
}
/* 支援領域カード: 画像の暗幕を外して明るく（通常時・ホバー時とも） */
.support-scroll__card .img-overlay::before {
  display: none !important;
}
.support-scroll__card:hover .c-card__label {
  color: var(--color-gold-hover) !important;
}
.support-scroll__card .c-card__title .c-link-line__inr {
  background: none !important;
}
.support-scroll__card:hover .c-card__title,
.support-scroll__card:hover .c-card__title .c-link-line__inr,
.support-scroll__card:hover .c-card__label,
.support-scroll__card:hover .support-card__vertical {
  color: var(--color-gold-hover) !important;
}
.support-card__dot {
  display: inline-block;
  text-align: center;
  transform: translateX(0.3em);
}
.support-scroll__card:hover .support-card__vertical,
.support-scroll__card:hover .support-card__dot {
  color: #fff !important;
  background: var(--color-fill-dark-hover) !important;
}
.support-scroll__card .c-ratioobj img {
  filter: none !important;
  transition: transform 0.4s ease !important;
}
.support-scroll__card:hover .c-ratioobj img {
  transform: scale(1.08) !important;
}
.support-scroll__card .c-ratioobj.-gold::after {
  padding-top: 56.25% !important;
}
@media screen and (max-width: 768px) {
.support-scroll__card {
    flex: 0 0 25rem;
    min-width: 25rem;
  }
}

.fv-text__lead {
  font-size: 15px !important;
  color: var(--color-text) !important;
}
/* リードを2段落に分割したため、2つ目の段落の上マージン(1.5vw)を消して
   PCでの行間が広がらないようにする（モバイルは @media 側の 1vw が後勝ちで維持） */
.fv-text__lead + .fv-text__lead {
  margin-top: 0;
}

/* --- FV mobile adjustments --- */
@media screen and (max-width: 768px) {
.fv-text__lead {
    font-size: 3.5vw !important;
  }
  .fv-text .fv-btn {
    width: 100% !important;
    font-size: 4vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .c-flex.-flex-ftcontact .fv-btn {
    width: 100% !important;
    display: flex !important;
    font-size: 4vw !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }
  .c-flex.-flex-ftcontact .c-flex__block > div[style] {
    flex-direction: column !important;
  }
  .fv-text__buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.5rem !important;
  }
  .fv-text {
    padding-left: 8% !important;
    padding-right: 8% !important;
  }
}

/* --- Force POINT number line color --- */
.t-business-attempt-number:before {
  background: #f26d3f !important;
  width: 3rem !important;
}

/* ================================================
   Page Component Classes - Diamond Model
   ================================================ */

/* --- Utility Classes --- */


.dm-flex-1 { flex: 1; }

/* --- Intro Slogan (serif font-family) --- */
.dm-intro-slogan {
  font-family: var(--font-jp-medium);
}

/* --- Intro Large Text --- */
.dm-intro-txt {
  font-size: 1.8rem !important;
  margin-top: 2rem;
}

/* --- Center Button Wrapper --- */


/* --- Two-Column Layout (flex with gap) --- */



/* --- Slogan with top/bottom margins --- */
.dm-slogan-intro {
  margin-top: 4rem;
  margin-bottom: 2rem;
}

/* --- Slogan step heading --- */


/* --- Separator Line --- */


/* --- Separator Line (phase) --- */


/* --- Cover Image Container --- */
.dm-cover-photo {
  flex: 1;
  position: relative;
  min-height: 300px;
  border-radius: 10px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
.dm-cover-photo {
    min-height: 200px;
  }
}

/* --- Cover Image (absolute fill) --- */
.dm-cover-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}

/* --- Section Top Spacer --- */
.dm-section-top {
  margin-top: 8rem;
}

/* --- Timeline Container --- */



/* --- Timeline Vertical Line --- */



/* --- Diamond Phase (with padding-bottom) --- */



/* --- Diamond Phase (last, no padding-bottom) --- */


/* --- Step Circle --- */



/* --- Step Circle Label "STEP" --- */


/* --- Step Circle Number --- */


/* --- Phase Header Row --- */



/* --- Phase Title (Japanese kanji) --- */



/* --- Phase Subtitle (English) --- */



/* --- Phase Content Row (text + image) --- */

@media screen and (max-width: 768px) {
.dm-card__heading {
    font-size: 2.8rem !important;
  }
  .dm-card__en {
    font-size: 1.5rem !important;
  }
  .dm-card__txt {
    font-size: 1.5rem !important;
  }
}

/* --- Phase Slogan --- */


/* --- Phase Image Container --- */



/* --- Phase Image (fill) --- */


/* --- Gold Left-Border Heading Bar --- */


/* --- Gold Bar with top margin --- */


/* --- Gold Bar Title --- */


/* --- Gold Bar Description --- */


/* --- Method Card Grid (4 columns) --- */
.dm-method-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 4rem;
}
@media screen and (max-width: 768px) {
.dm-method-grid {
    grid-template-columns: 1fr;
    gap: 5rem;
  }
}

/* --- Card Base (method-card, step-card) --- */
.dm-card {
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #181a1e;
  border: 1px solid #cacaca;
  display: flex;
  flex-direction: column;
}

/* --- Card Image Container (square) --- */


/* --- Card Image Container (16:9) --- */


/* --- Card Logo Overlay --- */
.dm-card__logo {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 35%;
  z-index: 2;
  pointer-events: none;
}

/* --- Card Cover Image --- */


/* --- Card Body --- */
.dm-card__body {
  padding: 2rem 1.8rem 2.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* --- Card Icon Wrapper --- */
.dm-card__icon-wrap {
  text-align: center;
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
}

/* --- Card Icon Wrapper (compact) --- */


/* --- Card Icon --- */
.dm-card__icon {
  font-size: 2.5rem;
  color: #000000;
}

/* --- Card Icon (small) --- */


/* --- Card Heading --- */
.dm-card__heading {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 0.3rem;
  text-align: center;
}

/* --- Card English Label --- */
.dm-card__en {
  font-size: 1.1rem;
  color: #000000;
  text-align: center;
  margin-bottom: 1.2rem;
  font-family: var(--font-en), var(--font-jp-medium);
  letter-spacing: 0.05em;
}

/* --- Card Text (flex fill) --- */
.dm-card__txt {
  flex: 1;
}

/* --- Card "See More" Button Wrapper --- */


/* --- Card "See More" Button --- */


/* --- Card "See More" Button (small) --- */


/* --- C20 Domain Block --- */


/* --- C20 Domain Block (last) --- */


/* --- C20 Domain Header Row --- */


/* --- C20 Domain Badge --- */


/* --- C20 Domain Description --- */


/* --- C20 Grid (5 columns) --- */



/* --- C20 Card Item --- */


/* --- C20 Card Number --- */


/* --- C20 Card Label --- */


/* --- C20 Card English Sub-label --- */


/* --- C20 Info Icon --- */


/* --- C20 Area Wrapper (padding/margin) --- */

#step-polish {
  margin-top: 6rem;
}
#step-craft {
  margin-top: 6rem;
}

/* --- Step2 Polishing Grid (3 cards + 2 operators) --- */




/* --- Operator Icon Wrapper --- */



/* --- Operator Icon --- */


/* --- Horizontal Card (2-column) --- */



/* --- Horizontal Card Image Side --- */



/* --- Horizontal Card Body --- */


/* --- Horizontal Card Icon Wrapper --- */


/* --- Horizontal Card Heading --- */


/* --- Horizontal Card English Label --- */


/* --- Horizontal Card "See More" Wrapper --- */


/* --- Two-Column Grid --- */



/* --- Two-Column Grid with 6rem top margin --- */



/* --- Process Card (numbered, e.g. 仕立の実施方法) --- */



/* --- Process Card Item --- */


/* --- Process Card Number Circle --- */


/* --- Process Card Number Text --- */


/* --- Process Card Title --- */


/* --- Process Card Icon --- */


/* --- Process Card Text --- */


/* --- Area Card (step4 展開, same as hcard but without cursor in base) --- */
/* Uses .dm-hcard for base styling */

/* --- Area Card Image (no logo, full cover) --- */


/* --- Area Card English Label (slightly different from hcard) --- */


/* --- Value Creation Section --- */

/* --- Two-Column Content Row --- */



/* --- Comparison Grid (3 columns: card + operator + card) --- */
.dm-compare-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  margin-top: 5rem;
  align-items: center;
}
@media screen and (max-width: 768px) {
.dm-compare-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* --- Comparison Card (left, muted) --- */


/* --- Comparison Card (right, highlighted) --- */


/* --- Comparison Card Heading (muted) --- */


/* --- Comparison Card Heading (highlighted) --- */


/* --- Comparison Card Text --- */


/* --- Comparison Card Text (highlighted) --- */


/* --- Plus Icon Wrapper --- */



/* --- Warning Box --- */



/* --- Warning Box Label --- */


/* --- Warning Box Grid --- */
.dm-warning-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}
@media screen and (max-width: 768px) {
.dm-warning-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Warning Item Row --- */
.dm-warning-item {
  display: flex;
  align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;
  font-size: 1.4rem;
}

/* --- Warning X Icon --- */
.dm-warning-x {
  color: #f26d3f;
  margin-right: 0.8em;
  flex-shrink: 0;
}

/* --- Warning Box Footer Text --- */
.dm-warning-footer {
  font-size: 1.4rem;
  color: #d8dbdf;
  margin-top: 2rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;
}

/* ================================================
   Page Component Classes - RAD (構造設計)
   ================================================ */

/* --- Intro Slogan (serif font-family, same as diamond) --- */
.rad-intro-slogan {
  font-family: var(--font-jp-medium);
}

/* --- Intro Large Text --- */
.rad-intro-txt {
  font-size: 1.8rem !important;
  margin-top: 2rem;
}

/* --- Model Structure Wrapper (centered box) --- */
.rad-model-wrap {
  text-align: center;
  margin-top: 8rem;
  max-width: 800px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* --- Model Tab Label --- */
.rad-model-tab {
  display: inline-block;
  background: #383838;
  color: #fff;
  font-size: 1.3rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  padding: 0.6em 2em;
  position: relative;
  z-index: 1;
  border-radius: 8px 8px 0 0;
}

/* --- Model Inner Box --- */
.rad-model-box {
  background: #fff;
  padding: 2rem;
  margin-top: -1px;
  position: relative;
  overflow: hidden;
  border: 1px solid #cacaca;
  border-radius: 8px;
}

/* --- Model Watermark Image --- */
.rad-model-watermark {
  position: absolute;
  top: -3rem;
  right: 1rem;
  width: 12rem;
  height: 12rem;
  opacity: 0.1;
  pointer-events: none;
}

/* --- Model Frame Container --- */
.rad-model-frame {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* --- Model Click Overlay (common styles) --- */

/* --- Custom click cursor for popup triggers --- */


.rad-model-overlay {
  cursor: pointer;
  text-align: center;
  background: #111;
  padding: 0.3em 0.8em;
}

/* --- Model Click Text (common styles) --- */
.rad-model-overlay__txt {
  font-weight: bold;
  color: #8a7a55;
  transition: color 0.3s;
}

/* --- Model Click: Market (top center) --- */
.rad-model-overlay--market {
  position: absolute;
  top: -2%;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(1.4rem, 3.2vw, 2.4rem);
}

/* --- Model Click: Company (left) --- */
.rad-model-overlay--company {
  position: absolute;
  top: 37%;
  left: 4%;
  font-size: clamp(1.3rem, 2.8vw, 2.2rem);
  line-height: 1.6;
}

/* --- Model Click: Reason (center) --- */
.rad-model-overlay--reason {
  position: absolute;
  top: calc(35% + 1px);
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  background: transparent;
}

/* --- Model Click: Customer (right) --- */
.rad-model-overlay--customer {
  position: absolute;
  top: 37%;
  right: 4%;
  font-size: clamp(1.3rem, 2.8vw, 2.2rem);
  line-height: 1.6;
}

/* --- Model Click: Output (bottom center) --- */
.rad-model-overlay--output {
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(1.4rem, 3.2vw, 2.4rem);
}

/* --- Model Caption --- */
.rad-model-caption {
  text-align: center;
  margin-top: 3rem;
  font-size: 1.4rem;
  color: #999;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;
}

/* --- Two-Column Layout (reusable, same as dm-two-col) --- */
.rad-two-col {
  display: flex;
  gap: 6rem;
  align-items: stretch;
  padding: 4rem 0;
}
@media screen and (max-width: 768px) {
.rad-two-col {
    flex-direction: column;
    gap: 3rem;
    padding: 2rem 0;
  }
}

/* --- Two-Column Layout (no padding, top margin) --- */
.rad-two-col--mt {
  display: flex;
  gap: 6rem;
  margin-top: 8rem;
}
@media screen and (max-width: 768px) {
.rad-two-col--mt {
    flex-direction: column-reverse;
    gap: 3rem;
  }
  .rad-two-col > .rad-cover-photo,
  .rad-two-col--mt > .rad-cover-photo {
    display: none !important;
  }
  .rad-area-card__img-wrap {
    aspect-ratio: 16/9 !important;
  }
  .rad-area-card__heading {
    font-size: 2.8rem !important;
  }
  .rad-area-card__en {
    font-size: 1.5rem !important;
  }
  .rad-area-card__txt {
    font-size: 1.5rem !important;
  }
}

/* --- Slogan with margins --- */
.rad-slogan-intro {
  margin-top: 3rem;
  margin-bottom: 2rem;
}
/* 見出し→本文の距離を about ミッションと同じ約21pxに（セパレータ線は残す・先頭ブロックのみ） */
.rad-slogan-intro + .rad-separator {
  margin: 0 0 2.3rem;
}
/* 「その中核にあるのが、RAD…です」を太く大きく（クライアント指定） */
.rad-core-emphasis {
  display: inline-block;
  margin-top: 1rem;
  font-weight: bold;
  font-size: 1.5em;
  line-height: 1.5;
}
/* スマホのみ: 導入テキスト(rad/diamond=1.8rem)と中核強調を縮小（PCは不変・同スタイル全て） */
@media screen and (max-width: 768px) {
  .rad-intro-txt,
  .dm-intro-txt {
    font-size: 1.6rem !important;
  }
  .rad-core-emphasis {
    font-size: 1.35em; /* 親1.6rem×1.35≒2.16rem */
  }
}

/* --- Slogan (bottom margin only) --- */
.rad-slogan-top {
  margin-bottom: 2rem;
}

/* --- Separator Line --- */
.rad-separator {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin: 2rem 0 4rem;
}

/* --- Cover Photo Container --- */
.rad-cover-photo {
  flex: 1;
  position: relative;
  min-height: 300px;
  border-radius: 10px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
.rad-cover-photo {
    min-height: 200px;
  }
}

/* --- Cover Image (absolute fill) --- */
.rad-cover-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Need Box (bordered box with floating label) --- */
.rad-need-box {
  position: relative;
  margin-top: 6rem;
  padding: 2rem 2.5rem 2.5rem;
  border: 1px solid #cacaca;
  border-radius: 8px;
}

/* --- Need Box Label --- */
.rad-need-box__label {
  position: absolute;
  display: inline-block;
  top: -0.8rem;
  left: 2.5rem;
  padding: 0 0.8rem;
  line-height: 1;
  font-size: 1.5rem;
  background: #181a1e;
  color: #000000;
  font-weight: normal;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;
}

/* --- Need Box Description --- */
.rad-need-box__desc {
  font-size: 1.6rem;
  font-weight: normal;
  margin-bottom: 1.5rem;
  margin-top: 1rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;
}

/* --- Need Box Grid (2x2) --- */
.rad-need-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}
@media screen and (max-width: 768px) {
.rad-need-grid {
    grid-template-columns: 1fr 1fr;
  }
  .rad-need-item {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* --- Need Grid Item --- */
.rad-need-item {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 0.8rem 1.5rem;
  flex: 1;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;
  font-weight: normal;
  font-size: 1.3rem;
}

/* --- Need Grid Item: 完全な角丸ピル背景（radページのみ） --- */
.rad-need-box .rad-need-item {
  background: #e1e1e1;
  border: 1px solid #e0e0e0;
  border-radius: 999px;
}

/* --- Need X Icon --- */
.rad-need-x {
  color: #f26d3f;
  margin-right: 0.5em;
}

/* --- Image with full width --- */
.rad-img-wrap {
  margin-top: 3rem;
}

/* --- Full Width Image --- */
.rad-img-full {
  width: 100%;
  height: auto;
}

/* --- Model Frame SP (hidden on PC) --- */
.model-frame-sp.rad-img-full {
  display: none;
}

/* --- Section Top Spacer --- */
.rad-section-top {
  margin-top: 8rem;
}

/* --- Text Top Margin --- */
.rad-txt-mt {
  margin-top: 2rem;
}

/* --- Flow Wrap Top Margin --- */
.rad-flow-mt {
  margin-top: 4rem;
}

/* --- Phase Label: Design (arrow right) --- */
.rad-phase-label--design {
  background: #383838;
  color: #fff;
  padding: 3.5rem 2rem;
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center;
  position: relative;
  clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 50%, calc(100% - 2rem) 100%, 0 100%);
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;
}

/* --- Phase Label: Execute (arrow both sides) --- */
.rad-phase-label--execute {
  background: #383838;
  color: #fff;
  padding: 3.5rem 2rem 3.5rem 3rem;
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center;
  clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 50%, calc(100% - 2rem) 100%, 0 100%, 2rem 50%);
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;
}

/* --- Flow Card (Design Phase) --- */
.rad-flow-card {
  border: 1px solid #cacaca;
  border-radius: 8px;
  padding: 2.5rem 1rem;
  text-align: center;
  background: #181a1e;
  cursor: pointer;
  transition: all 0.3s;
}

/* --- Flow Card (Execute Phase) --- */
.rad-flow-card--exec {
  border: 1px solid #cacaca;
  border-radius: 8px;
  padding: 2.5rem 1rem;
  text-align: center;
  background: #181a1e;
  cursor: pointer;
  transition: all 0.3s;
}

/* --- Flow Card (Highlighted - Reason) --- */
.rad-flow-card--highlight {
  border: 2px solid #cacaca;
  border-radius: 8px;
  padding: 2.5rem 1rem;
  text-align: center;
  background: rgba(201,168,106,0.25);
  cursor: pointer;
  transition: all 0.3s;
}

/* --- Flow Card Number --- */
.rad-flow-num {
  color: #000000;
  font-size: 1.1rem;
  font-weight: bold;
}

/* --- Flow Card Title (vertical) --- */
.rad-flow-title {
  font-size: 2.2rem;
  font-weight: bold;
  margin: 0.8rem 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  display: inline-block;
  letter-spacing: 0.15em;
}

/* --- Flow Card Title (vertical, smaller) --- */
.rad-flow-title--sm {
  font-size: 2rem;
  font-weight: bold;
  margin: 0.8rem 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  display: inline-block;
  letter-spacing: 0.1em;
}

/* --- Flow Card Title (vertical, medium) --- */
.rad-flow-title--md {
  font-size: 2.2rem;
  font-weight: bold;
  margin: 0.8rem 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  display: inline-block;
  letter-spacing: 0.1em;
}

/* --- Flow Card Title (vertical, reason highlight) --- */
.rad-flow-title--reason {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 0.8rem 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  display: inline-block;
  letter-spacing: 0.1em;
  color: #000000;
}

/* --- Business Area Grid (5 columns) --- */
.rad-area-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
  margin-top: 4rem;
}
@media screen and (max-width: 768px) {
.rad-area-grid {
    grid-template-columns: 1fr;
    gap: 5rem;
  }
}

/* --- Business Area Card (base) --- */
.rad-area-card {
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #181a1e;
  border: 1px solid #cacaca;
  display: flex;
  flex-direction: column;
}

/* --- Area Card Image Container (square) --- */
.rad-area-card__img-wrap {
  overflow: hidden;
  aspect-ratio: 3/3;
  position: relative;
}

/* --- Area Card Logo Overlay --- */
.rad-area-card__logo {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 35%;
  z-index: 2;
  pointer-events: none;
}

/* --- Area Card Cover Image --- */
.rad-area-card__cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

/* --- Area Card Body --- */
.rad-area-card__body {
  padding: 2rem 1.8rem 2.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* --- Area Card Heading --- */
.rad-area-card__heading {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 0.3rem;
  text-align: center;
}

/* --- Area Card English Label --- */
.rad-area-card__en {
  font-size: 1.1rem;
  color: #000000;
  text-align: center;
  margin-bottom: 1.2rem;
  font-family: var(--font-en), var(--font-jp-medium);
  letter-spacing: 0.05em;
}

/* --- Area Card Text (flex fill) --- */
.rad-area-card__txt {
  flex: 1;
}

/* --- Area Card "See More" Button Wrapper --- */
.rad-area-card__more-wrap {
  margin-top: 1.5rem;
  text-align: center;
}

/* --- Area Card "See More" Button --- */
.rad-area-card__more-btn {
  display: inline-block;
  border: 1px solid #cacaca;
  border-radius: 30px;
  padding: 0.8rem 2rem;
  font-size: 1.2rem;
  color: #000000;
  transition: all 0.3s;
}

/* --- CTA Section Padding --- */
.rad-cta-section {
  padding-top: 90px;
  padding-bottom: 4rem; /* about #our-mission と統一（旧6rem→4rem） */
}
/* ボタンのみ構成: about #our-mission と同じ余白（ボタン上マージンを消して90pxに） */
.rad-cta-section .rad-center-btn {
  margin-top: 0;
}
@media screen and (max-width: 768px) {
.rad-cta-section {
    padding-top: 55px; /* about #our-mission(SP) と統一（旧5rem→55px） */
  }
}

/* --- Center Button Wrapper --- */
.rad-center-btn {
  text-align: center;
  margin-top: 6rem;
}

/* --- Contact Web Buttons --- */
.rad-contact-buttons {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
@media screen and (max-width: 768px) {
.rad-contact-buttons {
    flex-direction: column;
  }
}

/* --- Contact Button Flex Item --- */
.rad-contact-btn-item {
  flex: 1;
  min-width: 0;
}

/* --- Contact Phone Margin --- */
.rad-contact-phone-mt {
  margin-top: 2rem;
}

/* --- CTA Section Padding --- */
.dm-cta-section {
  padding-top: 10rem;
  padding-bottom: 6rem;
}

/* --- CTA Buttons Row --- */
.dm-cta-buttons {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin-top: 6rem;
  flex-wrap: wrap;
}

/* --- Contact Web Buttons --- */
.dm-contact-buttons {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* --- Contact Button Item --- */
.dm-contact-btn-item {
  flex: 1;
  min-width: 0;
}

/* --- Phone Icon --- */
.dm-phone-icon {
  color: #000000;
  margin-right: 0.5em;
}

/* --- Footer Contact Margin --- */
.dm-footer-contact-mt {
  margin-top: 2rem;
}

/* --- Inline strong color override --- */




/* Scroll animation - disabled */

/* ================================================
   Page Component Classes - Merit (メリット)
   ================================================ */

/* --- Slogan serif font --- */
.merit-slogan-font {
  font-family: var(--font-jp-medium);
}
.merit-slogan-font.merit-slogan-accel {
  font-size: 2.2rem !important;
  margin-bottom: 1.5rem !important;
}
/* スマホのみ: meritスローガンを他スローガン(.c-txt-slogan2)と同じ2remに縮小。
   グローバルの2.2rem(詳細度0,2,0)に勝つため同セレクタで上書き。PCは2.2remのまま不変 */
@media screen and (max-width: 768px) {
  .merit-slogan-font.merit-slogan-accel {
    font-size: 2rem !important;
  }
}
.slogan-mark {
  background: linear-gradient(transparent 55%, #ffe14d 55%);
  padding: 0 0.15em;
  border-radius: 2px;
}

/* --- Top 3-card grid --- */
.merit-card-grid {
  display: flex;
  gap: 2rem;
  margin-top: 4rem;
  text-align: center;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
}

/* --- Merit card (visual style only; JS class name .merit-card preserved) --- */
.merit-card-style {
  flex: 1;
  border: 1px solid #cacaca;
  padding: 2.5rem 2rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* --- Merit card text --- */
.merit-card-text {
  font-weight: bold;
  text-align: center !important;
  font-size: clamp(1.8rem, 1.9vw, 2.3rem) !important;
  white-space: nowrap;
}

/* --- Intro / body text at 1.8rem --- */
.merit-text-lg {
  font-size: 1.8rem !important;
}

/* --- SVG diagram wrapper --- */
.merit-svg-wrap {
  margin-top: 6rem;
  text-align: center;
}

/* --- Gold highlight text color --- */
.merit-highlight {
  color: #000000;
}

/* --- Case card border --- */
.merit-case-border {
  border: 1px solid #cacaca;
}

/* --- Case card body transparent --- */
.merit-case-body {
  background: #111 !important;
  position: relative;
  z-index: 1;
}

/* --- "No reason" heading (x mark) --- */
.merit-no-heading {
  font-weight: bold;
  margin-top: 1rem;
  margin-bottom: 3rem;
  font-size: 2rem;
}

/* --- "Yes reason" image --- */
.merit-yes-img {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 1.5rem;
}
.merit-yes-img img {
  max-width: 100%;
  height: auto;
}

/* --- "Yes reason" heading (circle mark) --- */
.merit-yes-heading {
  position: relative;
  z-index: 2;
  font-weight: bold;
  margin-top: 3rem;
  margin-bottom: 3rem;
  font-size: 2rem;
}

/* --- X icon color --- */
.merit-icon-x {
  color: #f26d3f;
  margin-right: 0.5em;
}

/* --- Circle icon color --- */
.merit-icon-o {
  color: #4caf50;
  margin-right: 0.5em;
}

/* --- Underline with gold border --- */
.merit-underline {
  border-bottom: 1px solid #cacaca;
  padding-bottom: 0.3em;
}

/* --- Red accent color --- */
.merit-color-red {
  color: #f26d3f;
}

/* --- Green accent color --- */
.merit-color-green {
  color: #4caf50;
}

/* --- List z-index layer --- */
.merit-list-z2 {
  position: relative;
  z-index: 2;
}

/* --- Green list 2-column grid --- */
.merit-list-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

/* --- Triangle divider wrapper --- */
.merit-tri-wrap {
  text-align: center;
  margin-top: 3rem;
  margin-bottom: 1rem;
  position: relative;
}

/* --- Triangle SVG positioning --- */
.merit-tri-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  z-index: 0;
  width: 100px;
  height: auto;
}

/* --- Triangle text overlay --- */
.merit-tri-text {
  font-size: 1.8rem;
  font-weight: bold;
  position: relative;
  z-index: 1;
  color: #000000;
}

/* --- Conclusion block --- */
.merit-conclusion {
  text-align: center;
  margin-top: 3rem;
}

/* --- Gold highlight badge (inline) --- */
.merit-gold-badge {
  display: inline-block;
  background: transparent;
  color: #000000;
  padding: 0.05em 1em;
  font-size: 1.6rem;
  font-weight: bold;
}

/* --- Gold badge first line (with bottom margin) --- */
.merit-gold-badge-first {
  margin-bottom: 0.5em;
}

/* --- Bottom spacer 2rem --- */
.merit-spacer {
  margin-bottom: 2rem;
}

/* --- Pill badge row --- */
.merit-pill-row {
  display: flex;
  gap: 1.5rem;
  margin-top: 2rem;
}

/* --- Pill badge row with wrap --- */
.merit-pill-row-wrap {
  display: flex;
  gap: 1.5rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

/* --- Pill badge --- */
.merit-pill {
  background: #383838;
  color: #fff;
  border: none;
  padding: 0.8em 1.5em;
  font-weight: bold;
  flex: 1;
  text-align: center;
  font-size: 1.2rem;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.merit-pill-icon {
  font-size: 1.1em;
  color: #fff;
}

/* --- Infobox inner padding --- */
.merit-infobox-pad {
  padding-top: 2rem;
}

/* --- Heading accent margin-bottom --- */
.merit-accent-mb {
  margin-bottom: 1rem;
}

/* --- Section heading top margin --- */
.merit-heading-mt {
  margin-top: 0;
}

/* --- Flow arrow wrapper --- */
.merit-flow-arrow {
  text-align: center;
  margin: 3rem 0 -4rem;
}

/* --- Flow arrow SVG inline-block --- */
.merit-flow-svg {
  display: inline-block;
}

/* --- Structure section spacing --- */
.merit-structure-section {
  padding-top: 12rem;
  padding-bottom: 4rem;
}
.merit-structure-section .t-about-message {
  border-top: none !important;
  padding-bottom: 0 !important;
}

/* --- Structure CTA wrapper --- */
.merit-structure-cta {
  text-align: center;
  margin-top: 10rem;
}
/* ボタンのみ構成のとき、aboutページ #our-mission と同じ余白に */
.merit-structure-section.structure-cta-only {
  padding-top: 90px;
}
/* スマホ: about #our-mission(SP=55px) と上余白を統一 */
@media screen and (max-width: 768px) {
  .merit-structure-section.structure-cta-only {
    padding-top: 55px;
  }
}
.merit-structure-section.structure-cta-only .merit-structure-cta {
  margin-top: 0;
}

/* --- Intro text with top margin --- */
.merit-text-lg-mt {
  font-size: 1.8rem !important;
  margin-top: 2rem;
}

/* --- Small spacer 1rem --- */
.merit-spacer-sm {
  margin-bottom: 1rem;
}

/* --- Contact web buttons row --- */
.merit-contact-btns {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* --- Contact button flex item --- */
.merit-contact-btn-item {
  flex: 1;
  min-width: 0;
}

/* --- SVG main diagram --- */
svg.merit-svg-main {
  max-width: 600px;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* --- Emphasis text (1.3em) --- */
.merit-emphasis {
  font-size: 1.3em;
}

/* --- Responsive --- */
@media (max-width: 768px) {
.merit-card-grid {
    flex-direction: column;
    max-width: 100%;
    gap: 1rem;
  }
  .merit-card-style {
    padding: 1.2rem 2rem !important;
  }
  .merit-no-heading,
  .merit-yes-heading {
    text-align: center !important;
  }
  .merit-gold-badge {
    display: inline !important;
    padding: 0 !important;
  }
  .merit-heading-mt {
    margin-top: 5rem !important;
  }
  .c-infobox.merit-flow-1,
  .c-infobox.merit-flow-2,
  .c-infobox.merit-flow-3,
  .c-infobox.merit-flow-4,
  .c-infobox.merit-flow-5 {
    display: flex !important;
    flex-direction: column-reverse !important;
  }
  .c-infobox.merit-flow-1::before,
  .c-infobox.merit-flow-2::before,
  .c-infobox.merit-flow-3::before,
  .c-infobox.merit-flow-4::before,
  .c-infobox.merit-flow-5::before {
    position: relative !important;
    width: 90% !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    margin: 0.5rem auto 2rem !important;
    padding-top: 54% !important;
    border-radius: 10px !important;
  }
  .merit-no-heading {
    margin-top: 3rem !important;
  }
  .t-whatdo3__heading {
    font-size: clamp(2.2rem, 5vw, 3rem) !important;
  }
  .merit-tri-svg {
    width: 200px !important;
  }
  .merit-list-grid {
    grid-template-columns: 1fr;
  }
  .merit-pill-row,
  .merit-pill-row-wrap {
    flex-direction: column;
  }
  .merit-pill {
    flex: none;
    font-size: 1.7rem !important;
  }
  .merit-summary-col .t-about-effort__heading {
    text-align: center !important;
  }
  .merit-summary-img {
    display: none !important;
  }
}

/* ================================================
   Page Component Classes - About (私たちについて)
   ================================================ */

/* Message section wrapper */
.about-message-section {
  padding-top: 3rem;
  padding-bottom: 12rem;
}

/* Profile / Track Record two-column layout */
.about-profile-row {
  display: flex;
  gap: 5rem;
  margin-top: 2rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.about-profile-col {
  padding: 0;
  flex: 1;
}

/* ===== プロフィール/担当セクター: アコーディオン（about専用・スマホのみ／PCは全文表示で不変） ===== */
.about-accordion-toggle { display: none; } /* PCはトグル非表示＝全文表示のまま */
@media screen and (max-width: 768px) {
  /* 本文は約3行だけ表示。開くとJSが実高さを設定して全文へアニメーション */
  .about-profile-col .c-txt-s {
    max-height: 6.4em;
    overflow: hidden;
    transition: max-height 0.45s ease;
    font-size: 1.35rem !important; /* 本文フォントを少し大きく */
  }
  .about-accordion-toggle {
    display: block;
    width: fit-content;
    margin-top: 1.2rem;
    margin-left: auto;          /* 右寄せ */
    padding: 0.5em 1.4em;
    background: #383838;        /* チャコールグレー */
    border: 1px solid #383838;
    border-radius: 999px;
    color: #ffffff;            /* 濃い背景に合わせ白文字 */
    font-size: 1.1rem;
    line-height: 1.5;
    cursor: pointer;
  }
}

/* Heading modifier for profile section */
.about-heading-compact {
  margin-top: 0;
  margin-bottom: 2rem;
}

/* Bullet list item in track record */
.about-bullet-item {
  display: flex;
  margin-bottom: 0.5em;
}

/* Bullet dot icon */
.about-bullet-dot {
  color: #000000;
  font-size: 0.5em;
  margin-right: 0.7em;
  margin-top: 1.5em;
  flex-shrink: 0;
}

/* Track Record: グループ見出し付きリスト（2026-07-27 テキスト改訂） */
.about-track__lead {
  margin-bottom: 1.8em;
}
.about-track__group {
  font-family: var(--font-jp-bold) !important;
  color: var(--color-text-heading);
  margin-bottom: 0.7em;
}
.about-track .about-bullet-item {
  margin-bottom: 0.3em;
}
.about-track .about-bullet-item + .about-track__group {
  margin-top: 1.7em;
}
.about-track__sub {
  font-family: var(--font-jp-bold) !important;
  color: var(--color-text-heading);
  margin-top: 2.2em;
  padding-top: 1.6em;
  border-top: 1px solid var(--color-border);
  margin-bottom: 0.7em;
}
.about-track__p + .about-track__p {
  margin-top: 1em;
}

/* Philosophy section spacer */
.about-philosophy-spacer {
  margin-top: 8rem;
}

/* Check item tag (Problem section) */
.about-check-tag {
  border: 1px solid #cacaca;
  color: #fff;
  padding: 0 1em;
  display: inline-block;
  margin-bottom: 0.5em;
  font-weight: bold;
  background: #111;
}

/* Check icon inside tag */
.about-check-icon {
  color: #f26d3f;
  margin-right: 0.5em;
}

/* Discovery keyword grid */
.about-keyword-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5em;
  margin: 0.5em 0;
  width: 100%;
}

/* Individual keyword cell */
.about-compare-pict {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding-top: 30px !important;
}
.about-compare-title {
  font-size: 1.8rem;
  font-weight: bold;
  color: #000000;
  margin-bottom: 0.5rem;
}
.about-compare-pict::before {
  display: none !important;
}
.about-compare-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2rem;
  font-size: 1.3rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;
}
.about-compare-table th,
.about-compare-table td {
  border: 1px solid #333 !important;
  padding: 1em 1.2em;
  text-align: center;
  color: #d8dbdf;
}
.about-compare-table thead th {
  background: #1a1a1a;
  color: #000000;
  font-weight: bold;
  font-size: 1.2rem;
}
.about-compare-table thead th:first-child {
  background: transparent;
  border-top: none;
  border-left: none;
}
.about-compare-label {
  background: #1a1a1a;
  color: #000000 !important;
  font-weight: bold;
  text-align: left !important;
  white-space: nowrap;
}
.about-compare-highlight {
  background: #ffffff !important;
  color: #ececec !important;
  font-weight: bold;
  border-bottom-color: #ececec !important;
}
.about-compare-head-gold {
  background: #ffffff !important;
}
@media screen and (max-width: 768px) {
.about-compare-table {
    font-size: 1.1rem;
  }
  .about-compare-table th,
  .about-compare-table td {
    padding: 0.6em 0.8em;
  }
}
/* --- Pie Chart Row --- */
.intangible-pie-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  margin-top: 4rem;
}
.intangible-pie-col {
  text-align: center;
}
.intangible-pie-arrow {
  font-size: 2.5rem;
  color: #000000;
  align-self: center;
  margin-top: 5rem;
}
.intangible-pie-year {
  font-size: 2.4rem;
  font-weight: bold;
  color: #000000;
  margin-bottom: 1rem;
  font-family: var(--font-en), var(--font-jp-medium);
}
.intangible-pie-wrap {
  width: 220px;
  height: 220px;
  margin: 0 auto;
  max-width: 100%;
}
@media screen and (max-width: 1500px) and (min-width: 1301px) {
.intangible-pie-wrap {
    width: 200px;
    height: 200px;
  }
  .intangible-pie-row {
    gap: 2rem;
  }
}
@media screen and (max-width: 1300px) and (min-width: 1151px) {
.intangible-pie-wrap {
    width: 170px;
    height: 170px;
  }
  .intangible-pie-row {
    gap: 1.5rem;
  }
}
@media screen and (max-width: 1150px) and (min-width: 1001px) {
.intangible-pie-wrap {
    width: 140px;
    height: 140px;
  }
  .intangible-pie-row {
    gap: 1rem;
  }
}
@media screen and (max-width: 1000px) and (min-width: 769px) {
.intangible-pie-wrap {
    width: 110px;
    height: 110px;
  }
  .intangible-pie-row {
    gap: 0.5rem;
  }
}
.intangible-pie-svg {
  width: 100%;
  height: 100%;
}
.intangible-pie-svg circle {
  animation: none !important;
  stroke-dasharray: none !important;
  fill: #333 !important;
  stroke: none !important;
}
.intangible-pie-inner {
  font-size: 14px;
  fill: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;
}
.intangible-pie-inner-dark {
  font-size: 14px;
  fill: #aaa;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;
}
.intangible-pie-pct-sm {
  font-size: 18px;
  font-weight: bold;
  fill: #fff;
  font-family: var(--font-en), var(--font-jp-medium);
}
.intangible-pie-pct-dark {
  font-size: 18px;
  font-weight: bold;
  fill: #aaa;
  font-family: var(--font-en), var(--font-jp-medium);
}
.intangible-pie-inner-on-gold {
  font-size: 14px;
  fill: #1a1a1a;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;
}
.intangible-pie-pct-on-gold {
  font-size: 18px;
  font-weight: bold;
  fill: #1a1a1a;
  font-family: var(--font-en), var(--font-jp-medium);
}
.intangible-pie-caption {
  margin-top: -0.5rem;
  font-size: 1.2rem;
  color: #fff;
}
@media screen and (max-width: 768px) {
.intangible-pie-row {
    flex-direction: column;
    gap: 2rem;
  }
  .intangible-pie-arrow {
    transform: rotate(90deg);
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .intangible-pie-row {
    gap: 0 !important;
  }
  .intangible-pie-wrap {
    width: 260px;
    height: 260px;
  }
  .intangible-grid-5 .dm-card__heading {
    font-size: 2.2rem !important;
  }
  .u-bg-gray .c-container-m,
  .recruit-wanted-section .c-container-m {
    width: 100% !important;
  }
  .u-bg-gray .c-container-m .c-container__inr,
  .recruit-wanted-section .c-container-m .c-container__inr {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .u-bg-gray .c-contents,
  .recruit-wanted-section .c-contents {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  .u-bg-gray .c-container-s,
  .recruit-wanted-section .c-container-s {
    width: 100% !important;
  }
  .recruit-slider-spacer {
    margin-bottom: 3rem !important;
  }
  .recruit-end-arrow .merit-flow-svg {
    width: 100px !important;
    height: 40px !important;
  }
  .t-recruit-slogan__heading {
    font-size: 2rem !important;
  }
}
.privacy-body,
.privacy-body p,
.privacy-body li,
.privacy-body h3 {
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif !important;
}
@media screen and (max-width: 768px) {
.intangible-slogan-top-mt {
    margin-top: 4rem !important;
  }
  .intangible-value-right .rad-need-grid {
    grid-template-columns: 1fr !important;
  }
  .intangible-value-right .rad-need-item {
    text-align: left !important;
  }
}

.intangible-grid-5 {
  grid-template-columns: repeat(5, 1fr) !important;
}
.intangible-grid-5 .dm-card {
  display: flex;
  flex-direction: column;
}
.intangible-grid-5 .dm-card__body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}
.intangible-grid-5 .dm-card__txt {
  margin-top: auto !important;
  padding-bottom: 0 !important;
  flex: none !important;
}
.intangible-grid-5 .dm-card__heading {
  line-height: 1.6;
}
@media screen and (max-width: 768px) {
.intangible-grid-5 {
    grid-template-columns: 1fr !important;
  }
}

.intangible-value-row {
  display: flex;
  gap: 6rem;
  margin-top: 4rem;
  align-items: stretch;
}
.intangible-value-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.intangible-left-heading {
  font-size: 2.2rem;
  font-weight: normal;
  color: #fff;
  text-align: left;
  width: 100%;
  border-left: none;
  padding-left: 0;
  position: relative;
  padding-left: 1.2em;
  margin-bottom: 2rem;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;
}
.intangible-left-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #383838;
}

.intangible-value-left {
  min-width: 0;
}


.intangible-value-right {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.intangible-right-inner {
  flex: 1;
}

.intangible-value-right .rad-need-item {
  font-size: 1.5rem;
}
@media screen and (max-width: 768px) {
.intangible-value-row {
    flex-direction: column;
  }
  .intangible-value-left {
    flex: none;
  }
}

.intangible-tire-box {
  display: flex !important;
  align-items: center;
  gap: 1.5rem;
}
.intangible-tire {
  width: 50px;
  height: auto;
  opacity: 0.7;
  flex-shrink: 0;
}
.intangible-tire-content {
  flex: 1;
  text-align: center;
}
@media screen and (max-width: 768px) {
.intangible-tire {
    width: 35px;
  }
}

/* --- FAQ Styles --- */
.faq-inner {
  max-width: 800px;
  margin: 0 auto;
}
.faq-category {
  margin-bottom: 6rem;
  margin-top: 8rem;
}
.faq-category:first-of-type {
  margin-top: 0;
}
.faq-category__title {
  font-size: 2rem;
  font-weight: bold;
  color: #000000;
  border-left: 3px solid #cacaca;
  padding-left: 0.8em;
  margin-bottom: 2rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;
}
.faq-item {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.faq-question {
  display: flex;
  align-items: center;
  padding: 2rem 0;
  cursor: pointer;
  gap: 1.2em;
}
.faq-question p {
  flex: 1;
  font-size: 1.5rem;
  color: #fff;
  margin: 0;
  font-weight: 700; /* 質問文は太字（回答文は通常のまま） */
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;
  transition: color 0.3s ease;
}
.faq-question:hover p {
  /* 背景は明色化で #383838(暗) → #ececec(明) に変わっている。
     白文字のままだと白地に白で読めなくなるため、通常#333 → hoverで#000（強調）。
     ※このルールは :hover の分だけ詳細度が高く、下部の明色化ブロック
     （.faq-question p { color:#333 !important }）に勝つので個別に指定が必要。 */
  color: #000000 !important;
}
.faq-q {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--color-gold-light, #000000);
  flex-shrink: 0;
  font-family: var(--font-en), var(--font-jp-medium);
}
.faq-arrow {
  color: #000000;
  font-size: 1.2rem;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.faq-item.is-open .faq-arrow {
  transform: rotate(180deg);
}
.faq-answer {
  display: flex;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding: 0;
  gap: 1.2em;
  align-items: flex-start;
  transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease;
}
.faq-item.is-open .faq-answer {
  max-height: 60rem;
  opacity: 1;
  padding: 0 0 2rem 0;
}
.faq-answer p {
  flex: 1;
  font-size: 1.6rem;
  color: #aaa;
  line-height: 1.8;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;
}
.faq-a {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--color-gold-light, #000000);
  flex-shrink: 0;
  font-family: var(--font-en), var(--font-jp-medium);
}

/* --- Footer Banner --- */
.footer-banner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.footer-banner__img {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  border-radius: 8px;
}
.footer-copyright-wrap {
  text-align: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
@media (max-width: 768px) {
.footer-banner {
    justify-content: center;
    margin-top: 2rem;
  }
  .footer-banner__img {
    max-width: 100%;
  }
}

/* --- Privacy Policy --- */
.privacy-heading {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--color-gold, #000000);
  border-left: 3px solid var(--color-gold, #cacaca);
  padding-left: 0.8em;
  margin-top: 4rem;
  margin-bottom: 1.5rem;
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;
}

/* --- List Dots Gold --- */
.c-list li:after {
  background: var(--color-fill-dark) !important;
}

/* --- SP: Container M full width test --- */
@media screen and (max-width: 768px) {
.t-top-movie .c-container-m,
  .u-bg-grad .c-container-m {
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }
  .t-business-attempt__sec + .t-business-attempt__sec {
    margin-top: 8rem !important;
  }
  .t-business-attempt__sec:has(.about-compare-pict) {
    display: flex !important;
    flex-direction: column-reverse !important;
  }
  .t-business-flow__heading {
    font-size: 2.2rem !important;
    padding: 3rem 0 !important;
  }
  .top-flow-label-small {
    font-size: 200px !important;
    margin-top: 5px !important;
    display: inline-block !important;
  }
}

/* --- Company Table --- */
.c-table-l {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 12px !important;
  overflow: hidden;
}
.c-table-l,
.c-table-l.c-table-block-small {
  border-top: none !important;
  border-bottom: none !important;
}
.c-table-l th,
.c-table-l td {
  padding: 1.5em 2em !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  background-image: none !important;
}
.c-table-l tr:last-child th,
.c-table-l tr:last-child td {
  border-bottom: none !important;
}
.c-table-l th {
  background-color: #111 !important;
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
  white-space: nowrap;
  position: relative;
}
.c-table-l th::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 1em;
  background: var(--color-fill-dark);
  margin-right: 0.8em;
  vertical-align: -0.1em;
}
@media(max-width:768px) {
.c-table-l.c-table-block-small th,
  .c-table-l.c-table-block-small td {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .c-table-l.c-table-block-small th {
    border-bottom: none !important;
    padding-top: 0.8em !important;
    padding-bottom: 0.5em !important;
  }
  .c-table-l.c-table-block-small td {
    padding-top: 0.5em !important;
  }
}
.c-table-l tr:first-child th {
  border-top-left-radius: 12px;
}
.c-table-l tr:first-child td {
  border-top-right-radius: 12px;
}
.c-table-l tr:last-child th {
  border-bottom-left-radius: 12px;
}
.c-table-l tr:last-child td {
  border-bottom-right-radius: 12px;
}

.intangible-section-title {
  color: #000000 !important;
  margin-top: 10rem;
}
/* --- Intangible vs Tangible Compare --- */
.intangible-compare {
  display: flex;
  gap: 0;
  margin-top: 3rem;
  align-items: stretch;
}
.intangible-compare__col {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.intangible-compare__vs {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
}
.intangible-compare__vs-txt {
  font-size: 2rem;
  font-weight: bold;
  color: #555;
  letter-spacing: 0.05em;
}
.intangible-compare__header {
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
  padding: 1.2rem;
  border-radius: 8px 8px 0 0;
}
.intangible-compare__header--tangible {
  background: #333;
  color: #aaa;
}
.intangible-compare__header--intangible {
  background: #383838;
  color: #fff;
}
.intangible-compare__body {
  flex: 1;
  padding: 2.5rem 2rem;
  border-radius: 0 0 8px 8px;
  display: flex;
  flex-direction: column;
}
.intangible-compare__body--tangible {
  background: #1a1a1a;
  border: 1px solid #333;
  border-top: none;
}
.intangible-compare__body--intangible {
  background: #1a1a1a;
  border: 1px solid #cacaca;
  border-top: none;
}
.intangible-compare__sub {
  text-align: left;
  font-size: 1.5rem;
  color: #ccc;
  line-height: 1.8;
  margin-bottom: 2rem;
}
.intangible-compare__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.intangible-compare__list li {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.7em 0;
  font-size: 1.4rem;
  color: #d8dbdf;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.intangible-compare__list li:last-child {
  border-bottom: none;
}
.intangible-compare__body--tangible .intangible-compare__list li i {
  color: #666;
  width: 1.6rem;
  text-align: center;
}
.intangible-compare__body--intangible .intangible-compare__list li i {
  color: #000000;
  width: 1.6rem;
  text-align: center;
}
.intangible-compare__note {
  margin-top: 2rem;
  padding: 1rem 1.5rem;
  background: #222;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 0.8em;
  font-size: 1.2rem;
  color: #999;
}
.intangible-compare__note--gold {
  background: #383838;
  color: #000000;
}
.intangible-compare__note i {
  font-size: 1.4rem;
}
.intangible-compare__bottom {
  margin-top: auto;
  padding-top: 2rem;
  padding-bottom: 0;
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
}
.intangible-compare__bottom--gold {
  color: #000000;
}
@media screen and (max-width: 768px) {
.intangible-compare {
    flex-direction: column;
    gap: 1rem;
  }
  .intangible-compare__vs {
    padding: 0.5rem 0;
  }
}

.about-keyword-cell {
  border: 1px solid #cacaca;
  padding: 0.4em 1.2em;
  text-align: center;
  background: #111;
}

/* Contact web buttons row */
.about-contact-buttons {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* Contact button stretch */
.about-contact-btn {
  flex: 1;
  min-width: 0;
}

/* Contact phone section spacing */
.about-contact-phone {
  margin-top: 2rem;
}

/* Responsive */
@media (max-width: 768px) {
.about-message-section {
    padding-top: 2rem;
    padding-bottom: 6rem;
  }
  .about-profile-row {
    flex-direction: column;
    gap: 3rem;
  }
  .about-profile-col {
    flex: none;
    width: 100%;
    box-sizing: border-box !important;   /* basic.cssは*にborder-box未設定→width:100%+paddingが溢れるため明示 */
    padding: 2.5rem 2rem !important;      /* PCの3rem4remは狭幅で溢れるのでSPは縮小 */
    overflow-wrap: anywhere;
  }
  .about-keyword-grid {
    grid-template-columns: 1fr 1fr;
  }
  .about-contact-buttons {
    flex-direction: column;
  }
  .about-contact-btn {
    flex: none;
    width: 100%;
  }
}

/* ================================================
   Page Component Classes - Top Page
   ================================================ */

/* --- News section chevron icon spacing --- */
.top-icon-ml {
  margin-left: 0.5em;
}

/* --- Movie / Mission section heading --- */
.top-movie-heading {
  text-align: center;
  margin-bottom: 1.5rem;
}

/* --- Movie / Mission section lead text --- */
.top-movie-lead {
  text-align: center;
  margin-bottom: 3rem;
}
@media screen and (max-width: 768px) {
.top-movie-lead {
    text-align: left !important;
  }
}

/* --- RAD section container spacing --- */
.top-rad-container {
  padding-top: 6rem;
}

/* --- RAD copy text alignment --- */
.top-rad-copy {
  text-align: center;
}

/* --- RAD model SVG image wrapper --- */
.top-rad-model-wrap {
  text-align: center;
  margin-top: 5rem;
  margin-bottom: 1rem;
  max-width: 600px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* --- RAD model image --- */
.top-rad-model-wrap img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 768px) {
.top-rad-model-wrap {
    max-width: 200px !important;
    margin-top: 4rem !important;
  }
}

/* --- Worry section heading spacing --- */
.top-worry-heading {
  margin-bottom: 3rem;
}

/* --- Diamond model flow top spacing --- */
.top-dmd-flow {
  margin-top: 3rem !important;
}

/* --- Diamond flow label span --- */
.top-flow-label-span {
  line-height: 1.2;
}

/* --- Diamond flow label small text --- */
.top-flow-label-small {
  font-size: 0.75em;
  font-weight: normal;
  opacity: 0.8;
  margin-top: 0.3em;
  display: inline-block;
}
@media screen and (max-width: 768px) {
small.top-flow-label-small,
  .t-business-flow__label small.top-flow-label-small {
    font-size: 14px !important;
  }
  .svg-popup {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  .svg-popup__title {
    font-size: 2.2rem !important;
  }
  .top-mission-btn {
    margin-bottom: 2rem !important;
  }
  .svg-popup__lead,
  .svg-popup__highlight,
  .svg-popup__list li {
    font-size: 1.7rem !important;
  }
  .svg-popup__changes-label {
    font-size: 1.5rem !important;
  }
}

/* --- Diamond flow body text color --- */
.top-flow-body-text {
  color: #f1f1f1 !important;
}

/* --- Diamond flow4 label position --- */
.top-flow4-label {
  position: relative;
}

/* --- Diamond model CTA wrapper --- */
.top-dmd-cta {
  text-align: center;
  margin-top: 3rem;
  padding-bottom: 2rem;
}

/* --- Support area CTA wrapper --- */
.top-support-cta {
  text-align: center;
  margin-top: 6rem;
}

/* --- Contact web buttons layout --- */
.top-contact-buttons {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* --- Contact button flex item --- */
.top-contact-btn-item {
  flex: 1;
  min-width: 0;
}

/* --- Contact phone section spacing --- */
.top-contact-phone {
  margin-top: 2rem;
}

/* --- Contact phone icon style --- */
.top-phone-icon {
  color: #000000;
  margin-right: 0.5em;
}

/* --- Responsive: Top Page --- */
@media (max-width: 768px) {
.top-contact-buttons {
    flex-direction: column;
  }
  .top-contact-btn-item {
    flex: none;
    width: 100%;
  }
}

/* ==========================================================================
   共通パーツ（インラインスタイルから整理）
   全ページのフッターとアイコンで使用するため、ページ専用CSSではなくここに置く。
   ========================================================================== */

/* テキストの後ろに続くアイコン（chevron等） */
.c-icon-after { margin-left: 0.5em; }

/* テキストの前に置くアイコン（envelope等） */
.c-icon-before { margin-right: 0.5em; }

/* フッターの会社案内・プライバシーポリシー等のリンク行 */
.l-footer__links { margin-top: 0.5rem; }
.l-footer__link { color: #999; text-decoration: none; }
/* 暗いフッター背景。ホバーで a:hover(=var(--color-gold-hover)=#000)により黒化して
   見えなくなるのを防ぎ、白にする */
.l-footer__link:hover { color: #fff !important; }
.l-footer__sep { color: #555; margin: 0 0.5em; }
/* スマホのみ: 会社案内・プライバシーポリシー行を中央揃え＋下パディング20px（PCは不変） */
@media screen and (max-width: 768px) {
  .l-footer__links {
    text-align: center !important;
    padding-bottom: 20px !important;
  }
  /* ロゴもリンク行と連動して中央寄せ（ロゴリンクは inline-block なので親の text-align で中央化） */
  .l-footer__inr > .c-flex__block:first-child {
    text-align: center;
  }
}

/* 余白ユーティリティ（固定値・レスポンシブ非対応）
   u-space-* は画面幅で値が変わるため、全幅で同値を保ちたい箇所はこちらを使う。 */
.u-mt-em-half { margin-top: 0.5em; }

/* その他ユーティリティ */
.u-lh-2 { line-height: 2; }
.u-ta-right { text-align: right; }
.u-flex-fill { flex: 1; min-width: 0; }

/* アイコン色のバリエーション */
.c-icon-before.-gold { color: #383838; }

/* ---------------------------------------------------------------
   ユーティリティは最後に置く（コンポーネントより後＝上書きできる）
   --------------------------------------------------------------- */
.u-mb-2 { margin-bottom: 2rem; }
.u-mb-3 { margin-bottom: 3rem; }
.u-mb-6 { margin-bottom: 6rem; }
.u-mb-8 { margin-bottom: 8rem; }
.u-mt-0 { margin-top: 0; }
.u-mt-1_5 { margin-top: 1.5rem; }
.u-mt-2 { margin-top: 2rem; }
.u-mt-3 { margin-top: 3rem; }
.u-mt-4 { margin-top: 4rem; }
.u-mt-5 { margin-top: 5rem; }
.u-mt-6 { margin-top: 6rem; }
.u-mt-8 { margin-top: 8rem; }

/* ==============================================================================================
   Typography tightening — moon-x.com のトンマナに寄せる（締まった見た目）
   実測: 見出し 行間1.4 字間0.06em ／ 日本語本文 行間1.7 字間0.05em ／ セクション余白タイト
   basic.css の緩い行間・大きい余白を、後読みの本レイヤーで締める。
   ============================================================================================== */

/* スローガン見出し（各ページの大見出し） */
.c-txt-slogan,
.c-txt-slogan2 {
  font-size: 3rem !important;
  line-height: 1.45 !important;
  letter-spacing: 0.06em !important;
}
/* スマホのみ: 各ページのスローガンを縮小（PCは3remのまま不変） */
@media screen and (max-width: 768px) {
  .c-txt-slogan {
    font-size: 2.3rem !important;
  }
  .c-txt-slogan2 {
    font-size: 2rem !important; /* 「すべての選ばれるは連鎖して」等 同スタイル全て（SP縮小） */
  }
}
/* 代表メッセージのスローガンの行間をミッションのスローガンと同じに */
.t-about-message__slogan {
  line-height: 1.45 !important;
}
/* 見出しの行間を 1.45 に統一（ミッション見出しと同じ）。
   1行の詰めラベル（比率1.0の小カード見出し）は対象外。 */
.t-business-attempt-heading,
.t-recruit-slogan__heading,
.c-heading-sec__jp,
.c-heading-l,
.t-whatdo3__heading,
.t-about-effort__heading,
.dm-hcard__heading,
.privacy-heading {
  line-height: 1.45 !important;
}
/* 見出し→本文の距離を reference（21px相当）に統一 */
.t-about-mission .c-txt-slogan {
  margin-bottom: 34px !important;
}
.t-about-message__slogan {
  margin-bottom: 36px !important;
}
/* スマホ: ポートレート画像とスローガン見出しの間に余白を確保。
   （:beforeの負マージン=行頭トリムが第1行を上へ引き上げ、直上の画像に被るのを防ぐ） */
@media screen and (max-width: 768px) {
  .t-about-message__slogan {
    margin-top: 3rem !important;
  }
}
/* 代表メッセージの肩書き・氏名を右寄せ・行間詰め・拡大 */
.t-about-message__work,
.t-about-message__name {
  text-align: right !important;
  line-height: 1.3 !important;
}
.t-about-message__work {
  font-size: 1.5rem !important;
  color: #666666 !important;
  padding-top: 4rem !important;
}
.t-about-message__name {
  font-size: 2.1rem !important;
}
/* Profile / Track Record カードの背景をヒーロー色に */
.about-profile-col {
  background: #e1e1e1 !important;
  padding: 3rem 4rem !important;
  border-radius: 8px !important;
}
/* 2カードは内容なりの高さにする・上マージンを狭める
   （2026-07-27 テキスト改訂でTrack Recordが大幅に長くなり、
   高さを揃える stretch だとProfile側に大きな空白が出るため） */
.about-profile-row {
  align-items: flex-start !important;
  margin-top: 3px !important;
}
/* 使命セクション（ボタンのみ）: ボタン上の余白を詰める */
#our-mission {
  padding-top: 90px !important;
}
/* スマホのみ: 「選ばれる会社とは」ボタン上の余白を少し狭める（PCは90pxのまま） */
@media screen and (max-width: 768px) {
  #our-mission {
    padding-top: 55px !important;
  }
}
#our-mission .merit-structure-cta {
  margin-top: 0 !important;
}
/* merit ゴール設計: スローガン削除後の余白を詰める */
#goal .t-about-message {
  padding-top: 20px !important;
}
/* merit サマリーの2カードを about プロフィールカード風に */
.merit-summary-col {
  background: #e1e1e1 !important;
  padding: 3rem 4rem !important;
  border-radius: 8px !important;
}
.merit-summary-row {
  align-items: stretch !important;
}
.c-txt-slogan2 {
  margin-bottom: 3rem !important;
}

/* セクション見出し（jp/en）: 行間は他の見出しと統一（1.45） */
.c-heading-sec__jp {
  line-height: 1.45 !important;
  letter-spacing: 0.06em !important;
}
.c-heading-sec__en {
  letter-spacing: 0.12em !important;
}
.c-heading-l,
.c-heading-m,
.c-heading-s,
.c-heading-xl {
  line-height: 1.45 !important;
  letter-spacing: 0.04em !important;
}

/* 見出しウェイト: moon-x は見出しも軽め(w400)。UD新ゴMediumで十分な太さがあるため、
   詰まった印象を出すため字間で締め、サイズの肥大は各ページで個別調整 */

/* ==============================================================================================
   コンテンツ背景の純白(#fff)を moon-x のグレー階調へ（純白は使わない）
   basic.css / page_business.css にハードコードされた #fff を後読みで上書き。
   カード面は基調と同トーン(#f4f4f4)にし、既存の影(u-shadow)で分離させる。
   ============================================================================================== */
.c-contents,
.c-contents.u-shadow,
.t-topAbout,
.t-business-flow__inr,
.dm-card,
.merit-card,
.l-menu__inr,
.l-sitemap__inr {
  background: var(--color-bg-card) !important;   /* #f4f4f4 */
}

/* ヒーローは独自の背景色を持つ（全幅セクションなのできれいに塗れる）。
   お知らせ等の中央寄せセクションは透明のまま body(#f5f5f5)を見せる。 */
.fv {
  background-color: #e1e1e1 !important;
}
/* 「あなたの会社は、もっと成長できる。」のリビール animation。
   fv.css は伏せ字の文字色とワイプ帯に var(--color-bg)=#f5f5f5 を使うが、
   ヒーロー実背景は上記 #e1e1e1 のため、白い帯が横切って見えていた。
   ヒーロー背景と同色にして帯を見えなくする。 */
.fv-text__ja-mask {
  color: #e1e1e1 !important;
}
.fv-text__ja-mask::after {
  background: #e1e1e1 !important;
}
/* リビール完了後の文字色（fv.css の is-loaded ルール）を上書きで潰さない */
.fv.is-loaded .fv-text__ja-mask {
  color: var(--color-text-heading) !important;
}

/* ===== 明色化: diamond のカード（ダーク→ヒーロー色 #e1e1e1 ＋ 濃い文字） =====
   フッター・サイトマップ・ボタン・暗色アクセント（hover ピル等）は対象外。 */
.dm-card,
.dm-hcard,
.c20-card,
.dm-c20-item,
.step-card,
.area-card {
  background: #e1e1e1 !important;
  border: 1px solid #cacaca !important;
}
/* カード内の文字を濃色に（hover の暗ピル+白文字は詳細度が高く残る） */
.dm-card *,
.dm-hcard *,
.c20-card *,
.dm-c20-item *,
.step-card *,
.area-card * {
  color: #333333 !important;
}
/* 明背景に沈んでいた説明文を濃色に */
.dm-gold-bar__desc,
.dm-c20-desc,
.dm-process-card__txt {
  color: #555555 !important;
}

/* ===== 明色化: merit のカード（本体→#e1e1e1・文字は濃色、赤/緑/ゴールド等のアクセントは維持） =====
   .t-whatdo3__head（#383838）と .merit-pill は暗色アクセントとして残す。 */
.c-infobox,
.t-whatdo3__body,
.merit-case-body {
  background: #e1e1e1 !important;
}
.merit-case-body,
.c-infobox {
  color: #333333 !important;
}

/* ===== 明色化: rad のカード ===== */
.rad-model-overlay,
.model-click,
.rad-flow-card,
.rad-flow-card--exec,
.flow-card,
.rad-area-card,
.rad-card {
  background: #e1e1e1 !important;
  border: 1px solid #cacaca !important;
}
/* フローカードの通常背景は #ececec（ホバーは .flow-card:hover の #c6c4c1） */
.flow-card {
  background: #ececec !important;
}
.rad-model-box,
.rad-flow-card,
.flow-card,
.rad-area-card,
.rad-card {
  color: #333333 !important;
}
.rad-need-box__label {
  background: #ececec !important;
  border: none !important;
  color: #333333 !important;
}
/* rad の暗色アクセントは白文字を維持 */
.rad-model-tab,
.rad-phase-label--design,
.rad-phase-label--execute {
  color: #ffffff !important;
}

/* ===== 明色化: intangible のカード ===== */
.intangible-compare__body--tangible,
.intangible-compare__body--intangible,
.intangible-compare__note,
.intangible-compare__header--tangible {
  background: #e1e1e1 !important;
  color: #333333 !important;
}
.intangible-compare__header--tangible {
  border: 1px solid #cacaca !important;
}
/* intangible の暗色アクセント（無形＝強調側・ゴールド）は白文字を維持 */
.intangible-compare__header--intangible,
.intangible-compare__note--gold {
  color: #ffffff !important;
}

/* ===== 明色化: about のカード ===== */
.about-check-tag,
.about-keyword-cell,
.about-compare-table thead th,
.about-compare-label {
  background: #e1e1e1 !important;
  color: #333333 !important;
}
/* 比較表「クラファーズ」強調列: ボディ #ffffff／ヘッダはサイトマップ色／文字 #ececec */
.about-compare-table .about-compare-highlight {
  background: #ffffff !important;
  color: #000000 !important;
}
.about-compare-table .about-compare-head-gold {
  background: var(--color-gold-gradient) !important;
  color: #ffffff !important;
}
/* クラファーズ列の枠線を全辺 黒（左線は隣セルの枠に勝たせる） */
.about-compare-table .about-compare-highlight,
.about-compare-table .about-compare-head-gold {
  border-color: #000000 !important;
}
.about-compare-table td:nth-child(4),
.about-compare-table th:nth-child(4) {
  border-left-color: #000000 !important;
}
.about-compare-table td:nth-child(3),
.about-compare-table th:nth-child(3) {
  border-right-color: #000000 !important;
}
/* クラファーズ列の強調語に黄色マーカー */
.about-compare-table .tbl-marker {
  background: linear-gradient(transparent 55%, #ffe14d 55%) !important;
  font-weight: bold;
  padding: 0 0.1em;
}
/* お問い合わせ CTA: アイコン付きカード2枚 */
.about-cta-lead {
  text-align: center;
  margin-bottom: 2.2rem;
}
.about-cta-cards {
  display: flex;
  gap: 2rem;
}
.about-cta-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  padding: 3.2rem 1.5rem;
  border: 1px solid #cacaca;
  border-radius: 10px;
  text-decoration: none;
  color: #333333;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.about-cta-card:hover {
  background: #ececec;
  border-color: #b5b5b5;
}
.about-cta-card__icon {
  width: 58px;
  height: auto;
  display: block;
}
.about-cta-card__label {
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1.6rem;
  font-weight: bold;
  white-space: nowrap;
}
.about-cta-card__label i {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  .about-cta-cards {
    gap: 1.2rem;
  }
  .about-cta-card {
    padding: 2.4rem 1rem;
  }
}

/* ===== 明色化: recruit / 表 ===== */
.recruit-flow__step,
.c-table-l th {
  background: #e1e1e1 !important;
  color: #333333 !important;
}
.c-table-l th {
  border: 1px solid #cacaca !important;
}

/* ===== 明色化: contact / download フォーム・カード ===== */
.contact-new_card,
.contact-new_row_label,
.contact-new_step {
  background: #e1e1e1 !important;
  color: #333333 !important;
}
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-textarea,
.wpcf7-form-control.wpcf7-select,
.wpcf7-form-control.wpcf7-tel,
.wpcf7-form-control.wpcf7-email,
input.wpcf7-form-control,
textarea.wpcf7-form-control,
select.wpcf7-form-control {
  background: #ffffff !important;
  color: #333333 !important;
  border: 1px solid #cacaca !important;
}

/* ===== 明色化: top の見出しボックス ===== */
.dmd-heading,
.t-business-flow__heading {
  background: #e1e1e1 !important;
  color: #333333 !important;
  border: 1px solid #cacaca !important;
}

/* ダイヤモンドモデル見出し帯: チャコール単色＋白文字（画像・暗幕オーバーレイは無効化） */
.dmd-heading {
  background: #383838 !important;
  color: #ffffff !important;
  border-color: #383838 !important;
}
.dmd-heading::before {
  display: none !important;
}
.dmd-heading .c-heading-sec__jp,
.dmd-heading .c-heading-sec__en {
  color: #ffffff !important;
}
.dmd-heading .c-heading-sec__en::before {
  background-color: #ffffff !important;
}

/* ===== 明色化: faq（質問バーの白文字→濃色。Qバッジのアクセントは維持） ===== */
.faq-item,
.faq-question,
.faq-question p,
.faq-answer,
.faq-answer p,
.faq-arrow {
  color: #333333 !important;
}

/* ===== 明色化: intangible の「企業価値担保権」ボックス・年代グラフのキャプション ===== */
.dm-warning-box {
  background: #e1e1e1 !important;
  color: #333333 !important;
  border: 1px solid #cacaca !important;
}
.dm-warning-box__label {
  background: #e1e1e1 !important;
  color: #333333 !important;
}
.intangible-pie-year,
.intangible-pie-caption {
  color: #333333 !important;
}

/* ===== 明色化: 明カード上に残った薄い/白文字を濃色に ===== */
/* recruit 選考フロー */
.recruit-flow__title,
.recruit-flow__desc {
  color: #333333 !important;
}
/* intangible 比較カード本文・見出し・スローガン */
.intangible-compare__sub,
.intangible-left-heading,
.dm-compare-txt--light,
.dm-slogan-intro {
  color: #333333 !important;
}

/* 会社概要テーブル: 右カラム（値セル）を背景#f1f1f1＋ボーダー */
.company-outline td {
  background: #f1f1f1 !important;
  border: 1px solid #cacaca !important;
}

/* 下層ページのヒーロー画像を即表示（オープニングのフェードイン演出を無効化） */
.c-hero__bg {
  opacity: 1 !important;
  transition: none !important;
}

/* サイドメニューの閉じるカーソル（✕）を黒に（白い close.png を上書き） */
.l-sitemap__bg {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cline x1='11' y1='11' x2='29' y2='29' stroke='%23000000' stroke-width='2.5' stroke-linecap='round'/%3E%3Cline x1='29' y1='11' x2='11' y2='29' stroke='%23000000' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") 20 20, pointer !important;
}

/* サイドメニューのオーバーレイ: 半透明＋曇りガラス（backdrop blur） */
.l-sitemap__bg {
  background: rgba(245, 245, 245, 0.5) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}

/* サイドメニューの区切り線をチャコールグレーに */
.l-sitemap__nav__list {
  border-top-color: #383838 !important;
}
.l-sitemap__nav__list > li {
  border-bottom-color: #383838 !important;
}

/* サイドメニュー: 元のbasic.css設計どおり PC＝左ドロワー / スマホ＝右ドロワー。
   （前セッションが全幅で左固定していたのを元に戻す。開くと translateX(0)） */
.l-sitemap {
  transition: visibility 0s linear 0.4s !important; /* 閉じる時は0.4s後に非表示（スライドを見せる） */
}
body.is-toggle-open .l-sitemap {
  transition: visibility 0s linear 0s !important;   /* 開く時は即表示 */
}
/* 閉じた位置: PCは左（画面左外・従来） */
.l-sitemap__inr {
  transform: translateX(-100%) !important;
}
/* スマホのみ: 右ドロワー（閉じ位置＝画面右外。パネルはbasic.cssで margin-left:auto の右アンカー） */
@media screen and (max-width: 768px) {
  .l-sitemap__inr {
    transform: translateX(100%) !important;
    width: 85% !important;               /* スマホのみ幅85%（basic.cssの98%を上書き。PCは32%/50%のまま不変） */
  }
}
body.is-toggle-open .l-sitemap__inr {
  transform: translateX(0) !important;
}

/* FV英語見出し: PC=2行版を表示 / スマホ=4行版を表示（各行=独立アニメ） */
.fv-en-pc { display: block; }
.fv-en-sp { display: none; }

/* ===== スマホ専用（PC不変）: トップFV調整 ===== */
@media screen and (max-width: 768px) {
  /* ヒーロー: 斜め(skew)スライダーはそのまま。高さだけコンテンツ可変にする。
     テキストを通常フローに戻すことで中身が増えれば高さが伸びる＝見切れ／重なりが起きない。
     スライダーは height:100% なので可変高さに追従（斜めデザイン維持）。
     min-heightは vh→svh の順で指定（svh非対応は vh にフォールバック） */
  .fv {
    height: auto !important;
    min-height: 90vh !important;
    min-height: 90svh !important;
    display: flex !important;
  }
  /* ヘッダー: logoを小さく、ヘッダー高さをメニュー(50px)に合わせる */
  .l-header {
    height: 50px !important;
    padding-top: 0 !important;
    align-items: center !important;
  }
  .l-header .c-logo-img img {
    height: 3.0rem !important;
  }
  .l-header .c-logo-img {
    transform: translate(-15px, 10px) !important;
  }
  /* 英語見出し: 2行版を隠し、1行ずつ独立アニメの4行版を表示 */
  .fv-en-pc { display: none; }
  .fv-en-sp { display: block; }
  /* 「Make the」(SP版1行目)の上に余白 */
  .fv-en-sp .fv-text__line:nth-child(1) {
    padding-top: 20px !important;
  }
  /* 4行版の3・4行目のリビール（1・2行目は既存の nth-child(1)(2) ルールで対応済み） */
  .fv.is-loaded .fv-text__line:nth-child(3) { color: var(--color-text-heading); transition: color 0s 0.55s; }
  .fv.is-loaded .fv-text__line:nth-child(3)::after { animation: maskReveal 0.5s 0.3s cubic-bezier(0.9, 0, 0.1, 1) forwards; }
  .fv.is-loaded .fv-text__line:nth-child(4) { color: var(--color-text-heading); transition: color 0s 0.7s; }
  .fv.is-loaded .fv-text__line:nth-child(4)::after { animation: maskReveal 0.5s 0.45s cubic-bezier(0.9, 0, 0.1, 1) forwards; }
  /* テキストは通常フロー（絶対配置を解除）。flexアイテムとして全高にstretchし、
     中の inner を縦flexにして「見出し群=上／ボタン=下」に分ける */
  .fv-text {
    position: static !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    align-items: stretch !important;
    padding-bottom: 50px !important;
  }
  /* FVテキスト内: 見出し群を上・ボタンを下端に（flexで重ならず配置） */
  .fv-text__inner {
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  /* FVボタン: 絶対配置を解除し、margin-top:auto で下端へ押し下げる
     （余白不足時は自動で詰まるだけで、上のコピーと重ならない） */
  .fv-text__buttons {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: auto !important;
    padding-top: 30px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    transform: none !important;
  }
  .fv-text__buttons .fv-btn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    justify-content: space-between !important;
    background: #ececec !important;
  }
  /* FVスライダー画像の濃さ（透明度）。斜めデザインは維持 */
  .fv-slider {
    opacity: 0.4 !important;
  }
  /* FVリード文: チャコール背景＋白文字 */
  .fv-text__lead {
    display: inline-block;
    background: #383838 !important;
    color: #ffffff !important;
    padding: 3px 0.9em !important;
    line-height: 1.3 !important;
  }
  /* 1行目と2行目の隙間を詰める（2つ目のボックスのみ） */
  .fv-text__lead + .fv-text__lead {
    margin-top: 1vw !important;
  }
}

/* faq/company の導入文（旧インラインstyleをクラス化）: PC 2.2rem / スマホ縮小 */
.page-intro-lead {
  font-size: 2.2rem !important;
  line-height: 1.8 !important;
}
@media screen and (max-width: 768px) {
  .page-intro-lead {
    font-size: 1.8rem !important;
  }
}

/* recruit スマホのみ: ⑥スローガン見出し縮小 ／ ⑦本文(.c-txt-xl)を通常テキスト(.c-txt-m)の
   サイズ・太さ・フォント種別に合わせる（.c-txt-xlはrecruitの1箇所のみ使用）。PCは不変 */
@media screen and (max-width: 768px) {
  .t-recruit-slogan__heading {
    font-size: 1.8rem !important;
  }
  .t-recruit-slogan__heading span {
    font-size: 2.8rem !important;
  }
  .c-txt-xl {
    font-size: 1.5rem !important;
    font-family: var(--font-jp-bold) !important;
    letter-spacing: 0.05em !important;
    color: var(--color-text) !important;
  }
}

/* ===== 移植: recruit の <style>ブロック（.recruit-flow*・head→CSS化） ===== */
	.recruit-flow {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0;
		margin: 3rem auto 4rem;
		max-width: 800px;
	}
	.recruit-flow__step {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #1a1a1a;
		border: 1px solid var(--color-gold, #cacaca);
		border-radius: 10px;
		padding: 1.8rem 1.2rem;
		min-width: 110px;
		flex: 1;
		gap: 0.5rem;
		align-self: stretch;
	}
	.recruit-flow__step--last {
		background: var(--color-gold, #383838);
		border-color: var(--color-gold, #cacaca);
	}
	.recruit-flow__step--last .recruit-flow__title {
		font-size: 1.8rem;
		color: #fff;
	}
	.recruit-flow__num {
		font-size: 1.1rem;
		font-weight: 600;
		color: #000000;
		letter-spacing: 0.05em;
	}
	.recruit-flow__title {
		font-size: 1.5rem;
		font-weight: 700;
		color: #fff;
		white-space: nowrap;
	}
	.recruit-flow__desc {
		font-size: 1.1rem;
		color: #ccc;
		line-height: 1.6;
		text-align: left;
		margin-top: 0.3rem;
	}
	.recruit-flow__arrow {
		color: var(--color-gold, #000000);
		font-size: 1.2rem;
		padding: 0 0.6rem;
		flex-shrink: 0;
	}
	@media (max-width: 768px) {
		.recruit-flow {
			flex-direction: column;
			gap: 0;
			max-width: 100%;
		}
		.recruit-flow__step {
			min-width: unset;
			width: 100%;
			flex-direction: row;
			padding: 1.2rem 1.5rem;
			gap: 1rem;
			box-sizing: border-box;
		}
		.recruit-flow__arrow {
			transform: rotate(90deg);
			padding: 0.4rem 0;
		}
	}

/* ===== 移植: faq の <style>ブロック（head→CSS化） ===== */
	.faq-tabs{display:flex;flex-wrap:wrap;gap:0.6rem;margin-bottom:10rem;justify-content:center;}
	.faq-tab{padding:0.8em 1.6em;border:1px solid #383838;border-radius:100px;background:#111;color:#fff;font-size:1.1rem;cursor:pointer;transition:all 0.3s ease;white-space:nowrap;}
	.faq-tab:hover{background:#222;border-color:#666;}
	.faq-tab .fa-chevron-down{color:#ffffff;}
	.faq-tab.is-active{background:#111;color:#ffffff;border-color:#383838;}
	.faq-tab.is-active .fa-chevron-down{color:#ffffff;}
	@media(max-width:768px){
		.faq-tabs{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-bottom:3rem;}
		.faq-tab{padding:0.8em 1.5em;font-size:1.4rem;white-space:normal;display:flex;align-items:center;justify-content:space-between;}
		.faq-tab .fa-chevron-down{margin-left:auto !important;}
	}