@charset "utf-8";
/*
 * ======================================
 * 株式会社立和（RITSUWA）サイト固有CSS
 * ======================================
 *
 * 共通CSS（css/main.css ← scss/site-main.scss）で再現できない
 * claude-design-output/ の実数値だけをここに定義する。
 * すべて .rw- プレフィックス。
 *
 * --------------------------------------
 * 元データ実数値（目視推定禁止の基準値）
 * --------------------------------------
 *   コンテナ最大幅        : 1400px
 *   コンテナ左右padding   : 24px（全ブレイクポイント固定）
 *   セクション上下padding : clamp(72px, 9vw, 140px)
 *   見出し→本文 gap       : clamp(40px, 5vw, 72px)
 *   カード grid gap       : clamp(20px, 2.6vw, 40px)
 *   2カラム gap           : clamp(32px, 4vw, 64px) / clamp(24px, 4vw, 52px)
 *   カラム比率            : grid auto-fit minmax(320px,1fr) 等分（＝1:1）
 *   見出しJA              : clamp(19px,1.9vw,26px) / fw500 / ls .12em / #33405e
 *   見出しEN              : Cormorant 400 / clamp(54px,8.6vw,124px) / lh1.02 / ls .03em
 *                           gradient 90deg #439dce → #253a83（bg-clip:text）
 *   本文                  : clamp(17px,1.4vw,19px) / lh 2.3 / #33405e
 *   詳細本文              : 17px / lh 2.2 / #3c4a68
 *   注記                  : 15px / lh 1.9 / #6b7a9c
 *   ボタン角丸            : 4px（全ボタン共通）
 *   カード角丸            : 6px
 *
 * --------------------------------------
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * --------------------------------------
 *  .rw-container         - 1400px + 左右24px固定ガター
 *  .rw-sec               - セクション上下 clamp(72px,9vw,140px)
 *  .rw-sec--pt0/--pb0    - 片側padding打ち消し
 *  .rw-stack + --center/--sm/--md/--lg/--26/--28/--36/--gap16 - 縦積み + gap
 *  .rw-w1200 / .rw-w880 / .rw-self-center
 *  .rw-head / __ja / __en - JA小→EN大（グラデ文字）の逆順2段見出し
 *  .rw-head--center / --white、.rw-head__ja--lh17 / --sm
 *  .rw-head__en--md/--lg2/--sm - EN のサイズ段階
 *  .rw-lead / .rw-text / .rw-note - 本文3段階
 *  .rw-btn + --grad/--outline/--navy/--line/--white/--ghost/--sm/--md/--lg/--wide
 *  .rw-btns、.rw-h2 / --lg / --sm、.rw-duo / --stretch
 *  .rw-bg-section / --nb / .rw-bg-pale、.rw-figure / --tall、.rw-map、.rw-spacer
 *  .rw-header + __inner/__right/__util/__tel/__line/__nav/__nav-item
 *  .rw-header--mv        - MV上に重ねる透過ヘッダー（白文字）
 *  .rw-logo / __name / __desc
 *  .rw-pagehead / __title / __ja / __en - 写真+87%白幕の下層ヒーロー
 *  .rw-mv / __media / __slide / __overlay / __inner / __en / __ttl / __lead / __sub
 *  .rw-card-biz + __img/__overlay/__ttl/__body/__text/__types/__arrow
 *  .rw-photoduo / __a / __b - 2枚の写真をずらして重ねる
 *  .rw-marquee / __track / __item + 各部分要素 - 全幅の自動横スクロール実績帯
 *  .rw-band / --left/--right / __media / __body - 片側マスク写真＋テキスト帯
 *  .rw-bizrow / __body / __en / __ttl / __types / __img - 事業一覧の1行
 *  .rw-features / __item / __no / __ttl / __text - グラデ乗算背景の3特徴
 *  .rw-dl / __row / __key / __val - 会社概要テーブル（dl相当）
 *  .rw-works / __item / __ba / __cell / __badge / __body - Before/After実績グリッド
 *  .rw-chips / __item     - 募集職種チップ
 *  .rw-contact-cards / .rw-ccard / --line
 *  .rw-form / __ttl - CMSフォームの外枠（中身は .form-contents をCSSで調整）
 *  .rw-privacy / __list / __item / __ttl / __text / __lead
 *  .rw-footer + 各部分要素
 *  .rw-spbar / .rw-spnav__tel
 *
 * --------------------------------------
 * 共通SCSSに不足していたもの（5分類）
 * --------------------------------------
 *  値の粒度不足：
 *   - clamp() ベースの流体タイポ／流体余白が utility に無い
 *     （fz-* は 10/12/13/14/16/18… の固定刻みで 17px・19px・21px が出せない）
 *   - 余白 24px / 26px / 22px、gap 6px / 8px / 12px / 24px が刻みに無い
 *   - 角丸 4px / 6px（rounded-sm=5px / rounded=10px しかない）
 *   - コンテナ 1400px + 左右24px固定（container-wide は 1320px 以下で 95% に切替わる）
 *  指定方向不足：
 *   - 片側だけを mask-image でフェードさせる背景写真（bg-photo-fade は
 *     グラデ幕を重ねる方式で、元データのマスク境界（18%/42%）を再現できない）
 *  状態不足：
 *   - transition の個別プロパティ指定（元データは background/color/border-color の
 *     0.9s のみ。.transition は all 0.3s 固定）
 *  構造不足：
 *   - 「JA（小）を上・EN（大）を下」に置く見出し。heading-big は EN が上・JA が下で、
 *     グラデーションの向きも 90deg base→sub の固定（元データは sub→base）
 *   - Before / After の2枚を1pxの罫線で割り付けるカード
 *   - 写真2枚を対角にずらして重ねるブロック
 *  装飾パターン不足：
 *   - 背景写真にブランドグラデを mix-blend-mode:multiply で乗算する面
 *   - JS不要の全幅マーキー（gallery-scroll は img 固定高のみでカード対応不可）
 */

