@charset "utf-8";
/*
 * ======================================
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * .tsb-line-top          - セクション上辺のヘアライン（1px #E4E6E1）
 * .tsb-heading           - 英字大＋日本語小をベースライン横並びにする見出し
 * .tsb-heading--stack    - 上記の縦積み版（英字の下に日本語）
 * .tsb-heading--center   - 上記の中央揃え版
 * .tsb-heading--sm/--xs  - 英字サイズの段階
 * .tsb-heading-row       - 見出し＋右側リンクの両端揃え行
 * .tsb-viewall           - オリーブ下線の英字テキストリンク
 * .tsb-btn               - 英字ボタン（直角・Anton・広字間）
 * .tsb-btn--dark/--olive/--sm - ボタン配色・サイズ
 * .tsb-loader__*         - ローディング（左右に開く壁写真のカーテン＋円リングのカウンター）
 * .tsb-header*           - 透過⇔黒半透明の固定ヘッダー（ロゴなし・ナビ中央）
 * .tsb-nav-toggle        - ハンバーガー（暗色版）
 * .tsb-sp-nav__*         - SPナビ下部の電話・SNS
 * .tsb-mv__*             - メインビジュアル（パン演出・ロゴ・スクロール誘導）
 * .tsb-news-row/.tsb-news - お知らせ（左見出し＋右一覧）
 * .tsb-svc__*            - サービス（シャッター開閉演出・番号あしらい）
 * .tsb-bg-strength/-contact/-steel/-steel--dark/-voice - 写真＋レイヤー背景
 * .tsb-strength__*       - 特徴（白罫線＋番号）
 * .tsb-works/.tsb-work__* - 施工事例カード（正方形サムネ＋縦書き日付）
 * .tsb-recruit__*        - 採用導入（写真に白ブロックを重ねる）
 * .tsb-cta__*            - お問い合わせCTA（電話枠＋Instagramボタン）
 * .tsb-footer__*         - フッター3カラム
 * .tsb-page-hero__*      - 下層ヒーロー（斜めクリップ写真）
 * .tsb-msg__*            - 代表挨拶（線縁のMESSAGE装飾）
 * .tsb-dl__*             - 定義リスト型テーブル（会社概要・募集要項）
 * .tsb-clients__*        - 取引先リスト（四方枠）
 * .tsb-sv__*             - 業務内容の詳細ブロック
 * .tsb-flow__*           - ご依頼までの流れ（矢印型STEPラベル）
 * .tsb-area              - 対応エリア（オリーブ全面）
 * .tsb-voice__*          - 先輩社員の声カード
 * .tsb-person__*         - 人物像カード（四隅リベット）
 * .tsb-benefit__*        - 福利厚生行
 * .tsb-reveal            - スクロールリビール（下からふわっと）
 * .tsb-anim              - スクロールアニメ本体（--soft 大きめ / --left 左から / --d1〜3 遅延）
 * .tsb-anim-stagger      - 直下の子要素を順番に出す
 * .tsb-anim-chars        - 直下の span を1文字ずつ出す
 *
 * ======================================
 * 共通SCSSに不足していたもの（5分類）
 * ======================================
 *
 * ■ 値の粒度不足
 *   - セクション余白・見出しサイズが clamp（可変）で指定されたデザイン。
 *     共通は px 固定＋@media のため、可変値は site.css 側で持つ。
 *   - gap:0 / gap:1px（罫線をgapで作るFLOW）が gap utility に無い（最小5px）。
 *   - .container に左右paddingが無く、デザインの clamp(16px,3vw,32px) を再現できない。
 *
 * ■ 指定方向不足
 *   - 英字見出しと日本語を「ベースライン横並び」にする見出しが無い
 *     （heading系はすべて縦積み or 重なり）。→ .tsb-heading
 *   - 下層ヒーローの「右側だけ斜めにクリップした写真」が page-hero に無い。
 *
 * ■ 状態不足
 *   - hover で子要素を translate させる演出（シャッターが上へ開く）を
 *     表現する state utility が無い。→ .tsb-svc__shutter
 *
 * ■ 構造不足
 *   - 画像の上に白ブロックを重ね、その上端に特大英字を載せる構造が無い。
 *     → .tsb-recruit__box / __en
 *   - dt/dd 型の定義リストテーブル（罫線は上辺のみ・th幅160px）が無い。
 *     → .tsb-dl
 *   - ローディング（カーテン開き）コンポーネントが共通CSSに無い。
 *
 * ■ 装飾パターン不足
 *   - 斜めハッチング（repeating-linear-gradient -58deg）の装飾レイヤー。
 *   - 文字の輪郭のみ（-webkit-text-stroke）＋斜体の番号あしらい。
 *   - 右辺が三角のSTEPラベル（clip-path）。
 *   - カード四隅のリベット（丸）装飾。
 *
 * ======================================
 * 共通CSSの不具合をこちらで補正している箇所（要フィードバック）
 * ======================================
 *
 * 1) .column2--5-5 に tablet 以下の width:100% リセットが無い
 *    → SPでも子要素が48%幅のまま縦積みになり、半分の幅しか使わない。
 *    → 他の比率 modifier（--6-4 / --7-3 / --4-6 / --3-7）にはリセットがある。
 *    → 本CSS冒頭の @media (max-width:896px) で補正。
 *
 * 2) .sp-nav の背景が color.adjust($base_color, $lightness:-15%) 依存
 *    → 墨色など明度の低いベースカラーだと hsla(..., -4.6%, .98) という
 *      不正値になり、background 宣言ごと無効化されてナビが透明になる。
 *    → .tsb-sp-nav で背景を上書き。
 *
 * 3) .page-hero__content が flex-direction:column
 *    → 中の .container（margin:0 auto）が shrink-to-fit になり中央寄せされる。
 *    → .tsb-page-hero__content > .container { width:100% } で左揃えに戻す。
 *
 * ======================================
 * レスポンシブで調整した箇所
 * ======================================
 *
 * - 1100px以下：ヘッダーバーを隠し、ハンバーガー＋SPナビに切替
 * - 1200px以下：フッター3カラムの余白とボタンpaddingを詰めて
 *               INSTAGRAM / TEL を1行に収める
 * - 896px以下：フッター1カラム、代表写真を 3:2 全幅に、
 *              MESSAGE の線縁を薄くして署名との重なりを回避、
 *              採用導入のスタッフ写真を絶対配置から通常フローへ、
 *              採用導入の大見出しの nowrap を解除
 * - 639px以下：本文14pxを維持（共通の12rem縮小を打ち消し）、
 *              施工事例カードを2列（1列だと正方形サムネが巨大になるため）、
 *              定義リストをキー／値の縦積みに
 *
 */


/* ==========================================================================
   1. 基本調整（共通クラスの見た目差分）
   ========================================================================== */
body {
  font-size: 1.4rem;
  line-height: 1.9;
  letter-spacing: normal; /* デザイン本文は字間なし。字間は見出し・ラベル側で個別指定 */
}
@media (max-width: 639px) {
  body { font-size: 1.4rem; }
}

