@charset "utf-8";
/* ==========================================================
   リニューアル共通（renewal/common.css）
   導入事例・コラムなど、新デザインのページで共通利用
   ・デザイントークン／2カラム（左グレー帯＋サイド列）／タイトル・見出し／スクロール表示
   ・既存 css/main.css の後に読み込み、main.css は変更しない
   ・既存テーマの #b21100 / #ececec / Noto Sans JP / Bebas Neue を継承
   ・現行サイトのタイトル等を一新する際は、このファイルを全ページで読み込めば流用できます
   JS：js/renewal/common.js
   ========================================================== */

/* ----------------------------------------------------------
   デザイントークン【今後サイト共通化予定】
---------------------------------------------------------- */
:root {
  --csd-red: #b21100;
  --csd-red2: #e23a28;
  --csd-red-light: #ff7565;
  --csd-dark: #101010;
  --csd-ink: #242424;
  --csd-gray: #ececec;
  --csd-line: #d8d8d8;
  --csd-gnavi-h: 90px; /* js/renewal/common.js でヘッダー実寸に更新 */
  /* 左グレー帯の右端：既存 main.css の .pageHeader__100vw .inner-1200::before と同じ位置
     （.inner-1200 の左端 + 400px）。サイド列 340px + 余白 40px */
  --csd-side-edge: max(400px, calc((100% - 1240px) / 2 + 400px));
  --csd-side-w: 340px;
  --csd-side-gap: 80px;
}

/* ----------------------------------------------------------
   2カラム（左グレー帯＋サイド列）【既存の下層ページと同じ構成】
   ・背景は透明にして MV（.pageHeader）の画像に重ねない（画像の右下が隠れないように）
   ・960px以上は左グレー帯をページ下まで延長
---------------------------------------------------------- */
@media only screen and (min-width: 960px) {
  .csd-side-bg {
    background: linear-gradient(90deg, var(--csd-gray) 0, var(--csd-gray) var(--csd-side-edge), transparent var(--csd-side-edge));
  }
}

html {
  scroll-padding-top: calc(var(--csd-gnavi-h) + 16px);
}

body {
  color: var(--csd-ink);
  background: #fff;
}

.gnavi {
  z-index: 40;
}

.gnavi #logo img {
  width: 100%;
}

/* ----------------------------------------------------------
   ページタイトル（MV / .pageHeader）【今後サイト共通化予定】
   マークアップ・基本スタイルは既存 main.css の .pageHeader を使用。
   背景画像：images/renewal/title-bg-10.png（SP：title-bg-10-sp.png）
---------------------------------------------------------- */
.pageHeader__container__flex__box {
  max-width: 760px;
}

/* ----------------------------------------------------------
   セクション英字ラベル＋見出し（一覧の導入文タイトル）【今後サイト共通化予定】
   <p class="case-intro__label bebas">OUR WORKS</p>
   <h2 class="case-intro__title">見出し</h2>
---------------------------------------------------------- */
.case-intro {
  margin-bottom: clamp(42px, 5vw, 68px);
  text-align: center;
}

.case-intro__label {
  margin: 0 0 8px;
  color: var(--csd-red);
  font-size: 18px;
  letter-spacing: 0.18em;
}

.case-intro__title {
  margin: 0 0 16px;
  font-size: clamp(25px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.case-intro__text {
  margin: 0;
  color: #555;
  font-size: 15px;
  line-height: 2;
}

/* ----------------------------------------------------------
   グラデーション見出し（.csd-heading／.csd-gradient-title）
   → 全ページ共通の部品として css/renewal/second.css で定義
---------------------------------------------------------- */

.csd-kicker {
  margin: 0 0 7px;
  color: var(--csd-red);
  font-size: 13px;
  letter-spacing: 0.17em;
}

/* ----------------------------------------------------------
   ページ送り（renewal_pagination()）
---------------------------------------------------------- */
.renewal-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(46px, 6vw, 76px);
}

.renewal-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 10px;
  border: 1px solid #bbb;
  border-radius: 50px;
  box-sizing: border-box;
  color: #222;
  background: #fff;
  font-family: Arial, sans-serif;
  font-size: 12px;
  opacity: 1 !important;
}

.renewal-pagination .page-numbers.current,
.renewal-pagination a.page-numbers:hover {
  border-color: var(--csd-red);
  color: #fff;
  background: var(--csd-red);
}

.renewal-pagination .prev,
.renewal-pagination .next {
  gap: 9px;
  padding: 0 18px;
}

.renewal-pagination .dots {
  border-color: transparent;
}

/* ----------------------------------------------------------
   スクロール表示アニメーション【今後サイト共通化予定】
   class="reveal" → js/renewal/common.js が .is-visible を付与
---------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.85s ease,
    transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media only screen and (max-width: 768px) {
  .case-intro__text {
    font-size: 13px;
  }
}

@media only screen and (max-width: 559px) {
  .case-intro {
    margin-bottom: 34px;
  }

  .case-intro__title {
    font-size: 23px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}