/* ==========================================================================
   0. base
   ========================================================================== */
body {
  color: #33405e;
  background: #fff;
}
main {
  display: block;
  background: #fff;
}
img { max-width: 100%; height: auto; }

/* ==========================================================================
   1. layout
   ========================================================================== */
.rw-container {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
.rw-sec {
  padding-top: clamp(72px, 9vw, 140px);
  padding-bottom: clamp(72px, 9vw, 140px);
}
.rw-sec--pt0 { padding-top: 0; }
.rw-sec--pb0 { padding-bottom: 0; }

.rw-stack {
  display: flex;
  flex-direction: column;
  gap: var(--rw-gap, clamp(40px, 5vw, 72px));
}
.rw-stack--center { align-items: center; }
.rw-stack--sm { gap: clamp(34px, 4.5vw, 64px); }   /* ABOUT の見出し→本文 */
.rw-stack--28 { gap: 28px; }                        /* 2カラム内テキスト側 */
.rw-stack--26 { gap: 26px; }                        /* 募集職種セクション */
.rw-stack--36 { gap: 36px; }                        /* お問い合わせセクション */
.rw-stack--md { gap: clamp(32px, 4vw, 56px); }      /* 事業内容ページ */
.rw-stack--lg { gap: clamp(40px, 5vw, 72px); }
.rw-stack--gap16 { gap: 16px; }
.rw-self-center { align-self: center; }
.rw-w1200 { max-width: 1200px; margin-left: auto; margin-right: auto; }
.rw-w880  { max-width: 880px;  margin-left: auto; margin-right: auto; }

.rw-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
.rw-duo--stretch {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(24px, 4vw, 52px);
  align-items: stretch;
}

.rw-bg-section  { background: #eaeff8; border-top: 1px solid #dbe4f4; border-bottom: 1px solid #dbe4f4; }
.rw-bg-section--nb { border-bottom: 0; }
.rw-bg-pale     { background: #f5f8fd; }

/* ==========================================================================
   2. heading（JA小 → EN大グラデーション）
   ========================================================================== */
.rw-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.rw-head--center { align-items: center; text-align: center; }
.rw-head__ja {
  font-size: clamp(19px, 1.9vw, 26px);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #33405e;
  line-height: normal;
}
.rw-head__ja--lh17 { line-height: 1.7; }   /* 元データで lh1.7 が指定された複数行見出し */
.rw-head__ja--sm { font-size: clamp(18px, 1.7vw, 24px); }
.rw-head__en {
  font-family: Cormorant, serif;
  font-weight: 400;
  font-size: clamp(54px, 8.6vw, 124px);
  line-height: 1.02;
  letter-spacing: 0.03em;
  background: linear-gradient(90deg, #439dce, #253a83);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.rw-head__en--md  { font-size: clamp(38px, 5vw, 74px);   line-height: 1.05; }
.rw-head__en--lg2 { font-size: clamp(46px, 7.4vw, 110px); }
.rw-head__en--sm  { font-size: clamp(38px, 5.4vw, 72px); line-height: 1.05; }
.rw-head--white .rw-head__ja { color: #fff; }
.rw-head--white .rw-head__en {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
}

.rw-h2 {
  margin: 0;
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 700;
  color: #253a83;
  line-height: 1.55;
}
.rw-h2--lg {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 900;
  line-height: 1.45;
}
.rw-h2--sm { font-size: clamp(20px, 2vw, 26px); }

/* ==========================================================================
   3. text
   ========================================================================== */
.rw-lead {
  margin: 0;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 2.3;
  color: #33405e;
  text-wrap: pretty;
}
.rw-lead--center {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.rw-lead--narrow { max-width: 900px; line-height: 2.1; }
.rw-text {
  margin: 0;
  font-size: 17px;
  line-height: 2.2;
  color: #3c4a68;
  text-wrap: pretty;
}
.rw-text--tall { line-height: 2.3; color: #33405e; }
.rw-note {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: #6b7a9c;
}
.rw-note--right { text-align: right; }
.rw-spacer { display: inline-block; height: clamp(14px, 1.6vw, 24px); }

/* ==========================================================================
   4. button
   ========================================================================== */
.rw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 34px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.9s ease, color 0.9s ease, border-color 0.9s ease;
}
.rw-btn:hover { opacity: 1; }

.rw-btn--outline { background: #fff; border-color: #253a83; color: #253a83; }
.rw-btn--outline:hover { background: #253a83; color: #fff; }

.rw-btn--navy { padding: 15px 26px; background: #253a83; border-color: #253a83; color: #fff; letter-spacing: 0.06em; }
.rw-btn--navy:hover { background: #2857bf; border-color: #2857bf; }

.rw-btn--grad {
  background: linear-gradient(90deg, #2539a4, #3b88d4);
  border-color: transparent;
  color: #fff;
  letter-spacing: 0.06em;
}
.rw-btn--grad:hover { background: linear-gradient(90deg, #253a83, #2857bf); }

.rw-btn--line { padding: 16px 28px; border: 2px solid #2857bf; color: #2857bf; font-size: 18px; letter-spacing: 0.06em; background: #fff; }
.rw-btn--line:hover { background: #2857bf; color: #fff; }

.rw-btn--white { padding: 14px 24px; background: #fff; border-color: #fff; color: #253a83; font-size: 17px; letter-spacing: 0.04em; }
.rw-btn--white:hover { background: #dbe6fa; border-color: #dbe6fa; }

.rw-btn--ghost { padding: 14px 24px; background: transparent; border-color: #7f9ede; color: #fff; font-size: 17px; letter-spacing: 0.04em; }
.rw-btn--ghost:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }

.rw-btn--sm { padding: 11px 22px; font-size: 15px; }
.rw-btn--md { padding: 15px 26px; letter-spacing: 0.06em; }
.rw-btn--lg { padding: 16px 28px; font-size: 18px; }
.rw-btn--wide { padding: 16px 34px; letter-spacing: 0.08em; }

.rw-btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   5. header
   ========================================================================== */
.rw-header {
  position: relative;
  z-index: 100;
  background: transparent;
  box-shadow: none;
}
.rw-header--mv {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
}
.rw-header__inner {
  max-width: 100%;
  height: auto;
  padding: clamp(20px, 3vw, 38px) clamp(20px, 4vw, 56px) clamp(14px, 2vw, 24px);
  align-items: flex-start;
  gap: 24px;
}
.rw-header--mv .rw-header__inner {
  padding: clamp(20px, 3vw, 38px) clamp(20px, 4vw, 56px);
}

.rw-logo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-right: auto;
  text-decoration: none;
  flex-shrink: 1;
}
.rw-logo:hover { opacity: 1; }
.rw-logo__name {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #253a83;
  line-height: 1.1;
}
.rw-logo__desc {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #4b5876;
  line-height: 1.6;
}
.rw-header--mv .rw-logo__name {
  color: #fff;
  text-shadow: 0 1px 12px rgba(15, 26, 60, 0.55);
}
.rw-header--mv .rw-logo__desc {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 10px rgba(15, 26, 60, 0.6);
}

.rw-header__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.rw-header__util {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 18px;
}
.rw-header__tel {
  font-size: 19px;
  font-weight: 700;
  color: #253a83;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
}
.rw-header--mv .rw-header__tel {
  color: #fff;
  text-shadow: 0 1px 10px rgba(15, 26, 60, 0.6);
}
.rw-header__line {
  padding: 10px 16px;
  border: 1px solid #cfdcf3;
  border-radius: 4px;
  font-size: 13px;
  color: #5a6c92;
  line-height: normal;
  text-decoration: none;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.rw-header__line:hover { background: #f5f8fd; border-color: #439dce; opacity: 1; }
.rw-header--mv .rw-header__line {
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}
.rw-header--mv .rw-header__line:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }

.rw-header__nav {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 6px 18px;
  max-width: 700px;
  margin: 0;
}
.rw-header__nav-item a {
  display: block;
  padding: 6px 2px;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: #1b2438;
  line-height: normal;
}
.rw-header--mv .rw-header__nav-item a {
  color: #fff;
  text-shadow: 0 1px 10px rgba(15, 26, 60, 0.6);
}
.rw-header__nav-item a::after { background: #439dce; height: 1px; }
.rw-header--mv .rw-header__nav-item a::after { background: #fff; }
/* カレント下線。main.css の .header__nav-item--current a::after が
   transform:translateX(-50%) を持つため、必ず打ち消す（残ると幅の半分だけ左にずれる）。
   ホバー時（width:80% / left:10%）と同じ位置・幅に揃えて、
   カレント項目にホバーしても下線が動かないようにする。 */
.rw-header__nav-item.header__nav-item--current a::after {
  width: 80%;
  left: 10%;
  transform: none;
}

/* -- 下層ページ：写真 + 87% 白幕のヘッダー帯 ------------------------------ */
.rw-pagehead {
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-bottom: 1px solid #e2e9f7;
}
.rw-pagehead::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(245, 248, 253, 0.87);
}
.rw-pagehead > * { position: relative; z-index: 1; }
.rw-pagehead__title {
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(16px, 2.4vw, 34px) 24px clamp(36px, 5vw, 66px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.rw-pagehead__ja {
  font-size: clamp(19px, 1.9vw, 26px);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #33405e;
}
.rw-pagehead__en {
  margin: 0;
  font-family: Cormorant, serif;
  font-weight: 400;
  font-size: clamp(54px, 8.6vw, 124px);
  line-height: 1.02;
  letter-spacing: 0.03em;
  background: linear-gradient(90deg, #439dce, #253a83);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* -- SPナビ -------------------------------------------------------------- */
/* 英語ラベルは非表示（HTML側で出力しない）。日本語テキストと矢印アイコンのみ。
   並びは main.css の .sp-nav__link { justify-content: space-between } で
   日本語＝左端 / 矢印＝右端 になる。 */

.rw-spnav__tel {
  display: inline-block;
  padding: 12px 24px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
}

/* ==========================================================================
   6. MV
   ========================================================================== */
.rw-mv {
  position: relative;
  height: min(100vh, 940px);
  min-height: 520px;
  background: #0f1a3c;
  overflow: hidden;
}
/* #slideshow は CMSスライダー差し替え前提のため高さを明示する（実装指示書 §10.1） */
#slideshow,
.rw-mv__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: min(100vh, 940px);
  min-height: 520px;
  overflow: hidden;
  /* スライドの z-index をこの中に閉じ込める（暗幕・コピーより前に出させない） */
  z-index: 0;
}
/* -- MVスライド：3枚のクロスフェード（CSSのみ／JSなし） --------------------
   1周18秒＝1枚あたり 5秒静止 + 1秒クロスフェード。
   負の animation-delay で各スライドの表示位置をずらしている：
     1枚目  0s ／ 2枚目 -12s（＝6秒後に表示）／ 3枚目 -6s（＝12秒後に表示）
   1枚目のキーフレームは 0% を opacity:1 にしてあるため、
   初期表示の瞬間から写真が見えている（ラフの禁止事項「フェードインで待たせない」に対応）。
   ------------------------------------------------------------------------ */
.rw-mv__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: rwMvFade 18s linear infinite;
}
.rw-mv__slide:nth-child(1) { opacity: 1; animation-delay: 0s; }
.rw-mv__slide:nth-child(2) { animation-delay: -12s; }
.rw-mv__slide:nth-child(3) { animation-delay: -6s; }

/* z-index も同時に動かし、フェードインする側を必ず前面に置く。
   （両方を半透明ですれ違わせると重なった瞬間に暗く沈むため、
     「退場する写真は不透明のまま下、入場する写真が上に重なる」形にする） */
@keyframes rwMvFade {
  0%     { opacity: 1; z-index: 2; }   /*  0s  表示開始（初期表示は不透明） */
  27.78% { opacity: 1; z-index: 2; }   /*  5s  ここまで静止 */
  27.79% { opacity: 1; z-index: 1; }   /*      退場するので背面へ */
  33.33% { opacity: 0; z-index: 1; }   /*  6s  1秒かけてフェードアウト */
  94.43% { opacity: 0; z-index: 1; }   /* 17s  次の出番まで非表示 */
  94.44% { opacity: 0; z-index: 3; }   /*      入場するので前面へ */
  100%   { opacity: 1; z-index: 3; }   /* 18s  1秒かけてフェードイン */
}

/* OS側で「視差効果を減らす」設定の場合は切り替えを止め、1枚目のみ表示 */
@media (prefers-reduced-motion: reduce) {
  .rw-mv__slide { animation: none; }
  .rw-mv__slide:nth-child(n + 2) { opacity: 0; }
}

.rw-mv__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: bottom;
}
.rw-mv__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 26, 60, 0.5) 0%, rgba(15, 26, 60, 0.18) 42%, rgba(15, 26, 60, 0.45) 100%);
  pointer-events: none;
}
.rw-mv__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  gap: clamp(10px, 1.4vw, 18px);
  pointer-events: none;
}
.rw-mv__en {
  font-family: Cormorant, serif;
  font-size: clamp(15px, 1.6vw, 22px);
  letter-spacing: 0.22em;
  color: #fff;
  text-shadow: 0 2px 16px rgba(15, 26, 60, 0.55);
}
.rw-mv__ttl {
  margin: 0;
  font-family: Cormorant, serif;
  font-weight: 400;
  font-size: clamp(46px, 10vw, 132px);
  line-height: 1;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(15, 26, 60, 0.5);
}
.rw-mv__lead {
  margin: 0;
  font-size: clamp(17px, 2.2vw, 30px);
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 2px 16px rgba(15, 26, 60, 0.6);
  text-wrap: pretty;
}
.rw-mv__sub {
  margin: 0;
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 14px rgba(15, 26, 60, 0.6);
}

/* ==========================================================================
   7. TOP：BUSINESS カード
   ========================================================================== */
.rw-cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
}
.rw-card-biz {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  min-height: 440px;
  overflow: hidden;
  text-decoration: none;
  background: #4d6494;
}
.rw-card-biz:hover { opacity: 1; }
.rw-card-biz__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.5s ease;
}
.rw-card-biz:hover .rw-card-biz__img { filter: brightness(1.08); }
.rw-card-biz__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(21, 38, 86, 0.45) 0%, rgba(21, 38, 86, 0.28) 45%, rgba(21, 38, 86, 0.78) 100%);
}
.rw-card-biz__ttl {
  position: absolute;
  top: clamp(26px, 3vw, 42px);
  left: clamp(24px, 2.6vw, 38px);
  right: clamp(24px, 2.6vw, 38px);
  display: flex;
  flex-direction: column;
  font-size: clamp(20px, 1.75vw, 25px);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 2px 14px rgba(15, 26, 60, 0.45);
}
.rw-card-biz__body {
  position: absolute;
  left: clamp(24px, 2.6vw, 38px);
  right: clamp(70px, 7vw, 110px);
  bottom: clamp(26px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rw-card-biz__text {
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 2;
  color: #fff;
  text-wrap: pretty;
}
.rw-card-biz__types {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.78);
}
.rw-card-biz__arrow {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(64px, 6vw, 88px);
  height: clamp(56px, 5vw, 72px);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #253a83;
  transition: background 0.9s ease, color 0.9s ease;
}
.rw-card-biz:hover .rw-card-biz__arrow { background: #253a83; color: #fff; }

/* ==========================================================================
   8. TOP：FOR EVERYONE（写真2枚のずらし重ね）
   ========================================================================== */
.rw-photoduo {
  position: relative;
  min-height: clamp(470px, 48vw, 700px);
}
.rw-photoduo__a,
.rw-photoduo__b {
  position: absolute;
  width: 56%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.rw-photoduo__a { top: 0; left: 0; }
.rw-photoduo__b { bottom: 0; right: 0; }

/* ==========================================================================
   9. TOP：WORKS マーキー（全幅／JS不要）
   ========================================================================== */
.rw-marquee {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
}
.rw-marquee__track {
  display: flex;
  align-items: flex-start;
  width: max-content;
  gap: 24px;
  padding: 0 12px 30px;
  animation: rwMarquee 60s linear infinite;
}
.rw-marquee:hover .rw-marquee__track { animation-play-state: paused; }
@keyframes rwMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 12px)); }
}
.rw-marquee__item {
  position: relative;
  flex: 0 0 calc(25vw - 30px);
  min-width: 230px;
  height: clamp(360px, 30vw, 460px);
  border-radius: 6px;
  overflow: hidden;
  background: #243354;
}
.rw-marquee__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rw-marquee__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(21, 38, 86, 0.15) 0%, rgba(21, 38, 86, 0.25) 45%, rgba(21, 38, 86, 0.8) 100%);
}
.rw-marquee__body {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rw-marquee__kind {
  font-family: Cormorant, serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: #bfe0f2;
}
.rw-marquee__ttl {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  line-height: 1.55;
  text-shadow: 0 2px 12px rgba(15, 26, 60, 0.5);
}
.rw-marquee__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.92);
}

/* ==========================================================================
   10. TOP：AREA / RECRUIT（片側マスク写真帯）
   ========================================================================== */
.rw-band {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: clamp(340px, 30vw, 440px);
  display: flex;
  align-items: center;
}
.rw-band + .rw-band { margin-top: clamp(40px, 5vw, 80px); }
.rw-band__media {
  position: absolute;
  top: 0;
  width: min(62%, 900px);
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.rw-band--right .rw-band__media {
  right: 24px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 18%, #000 42%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 18%, #000 42%);
}
.rw-band--left .rw-band__media {
  left: 24px;
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, rgba(0, 0, 0, 0.35) 18%, #000 42%);
  mask-image: linear-gradient(270deg, transparent 0%, rgba(0, 0, 0, 0.35) 18%, #000 42%);
}
.rw-band__wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
}
.rw-band--left .rw-band__wrap { justify-content: flex-end; }
.rw-band__body {
  max-width: min(46%, 560px);
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ==========================================================================
   11. 事業内容ページ
   ========================================================================== */
.rw-bizrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  border-top: 1px solid #dbe4f4;
  padding-top: clamp(24px, 3vw, 40px);
}
.rw-bizrow__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rw-bizrow__en {
  font-family: Cormorant, serif;
  font-size: 13px;
  letter-spacing: 0.24em;
  color: #439dce;
}
.rw-bizrow__ttl {
  margin: -8px 0 0;
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 700;
  color: #253a83;
  line-height: 1.5;
}
.rw-bizrow__types {
  align-self: flex-start;
  padding: 8px 14px;
  border: 1px solid #dbe4f4;
  border-radius: 4px;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: #5a6c92;
}
.rw-bizrow__img {
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 340px;
  background: #d6e0f2;
  border-radius: 6px;
  overflow: hidden;
}
.rw-bizrow__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rw-features-sec {
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}
.rw-features-sec__tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #2539a4, #3b88d4);
  mix-blend-mode: multiply;
}
.rw-features-sec__inner { position: relative; z-index: 1; }
.rw-features {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 0;
}
.rw-features__item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 clamp(16px, 2vw, 32px);
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  text-align: center;
}
.rw-features__no {
  font-family: Cormorant, serif;
  font-size: 38px;
  line-height: 1;
  color: #bfe0f2;
}
.rw-features__ttl {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  color: #fff;
  line-height: 1.55;
}
.rw-features__text {
  margin: 0;
  font-size: 16px;
  line-height: 2.1;
  color: rgba(255, 255, 255, 0.92);
}

/* ==========================================================================
   12. 会社概要ページ
   ========================================================================== */
.rw-figure {
  position: relative;
  height: 100%;
  min-height: 260px;
  background: #d6e0f2;
  border-radius: 6px;
  overflow: hidden;
}
.rw-figure--tall { min-height: 280px; }
.rw-figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rw-dl {
  max-width: 880px;
  margin: 0 auto;
}
.rw-dl__row {
  display: grid;
  grid-template-columns: minmax(150px, 0.6fr) 2fr;
  border-bottom: 1px solid #dbe4f4;
}
.rw-dl__key {
  padding: 20px 8px 20px 0;
  font-size: 16px;
  font-weight: 700;
  color: #253a83;
  line-height: 1.8;
}
.rw-dl__val {
  padding: 20px 0;
  font-size: 17px;
  color: #3c4a68;
  line-height: 1.9;
}

.rw-map {
  border: 1px solid #dbe4f4;
  border-radius: 6px;
  overflow: hidden;
}
.rw-map iframe {
  display: block;
  width: 100%;
  height: min(60vw, 420px);
  border: 0;
}

/* ==========================================================================
   13. 施工実績ページ
   ========================================================================== */
.rw-works {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 4vw, 64px);
  row-gap: clamp(48px, 6vw, 88px);
}
.rw-works__item { display: flex; flex-direction: column; }
.rw-works__ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #dbe4f4;
}
.rw-works__cell {
  position: relative;
  height: clamp(180px, 17vw, 260px);
  background: #e2e9f7;
  overflow: hidden;
}
.rw-works__cell--after { background: #d6e0f2; }
.rw-works__cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.5s ease;
}
.rw-works__item:hover .rw-works__cell img { filter: brightness(1.06); }

/* -- Lightbox 拡大リンク -------------------------------------------------- */
.rw-works__zoom {
  position: absolute;
  inset: 0;
  display: block;
  cursor: zoom-in;
}
.rw-works__zoom:hover { opacity: 1; }
.rw-works__zoom-icon {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 4px;
  background: rgba(15, 26, 60, 0.55);
  color: #fff;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.rw-works__cell:hover .rw-works__zoom-icon,
.rw-works__zoom:focus-visible .rw-works__zoom-icon { opacity: 1; }

.rw-works__badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;   /* バッジ上のクリックも拡大リンクに通す */
  padding: 7px 14px;
  background: #253a83;
  color: #fff;
  font-family: Cormorant, serif;
  font-size: 13px;
  letter-spacing: 0.22em;
}
.rw-works__badge--after { background: linear-gradient(90deg, #2539a4, #3b88d4); }
.rw-works__body {
  padding: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rw-works__kind {
  font-family: Cormorant, serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: #439dce;
}
.rw-works__ttl {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: #253a83;
  line-height: 1.5;
}
.rw-works__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
  color: #3c4a68;
}

/* -- 工程つき実績（BEFORE / PROCESS / AFTER の3枚構成） -------------------
   1案件1行。見出し・本文を上、3枚を横並びに置く。
   バッジ／拡大アイコン／本文タイポは .rw-works__ を流用する。 */
.rw-works-flow {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 88px);
}
.rw-works-flow__item { display: flex; flex-direction: column; }
.rw-works-flow__body {
  padding: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rw-works-flow__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: #dbe4f4;
}
.rw-works-flow__cell {
  position: relative;
  height: clamp(200px, 20vw, 320px);
  background: #e2e9f7;
  overflow: hidden;
}
.rw-works-flow__cell--process { background: #dce5f4; }
.rw-works-flow__cell--after { background: #d6e0f2; }
.rw-works-flow__cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.5s ease;
}
.rw-works-flow__item:hover .rw-works-flow__cell img { filter: brightness(1.06); }
.rw-works-flow__cell:hover .rw-works__zoom-icon { opacity: 1; }
.rw-works__badge--process { background: linear-gradient(90deg, #253a83, #2857bf); }

/* ==========================================================================
   14. 採用ページ
   ========================================================================== */
.rw-chips {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.rw-chips__item {
  background: #fff;
  border: 1px solid #cfdcf3;
  border-radius: 4px;
  padding: 14px 22px;
  font-size: 18px;
  font-weight: 700;
  color: #253a83;
  letter-spacing: 0.04em;
}
.rw-recruit__note { line-height: 2.05; text-align: center; }

/* ==========================================================================
   15. お問い合わせページ
   ========================================================================== */
.rw-contact-cards {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.rw-ccard {
  border: 1px solid #dbe4f4;
  border-radius: 6px;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  text-decoration: none;
  transition: background 0.9s ease, border-color 0.9s ease;
}
a.rw-ccard:hover { background: #f5f8fd; border-color: #439dce; opacity: 1; }
.rw-ccard__label {
  font-family: Cormorant, serif;
  font-size: 12px;
  letter-spacing: 0.24em;
  color: #439dce;
}
.rw-ccard__tel {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 900;
  color: #253a83;
  letter-spacing: 0.02em;
}
.rw-ccard__ttl { font-size: 20px; font-weight: 700; color: #253a83; }
.rw-ccard__mail { font-size: clamp(17px, 1.7vw, 21px); font-weight: 700; color: #253a83; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.rw-ccard__note { font-size: 16px; color: #5a6c92; line-height: 1.9; }

.rw-form {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  border: 1px solid #dbe4f4;
  border-radius: 6px;
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.rw-form__ttl { text-align: center; }

/* ==========================================================================
   15-2. CMSフォームのデザイン調整
   --------------------------------------------------------------------------
   CMSフォーム（cms_ajax）は自前の mail-form.css を実行時に <body> へ注入する。
   site.css より後に来るため、同じ詳細度では CMS 側が勝つ。
   そこで全ルールに .rw-form スコープを1つ足して詳細度で上回らせている。
   （実装指示書 §6 に従い !important は使わない）
   セレクタは mail-form.css の形をそのまま踏襲し、先頭に .rw-form を足すだけ。
   ========================================================================== */
.rw-form .form-contents,
.rw-form .form-pattern-1 { background: transparent; }

/* -- dt/dd を「ラベル上・入力下」の縦積みに（CMS既定は dt 280px の左右2カラム） -- */
.rw-form .form-contents form dl { margin: 0; }
.rw-form .form-contents form dl dt:not(.pattern-exclusion) {
  float: none;
  width: auto;
  margin: 0 0 8px;
  padding-top: 0;
  font-size: 17px;
  font-weight: 700;
  color: #253a83;
  line-height: 1.6;
}
.rw-form .form-contents form dl dd:not(.pattern-exclusion) {
  margin: 0;
  padding: 0 0 24px;
  line-height: 1.6;
}
.rw-form .form-contents form dl dd:not(.pattern-exclusion):last-of-type { padding-bottom: 0; }

/* -- 必須／任意ラベル：元データは「お名前 必須」＝ラベルの後ろに 13px #c1442f --
      CMS既定は ::before の赤バッジ（＝ラベルの前）なので、::before を消して ::after で出す -- */
.rw-form .form-pattern-1 dl dt:not(.pattern-exclusion) span.required::before,
.rw-form .form-pattern-1 dl dt:not(.pattern-exclusion) span.optional::before { content: none; }
.rw-form .form-pattern-1 dl dt:not(.pattern-exclusion) span.required::after {
  content: "必須";
  margin-left: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #c1442f;
}
.rw-form .form-pattern-1 dl dt:not(.pattern-exclusion) span.optional::after {
  content: "任意";
  margin-left: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #5a6c92;
}

/* -- 入力欄：元データの入力欄の実数値（padding 14px 16px / 17px / border 1px #cfdcf3 / radius 4px） -- */
.rw-form .form-contents dd:not(.pattern-exclusion) .textarea,
.rw-form .form-pattern-1 dd:not(.pattern-exclusion) .textarea,
.rw-form .form-contents dd:not(.pattern-exclusion) .textarea-serect,
.rw-form .form-pattern-1 dd:not(.pattern-exclusion) .textarea-serect {
  width: 100%;
  padding: 14px 16px;
  font-size: 17px;
  font-family: inherit;
  font-weight: 400;
  color: #1b2438;
  background: #fff;
  border: 1px solid #cfdcf3;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.3s ease;
}
.rw-form .form-contents dd:not(.pattern-exclusion) input.textarea { height: auto; }
.rw-form .form-contents dd:not(.pattern-exclusion) .textarea:focus { border-color: #2857bf; }
.rw-form .form-contents form dl dd:not(.pattern-exclusion) textarea {
  min-height: 200px;
  line-height: 1.8;
  resize: vertical;
}

/* -- 送信ボタン：元データの送信ボタン実数値（padding 17px 44px / 18px / ls .1em / グラデ） -- */
.rw-form .form-contents .submit-btn,
.rw-form .form-contents :not(.pattern-exclusion) button {
  display: block;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  padding: 17px 44px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  color: #fff;
  background: linear-gradient(90deg, #2539a4, #3b88d4);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.9s ease;
}
.rw-form .form-pattern-1 :not(.pattern-exclusion) button:hover {
  background: linear-gradient(90deg, #253a83, #2857bf);
}
/* 元データの送信ボタンはテキストのみのため、CMS既定の封筒アイコンは出さない */
.rw-form .form-contents .submit-btn::before { content: none; }

/* -- エラー表示 -- */
.rw-form .form-contents .form-err-msg {
  margin: 0 0 24px;
  padding: 18px 20px;
  font-size: 16px;
  line-height: 1.9;
  color: #c1442f;
  background-color: #fdf0ee;
  border: 1px solid #c1442f;
  border-radius: 4px;
}

/* -- 送信完了メッセージ -- */
.rw-form .form-contents .form-thanks-msg p {
  margin: 0 0 24px;
  font-size: 17px;
  line-height: 2.05;
  color: #3c4a68;
  text-align: center;
}
.rw-form .form-contents .form-thanks-msg .back-home-btn { text-align: center; }
.rw-form .form-pattern-1 .form-thanks-msg .back-home-btn a {
  display: inline-block;
  padding: 16px 34px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #253a83;
  background: #fff;
  border: 1px solid #253a83;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.9s ease, color 0.9s ease;
}
.rw-form .form-pattern-1 .form-thanks-msg .back-home-btn a:hover {
  color: #fff;
  background: #253a83;
}

/* -- reCAPTCHA（CMS側で有効化した場合） -- */
.rw-form .form-contents .recaptcha-area { margin: 0 auto 24px; }

.rw-privacy {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding-top: clamp(40px, 5vw, 72px);
  border-top: 1px solid #dbe4f4;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 44px);
}
.rw-privacy__lead { line-height: 2.05; text-align: center; }
.rw-privacy__list { display: flex; flex-direction: column; gap: 26px; }
.rw-privacy__item {
  display: grid;
  grid-template-columns: minmax(200px, 0.5fr) 2fr;
  gap: 12px 32px;
  padding-bottom: 22px;
  border-bottom: 1px solid #e2e9f7;
}
.rw-privacy__ttl {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #253a83;
  line-height: 1.8;
  letter-spacing: 0.04em;
}
.rw-privacy__text {
  margin: 0;
  font-size: 16px;
  line-height: 2.05;
  color: #3c4a68;
  text-wrap: pretty;
}
/* ==========================================================================
   16. footer
   ========================================================================== */
.rw-footer {
  /* 画像CDN（$img と同じベース）。CSS内のためURLを直書きする */
  background: url("https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28607/footer-texture-strong.png") center / cover no-repeat, #101c47;
  background-blend-mode: multiply;
  color: #fff;
}
.rw-footer__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 68px) 24px clamp(28px, 3vw, 40px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.rw-footer__col { display: flex; flex-direction: column; gap: 14px; }
.rw-footer__col:first-child { gap: 16px; }
.rw-footer__logo { display: flex; flex-direction: column; gap: 4px; }
.rw-footer__name { font-size: 24px; font-weight: 700; letter-spacing: 0.08em; }
.rw-footer__name-en {
  font-family: Cormorant, serif;
  font-size: 12px;
  letter-spacing: 0.28em;
  color: #a9c4ea;
}
.rw-footer__info { margin: 0; font-size: 16px; line-height: 2; color: #dbe6fa; }
.rw-footer__tel { color: #fff; text-decoration: underline; }
.rw-footer__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.rw-footer__note { font-size: 15px; color: #a9c4ea; }
.rw-footer__label {
  font-family: Cormorant, serif;
  font-size: 12px;
  letter-spacing: 0.26em;
  color: #a9c4ea;
}
.rw-footer__nav { display: flex; flex-direction: column; gap: 12px; }
.rw-footer__nav-link {
  font-size: 17px;
  color: #fff;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color 0.3s ease;
}
.rw-footer__nav-link:hover { color: #a9c4ea; opacity: 1; }
.rw-footer__map {
  border: 1px solid #4a63b0;
  border-radius: 6px;
  overflow: hidden;
}
.rw-footer__map iframe { display: block; width: 100%; height: 200px; border: 0; }
.rw-footer__bottom { border-top: 1px solid #3c53a0; }
.rw-footer__copyright {
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px 24px;
  font-family: Cormorant, serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: #a9c4ea;
}

/* ==========================================================================
   17. SP固定バー / ページトップ
   ========================================================================== */
.rw-spbar {
  border-top: 1px solid #dbe4f4;
  background: #fff;
}
.rw-spbar__link {
  color: #253a83;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 8px 4px;
}
.rw-spbar__icon { display: block; margin-bottom: 4px; font-size: 16px; color: #439dce; }

/* ==========================================================================
   18. レスポンシブ
   ========================================================================== */
@media (max-width: 1100px) {
  .rw-header__inner { padding-right: 64px; }
  .rw-header__right { gap: 0; }
  .rw-marquee__item { flex: 0 0 38vw; }
}
@media (max-width: 896px) {
  .rw-band { flex-direction: column; align-items: stretch; padding-top: 0; }
  .rw-band__media {
    position: relative;
    left: auto;
    right: auto;
    width: 100%;
    height: clamp(220px, 44vw, 320px);
    -webkit-mask-image: none;
    mask-image: none;
    border-radius: 6px;
  }
  .rw-band--left .rw-band__media,
  .rw-band--right .rw-band__media {
    -webkit-mask-image: none;
    mask-image: none;
    left: auto;
    right: auto;
  }
  .rw-band__wrap { margin-top: 24px; }
  .rw-band--left .rw-band__wrap { justify-content: flex-start; }
  .rw-band__body { max-width: 100%; min-width: 0; }
  .rw-works { grid-template-columns: 1fr; }
  .rw-works-flow__steps { grid-template-columns: 1fr; }
  .rw-works-flow__cell { height: clamp(220px, 52vw, 320px); }
  .rw-privacy__item { grid-template-columns: 1fr; gap: 8px; }
  .rw-marquee__item { flex: 0 0 60vw; }
}
@media (max-width: 639px) {
  .rw-container { padding-left: 20px; padding-right: 20px; }
  .rw-header__inner { padding: 16px 60px 14px 20px; gap: 12px; }
  .rw-header__right { align-items: flex-end; }
  .rw-header__util { gap: 8px 12px; }
  .rw-header__tel { font-size: 16px; }
  .rw-logo__desc { display: none; }

  /* TOPのMVヘッダーはSPで「社名＋ハンバーガー」だけにする。
     電話・お問い合わせ・LINEは画面下の固定バー（.sp-fixed-bar）と
     ハンバーガー内のSPナビに導線があるため、MV上は写真とコピーを優先する。 */
  .rw-header--mv .rw-header__right { display: none; }
  .rw-header--mv .rw-header__inner { padding-bottom: 0; }
  /* セクション見出しの英語（Cormorant）は、PC 124px → SP 54px と小さくなると
     同じ weight:400 でも線が細く見えるため、SPだけ 500 に上げて見た目の太さを揃える。
     ※ 500 の実体を持たせるため head.php の Google Fonts に wght 500 を追加済み。
        未追加だと CSS のフォントマッチングで 400 にスナップされ、指定しても変化しない。 */
  .rw-head__en,
  .rw-pagehead__en { font-weight: 500; }

  /* 本文サイズ：SPは 17px → 16px に下げる。
     ラフの「本文は 16〜17px／スマホでは本文 16px を下回らない」に従い 16px を下限とする。
     これでSPの本文は 16px（実績カード・注記等の補助テキストは 15px）で統一される。 */
  .rw-lead,
  .rw-text,
  .rw-dl__val { font-size: 16px; }

  /* リンクボタンの文字サイズ：SPは本文（16px）に揃える。
     .rw-btn は各 --modifier より後に置くことで、個別指定（--line 18px /
     --white・--ghost 17px / --lg 18px）をまとめて上書きする。 */
  .rw-btn { font-size: 16px; }
  .rw-btn--sm { font-size: 15px; }   /* ヘッダーCTAは小型のため据え置き */
  .rw-spnav__tel { font-size: 16px; }
  /* CMSフォームの送信ボタン（mail-form.css に勝つため詳細度を合わせる） */
  .rw-form .form-contents .submit-btn,
  .rw-form .form-contents :not(.pattern-exclusion) button { font-size: 16px; }

  .rw-pagehead__title { padding: 12px 20px 32px; }
  .rw-mv { height: min(88vh, 700px); min-height: 480px; }
  #slideshow,
  .rw-mv__media { height: min(88vh, 700px); min-height: 480px; }
  .rw-card-biz { min-height: 380px; }
  .rw-photoduo { min-height: 380px; }
  .rw-dl__row { grid-template-columns: 1fr; }
  .rw-dl__key { padding-bottom: 0; }
  .rw-dl__val { padding-top: 8px; }
  .rw-bizrow__img { min-height: 220px; }
  .rw-features__item { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.35); padding-top: 28px; }
  .rw-features__item:first-child { border-top: 0; padding-top: 0; }
  /* フッターのSITEMAP列はSPでは出さない（ハンバーガーのSPナビと重複するため） */
  .rw-footer__col--nav { display: none; }

  .rw-footer__bottom .rw-footer__copyright { padding-bottom: 78px; }
  .rw-btns .rw-btn { flex: 1 1 100%; }
}