a { color: #4E5844; }
a:hover { opacity: 1; }

/* Anton はウェイト400のみ。合成太字を防ぐ */
.font-en,
.heading__en,
.heading__number,
.header__nav-en,
.sp-nav__en,
.blog-list__date,
.footer-bottom__copyright {
  font-weight: 400;
}

/* デザインの container（max-width1200 + 左右 clamp padding）を再現 */
.container,
.container-wide,
.container-narrow {
  padding-left: clamp(16px, 3vw, 32px);
  padding-right: clamp(16px, 3vw, 32px);
}
.container { max-width: 1200px; }
.container-wide { max-width: 1280px; }
.container-narrow { max-width: 900px; }

/* 共通CSSの取りこぼし補正：
   .column2--5-5 だけ tablet 以下の width:100% リセットが無く、
   SPでも子要素が48%幅のままになるため、ここで縦積みに戻す。
   （他の比率 modifier --6-4 / --7-3 / --4-6 / --3-7 にはリセットあり） */
@media (max-width: 896px) {
  .column2--5-5 > .column2__child { width: 100%; }
}

/* 錆びた鉄壁テクスチャで英字を塗る（TOPのSERVICE見出し／下層ページヒーロー）
   background-color は画像が読めなかったときのフォールバック（文字クリップで墨色になる） */
.tsb-svc__heading-en,
.tsb-page-hero__en {
  background-color: #1A1C19;
  background-image: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28660/bg-wall.png);
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* CMS差し込み用の span。display:contents で span 自体を箱から外し、
   CMSが出力した要素を grid / flex の直接の子として扱わせる */
.tsb-cms { display: contents; }

/* セクション上辺のヘアライン */
.tsb-line-top { border-top: 1px solid #E4E6E1; }
.tsb-line-bottom { border-bottom: 1px solid #E4E6E1; }

/* セクション余白（デザインの clamp 値に合わせた粒度） */
.tsb-section--lg {
  padding-top: clamp(56px, 8vw, 104px);
  padding-bottom: clamp(56px, 8vw, 104px);
}
.tsb-section--sm {
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(40px, 6vw, 72px);
}

/* 角丸ゼロで統一 */
.page-top__link,
.form-input { border-radius: 0; }

/* Font Awesome を読み込まないため、共通CSSのFA疑似要素を無効化 */
.header__tel::before,
.footer-cta__tel::before,
.footer-cta__mail::before { content: none; }


/* ==========================================================================
   2. キーフレーム
   ========================================================================== */
@keyframes tsbPan    { from { transform: scale(1.04); } to { transform: scale(1.12); } }
@keyframes tsbUp     { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes tsbReveal { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }

.js-reveal .tsb-reveal { opacity: 0; }
.js-reveal .tsb-reveal.is-visible { animation: tsbReveal 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

/* --------------------------------------------------------------------------
   スクロールアニメーション（TOPページ）
   .tsb-anim          … 下からふわっと（既定）
   .tsb-anim--soft    … 大きめ・ゆっくり（SERVICEの英字）
   .tsb-anim--left    … 左から出てくる
   .tsb-anim--d1/--d2 … 遅延
   .tsb-anim-stagger  … 直下の子を順番に
   .tsb-anim-chars    … 直下の span を1文字ずつ
   -------------------------------------------------------------------------- */
@keyframes tsbFadeUp   { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes tsbFadeUpLg { from { opacity: 0; transform: translateY(56px); } to { opacity: 1; transform: none; } }
@keyframes tsbFadeLeft { from { opacity: 0; transform: translateX(-56px); } to { opacity: 1; transform: none; } }
@keyframes tsbCharUp   { from { opacity: 0; transform: translateY(0.45em); } to { opacity: 1; transform: none; } }

.js-reveal .tsb-anim { opacity: 0; }
.js-reveal .tsb-anim.is-visible { animation: tsbFadeUp 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.js-reveal .tsb-anim--soft.is-visible { animation: tsbFadeUpLg 1.1s cubic-bezier(0.16, 1, 0.3, 1) both; }
.js-reveal .tsb-anim--left.is-visible { animation-name: tsbFadeLeft; }

/* 子要素を順番に */
.js-reveal .tsb-anim-stagger > * { opacity: 0; }
.js-reveal .tsb-anim-stagger.is-visible > * { animation: tsbFadeUp 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.js-reveal .tsb-anim-stagger.is-visible > *:nth-child(2) { animation-delay: 0.18s; }
.js-reveal .tsb-anim-stagger.is-visible > *:nth-child(3) { animation-delay: 0.36s; }
.js-reveal .tsb-anim-stagger.is-visible > *:nth-child(4) { animation-delay: 0.54s; }

/* 1文字ずつ */
.tsb-anim-chars > span { display: inline-block; }
.js-reveal .tsb-anim-chars > span { opacity: 0; }
.js-reveal .tsb-anim-chars.is-visible > span { animation: tsbCharUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.js-reveal .tsb-anim-chars.is-visible > span:nth-child(2) { animation-delay: 0.07s; }
.js-reveal .tsb-anim-chars.is-visible > span:nth-child(3) { animation-delay: 0.14s; }
.js-reveal .tsb-anim-chars.is-visible > span:nth-child(4) { animation-delay: 0.21s; }
.js-reveal .tsb-anim-chars.is-visible > span:nth-child(5) { animation-delay: 0.28s; }
.js-reveal .tsb-anim-chars.is-visible > span:nth-child(6) { animation-delay: 0.35s; }
.js-reveal .tsb-anim-chars.is-visible > span:nth-child(7) { animation-delay: 0.42s; }
.js-reveal .tsb-anim-chars.is-visible > span:nth-child(8) { animation-delay: 0.49s; }

/* 遅延（shorthand を上書きするため最後に置く） */
.js-reveal .tsb-anim--d1.is-visible { animation-delay: 0.15s; }
.js-reveal .tsb-anim--d2.is-visible { animation-delay: 0.3s; }
.js-reveal .tsb-anim--d3.is-visible { animation-delay: 0.45s; }

/* アニメーションを減らす設定のユーザーには動きを出さない */
@media (prefers-reduced-motion: reduce) {
  .js-reveal .tsb-reveal,
  .js-reveal .tsb-anim,
  .js-reveal .tsb-anim-stagger > *,
  .js-reveal .tsb-anim-chars > span {
    opacity: 1;
    animation: none;
  }
}


/* ==========================================================================
   3. ローディング
   ========================================================================== */
.tsb-loader {
  position: fixed;
  inset: 0;
  z-index: 300;
  overflow: hidden;
  cursor: pointer;
}
.tsb-loader__curtain {
  position: absolute;
  top: 0;
  width: 50.5%;
  height: 100%;
  background-color: #0B0B0B;
  /* 左右2枚のカーテンで1枚のテクスチャが連続して見えるよう、
     画像ボックスをビューポート実寸（100vw×100vh）に固定し、
     左は左端基準・右は右端基準で配置する */
  background-image: linear-gradient(rgba(11, 11, 11, 0.45), rgba(11, 11, 11, 0.45)), url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28660/loader-bg.webp);
  background-size: 100vw 100vh;
  background-repeat: no-repeat;
  transition: transform 1s cubic-bezier(0.7, 0, 0.2, 1);
}
.tsb-loader__curtain--l { left: 0; background-position: left top; }
.tsb-loader__curtain--r { right: 0; background-position: right top; }
.tsb-loader.is-closing .tsb-loader__curtain--l { transform: translateX(-100%); }
.tsb-loader.is-closing .tsb-loader__curtain--r { transform: translateX(100%); }
.tsb-loader__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  opacity: 1;
  transition: opacity 0.35s ease;
}
.tsb-loader.is-closing .tsb-loader__inner { opacity: 0; }
.tsb-loader__logo { width: clamp(200px, 26vw, 300px); height: auto; }
/* 円が0→100%まで満ちていくリング（--tsb-loader-p はJSで0〜100を更新） */
.tsb-loader__ring {
  --tsb-loader-p: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(120px, 14vw, 150px);
  aspect-ratio: 1;
}
.tsb-loader__ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(#FFFFFF calc(var(--tsb-loader-p) * 1%), rgba(255, 255, 255, 0.16) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}
.tsb-loader__count {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  font-size: 3.6rem;
  line-height: 1.15;
  letter-spacing: 0.04em;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}
.tsb-loader__unit {
  font-size: 1.4rem;
  line-height: 1;
  color: #D8DAD6;
  padding-bottom: 7px;
}


/* ==========================================================================
   4. ヘッダー / SPナビ
   ========================================================================== */
.tsb-header {
  background: rgba(0, 0, 0, 0.72);
  box-shadow: none;
  transition: background 0.3s ease;
}
.tsb-header--transparent { background: transparent; }

.tsb-header__inner {
  max-width: 1280px;
  height: auto;
  padding: 14px clamp(16px, 3vw, 32px);
  justify-content: space-between;
  gap: clamp(14px, 3vw, 40px);
  flex-wrap: wrap;
}

/* ヘッダー左のロゴ。素材は黒文字なので暗いヘッダー上では白に反転する。
   TOPのみメインビューを過ぎるまで隠す（場所は確保したままなのでナビは動かない） */
.tsb-header__logo {
  display: block;
  flex-shrink: 0;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.tsb-header__logo img {
  height: 58px;
  width: auto;
  filter: brightness(0) invert(1);
}
.tsb-header__logo:hover { opacity: 0.7; }
.tsb-header--top .tsb-header__logo { opacity: 0; visibility: hidden; }
.tsb-header--top.tsb-header--logo-on .tsb-header__logo { opacity: 1; visibility: visible; }
.tsb-header__nav {
  margin: 0;
  gap: clamp(14px, 2vw, 28px);
}
.tsb-header__nav .header__nav-item a {
  padding: 0;
  align-items: flex-start;
}
.tsb-header__nav .header__nav-item a::after {
  background: #5F6B53;
  bottom: -6px;
}
.tsb-header .header__nav-en {
  font-size: 2rem;
  letter-spacing: 0.14em;
  color: #FFFFFF;
  line-height: 1;
}
.tsb-header .header__nav-ja {
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #FFFFFF;
  line-height: 1;
  margin-top: 4px;
}
.tsb-header .header__nav-item--current a::after {
  width: 100%;
  left: 0;
  transform: none;
}

.tsb-header__right { gap: 14px; height: auto; }
.tsb-header__tel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  background: #5F6B53;
  color: #FFFFFF;
  padding: 12px 24px;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1;
  text-align: center;
  transition: background 0.3s ease;
}
.tsb-header__tel:hover { background: #1A1C19; color: #FFFFFF; opacity: 1; }
.tsb-header__ig {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  line-height: 1;
  color: #D8DAD6;
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.tsb-header__ig:hover { border-color: #5F6B53; background: #F4F5F3; color: #1A1C19; }
.tsb-icon-insta {
  display: block;
  width: 18px;
  height: 18px;
}

@media (max-width: 1100px) {
  .tsb-header { display: none; }
}

/* ハンバーガー */
.tsb-nav-toggle {
  background: rgba(26, 28, 25, 0.78);
  backdrop-filter: blur(6px);
  border-radius: 0;
}
.tsb-nav-toggle .nav-toggle__line { background: #FFFFFF; }

/* SPナビ
   共通CSSの背景は color.adjust($base_color, $lightness:-15%) を使うため、
   墨色ベース（#1A1C19）だと hsla(..., -4.6%, .98) という不正値になり
   background 宣言ごと無効化される（＝背景が透明になる）。ここで上書きする。 */
.tsb-sp-nav {
  background: linear-gradient(135deg, rgba(26, 28, 25, 0.97), rgba(11, 11, 11, 0.98));
}
.tsb-sp-nav .sp-nav__link {
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.08em;
}
.tsb-sp-nav .sp-nav__link::after {
  font-family: inherit;
  content: "＞";
  margin-left: 15px;   /* 日本語との間隔 */
  font-size: 1.2rem;
  opacity: 0.5;
}
.tsb-sp-nav .sp-nav__en {
  font-size: 1.3rem;
  letter-spacing: 0.14em;
  opacity: 0.7;
}
.tsb-sp-nav .sp-nav__bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 24px;
}
.tsb-sp-nav__tel,
.tsb-sp-nav__ig {
  display: block;
  padding: 14px 18px;
  font-size: 1.5rem;
  letter-spacing: 0.16em;
  line-height: 1;
  text-align: center;
  color: #FFFFFF;
}
.tsb-sp-nav__tel { background: #5F6B53; }
.tsb-sp-nav__ig { border: 1px solid rgba(255, 255, 255, 0.6); }


/* ==========================================================================
   5. 見出し / ボタン
   ========================================================================== */
.tsb-heading {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
}
.tsb-heading .heading__en {
  font-size: clamp(38px, 6.4vw, 74px);
  line-height: 1;
  letter-spacing: 0;
  color: #1A1C19;
}
.tsb-heading .heading__ja {
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.26em;
  color: #4E5844;
  margin-top: 0;
}
.tsb-heading--white .heading__en,
.heading--white .heading__en,
.heading--white .heading__ja { color: #FFFFFF; }

.tsb-heading--sm .heading__en { font-size: clamp(32px, 5.2vw, 58px); }
.tsb-heading--xs .heading__en { font-size: clamp(30px, 4.6vw, 50px); }

.tsb-heading--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.tsb-heading--stack .heading__ja { margin-top: 12px; }

.tsb-heading--center {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
}

.tsb-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.tsb-viewall {
  display: inline-block;
  font-size: 1.4rem;
  letter-spacing: 0.22em;
  line-height: 1;
  color: #1A1C19;
  border-bottom: 2px solid #5F6B53;
  padding-bottom: 8px;
  transition: color 0.3s ease;
}
.tsb-viewall:hover { color: #5F6B53; }

.tsb-btn {
  display: inline-flex;
  max-width: none;
  width: auto;
  border: 0;
  border-radius: 0;
  padding: 18px 34px;
  font-family: "Anton", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.22em;
  transition: background 0.3s ease, color 0.3s ease;
}
.tsb-btn--dark  { background: #1A1C19; color: #FFFFFF; }
.tsb-btn--dark:hover  { background: #5F6B53; color: #FFFFFF; opacity: 1; }
.tsb-btn--olive { background: #5F6B53; color: #FFFFFF; }
.tsb-btn--olive:hover { background: #1A1C19; color: #FFFFFF; opacity: 1; }
.tsb-btn--sm { padding: 16px 28px; letter-spacing: 0.2em; }
@media (max-width: 639px) {
  .tsb-btn { max-width: none; font-size: 1.3rem; padding: 16px 24px; }
}


/* ==========================================================================
   6. メインビジュアル
   ========================================================================== */
.tsb-mv {
  position: relative;
  background: #1A1C19;
  overflow: hidden;
}
.tsb-mv #slideshow {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.tsb-mv #slideshow .swiper-slide,
.tsb-mv .main_slider__inner { width: 100%; height: 100%; }
.tsb-mv #slideshow img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: tsbPan 20s ease-in-out infinite alternate;
}
/* 動画MV：パン演出はかけず、枠いっぱいにトリミング（高さは #slideshow に追従） */
.tsb-mv__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tsb-mv__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* 明るい現場写真でも上のナビが埋もれないよう、
     上下にスクリムを足したうえで全体を軽く締める */
  background-image:
    linear-gradient(rgba(11, 11, 11, 0.55), rgba(11, 11, 11, 0) 220px),
    linear-gradient(rgba(11, 11, 11, 0) 70%, rgba(11, 11, 11, 0.45) 100%),
    linear-gradient(rgba(26, 28, 25, 0.28), rgba(26, 28, 25, 0.28));
}
/* TOPのh1（MVロゴ削除後も見出し構造を保つため、画面には出さず読み上げ・検索用に残す） */
.tsb-mv__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* スライダーCMSは自前のCSS変数で高さを持つため、SPはこちらも合わせる
   （CMSの style は body 内に後出しされるので、ID2つ＋クラスで優先度を上げる） */
@media (max-width: 896px) {
  .tsb-mv #slideshow { height: 80vh; }
  .tsb-mv #slideshow #main_slider.slider_wrapper { --swiper-wrapper-height: 80vh; }
  /* 縦長にトリミングされるため、写真は左端を基準に見せる
     （パンのズームも中央基準だと左が食われるので原点を左に） */
  .tsb-mv #slideshow img,
  .tsb-mv #slideshow #main_slider .main_slider__inner img {
    object-position: 25% center;
    transform-origin: 25% center;
  }
}
@media (max-width: 639px) {
  .tsb-mv #slideshow { height: 70vh; }
  .tsb-mv #slideshow #main_slider.slider_wrapper { --swiper-wrapper-height: 70vh; }
}


/* ==========================================================================
   7. お知らせ
   ========================================================================== */
.tsb-news-row > .column2__child:first-child { width: 22%; }
.tsb-news-row > .column2__child:last-child  { width: 74%; }
@media (max-width: 896px) {
  .tsb-news-row > .column2__child:first-child,
  .tsb-news-row > .column2__child:last-child { width: 100%; }
  .tsb-news-row > .column2__child:first-child { margin-bottom: 24px; }
}

.tsb-news {
  border-top: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tsb-news .blog-list__item {
  border-top: 1px solid #DDE0DA;
  border-bottom: none;
}
.tsb-news .blog-list__link {
  padding: 18px 4px;
  gap: 16px;
  flex-wrap: wrap;
}
.tsb-news .blog-list__date {
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #4E5844;
}
.tsb-news .blog-list__title {
  flex: 1 1 240px;
  min-width: 0;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.7;
  color: #1A1C19;
}
.tsb-news .blog-list__link:hover { background: transparent; }
.tsb-news .blog-list__link:hover .blog-list__title { color: #5F6B53; }


/* ==========================================================================
   8. サービス（シャッター演出）
   ========================================================================== */
.tsb-svc {
  position: relative;
  overflow: hidden;
  background: linear-gradient(172deg, #D9DBD8 0 62%, #B6B9B4 62% 100%);
  padding-top: clamp(56px, 8vw, 110px);
  padding-bottom: clamp(56px, 8vw, 110px);
}
.tsb-svc__hatch {
  position: absolute;
  top: 0;
  right: -60px;
  width: min(46%, 520px);
  height: 100%;
  background: repeating-linear-gradient(-58deg, rgba(120, 124, 118, 0.2) 0 2px, transparent 2px 16px);
  pointer-events: none;
}
/* 背景に大きく薄く敷くロゴ（装飾・カードより下） */
.tsb-svc__logo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  pointer-events: none;
}
/* カード（幅1200pxの.container）の左端を基準に置き、1400〜2000pxで同じ見え方にする */
.tsb-svc__logo img {
  width: 850px;
  margin-left: calc((100vw - 1200px) / 2 - 312px);
  height: auto;
  opacity: 0.14;
}
/* 1400px以下はカード（.container）基準で大きさ・位置を決め、どの幅でも同じ見え方にする */
@media (max-width: 1400px) {
  .tsb-svc__logo img {
    width: calc(min(95vw, 1200px) * 0.44);
    margin-left: calc((100vw - min(95vw, 1200px)) / 2 - min(95vw, 1200px) * 0.079);
  }
}
.tsb-svc__heading {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.tsb-svc__heading-en {
  font-size: clamp(56px, 10vw, 128px);
  line-height: 0.9;
  letter-spacing: 0;
}
.tsb-svc__heading-ja {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  /* 英字がテクスチャ塗り（暗色）になるため、重なる日本語は白に反転 */
  color: #FFFFFF;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}
.tsb-svc__list {
  margin-top: clamp(45px, 7vw, 86px);
  padding-left: 42px;
  gap: clamp(28px, 4vw, 52px);
}
.tsb-svc__card {
  display: block;
  position: relative;
  padding-top: 34px;
}
.tsb-svc__num {
  position: absolute;
  top: -10px;
  left: -34px;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(72px, 9vw, 104px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: #1A1C19;
  paint-order: stroke fill;
  -webkit-text-stroke: 3px #FFFFFF;
  transform: skewX(-10deg);
  pointer-events: none;
}
.tsb-svc__num--back  { z-index: 0; }
.tsb-svc__num--front { z-index: 2; }
.tsb-svc__num-ghost  { visibility: hidden; }
.tsb-svc__frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #1A1C19;
  border: 3px solid #AFB3B4;
}
.tsb-svc__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.2) brightness(0.82);
}
.tsb-svc__more {
  position: absolute;
  inset: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  letter-spacing: 0.24em;
  line-height: 1;
  color: #FFFFFF;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
  pointer-events: none;
}
.tsb-svc__shutter {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28660/service-shutter.jpg);
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 22px rgba(0, 0, 0, 0.45), 0 8px 18px rgba(0, 0, 0, 0.35), inset 0 0 26px rgba(0, 0, 0, 0.4);
  transform: translateY(0);
  transition: transform 1.5s cubic-bezier(0.3, 0.6, 0.2, 1);
}
.tsb-svc__card:hover .tsb-svc__shutter,
.tsb-svc__card:focus-visible .tsb-svc__shutter {
  transform: translateY(calc(-100% + 10px));
}
.tsb-svc__shutter-inner {
  position: absolute;
  inset: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  padding: 0 18px;
}
.tsb-svc__card-en {
  font-size: clamp(18px, 2.2vw, 29px);
  line-height: 1.3;
  letter-spacing: 0.14em;
  color: #FFFFFF;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75);
}
.tsb-svc__card-ja {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.14em;
  color: #FFFFFF;
  background: #1A1C19;
  padding: 7px 14px;
}
@media (max-width: 639px) {
  .tsb-svc__list { padding-left: 34px; }
}


/* ==========================================================================
   9. 写真＋レイヤーの背景
   ========================================================================== */
.tsb-bg-strength,
.tsb-bg-contact,
.tsb-bg-steel,
.tsb-bg-steel--dark,
.tsb-bg-voice {
  background-size: cover;
  background-position: center;
}
.tsb-bg-strength    { background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28660/strength-bg.webp); }
.tsb-bg-contact { background-image: linear-gradient(rgba(38, 44, 32, 0.82), rgba(66, 69, 63, 0.82)), url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28660/loader-bg.webp); }
.tsb-bg-steel   { background-image: linear-gradient(rgba(26, 28, 25, 0.7), rgba(26, 28, 25, 0.7)), url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28660/bg-steel.jpg); }
.tsb-bg-steel--dark { background-image: linear-gradient(rgba(26, 28, 25, 0.78), rgba(26, 28, 25, 0.78)), url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28660/bg-steel.jpg); }
.tsb-bg-voice { background-image: linear-gradient(rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.62)), url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28660/bg-voice.jpg); }


/* ==========================================================================
   10. 拓設備の特徴
   ========================================================================== */
.tsb-strength {
  margin-top: clamp(28px, 4vw, 48px);
  gap: clamp(20px, 3vw, 40px);
}
.tsb-strength__item {
  border-top: 3px solid #FFFFFF;
  padding-top: 22px;
}
.tsb-strength__num {
  font-size: 3rem;
  line-height: 1;
  letter-spacing: 0.06em;
  color: #FFFFFF;
}
.tsb-strength__title {
  margin-top: 14px;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: #FFFFFF;
}
.tsb-strength__text {
  margin-top: 10px;
  font-size: 1.4rem;
  line-height: 1.9;
  color: #FFFFFF;
}


/* ==========================================================================
   11. 施工事例カード
   ========================================================================== */
.tsb-works {
  margin-top: clamp(28px, 4vw, 48px);
  gap: clamp(14px, 2vw, 24px);
}
.tsb-work { display: block; color: #1A1C19; }
.tsb-work__head { display: flex; gap: 14px; align-items: flex-start; }
.tsb-work__thumb {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #EEF1F3;
}
.tsb-work__thumb img {
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}
a.tsb-work:hover .tsb-work__thumb img { transform: scale(1.06); }
.tsb-work__date {
  writing-mode: vertical-rl;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #1A1C19;
}
.tsb-work__title {
  margin-top: 12px;
  font-size: 1.4rem;
  line-height: 1.7;
  color: #1A1C19;
}
a.tsb-work:hover .tsb-work__title { color: #5F6B53; }
/* SPで1列にすると正方形サムネが巨大になりページが伸びすぎるため2列にする */
@media (max-width: 639px) {
  .tsb-works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tsb-work__head { gap: 10px; }
  .tsb-work__title { margin-top: 10px; line-height: 1.6; }
}


/* ==========================================================================
   12. 採用情報（導入）
   ========================================================================== */
.tsb-recruit { position: relative; }
.tsb-recruit__cover {
  width: 100%;
  height: clamp(360px, 48vw, 700px);
  overflow: hidden;
  background: #E8E9E6;
}
.tsb-recruit__cover img { width: 100%; height: 100%; object-fit: cover; object-position: center 80%; }
.tsb-recruit__grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  align-items: stretch;
}
.tsb-recruit__box {
  position: relative;
  z-index: 2;
  background: #FFFFFF;
  padding: clamp(36px, 5vw, 64px) clamp(20px, 3vw, 48px) clamp(44px, 6vw, 72px);
  margin-top: clamp(-96px, -8vw, -44px);
}
.tsb-recruit__en {
  position: absolute;
  left: clamp(20px, 3vw, 48px);
  bottom: 100%;
  margin-bottom: 8px;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(76px, 9.5vw, 136px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: #FFFFFF;
}
.tsb-recruit__title {
  font-size: clamp(21px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: #1A1C19;
  white-space: nowrap;
}
.tsb-recruit__text {
  margin-top: 18px;
  font-size: 1.4rem;
  line-height: 2;
  color: #4A4E46;
  max-width: 40em;
}
.tsb-recruit__box .tsb-btn { margin-top: 34px; }
.tsb-recruit__sub {
  position: absolute;
  right: clamp(16px, 3vw, 48px);
  bottom: 30px;
  z-index: 3;
  width: clamp(220px, 30vw, 400px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #EEF1F3;
}
.tsb-recruit__sub img { width: 100%; height: 100%; object-fit: cover; }
.tsb-recruit__side {
  min-height: clamp(420px, 42vw, 600px);
  background: #EEF1F3;
}
.tsb-recruit__side img { width: 100%; height: 100%; object-fit: cover; }
/* PCは右の写真を広めに取る（左の白ブロック：右の写真 ＝ 5：6。
   見出しが nowrap のため、白ブロックはこれ以上狭めない） */
@media (min-width: 897px) {
  .tsb-recruit__grid { grid-template-columns: 5fr 6fr; }
  /* 右の写真は上下に余白を取り、横長（3:2）で中央に置く */
  .tsb-recruit__side {
    align-self: center;
    min-height: 0;
    aspect-ratio: 3 / 2;
    margin: clamp(32px, 4vw, 56px) 0;
    overflow: hidden;
    /* 右へ寄せる（グリッド外の余白がある幅でのみ。画面端は越えない） */
    position: relative;
    left: min(40px, max(0px, (100vw - 1280px) / 2));
  }
}
@media (max-width: 896px) {
  .tsb-recruit__title { white-space: normal; }
  .tsb-recruit__sub {
    position: static;
    width: 100%;
    margin-top: 28px;
  }
  .tsb-recruit__side { min-height: 320px; }
}


/* ==========================================================================
   13. お問い合わせCTA
   ========================================================================== */
.tsb-cta {
  padding-top: clamp(56px, 8vw, 104px);
  padding-bottom: clamp(56px, 8vw, 104px);
}
.tsb-cta__inner { align-items: center; }
.tsb-cta__text {
  margin-top: 20px;
  font-size: 1.4rem;
  line-height: 2;
  max-width: 36em;
}
.tsb-cta__btns { display: flex; flex-direction: column; gap: 14px; }
.tsb-cta__tel {
  border: 1px solid #D8DAD6;
  background: #FFFFFF;
  padding: 24px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  transition: border-color 0.3s ease;
}
.tsb-cta__tel:hover { border-color: #5F6B53; }
.tsb-cta__tel-label { font-size: 1.4rem; letter-spacing: 0.24em; line-height: 1; color: #5F6B53; }
.tsb-cta__tel-num { font-size: clamp(22px, 3.4vw, 32px); letter-spacing: 0.06em; line-height: 1; color: #1A1C19; }
.tsb-cta__tel-note { font-size: 1.4rem; line-height: 1; color: #6E756A; }
.tsb-cta__sub {
  background: #5F6B53;
  color: #FFFFFF;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: background 0.3s ease;
}
.tsb-cta__sub:hover { background: #1A1C19; color: #FFFFFF; }
.tsb-cta__sub-ja { font-size: 1.4rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1; }
.tsb-cta__sub-en { font-size: 1.4rem; letter-spacing: 0.2em; line-height: 1; }


/* ==========================================================================
   14. フッター
   ========================================================================== */
.tsb-footer {
  border-top: 1px solid #E4E6E1;
  background: #F4F5F3;
}
.tsb-footer__body { padding: 0; background: transparent; }
/* fr 配分だと中身の細い列に大きな空きができるため、
   3ブロックを space-between で振り分け、上端を揃える */
.tsb-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(24px, 5vw, 72px);
  max-width: 1280px;
  padding: clamp(48px, 7vw, 88px) clamp(16px, 3vw, 32px);
}
.tsb-footer__col { flex: 0 1 auto; }
/* ロゴは3カラムの上に1行で置き、中央寄せにする */
.tsb-footer__logo {
  width: 100%;
  margin-bottom: 8px;
  text-align: center;
}
.tsb-footer__logo img { width: clamp(165px, 17vw, 210px); height: auto; }
.tsb-footer__name {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.6;
  color: #1A1C19;
}
.tsb-footer__info {
  margin: 6px 0 0;
  font-size: 1.4rem;
  line-height: 1.4;
  color: #4A4E46;
}
.tsb-footer__tel {
  display: inline-block;
  margin-top: 2px;
  font-size: 2rem;
  letter-spacing: 0.06em;
  line-height: 1;
  color: #1A1C19;
}
.tsb-footer__tel:hover { color: #5F6B53; }
/* 5項目を 2列（3件＋2件）に縦流しで配置。行流しだと右下に1マス空く */
.tsb-footer__nav {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 14px 40px;
  align-content: start;
  justify-content: start;
}
.tsb-footer__nav .footer-body__nav-item a {
  display: block;
  font-size: 1.9rem;
  letter-spacing: 0.14em;
  line-height: 1;
  color: #1A1C19;
  border-left: 4px solid #5F6B53;
  padding-left: 12px;
}
.tsb-footer__nav .footer-body__nav-item a:hover { color: #5F6B53; }
.tsb-footer__col--sns {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.tsb-footer__btns { display: flex; flex-wrap: wrap; gap: 10px; }
/* INSTAGRAMボタン：アイコン＋英字 */
.tsb-footer__ig {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tsb-footer__ig-icon {
  width: 16px;
  height: 16px;
  flex: none;
}
.tsb-footer__note {
  font-size: 1.4rem;
  line-height: 1.9;
  color: #4A4E46;
}
.tsb-footer__bottom {
  border-top: 1px solid #DDE0DA;
  padding: 18px clamp(16px, 3vw, 32px);
}
.tsb-footer__bottom .footer-bottom__copyright {
  font-size: 1.4rem;
  letter-spacing: 0.2em;
  line-height: 1;
  color: #4E5844;
}
@media (max-width: 1200px) {
  /* 3カラムのまま列幅が痩せると INSTAGRAM / MAIL が2段に折れるため、
     余白とボタンpaddingを詰めて1行に収める */
  .tsb-footer__inner { gap: clamp(20px, 3vw, 40px); }
  .tsb-footer__btns .tsb-btn--sm { padding: 15px 18px; letter-spacing: 0.16em; }
}
@media (max-width: 896px) {
  .tsb-footer__inner { grid-template-columns: 1fr; }
}

.tsb-page-top__link {
  font-size: 1.3rem;
  letter-spacing: 0.1em;
}


/* ==========================================================================
   15. 下層ページ共通ヒーロー
   ========================================================================== */
.tsb-page-hero {
  display: flex;
  align-items: center;
  min-height: clamp(300px, 34vw, 440px);
  padding-top: 92px;
  /* 背景・文字は退色させて落ち着かせる（写真には退色をかけない）。
     背景色は #A8BB94 に grayscale(0.5) brightness(0.85) をかけた値 */
  background: #949C8B;
  border-bottom: 1px solid #949C8B;
  paint-order: stroke fill;
}
.tsb-page-hero__img {
  position: absolute;
  top: 0;
  right: 0;
  width: min(58%, 780px);
  height: 100%;
  background: #EEF1F3;
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
}
.tsb-page-hero__img img { width: 100%; height: 100%; }
.tsb-page-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(40px, 6vw, 84px) 0;
  filter: grayscale(0.5) brightness(0.85);
}
/* page-hero__content は flex-column のため、margin:0 auto の container が
   shrink-to-fit になって中央寄せされてしまう。幅を明示して左揃えに戻す */
.tsb-page-hero__content > .container { width: 100%; }
.tsb-page-hero__en {
  display: block;
  font-size: clamp(42px, 8.4vw, 104px);
  line-height: 1;
  letter-spacing: 0;
}
.tsb-page-hero__ja {
  margin-top: 14px;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.3em;
  color: #1A1C19;
}
@media (max-width: 1100px) {
  .tsb-page-hero { padding-top: 64px; }
}
@media (max-width: 639px) {
  .tsb-page-hero { padding-top: 56px; min-height: 240px; }
}


/* ==========================================================================
   16. 会社概要
   ========================================================================== */
.tsb-msg { position: relative; overflow: hidden; }
.tsb-msg__deco {
  position: absolute;
  right: clamp(-20px, -1vw, 0px);
  bottom: 10px;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(60px, 11vw, 150px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(26, 28, 25, 0.16);
  white-space: nowrap;
  pointer-events: none;
}
.tsb-msg__inner { position: relative; z-index: 2; }
.tsb-msg__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  max-height: 460px;
  overflow: hidden;
  background: #EEF1F3;
}
.tsb-msg__photo img { width: 100%; height: 100%; object-fit: cover; }
.tsb-msg__label {
  position: absolute;
  left: 0;
  bottom: 0;
  background: #FFFFFF;
  padding: 8px 12px;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 0.1em;
  color: #4E5844;
}
.tsb-msg__title {
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: #1A1C19;
}
.tsb-msg__text {
  margin-top: 22px;
  font-size: 1.4rem;
  line-height: 2.1;
  color: #4A4E46;
}
.tsb-msg__sign {
  margin-top: 26px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.tsb-msg__sign-role { font-size: 1.4rem; color: #6E756A; }
.tsb-msg__sign-name { font-size: 2rem; font-weight: 700; letter-spacing: 0.1em; color: #1A1C19; }
/* 縦積みになったら 4:5 + max-height だと写真が横に余るため、横長にして全幅で使う */
@media (max-width: 896px) {
  .tsb-msg__photo { aspect-ratio: 3 / 2; max-height: none; }
  /* 縦積み時は MESSAGE の線縁が署名に重なるので、透かしとして薄くする */
  .tsb-msg__deco { -webkit-text-stroke-color: rgba(26, 28, 25, 0.1); }
}

/* 採用ページの代表メッセージ
   ごあいさつ（.tsb-lead）と同じ幅の2カラム。会社概要の代表挨拶と分け、
   写真は右（column2--reverse）、名前をオリーブの帯で重ねる */
.tsb-rmsg { background: #F4F5F3; padding-bottom: 140px; }
.tsb-rmsg__photo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #EEF1F3; }
.tsb-rmsg__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.tsb-rmsg__tag {
  position: absolute;
  left: 0;
  bottom: 32px;
  background: #5F6B53;
  padding: 14px 24px;
  font-size: 1.4rem;
  line-height: 1.4;
  letter-spacing: 0.1em;
  color: #FFFFFF;
}
.tsb-rmsg__tag-name { display: block; margin-top: 4px; font-size: 2.2rem; font-weight: 700; letter-spacing: 0.14em; }
.tsb-rmsg__title {
  margin-top: 32px;
  padding-left: 20px;
  border-left: 6px solid #5F6B53;
  font-size: clamp(24px, 3.6vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: #1A1C19;
}
.tsb-rmsg__text {
  margin-top: 26px;
  font-size: 1.4rem;
  line-height: 2.1;
  color: #4A4E46;
}
@media (max-width: 896px) {
  .tsb-rmsg { padding-bottom: 72px; }
  .tsb-rmsg__tag { bottom: 24px; }
}

/* TOPのご挨拶（GREETING）
   会社概要の代表挨拶（写真左・MESSAGE線縁）と被らないよう、
   文字を左・写真を右の画面端まで広げ、下層ヒーローと同じ斜めクリップで切る */
.tsb-about__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  padding-left: max(clamp(16px, 3vw, 40px), calc((100% - 1200px) / 2));
}
.tsb-about__title {
  margin-top: clamp(24px, 3vw, 36px);
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: #1A1C19;
}
.tsb-about__text {
  margin-top: 20px;
  font-size: 1.4rem;
  line-height: 2.1;
  color: #4A4E46;
}
.tsb-about__btn { margin-top: 34px; }
.tsb-about__photo {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #EEF1F3;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}
.tsb-about__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 896px) {
  .tsb-about__grid {
    grid-template-columns: 1fr;
    padding-left: 0;
  }
  .tsb-about__body { padding: 0 clamp(16px, 3vw, 40px); }
  .tsb-about__photo { order: -1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 88%); }
}

/* 定義リスト型テーブル */
.tsb-dl { margin-top: clamp(24px, 4vw, 44px); }
.tsb-dl--2col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}
.tsb-dl__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  border-top: 1px solid #DDE0DA;
  padding: 20px 4px;
}
.tsb-dl__key {
  flex: 0 0 160px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.1em;
  color: #4E5844;
}
.tsb-dl__val {
  flex: 1 1 200px;
  min-width: 0;
  font-size: 1.4rem;
  line-height: 1.9;
  color: #1A1C19;
}
.tsb-dl--req .tsb-dl__row { padding: 22px 4px; }
.tsb-dl--req .tsb-dl__key { font-size: 1.4rem; }
.tsb-dl--req .tsb-dl__val { line-height: 1.95; }
@media (max-width: 639px) {
  .tsb-dl__key { flex: 0 0 100%; }
}

/* 主要取引先 */
.tsb-clients {
  margin-top: clamp(24px, 4vw, 40px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 14px;
}
.tsb-clients__item {
  border: 1px solid rgba(175, 179, 180, 0.7);
  padding: 20px 18px;
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.6;
  color: #FFFFFF;
}


/* ==========================================================================
   17. 業務内容
   ========================================================================== */
/* 写真まわりのあしらい：シルバーの3px枠＋背面にオリーブの罫線枠をずらして重ねる */
.tsb-sv__photo {
  position: relative;
  aspect-ratio: 4 / 3;
}
.tsb-sv__photo::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid #5F6B53;
  pointer-events: none;
}
.tsb-sv__photo img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 3px solid #AFB3B4;
  background: #EEF1F3;
}
/* 四隅のリベット（人物像カードと同じ語彙） */
.tsb-sv__rivet {
  position: absolute;
  z-index: 2;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #AFB3B4;
  pointer-events: none;
}
.tsb-sv__rivet--tl { left: 10px; top: 10px; }
.tsb-sv__rivet--tr { right: 10px; top: 10px; }
.tsb-sv__rivet--bl { left: 10px; bottom: 10px; }
.tsb-sv__rivet--br { right: 10px; bottom: 10px; }
@media (max-width: 639px) {
  .tsb-sv__photo::before { inset: 10px -10px -10px 10px; }
}
.tsb-sv__num {
  font-size: 1.4rem;
  letter-spacing: 0.3em;
  line-height: 1;
  color: #4E5844;
}
.tsb-sv__en {
  display: block;
  margin-top: 14px;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.1;
  letter-spacing: 0.06em;
  color: #1A1C19;
}
.tsb-sv__ja {
  display: inline-block;
  margin-top: 10px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.14em;
  color: #FFFFFF;
  background: #1A1C19;
  padding: 7px 14px;
}
.tsb-sv__bar {
  display: block;
  margin-top: 18px;
  width: 48px;
  height: 3px;
  background: #5F6B53;
}
.tsb-sv__text {
  margin-top: 20px;
  font-size: 1.4rem;
  line-height: 2.1;
  color: #4A4E46;
}

/* ご依頼までの流れ */
.tsb-flow {
  margin-top: clamp(28px, 4vw, 48px);
  gap: 1px;
  background: #DDE0DA;
  border: 1px solid #DDE0DA;
}
.tsb-flow__item {
  background: #FFFFFF;
  padding: clamp(24px, 3vw, 34px) clamp(20px, 2.5vw, 28px);
}
.tsb-flow__step {
  display: inline-block;
  background: #5F6B53;
  color: #FFFFFF;
  padding: 8px 22px 8px 14px;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.14em;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
}
.tsb-flow__step-label {
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  margin-right: 8px;
}
.tsb-flow__title {
  margin-top: 16px;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.6;
  color: #1A1C19;
}
.tsb-flow__text {
  margin-top: 10px;
  font-size: 1.4rem;
  line-height: 1.9;
  color: #4A4E46;
}

/* 対応エリア */
.tsb-area { background: #5F6B53; }
.tsb-area__lead {
  margin-bottom: 20px;
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12em;
  color: #FFFFFF;
}
.tsb-area__text {
  font-size: 1.4rem;
  line-height: 2.1;
  color: #FFFFFF;
}


/* ==========================================================================
   18. 採用情報
   ========================================================================== */
.tsb-lead__title {
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: #1A1C19;
}
.tsb-lead__text {
  margin-top: 22px;
  font-size: 1.4rem;
  line-height: 2.1;
  color: #4A4E46;
}
.tsb-lead__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #EEF1F3;
}
.tsb-lead__photo img { width: 100%; height: 100%; object-fit: cover; }

/* 先輩社員の声 */
.tsb-voices {
  margin-top: clamp(24px, 4vw, 44px);
  gap: clamp(18px, 2.5vw, 32px);
}
.tsb-voice {
  border: 1px solid #E4E6E1;
  background: #FFFFFF;
}
.tsb-voice__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #EEF1F3;
}
.tsb-voice__photo img { width: 100%; height: 100%; object-fit: cover; }
.tsb-voice__en {
  position: absolute;
  right: 14px;
  bottom: 12px;
  font-size: clamp(15px, 1.8vw, 20px);
  line-height: 1;
  letter-spacing: 0.1em;
  color: #FFFFFF;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}
.tsb-voice__body { padding: 24px; }
.tsb-voice__name {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: #1A1C19;
}
.tsb-voice__nick {
  margin-top: 6px;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #4E5844;
}
.tsb-voice__text {
  margin-top: 16px;
  font-size: 1.4rem;
  line-height: 1.95;
  color: #4A4E46;
}

/* 求めている人物像 */
.tsb-persons {
  margin-top: clamp(28px, 4vw, 44px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 16px;
}
.tsb-person {
  position: relative;
  border: 2px solid #AFB3B4;
  background: rgba(255, 255, 255, 0.06);
  padding: 26px 16px;
  text-align: center;
}
.tsb-person__ja {
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.14em;
  color: #FFFFFF;
}
.tsb-person__en {
  margin-top: 8px;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 0.24em;
  color: #FFFFFF;
}
.tsb-person__rivet {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #AFB3B4;
}
.tsb-person__rivet--tl { left: 7px; top: 7px; }
.tsb-person__rivet--tr { right: 7px; top: 7px; }
.tsb-person__rivet--bl { left: 7px; bottom: 7px; }
.tsb-person__rivet--br { right: 7px; bottom: 7px; }
.tsb-person-note {
  margin-top: 24px;
  font-size: 1.4rem;
  line-height: 2;
  color: #FFFFFF;
}
.tsb-benefit {
  margin-top: clamp(32px, 5vw, 56px);
  padding-top: 26px;
  border-top: 2px solid #AFB3B4;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: baseline;
}
.tsb-benefit__en {
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1;
  letter-spacing: 0;
  color: #FFFFFF;
}
.tsb-benefit__ja {
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.24em;
  color: #FFFFFF;
}
.tsb-benefit__text {
  flex: 1 1 260px;
  font-size: 1.4rem;
  line-height: 2;
  color: #FFFFFF;
}

/* ==========================================================================
   19. 施工事例 詳細（ブログCMS）
   ========================================================================== */
.tsb-entry__date {
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #4E5844;
}
.tsb-entry__title {
  margin-top: 14px;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #1A1C19;
}
.tsb-entry__bar {
  display: block;
  margin-top: 18px;
  width: 48px;
  height: 3px;
  background: #5F6B53;
}

/* 本文はCMSの入力内容がそのまま入るため、汎用的に整える */
.tsb-entry__body {
  margin-top: clamp(24px, 4vw, 36px);
  font-size: 1.4rem;
  line-height: 2.1;
  color: #4A4E46;
}
.tsb-entry__body img {
  max-width: 100%;
  height: auto;
  margin: 12px 0;
}
.tsb-entry__body p { margin-bottom: 1.6em; }
.tsb-entry__body p:last-child { margin-bottom: 0; }
.tsb-entry__body h2,
.tsb-entry__body h3 {
  margin: 1.8em 0 0.6em;
  font-weight: 700;
  line-height: 1.6;
  color: #1A1C19;
}
.tsb-entry__body h2 { font-size: 2rem; border-left: 4px solid #5F6B53; padding-left: 12px; }
.tsb-entry__body h3 { font-size: 1.7rem; }
.tsb-entry__body a { color: #5F6B53; text-decoration: underline; }
.tsb-entry__body a:hover { color: #1A1C19; }
.tsb-entry__body ul,
.tsb-entry__body ol { margin: 0 0 1.6em 1.4em; }
.tsb-entry__body ul { list-style: disc; }
.tsb-entry__body ol { list-style: decimal; }
.tsb-entry__body table {
  width: 100%;
  margin-bottom: 1.6em;
  border-collapse: collapse;
}
.tsb-entry__body th,
.tsb-entry__body td {
  border: 1px solid #DDE0DA;
  padding: 10px 12px;
  text-align: left;
}
.tsb-entry__body th { background: #F4F5F3; font-weight: 700; color: #1A1C19; }

/* 前後の記事（CMSの .pages / .page_prev / .page_next） */
.tsb-entry__pager {
  margin-top: clamp(32px, 5vw, 56px);
  padding-top: 24px;
  border-top: 1px solid #DDE0DA;
}
.tsb-entry__pager .pages {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.tsb-entry__pager .page_prev,
.tsb-entry__pager .page_next {
  font-size: 1.4rem;
  line-height: 1.7;
}
.tsb-entry__pager .page_next { margin-left: auto; text-align: right; }
.tsb-entry__pager a { color: #1A1C19; }
.tsb-entry__pager a:hover { color: #5F6B53; }


/* 募集要項下の応募導線 */
.tsb-entry-note {
  margin-top: 30px;
  font-size: 1.4rem;
  line-height: 1.9;
  color: #4A4E46;
  text-align: center;
}


/* ==========================================================================
   20. スマホ最適化（SP調整）
   ※ 896px以下＝タブレット〜スマホ、639px以下＝スマホ
   ========================================================================== */

/* --------------------------------------------------------------------------
   20-1. SPロゴ（画面左上・タップでTOPへ）
   ヘッダーは1100px以下で非表示になるため、ロゴだけを置く。
   追従はさせず（absolute）、背景も敷かない
   ------------------------------------------------------------------------ */
.tsb-sp-logo { display: none; }
/* TOPはメインビューにロゴがあるため置かない */
.tsb-sp-logo--hide { display: none !important; }
@media (max-width: 1100px) {
  .tsb-sp-logo {
    display: block;
    position: absolute;
    top: 12px;
    left: 14px;
    z-index: 190;
  }
  .tsb-sp-logo img {
    display: block;
    width: auto;
    height: 42px;
    /* 黒ロゴを白に反転（背景が暗いため） */
    filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
  }
}
@media (max-width: 400px) {
  .tsb-sp-logo img { height: 36px; }
}

/* --------------------------------------------------------------------------
   20-2. SP固定バー（電話）
   共通の .sp-fixed-bar（896px以下で表示）を使い、配色だけ上書きする
   ------------------------------------------------------------------------ */
.tsb-sp-bar {
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: none;
  background: #1A1C19;
  box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.18);
}
.tsb-sp-bar__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 8px;
  color: #FFFFFF;
}
.tsb-sp-bar__link:hover { color: #FFFFFF; }
.tsb-sp-bar__label {
  font-size: 1.2rem;
  letter-spacing: 0.24em;
  line-height: 1;
  color: #AFB3B4;
}
.tsb-sp-bar__num {
  font-size: 2rem;
  letter-spacing: 0.06em;
  line-height: 1;
  color: #FFFFFF;
}
@media (max-width: 896px) {
  /* 固定バーの分だけ下に余白を作り、ページトップボタンも上げる */
  body { padding-bottom: 60px; }
  .page-top { bottom: 72px; }
}

/* --------------------------------------------------------------------------
   20-3. お知らせ：3件分の高さでスクロール（高さはJSで算出）
   ------------------------------------------------------------------------ */
.tsb-news-scroll { position: relative; }
.tsb-news-scroll.is-scrollable {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 12px;
  scrollbar-width: thin;
  scrollbar-color: #AFB3B4 #E2E4DF;
}
.tsb-news-scroll.is-scrollable::-webkit-scrollbar { width: 4px; }
.tsb-news-scroll.is-scrollable::-webkit-scrollbar-track { background: #E2E4DF; }
.tsb-news-scroll.is-scrollable::-webkit-scrollbar-thumb { background: #AFB3B4; }

/* --------------------------------------------------------------------------
   20-4. サービス：SPはシャッターを開いた状態で見せる
   タッチ端末はホバーできないため、画面に入ったらシャッターが上がり、
   シャッターに載っていたタイトルはそのまま写真の上に残す（VIEW MOREは出さない）
   ------------------------------------------------------------------------ */
@media (max-width: 896px) {
  .tsb-svc__more { display: none; }

  /* シャッター本体は透明にして固定し、背景画像だけを ::before で上げる */
  .tsb-svc__shutter {
    background-image: none;
    box-shadow: none;
    transform: none !important;
  }
  .tsb-svc__shutter::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28660/service-shutter.jpg);
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 22px rgba(0, 0, 0, 0.45), inset 0 0 26px rgba(0, 0, 0, 0.4);
    transform: translateY(0);
    transition: transform 1.4s cubic-bezier(0.3, 0.6, 0.2, 1);
  }
  .tsb-svc__card.is-open .tsb-svc__shutter::before {
    transform: translateY(calc(-100% + 10px));
  }
  /* タイトルはシャッターより前面に置いて、開いたあとも写真の上に残す */
  .tsb-svc__shutter-inner { z-index: 1; }

  /* 01〜03の四角枠は中央配置（番号は枠の外に重ねる） */
  .tsb-svc__list { padding-left: 0; }
  .tsb-svc__card {
    width: calc(100% - 44px);
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 639px) {
  /* SERVICEの文字を1.5倍に */
  .tsb-svc__heading-en { font-size: clamp(84px, 15vw, 128px); }
  .tsb-svc__heading-ja { font-size: clamp(17px, 2.2vw, 22px); }
  /* 透かしロゴはSPでは出さない */
  .tsb-svc__logo { display: none; }
}

/* --------------------------------------------------------------------------
   20-4b. 拓設備の特徴：SPは番号と見出しを中央揃え
   ------------------------------------------------------------------------ */
@media (max-width: 639px) {
  .tsb-strength__item { padding: 20px; }
  .tsb-strength__num,
  .tsb-strength__title { text-align: center; }
}

/* --------------------------------------------------------------------------
   20-5. 採用情報（導入）
   ------------------------------------------------------------------------ */
@media (max-width: 896px) {
  /* ヘルメットが中央に寄るようにトリミング位置を調整 */
  .tsb-recruit__cover img { object-position: center 80%; }
}

/* --------------------------------------------------------------------------
   20-6. お問い合わせCTA：SPでボタン内が折り返さないように
   ------------------------------------------------------------------------ */
@media (max-width: 639px) {
  .tsb-cta__tel {
    justify-content: center;
    gap: 10px;
    padding: 20px 14px;
  }
  .tsb-cta__tel-num { font-size: 2.4rem; }
  .tsb-cta__sub {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 14px;
    text-align: center;
  }
  .tsb-cta__sub-ja,
  .tsb-cta__sub-en { white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   20-7. フッター：SPはナビなし・中央揃え
   ------------------------------------------------------------------------ */
@media (max-width: 896px) {
  .tsb-footer__nav { display: none; }
  .tsb-footer__inner {
    flex-direction: column;
    align-items: center;
    gap: 22px;
    text-align: center;
  }
  .tsb-footer__col { width: 100%; }
  .tsb-footer__logo img { margin: 0 auto; }
  .tsb-footer__col--sns { align-items: center; }
  .tsb-footer__btns { justify-content: center; }
  .tsb-footer__note { text-align: center; }
}