@charset "UTF-8";
/*
 * ======================================
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * ▼ レイアウト
 * .tk-sec / --lg / --sm / --xs        - clamp()で可変するセクション上下padding（元データ準拠）
 * .tk-sec--sub / --white / --dark     - セクション背景バリエーション（薄グレー/白/ネイビー）
 * .tk-sec--hair                       - セクション上下のヘアライン（box-shadow 0 0 0 1px）
 * .tk-wrap / --1100 / --1000 / --900  - セクション内コンテナ幅（1200/1100/1000/900px）
 *
 * ▼ タイポグラフィ
 * .tk-eyebrow / --white / --pale      - Archivo 11.5px 600 ls.32em の英字ラベル
 * .tk-h2 / .tk-h2--sm / .tk-h3        - 見出しサイズ（clamp）
 * .tk-lead / .tk-txt / .tk-txt-sm     - 本文テキストサイズ・行高・色のセット
 * .tk-note / .tk-note-xs              - 注記テキスト
 * .tk-num / .tk-num--pale / --white   - Archivo の大きな番号あしらい（01/02/03）
 *
 * ▼ パーツ
 * .tk-hair / .tk-hairgrid             - 1pxヘアラインで区切るグリッド（枠線の重複なし）
 * .tk-card                            - ヘアラインセル（白背景）
 * .tk-bar-ttl                         - 左に3pxの青バーが付く小見出し
 * .tk-btn / --solid / --outline / --ghost / --white / --head / --spnav / --full
 * .tk-telbox / --white                - 電話番号ボックス（ラベル+番号+受付時間）
 * .tk-badge / --req / --any / --cat   - 必須/任意/カテゴリのバッジ
 * .tk-tabs / .tk-tabs__item           - カテゴリ切替タブ（リンク方式）
 * .tk-deflist / .tk-deflist--sm       - 項目名+内容の定義リスト（会社概要・募集要項）
 * .tk-figure                          - 写真+キャプション
 * .tk-imgfill / .tk-imgbox            - object-fit:cover 画像とその枠
 *
 * ▼ ページ固有ブロック
 * .tk-topbar / .tk-header / .tk-logo / .tk-nav / .tk-headtel   - ヘッダー
 * .tk-mv                              - メインビュー（静止画+CMSスライダー差し替え対応）
 * .tk-newsstrip                       - TOPのお知らせ帯
 * .tk-srow                            - TOPの事業内容（画像+テキストの交互行）
 * .tk-workcard                        - 施工実績カード
 * .tk-recruit                         - TOPの採用セクション（ダーク）
 * .tk-pagehead                        - 下層ページヘッダー（ネイビー）+ パンくず
 * .tk-anchornav                       - ページ内アンカーナビ
 * .tk-license                         - 許可・認証カード
 * .tk-form                            - フォーム
 * .tk-side                            - ブログサイドバー
 * .tk-cta / .tk-footer                - 共通CTA帯・フッター
 * .tk-fade                            - スクロールフェードイン（js/common.js）
 *
 * ======================================
 * 共通SCSSに不足していたもの
 * ======================================
 *
 * ・構造不足：position:sticky 型ヘッダー（header-bar=fixed / header-sticky=JS必須 のみ）
 * ・構造不足：ヘッダー上部の情報バー（住所・営業時間・地図リンク）
 * ・構造不足：1pxヘアラインでセルを区切るグリッド（gap:1px + box-shadow 方式）
 * ・構造不足：dt/dd 型の定義リスト（table ではなく flex で組む会社概要・募集要項）
 * ・値の粒度不足：13.5 / 14.5 / 15.5px 等の 0.5px 刻み font-size（fz-* は整数のみ）
 * ・値の粒度不足：clamp() によるセクション余白・見出しサイズの可変指定
 * ・装飾パターン不足：左3pxの縦バー付き小見出し（heading-bar は 6px + en/ja 前提）
 * ・状態不足：ホバーで枠線色だけを変えるカード（hover-border-* は base/sub のみ）
 *
 */

/* ==========================================================================
   1. ベース調整
   ========================================================================== */
/* SP下部の固定バーの高さ（.sp-fixed-bar__link の min-height と同値）。
   フッター下端の余白・ページトップボタンの位置がこの値に追従する。 */
:root {
  --sp-bar-h: 58px;
}

body {
  color: #101425;
  background: #fff;
  text-wrap: pretty;
}

a:hover {
  opacity: 1;
}

.tk-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.tk-fade.is-shown {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   2. レイアウト
   ========================================================================== */
.tk-sec {
  padding: clamp(56px, 7vw, 96px) 24px;
}
.tk-sec--lg {
  padding: clamp(64px, 8vw, 110px) 24px;
}
.tk-sec--xs {
  padding: clamp(48px, 6vw, 80px) 24px;
}
.tk-sec--pb0 {
  padding-bottom: 0;
}
.tk-sec--pt0 {
  padding-top: 0;
}

.tk-sec--white {
  background: #fff;
}
.tk-sec--sub {
  background: #FBFBFB;
  border-top: 1px solid #EEF0F6;
}
.tk-sec--dark {
  background: #0A0E2A;
  color: #fff;
}
.tk-sec--base {
  background: #0720FF;
  color: #fff;
}
/* セクション上下の1pxヘアライン（元データの box-shadow:0 0 0 1px 相当） */
.tk-sec--hair {
  box-shadow: 0 0 0 1px #E4E7F2;
}

.tk-wrap {
  max-width: 1200px;
  margin: 0 auto;
}
.tk-wrap--1100 {
  max-width: 1100px;
  margin: 0 auto;
}
.tk-wrap--1000 {
  max-width: 1000px;
  margin: 0 auto;
}
.tk-wrap--900 {
  max-width: 900px;
  margin: 0 auto;
}

/* 汎用 flex 行（gap は元データ準拠） */
.tk-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 64px);
}
.tk-row--sm {
  gap: clamp(24px, 3vw, 40px);
}
.tk-row--32 {
  gap: 32px;
}
.tk-wrap--1280 {
  max-width: 1280px;
}
.tk-col-1 {
  flex: 1 1 320px;
  min-width: 280px;
}
.tk-col-14 {
  flex: 1.4 1 420px;
  min-width: 300px;
}
.tk-col-12 {
  flex: 1.2 1 420px;
  min-width: 290px;
}
.tk-col-2 {
  flex: 2 1 520px;
  min-width: 290px;
}
.tk-map iframe {
  display: block;
  width: 100%;
  height: 400px;
  border: 1px solid #E4E7F2;
}
.tk-map {
  border-radius: 0;
}
.tk-accessbox {
  background: #fff;
  border: 1px solid #E4E7F2;
  padding: 30px;
}

/* ==========================================================================
   3. タイポグラフィ
   ========================================================================== */
.tk-eyebrow {
  font-family: "Archivo", sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  line-height: 1.4;
  color: #0720FF;
  margin: 0 0 1.8rem;
}
.tk-eyebrow--white {
  color: #fff;
  opacity: 0.75;
  letter-spacing: 0.3em;
  margin-bottom: 1.4rem;
}
.tk-eyebrow--pale {
  color: #8FA0FF;
  margin-bottom: 1.6rem;
}
.tk-eyebrow--tel {
  letter-spacing: 0.3em;
  margin-bottom: 1.4rem;
}

.tk-h2 {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.02em;
  margin: 0 0 1.4rem;
}
.tk-h2--sm {
  font-size: clamp(20px, 2.6vw, 30px);
  margin-bottom: 3.6rem;
}
.tk-h2--msg {
  font-size: clamp(22px, 3.2vw, 38px);
  line-height: 1.7;
  margin: 0 0 3.4rem;
}
.tk-h3 {
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 700;
  line-height: 1.6;
  margin: 0 0 1.2rem;
}

.tk-lead {
  font-size: 1.5rem;
  line-height: 2.1;
  color: #3A4160;
  margin: 0;
}
.tk-lead--wide {
  max-width: 780px;
}
.tk-txt {
  font-size: 1.45rem;
  line-height: 2.1;
  color: #41465C;
  margin: 0;
}
.tk-txt--deep {
  color: #3A4160;
  line-height: 2.2;
}
.tk-txt-sm {
  font-size: 1.4rem;
  line-height: 2.1;
  color: #41465C;
  margin: 0;
}
.tk-txt-lg {
  font-size: 1.55rem;
  line-height: 2.35;
  color: #3A4160;
  margin: 0;
}
.tk-note {
  font-size: 1.35rem;
  line-height: 2;
  color: #5A5F72;
  margin: 0;
}
.tk-note-xs {
  font-size: 1.25rem;
  line-height: 2;
  color: #5A5F72;
  margin: 0;
}
.tk-note-meta {
  font-size: 1.2rem;
  line-height: 1.9;
  color: #8A8FA3;
  margin: 0;
}

.tk-num {
  font-family: "Archivo", sans-serif;
  font-size: clamp(34px, 4.4vw, 58px);
  font-weight: 700;
  color: #0720FF;
  line-height: 0.95;
  flex-shrink: 0;
}
.tk-num--md {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1;
}
.tk-num--sm {
  font-size: 4rem;
  line-height: 1;
}
.tk-num--pale {
  color: #DDE1F5;
}

.tk-divider {
  width: 40px;
  height: 2px;
  background: #0720FF;
  margin: 0 auto 3.4rem;
}

/* 左に3pxの縦バーが付く小見出し */
.tk-bar-ttl {
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 1.4rem;
  padding-left: 14px;
  border-left: 3px solid #0720FF;
}
.tk-bar-ttl--lg {
  font-size: 1.9rem;
  line-height: 1.6;
}

/* ==========================================================================
   4. ヘアライン・カード
   ========================================================================== */
.tk-hair {
  box-shadow: 0 0 0 1px #E4E7F2;
}

.tk-hairgrid {
  display: grid;
  gap: 1px;
  background: transparent;
  box-shadow: 0 0 0 1px #E4E7F2;
}
.tk-hairgrid--290 {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.tk-hairgrid--300 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.tk-hairgrid--280 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.tk-hairgrid--480 {
  grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
}
.tk-hairgrid--170 {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
.tk-hairgrid--stack {
  display: flex;
  flex-direction: column;
}

.tk-card {
  background: #fff;
  box-shadow: 0 0 0 1px #E4E7F2;
  padding: clamp(28px, 3vw, 40px);
}
.tk-card--30 {
  padding: 30px;
}
.tk-card--flow {
  padding: clamp(26px, 3vw, 38px);
}
/* 関連ページ案内カード（ボタンを下端に揃える） */
.tk-card--nav {
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
}
.tk-card--nav p {
  flex: 1;
}
/* Before/After ボックス */
.tk-ba {
  padding: 20px;
}

/* ダーク背景上のヘアライン */
.tk-hairgrid--dark {
  box-shadow: 0 0 0 1px #262E63;
}
.tk-card--dark {
  background: #0A0E2A;
  box-shadow: 0 0 0 1px #262E63;
  padding: 24px 26px;
}
/* 青背景上のヘアライン */
.tk-hairgrid--base {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.tk-card--base {
  background: #0720FF;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
  padding: 30px 28px;
}

/* ==========================================================================
   5. 画像
   ========================================================================== */
.tk-imgfill {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tk-imgbox {
  overflow: hidden;
  display: flex;
  background: #EEF0F6;
}
.tk-imgbox--180 { height: 180px; }
.tk-imgbox--170 { height: 170px; }
.tk-imgbox--190 { height: 190px; }
.tk-imgbox--200 { height: 200px; }
/* lightbox用に <a> を挟んだ場合の対策。
   .tk-imgbox は display:flex なので、<a> がフレックスアイテムになり幅が
   中身依存（画像の縦横比 × 枠の高さ）で決まってしまう。枠のほうが広いと
   画像が枠いっぱいに広がらず、右側に .tk-imgbox の背景色が見えてしまうため、
   <a> を枠いっぱいに広げて内側の img の object-fit:cover を効かせる。
   min-width:0 はフレックスアイテムの自動最小サイズ（min-content）で
   幅の狭いカラムからはみ出すのを防ぐため。 */
.tk-imgbox > a {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
}

.tk-img {
  width: 100%;
  display: block;
  object-fit: cover;
}
.tk-img--260 { height: clamp(180px, 20vw, 260px); }
.tk-img--320 { height: clamp(200px, 24vw, 320px); }
.tk-img--300 { height: clamp(200px, 24vw, 300px); }
.tk-img--420 { height: clamp(220px, 30vw, 420px); }
.tk-img--article { height: clamp(220px, 32vw, 420px); }
.tk-img--200 { height: 200px; }
.tk-img--220 { height: 220px; }

.tk-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.tk-photorow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.tk-photorow__wide {
  grid-column: span 2;
}

.tk-figure {
  margin: 0;
}
.tk-figure figcaption {
  font-size: 1.3rem;
  line-height: 1.85;
  color: #41465C;
  padding: 12px 2px 0;
}
.tk-figure__cap-sm {
  font-size: 1.25rem;
  color: #5A5F72;
  padding: 8px 0 0;
  margin: 0;
}
.tk-figure__cap-after {
  color: #0720FF;
  font-weight: 700;
}

/* ==========================================================================
   6. ボタン
   ========================================================================== */
.tk-btn {
  max-width: none;
  width: auto;
  border: 0;
  border-radius: 0;
  padding: 19px 30px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-align: center;
}
.tk-btn--solid {
  background: #0720FF;
  color: #fff;
}
.tk-btn--solid:hover {
  background: #0518C7;
  color: #fff;
}
.tk-btn--outline {
  background: transparent;
  border: 1.5px solid #0720FF;
  color: #0720FF;
}
.tk-btn--outline:hover {
  background: #0720FF;
  color: #fff;
}
.tk-btn--ghost {
  background: transparent;
  border: 1.5px solid #fff;
  color: #fff;
  padding: 17px 24px;
  font-size: 1.45rem;
}
.tk-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.tk-btn--ghost-thin {
  border-color: rgba(255, 255, 255, 0.5);
  font-size: 1.35rem;
  font-weight: 500;
  padding: 15px 24px;
}
.tk-btn--white {
  background: rgba(255, 255, 255, 0.94);
  color: #0720FF;
}
.tk-btn--white:hover {
  background: #fff;
  color: #0720FF;
}
.tk-btn--head {
  padding: 12.5px 18px;
  font-size: 1.35rem;
  white-space: nowrap;
}
.tk-btn--head.tk-btn--outline {
  padding: 11px 16px;
}
.tk-btn--head.tk-btn--outline:hover {
  background: #EEF0FF;
  color: #0720FF;
}
.tk-btn--spnav {
  width: 100%;
  padding: 14px;
  font-size: 1.6rem;
}
.tk-btn--full {
  display: flex;
  width: 100%;
}
.tk-btn--md {
  padding: 18px 40px;
  font-size: 1.45rem;
}
.tk-btn--sm {
  padding: 15px;
  font-size: 1.35rem;
}
.tk-btn--sm.tk-btn--solid {
  padding: 16.5px;
}
.tk-btn--mv {
  padding: 19px 30px;
}
.tk-btn--mv.tk-btn--solid:hover {
  background: #fff;
  color: #0720FF;
}

/* テキストリンク（→付き） */
.tk-link {
  font-size: 1.35rem;
  font-weight: 700;
  color: #0720FF;
  text-decoration: none;
}
.tk-link:hover {
  color: #0518C7;
}
.tk-link--ink {
  color: #101425;
}
.tk-link--ink:hover {
  color: #0720FF;
}
.tk-link--underline {
  font-size: 1.3rem;
  border-bottom: 1px solid rgba(7, 32, 255, 0.35);
  padding-bottom: 3px;
  align-self: flex-start;
}

/* 電話番号ボックス */
.tk-telbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.3;
  padding: 22px;
  background: #0720FF;
  color: #fff;
  text-decoration: none;
  transition: background 0.3s ease;
}
.tk-telbox:hover {
  background: #0518C7;
  color: #fff;
}
.tk-telbox--white {
  background: #fff;
  color: #0720FF;
  padding: 18px 24px;
  line-height: 1.2;
}
.tk-telbox--white:hover {
  background: #EEF0FF;
  color: #0720FF;
}
.tk-telbox__label {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.tk-telbox--white .tk-telbox__label {
  font-size: 1.15rem;
  margin-bottom: 6px;
}
.tk-telbox__num {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.1;
}
.tk-telbox__note {
  font-size: 1.15rem;
  margin-top: 8px;
  opacity: 0.85;
}
.tk-telbox--white .tk-telbox__note {
  font-size: 1.1rem;
  margin-top: 6px;
  color: #3A4160;
  opacity: 1;
}

/* バッジ */
.tk-badge {
  display: inline-block;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 3px 7px;
  line-height: 1.6;
  flex-shrink: 0;
}
.tk-badge--req {
  background: #0720FF;
  color: #fff;
}
.tk-badge--any {
  background: #EEF0F6;
  color: #5A5F72;
}
.tk-badge--cat {
  background: #0720FF;
  color: #fff;
  font-size: 1.1rem;
  padding: 4px 10px;
  letter-spacing: 0.06em;
}
.tk-badge--cat-lg {
  font-size: 1.15rem;
  padding: 5px 12px;
}

/* ==========================================================================
   7. ヘッダー
   ========================================================================== */
.tk-header {
  position: sticky;
  top: 0;
  background: #fff;
}

.tk-topbar {
  border-bottom: 1px solid #E8EAF2;
  background: #FBFBFB;
}
.tk-topbar__inner {
  max-width: 1560px;
  margin: 0 auto;
  padding: 6px 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  justify-content: space-between;
  font-size: 1.2rem;
  line-height: 1.8;
  color: #5A5F72;
  letter-spacing: 0.02em;
}
.tk-topbar__set {
  display: flex;
  gap: 16px;
  align-items: center;
}
.tk-topbar__link {
  color: #0720FF;
  text-decoration: none;
  border-bottom: 1px solid rgba(7, 32, 255, 0.3);
}

.tk-header__inner {
  max-width: 1560px;
  height: auto;
  padding: 14px 32px;
  gap: 28px;
}
.tk-header__right {
  gap: 12px;
  height: auto;
}

.tk-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.tk-logo img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
}
.tk-logo__body {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.tk-logo__name {
  font-size: 1.9rem;
  font-weight: 700;
  color: #101425;
  letter-spacing: 0.04em;
}
.tk-logo__en {
  font-size: 1rem;
  font-weight: 600;
  color: #0720FF;
  letter-spacing: 0.34em;
}
.tk-logo--footer img {
  width: 48px;
  height: 48px;
}
.tk-logo--footer .tk-logo__name {
  font-size: 2rem;
}

.tk-nav {
  gap: 26px;
  margin-right: 0;
  flex-wrap: nowrap;
}
.tk-nav .header__nav-item a {
  padding: 6px 0;
  display: block;
}
.tk-nav .header__nav-item a::after {
  height: 2px;
  bottom: 0;
}
.tk-nav .header__nav-item a:hover::after {
  width: 100%;
  left: 0;
}
.tk-nav__ja {
  font-size: 1.45rem;
  font-weight: 500;
  color: #101425;
  letter-spacing: 0.02em;
  margin-top: 0;
  line-height: 1.6;
  white-space: nowrap;
  transition: color 0.3s ease;
}
.tk-nav .header__nav-item a:hover .tk-nav__ja {
  color: #0720FF;
}
.tk-nav .header__nav-item--current a::after {
  width: 100%;
  left: 0;
  transform: none;
}

.tk-headtel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
  text-decoration: none;
}
.tk-headtel__num {
  font-size: 2.2rem;
  font-weight: 700;
  color: #101425;
  letter-spacing: 0.01em;
}
.tk-headtel__note {
  font-size: 1.05rem;
  color: #5A5F72;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

/* SPナビ：矢印アイコンとラベルの間隔（共通CSSの ::after に余白がないため） */
.sp-nav__link::after {
  margin-left: 10px;
}
/* SPナビの英字ラベル（共通CSSの 0.75rem = 7.5px は小さすぎるため） */
.sp-nav__en {
  font-size: 1.5rem;
}
.sp-nav__bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* ============ SP下部の固定バー（897px未満で表示） ============
   2つのセルを1pxの区切り線で分け、それぞれをボタンとして見せる。
   共通CSS側の padding: 8px 0 を打ち消し、セルを枠いっぱいに広げている。 */
.sp-fixed-bar {
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom);
}
/* セル間の区切り線 */
.sp-fixed-bar__item + .sp-fixed-bar__item {
  border-left: 1px solid #E8EAF2;
}
.sp-fixed-bar__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--sp-bar-h);
  padding: 8px 6px;
  background: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
/* タップ時のフィードバック（ボタンらしさを出す） */
.sp-fixed-bar__link:hover,
.sp-fixed-bar__link:active {
  background: #F2F4FA;
  color: #0720FF;
}
.sp-fixed-bar__link i {
  display: block;
  font-size: 1.7rem;
  margin-bottom: 5px;
  color: #0720FF;
}

/* ==========================================================================
   8. メインビュー
   ========================================================================== */
.tk-mv {
  position: relative;
  background: #0A0E2A;
  overflow: hidden;
}
/* --- 外枠：ここで高さを決め、中のCMSスライダーは height:100% で追従する ---
   z-index:0 で stage を独立した重ね合わせ文脈にし、CMSスライダーが内部で
   出力する z-index（.main_slider__outer:1 / navigation:5）が
   .tk-mv__shade・.tk-mv__body を覆わないよう閉じ込める。 */
.tk-mv__stage {
  position: relative;
  z-index: 0;
  height: clamp(440px, 62vw, 660px);
}
/* CMSスライダーの挿入先（差し替え後に生成される要素）。
   CMS側スクリプトが inline で height:100% を付与するが、未実行時も枠が潰れないよう指定 */
.tk-mv__stage > [id^="cms-slider-"] {
  position: absolute;
  inset: 0;
  height: 100%;
}
.tk-mv__stage > [id^="cms-slider-"] .slider_wrapper,
.tk-mv__stage > [id^="cms-slider-"] .main_slider__outer,
.tk-mv__stage > [id^="cms-slider-"] .main_slider {
  height: 100%;
}
/* 静止画フォールバック（CMS差し替え前の確認用マークアップ） */
.tk-mv__slide {
  position: absolute;
  inset: 0;
  background: #0A0E2A;
}
/* CMSスライダーのスライド。
   .swiper-slide に position/inset を当てると Swiper の幅計算とフェード動作が壊れるため、
   高さと画像のトリミングだけを指定する。 */
.tk-mv .swiper-slide,
.tk-mv .main_slider__inner {
  height: 100%;
}
.tk-mv__slide img,
.tk-mv .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tk-mv__shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 12, 40, 0.82) 0%, rgba(7, 12, 40, 0.55) 48%, rgba(7, 12, 40, 0.15) 100%);
}
.tk-mv__body {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
}
.tk-mv__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}
.tk-mv__en {
  font-family: "Archivo", sans-serif;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  margin: 0 0 2rem;
  opacity: 0.85;
}
.tk-mv__title {
  color: #fff;
  font-size: clamp(30px, 5.2vw, 60px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
  margin: 0 0 2.2rem;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.3);
}
.tk-mv__sub {
  color: #fff;
  font-size: clamp(14px, 1.45vw, 17px);
  line-height: 2.1;
  margin: 0 0 3.4rem;
  max-width: 640px;
  opacity: 0.95;
}
.tk-mv__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ==========================================================================
   9. TOP：お知らせ帯
   ========================================================================== */
.tk-newsstrip {
  background: #fff;
  border-bottom: 1px solid #E8EAF2;
}
/* PCは「見出し180px ＋ 記事リスト」の2カラムをgridで固定する。
   flexだと記事の文字数で記事欄の幅が変わるため、grid + minmax(0, 1fr) で
   中身に依存しない一定幅にしている。 */
.tk-newsstrip__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 26px 24px;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 18px 40px;
  align-items: start;
}
/* 見出しは「英字ラベル（小）＋日本語（大）」を縦1カラムに積み、
   サイト共通の .tk-eyebrow ＋ 見出し と同じ強弱のつけ方に揃える。 */
.tk-newsstrip__ttl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 180px;
}
.tk-newsstrip__en {
  font-family: "Archivo", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  line-height: 1.4;
  color: #0720FF;
}
.tk-newsstrip__ja {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: #101425;
}
/* 3件分の高さで打ち止めにし、4件目以降はスクロールで見せる。
   --news-row-h は1行分（日付ボックス+上下padding+下線）の実測値。 */
.tk-newsstrip__list {
  --news-row-h: 57px;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  border-top: 1px solid #E8EAF2;
  max-height: calc(var(--news-row-h) * 3 + 1px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #C3CBE4 #F2F4FA;
}
.tk-newsstrip__list::-webkit-scrollbar {
  width: 6px;
}
.tk-newsstrip__list::-webkit-scrollbar-track {
  background: #F2F4FA;
}
.tk-newsstrip__list::-webkit-scrollbar-thumb {
  background: #C3CBE4;
  border-radius: 3px;
}
.tk-newsstrip__list::-webkit-scrollbar-thumb:hover {
  background: #0720FF;
}
.tk-newsstrip__item {
  display: flex;
  flex-wrap: nowrap;
  gap: 0 24px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid #E8EAF2;
  padding: 14px 4px;
  width: 100%;
}
.tk-newsstrip__date {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 106px;
  padding: 5px 12px;
  background: #EDF3FF;
  font-family: "Archivo", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #0720FF;
  letter-spacing: 0.06em;
  line-height: 1.4;
}
/* お知らせ記事はアニメーションなし。
   site-main.css の共通指定（a { transition: all .3s } / a:hover { opacity: .8 }）を
   ここで打ち消し、ホバーは色と下線の即時切替のみにする。 */
.tk-newsstrip__link {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.45rem;
  color: #101425;
  line-height: 1.7;
  text-decoration: none;
  transition: none;
}
/* ホバー表現はリンクの場合のみ。お知らせCMSはリンクなしテキストで出力されるため、
   span には反応させない。 */
a.tk-newsstrip__link:hover {
  color: #0720FF;
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* ==========================================================================
   10. TOP：事業内容の行
   ========================================================================== */
.tk-srows {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #E4E7F2;
}
.tk-srow {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border-bottom: 1px solid #E4E7F2;
}
.tk-srow--reverse {
  flex-wrap: wrap-reverse;
}
.tk-srow__img {
  flex: 1 1 300px;
  min-height: 210px;
  overflow: hidden;
  display: flex;
}
.tk-srow__img img {
  width: 100%;
  height: 100%;
  min-height: 210px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.tk-srow:hover .tk-srow__img img {
  transform: scale(1.03);
}
.tk-srow__body {
  flex: 2 1 460px;
  padding: clamp(28px, 3.4vw, 44px);
  display: flex;
  gap: 24px;
}
.tk-srow__ttl {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  line-height: 1.55;
  margin: 0 0 1.4rem;
}
.tk-srow__ttl small {
  font-size: 1.3rem;
  font-weight: 500;
  color: #5A5F72;
  margin-left: 10px;
}

/* ==========================================================================
   11. 施工実績カード
   ========================================================================== */
/* ブログCMSの挿入先。span（インライン）のままだと中の .tk-works が
   インライン整形コンテキストに置かれるため、ブロック化しておく。 */
[id^="cms-blog-entry-list-"] {
  display: block;
}
.tk-works {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.tk-works--list {
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 26px;
}
/* CMS出力のラッパーには tk-works--list が付かず .tk-works だけになるため、
   一覧ページ（2カラムのメインカラム内）では --list 相当の値を当てておく。 */
.tk-blog__main .tk-works {
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 26px;
}
/* 実績カードはアニメーションなし。
   site-main.css の共通指定（a { transition: all .3s } / a:hover { opacity: .8 }）も
   ここで打ち消し、ホバーは枠線色と影の即時切替のみにする。 */
.tk-workcard {
  background: #fff;
  border: 1px solid #E4E7F2;
  display: block;
  color: inherit;
  text-decoration: none;
  transition: none;
}
.tk-workcard:hover {
  border-color: #0720FF;
  color: inherit;
  opacity: 1;
  box-shadow: 0 2px 10px rgba(7, 32, 255, 0.08);
}
.tk-workcard__img {
  height: 180px;
  background: #EEF0F6;
  overflow: hidden;
}
.tk-workcard__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tk-workcard__body {
  padding: 22px 22px 26px;
}
.tk-workcard__meta {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.tk-workcard__date {
  font-family: "Archivo", sans-serif;
  font-size: 1.2rem;
  color: #8A8FA3;
}
.tk-workcard__ttl {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.75;
  margin: 0;
}
.tk-workcard__excerpt {
  font-size: 1.3rem;
  line-height: 1.9;
  color: #5A5F72;
  margin: 10px 0 0;
}

/* カテゴリタブ（リンク方式） */
.tk-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tk-tabs__item {
  display: inline-block;
  border: 1px solid #D8DCEA;
  background: #fff;
  color: #41465C;
  font-size: 1.35rem;
  font-weight: 700;
  padding: 11px 22px;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: all 0.3s ease;
}
.tk-tabs__item:hover {
  border-color: #0720FF;
  color: #0720FF;
}
.tk-tabs__item.is-current {
  background: #0720FF;
  border-color: #0720FF;
  color: #fff;
}

/* ==========================================================================
   12. TOP：採用セクション（ダーク）
   ========================================================================== */
.tk-recruit__inner {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 72px);
  max-width: 1200px;
  margin: 0 auto;
}
/* 左カラムを縦フレックスにし、画像に余った高さを全て吸わせることで
   右カラム（カード群）の下端と揃える。 */
.tk-recruit__left {
  flex: 1 1 400px;
  min-width: 290px;
  display: flex;
  flex-direction: column;
}
.tk-recruit__right {
  flex: 1 1 380px;
  min-width: 290px;
}
/* flex-basis を 0 にして画像の実寸を高さ計算に含めない。
   （auto のままだと画像の実寸で左カラムが右カラムより高くなり得る）
   min-height は縦積みになるSP時と、テキストが長い場合の下限。 */
.tk-recruit__img {
  width: 100%;
  flex: 1 1 0;
  min-height: 220px;
  object-fit: cover;
  display: block;
  border: 1px solid #262E63;
}
.tk-recruit__ttl {
  font-size: clamp(22px, 2.8vw, 33px);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.02em;
  margin: 0 0 2.2rem;
}
.tk-recruit__lead {
  font-size: 1.5rem;
  line-height: 2.2;
  margin: 0 0 3rem;
  opacity: 0.88;
}
.tk-card--dark h3 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 1rem;
  color: #fff;
  line-height: 1.6;
}
.tk-card--dark p {
  font-size: 1.35rem;
  line-height: 2;
  margin: 0;
  opacity: 0.8;
}
.tk-card--dark.tk-card--btn {
  padding: 26px;
}

/* ==========================================================================
   13. 下層ページヘッダー
   ========================================================================== */
.tk-pagehead {
  background: #0A0E2A;
  color: #fff;
  padding: clamp(48px, 6vw, 80px) 24px;
  text-align: left;
}
.tk-pagehead__ja {
  font-size: clamp(26px, 3.6vw, 42px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: #fff;
  margin: 0 0 2.4rem;
}
.tk-pagehead__headline {
  font-size: clamp(16px, 1.9vw, 22px);
  font-weight: 500;
  line-height: 1.8;
  margin: 0 0 1.8rem;
  color: #fff;
}
.tk-pagehead__lead {
  font-size: 1.45rem;
  line-height: 2.2;
  margin: 0;
  max-width: 820px;
  opacity: 0.85;
}

.tk-crumb {
  background: #FBFBFB;
  border-bottom: 1px solid #EEF0F6;
  padding: 0;
  font-size: inherit;
}
.tk-crumb__list {
  max-width: 1200px;
  margin: 0 auto;
  padding: 13px 24px;
  font-size: 1.2rem;
  color: #5A5F72;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.tk-crumb__list .breadcrumb__item:not(:last-child)::after {
  content: "／";
  color: #B9BECE;
  margin: 0 0 0 10px;
}
.tk-crumb__list .breadcrumb__link {
  color: #5A5F72;
}
.tk-crumb__list .breadcrumb__link:hover {
  color: #0720FF;
  text-decoration: none;
}
.tk-crumb__list .breadcrumb__current {
  color: #5A5F72;
}
.tk-crumb__list--900 {
  max-width: 900px;
}

/* ページ内アンカーナビ */
.tk-anchornav {
  background: #fff;
  border-bottom: 1px solid #E8EAF2;
}
.tk-anchornav__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
}
.tk-anchornav__item {
  color: #101425;
  font-size: 1.35rem;
  font-weight: 500;
  padding: 20px 26px 20px 0;
  margin-right: 26px;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  transition: all 0.3s ease;
}
.tk-anchornav__item:last-child {
  padding-right: 0;
  margin-right: 0;
}
.tk-anchornav__item:hover {
  color: #0720FF;
  border-bottom-color: #0720FF;
}

.tk-anchor {
  scroll-margin-top: 120px;
}

/* 番号付きセクション見出し */
.tk-numhead {
  display: flex;
  gap: clamp(16px, 2.4vw, 30px);
  align-items: flex-start;
  margin-bottom: 36px;
}
.tk-numhead__ttl {
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.55;
  margin: 0 0 1.2rem;
}
.tk-numhead__sub {
  font-size: 1.3rem;
  color: #5A5F72;
  margin: 0 0 1.8rem;
  letter-spacing: 0.06em;
}

/* 強調ボックス（対応エリア等） */
.tk-callout {
  border: 1px solid #0720FF;
  background: #F7F8FF;
  padding: 26px 30px;
}
.tk-callout__main {
  font-size: 1.45rem;
  line-height: 2.1;
  margin: 0;
  color: #101425;
  font-weight: 500;
}

/* 産廃品目セル */
.tk-waste {
  background: #fff;
  box-shadow: 0 0 0 1px #E4E7F2;
  padding: 16px 18px;
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.tk-waste__no {
  font-family: "Archivo", sans-serif;
  font-size: 1.1rem;
  color: #0720FF;
  font-weight: 700;
}
.tk-waste__name {
  font-size: 1.4rem;
  line-height: 1.7;
}

/* ==========================================================================
   14. 許可・認証
   ========================================================================== */
.tk-license {
  background: #fff;
  box-shadow: 0 0 0 1px #E4E7F2;
  padding: 26px 28px;
  display: flex;
  gap: 22px;
  align-items: center;
}
.tk-license__thumb {
  width: 110px;
  height: 150px;
  background: #FBFBFB;
  box-shadow: 0 0 0 1px #E4E7F2;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.tk-license__thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.tk-license__name {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.8rem;
  line-height: 1.6;
}
.tk-license__meta {
  font-size: 1.25rem;
  color: #5A5F72;
  line-height: 1.9;
  margin: 0;
}

/* ==========================================================================
   15. 定義リスト（会社概要・募集要項）
   ========================================================================== */
.tk-deflist {
  border-top: 1px solid #E4E7F2;
}
.tk-deflist__row {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #E4E7F2;
}
.tk-deflist__key {
  flex: 0 0 220px;
  min-width: 160px;
  background: #FBFBFB;
  padding: 20px 24px;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.8;
}
.tk-deflist__val {
  flex: 1 1 380px;
  padding: 20px 24px;
  font-size: 1.45rem;
  line-height: 2;
  color: #3A4160;
}
.tk-deflist--sm {
  border: 1px solid #E4E7F2;
  border-top: 0;
}
.tk-deflist--sm .tk-deflist__key {
  flex: 0 0 170px;
  min-width: 130px;
  padding: 16px 18px;
  font-size: 1.3rem;
  line-height: 1.7;
}
.tk-deflist--sm .tk-deflist__val {
  flex: 1 1 240px;
  padding: 16px 18px;
  font-size: 1.35rem;
  line-height: 2;
}
.tk-jobhead {
  background: #0720FF;
  color: #fff;
  padding: 20px 26px;
}
.tk-jobhead--b {
  background: #101425;
}
.tk-jobhead__mark {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin: 0 0 0.6rem;
  opacity: 0.8;
}
.tk-jobhead--b .tk-jobhead__mark {
  opacity: 0.7;
}
.tk-jobhead__ttl {
  font-size: 1.9rem;
  font-weight: 700;
  margin: 0;
}

/* 企業理念 */
.tk-philosophy {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.tk-philosophy__no {
  font-family: "Archivo", sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0.55;
}
.tk-philosophy__text {
  font-size: 1.6rem;
  line-height: 1.9;
  font-weight: 500;
}

/* 沿革 */
.tk-history {
  border-left: 2px solid #0720FF;
  padding-left: 30px;
}
.tk-history__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  padding-bottom: 26px;
}
.tk-history__year {
  font-family: "Archivo", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #0720FF;
  min-width: 120px;
}
.tk-history__text {
  font-size: 1.5rem;
  line-height: 1.9;
}

/* 原稿差し込み枠 */
.tk-draft {
  border: 1px dashed #B9BECE;
  background: #FBFBFB;
  padding: 28px 30px;
}
.tk-draft--onwhite {
  background: #fff;
  box-shadow: 0 0 0 1px #E4E7F2;
  padding: 24px 26px;
}
.tk-draft__label {
  font-size: 1.3rem;
  font-weight: 700;
  color: #0720FF;
  margin: 0 0 1.2rem;
  letter-spacing: 0.06em;
}
.tk-sign {
  text-align: right;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 24px 0 0;
}

/* 募集要項の2枠 */
.tk-col-job {
  flex: 1 1 460px;
  min-width: 290px;
}

/* 5つの魅力 */
.tk-merit {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2.6vw, 36px);
}
.tk-merit__body {
  flex: 1 1 460px;
  min-width: 240px;
}

/* 枠付きボックス（電話応募・お電話でのお問い合わせ） */
.tk-framebox {
  border: 1px solid #0720FF;
  padding: clamp(26px, 3.4vw, 44px);
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: center;
}
.tk-framebox__tel {
  flex: 0 1 300px;
}
.tk-framebox__side {
  flex: 0 1 300px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 求める人物像 */
/* 求める人物像：左カラムを縦フレックスにし、画像に余った高さを吸わせて
   右のリスト（.tk-wanted）と下端を揃える。
   min-height は .tk-img--300 と同値で、縦積みになるSP時の下限。 */
.tk-wantedrow > .tk-col-1 {
  display: flex;
  flex-direction: column;
}
.tk-wantedrow .tk-img {
  flex: 1 1 0;
  height: auto;
  min-height: clamp(200px, 24vw, 300px);
}
/* 逆に左カラム（画像側）が高い場合は、リストの各項目が余った高さを分け合う。
   これで最後の項目の下に空きが残らず、両カラムの下端が必ず揃う。 */
.tk-wantedrow .tk-wanted__item {
  flex: 1 1 auto;
}
.tk-wanted {
  flex: 1.2 1 420px;
  min-width: 290px;
}
.tk-wanted__item {
  background: #fff;
  box-shadow: 0 0 0 1px #E4E7F2;
  padding: 22px 26px;
  font-size: 1.5rem;
  line-height: 1.9;
  display: flex;
  gap: 16px;
  align-items: center;
}
.tk-wanted__dot {
  width: 8px;
  height: 8px;
  background: #0720FF;
  flex-shrink: 0;
  display: block;
}

/* ==========================================================================
   16. フォーム
   ========================================================================== */
.tk-form {
  background: #fff;
  border: 1px solid #E4E7F2;
  padding: clamp(26px, 3.4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.tk-form--sub {
  background: #FBFBFB;
}
.tk-form__row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tk-form__cols {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.tk-form__col {
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tk-form__col--sm {
  flex: 1 1 160px;
}
.tk-form__col--md {
  flex: 1 1 260px;
}
.tk-form__label {
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  gap: 10px;
  align-items: center;
  line-height: 1.6;
}
.tk-form__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.tk-form__choice {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 1.35rem;
  line-height: 1.6;
  border: 1px solid #D8DCEA;
  background: #fff;
  padding: 13px 18px;
  cursor: pointer;
}
.tk-form__input {
  width: 100%;
  border: 1px solid #D8DCEA;
  border-radius: 0;
  background: #fff;
  padding: 14px 16px;
  font-size: 1.4rem;
  font-family: inherit;
  color: #101425;
  line-height: 1.9;
  outline: none;
  transition: border-color 0.3s ease;
}
.tk-form__input:focus {
  border-color: #0720FF;
}
textarea.tk-form__input {
  resize: vertical;
}
.tk-form__agree {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}
.tk-form__agree em {
  color: #0720FF;
  font-weight: 700;
  font-style: normal;
  margin-left: 8px;
}
.tk-form__submit {
  background: #0720FF;
  color: #fff;
  border: 0;
  border-radius: 0;
  padding: 20px;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.3s ease;
}
.tk-form__submit:hover {
  background: #0518C7;
}

/* ==========================================================================
   17. ブログ（一覧・詳細・サイドバー）
   ========================================================================== */
.tk-blog {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 4vw, 56px);
  max-width: 1200px;
  margin: 0 auto;
}
.tk-blog__main {
  flex: 3 1 620px;
  min-width: 290px;
  width: auto;
}
.tk-blog__side {
  flex: 1 1 260px;
  min-width: 250px;
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.tk-side__ttl {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 1.6rem;
  padding-bottom: 12px;
  border-bottom: 2px solid #0720FF;
}
.tk-side__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tk-side__list li {
  border-bottom: 1px solid #EEF0F6;
}
.tk-side__link {
  color: #101425;
  font-size: 1.4rem;
  padding: 14px 4px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  text-decoration: none;
}
.tk-side__link:hover {
  color: #0720FF;
}
.tk-side__count {
  font-family: "Archivo", sans-serif;
  color: #8A8FA3;
  font-size: 1.25rem;
}
.tk-side__recent {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tk-side__recent a {
  color: #101425;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
}
.tk-side__recent a:hover {
  color: #0720FF;
}
.tk-side__date {
  font-family: "Archivo", sans-serif;
  font-size: 1.15rem;
  color: #8A8FA3;
}
.tk-side__rtitle {
  font-size: 1.35rem;
  line-height: 1.75;
}
.tk-side__box {
  background: #FBFBFB;
  border: 1px solid #E4E7F2;
  padding: 26px 24px;
}
.tk-side__box h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 1.2rem;
  line-height: 1.7;
}

/* 記事詳細 */
.tk-entry__meta {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}
.tk-entry__date {
  font-family: "Archivo", sans-serif;
  font-size: 1.3rem;
  color: #8A8FA3;
  letter-spacing: 0.06em;
}
.tk-entry__title {
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 700;
  line-height: 1.6;
  margin: 0 0 3.2rem;
  padding-bottom: 28px;
  border-bottom: 1px solid #E4E7F2;
}
.tk-entry__body {
  font-size: 1.5rem;
  line-height: 2.35;
  color: #3A4160;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.tk-entry__body p {
  margin: 0;
}
.tk-entry__box {
  border: 1px solid #E4E7F2;
  background: #FBFBFB;
  padding: 24px 26px;
}
.tk-entry__box p {
  margin: 0;
  font-size: 1.5rem;
  line-height: 2.1;
  font-weight: 500;
  color: #101425;
}
.tk-entry__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid #E4E7F2;
}

/* ページネーション（元データ：44px角） */
.tk-pager {
  margin: 48px 0 0;
}
.tk-pager .pagination__list {
  gap: 8px;
}
.tk-pager .pagination__link {
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border-radius: 0;
  border-color: #D8DCEA;
  color: #41465C;
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
}
.tk-pager .pagination__link--text {
  font-family: inherit;
  font-weight: 400;
  font-size: 1.3rem;
  padding: 0 18px;
}
.tk-pager .pagination__link:hover {
  border-color: #0720FF;
  color: #0720FF;
}
.tk-pager .pagination__link.is-current {
  background: #0720FF;
  border-color: #0720FF;
  color: #fff;
}

/* お知らせ一覧（日付＋タイトル） */
.tk-newslist {
  border-top: 1px solid #E4E7F2;
  border-bottom: 0;
}
.tk-newslist .blog-list__item {
  border-bottom: 1px solid #E4E7F2;
}
.tk-newslist .blog-list__link {
  gap: 6px 28px;
  align-items: baseline;
  padding: 22px 4px;
}
.tk-newslist .blog-list__link:hover {
  background: transparent;
}
.tk-newslist .blog-list__date {
  font-size: 1.35rem;
  color: #8A8FA3;
  min-width: 100px;
  letter-spacing: 0.06em;
}
.tk-newslist .blog-list__title {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.85;
  flex: 1 1 320px;
}

/* ==========================================================================
   18. CTA帯・フッター
   ========================================================================== */
.tk-cta {
  padding: clamp(48px, 7vw, 80px) 24px;
}
.tk-cta::before {
  background: #0720FF;
}
.tk-cta__inner {
  max-width: 1100px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  justify-content: space-between;
  color: #fff;
}
.tk-cta__left {
  min-width: 280px;
  flex: 1 1 380px;
}
.tk-cta__title {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 1.4rem;
  letter-spacing: 0.01em;
}
.tk-cta__desc {
  font-size: 1.45rem;
  line-height: 2;
  margin: 0;
  opacity: 0.9;
}
.tk-cta__right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 300px;
  flex: 0 1 340px;
}

.tk-footer__body {
  background: #fff;
  border-top: 1px solid #E8EAF2;
  padding: 0;
}
.tk-footer__inner {
  max-width: 1200px;
  padding: clamp(40px, 5vw, 64px) 24px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: flex-start;
}
.tk-footer__left {
  flex: 1 1 380px;
  min-width: 300px;
  width: auto;
}
.tk-footer__right {
  flex: 1 1 300px;
  width: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
.tk-footer .tk-logo {
  margin-bottom: 20px;
}
.tk-footer__info {
  font-size: 1.35rem;
  line-height: 2.1;
  color: #41465C;
  margin: 0 0 1.6rem;
}
.tk-footer__map {
  border-radius: 0;
}
.tk-footer__map iframe {
  display: block;
  width: 100%;
  height: 220px;
  border: 1px solid #E8EAF2;
}
.tk-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 150px;
}
/* ナビ2列を等幅にして左右のバランスを取る（3項目＋3項目） */
.tk-footer__right > .tk-footer__nav {
  flex: 1 1 150px;
}
.tk-footer__nav .footer-body__nav-item a {
  font-size: 1.4rem;
  color: #101425;
  font-weight: 500;
}
.tk-footer__nav .footer-body__nav-item a:hover {
  color: #0720FF;
}
.tk-footer__bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 24px 32px;
  text-align: left;
}
.tk-footer__copyright {
  display: block;
  font-family: "Archivo", sans-serif;
  font-size: 1.15rem;
  color: #8A8FA3;
  letter-spacing: 0.08em;
  margin: 0;
  border-top: 1px solid #EEF0F6;
  padding-top: 20px;
}

/* ==========================================================================
   19. レスポンシブ調整
   ========================================================================== */
/* ==========================================================================
   22. 送信完了ページ（thanks.php）
   ========================================================================== */
.tk-thanks__tel {
  max-width: 420px;
  margin: 4rem auto 0;
}
.tk-thanks__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 4rem;
}

/* ==========================================================================
   23. フォームCMS（cdn.rs-sys.jp）の見た目調整

   CMS側 https://cdn.rs-sys.jp/css/cms/mail-form.css は
   フォーム描画時に <link> でこのファイルより後から読み込まれるため、
   このセクションに限り !important で上書きする。
   対象：contact.php（28562-1）／ recruit.php（28562-2）の両フォーム
   ========================================================================== */
/* 送信ボタン … .tk-btn--solid / .tk-form__submit と同じ見た目に揃え、中央配置にする
   CMS既定： width:300px / background:#acacac / border-radius:4px / hover:#555 */
.form-contents .submit-btn,
.form-pattern-1 .submit-btn {
  display: block !important;
  width: min(360px, 100%) !important;
  margin: 30px auto 0 !important;
  padding: 20px 30px !important;
  background: #0720FF !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: inherit !important;
  font-size: 1.55rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  line-height: 1.4 !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background 0.3s ease !important;
}
/* CMS側の .form-pattern-1 :not(.pattern-exclusion) button:hover { background:#555 } を打ち消す */
.form-contents .submit-btn:hover,
.form-pattern-1 .submit-btn:hover,
.form-pattern-1 :not(.pattern-exclusion) button.submit-btn:hover {
  background: #0518C7 !important;
}
/* ボタン内の封筒アイコン（mask-image）は白のまま維持する */
.form-pattern-1 .submit-btn::before {
  background-color: #fff !important;
}
/* 必須バッジ … .tk-badge--req と同じ配色・角なしに揃える
   CMS既定： background:#ff4f4f / border-radius:2px / font-size:11px */
.form-pattern-1 dl dt:not(.pattern-exclusion) span.required::before {
  content: '必須' !important;
  color: #fff !important;
  background: #0720FF !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  padding: 3px 7px !important;
  border-radius: 0 !important;
  line-height: 1.6 !important;
}

/* ==========================================================================
   24. プライバシーポリシー（フォーム下のアコーディオン）

   <details>/<summary> のネイティブ挙動で開閉するためJSは不要。
   共通の .accordion コンポーネントは .is-open をJSで付与する前提で、
   JSが動かないと本文が display:none のまま読めなくなるため、
   法的な掲示物であるここでは <details> を採用している。
   ========================================================================== */
.tk-privacy {
  margin-top: 40px;
  border: 1px solid #E4E7F2;
  background: #fff;
}
.tk-privacy__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  background: #FBFBFB;
  font-size: 1.45rem;
  font-weight: 700;
  color: #101425;
  cursor: pointer;
  list-style: none;
  transition: background 0.3s ease;
}
/* ブラウザ既定の三角マーカーを消す（Safari / Chrome 用） */
.tk-privacy__head::-webkit-details-marker {
  display: none;
}
.tk-privacy__head:hover {
  background: #F2F4FA;
}
/* 開閉インジケーター（閉：下向き ／ 開：上向き） */
.tk-privacy__head::after {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 2px solid #0720FF;
  border-bottom: 2px solid #0720FF;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}
.tk-privacy[open] .tk-privacy__head::after {
  transform: rotate(-135deg);
}
.tk-privacy__body {
  padding: 24px 22px 28px;
  border-top: 1px solid #EEF0F6;
}
/* .tk-txt-sm / .tk-bar-ttl は margin:0 のため、ここで段落間を作る */
.tk-privacy__body > * + * {
  margin-top: 1.2rem;
}
.tk-privacy__ttl {
  font-size: 1.45rem;
  margin: 2.6rem 0 1rem;
}
.tk-privacy__list {
  color: #41465C;
}
.tk-privacy__contact {
  padding: 16px 18px;
  background: #F7F8FF;
  line-height: 1.9;
}

@media (max-width: 1199px) {
  .tk-header__inner {
    padding: 12px 20px;
    height: auto;
  }
  .tk-topbar__inner {
    padding: 6px 20px;
    font-size: 1.1rem;
  }
}

@media (max-width: 896px) {
  /* SP時はフッターナビを非表示。同じ項目がハンバーガーメニュー（1199px以下で表示）
     にあり、下部固定バーもここから表示されるため。 */
  .tk-footer__right {
    display: none;
  }
  /* 下部固定バーに隠れないための余白 */
  .footer-bottom {
    padding-bottom: calc(var(--sp-bar-h) + 16px);
  }
  /* ページトップボタンを固定バーの上に逃がす。
     どちらも z-index:100 で、DOM順で後ろにある固定バーが上に重なるため、
     位置をずらして回避する。 */
  .page-top {
    bottom: calc(var(--sp-bar-h) + env(safe-area-inset-bottom) + 12px);
  }
  .tk-blog__main,
  .tk-blog__side,
  .tk-footer__left,
  .tk-footer__right {
    width: auto;
  }
  .tk-blog__side {
    position: static;
  }
  .tk-photorow__wide {
    grid-column: auto;
  }
  .tk-deflist__key {
    flex: 1 1 100%;
  }
  .tk-deflist__val {
    flex: 1 1 100%;
  }
  .tk-deflist--sm .tk-deflist__key,
  .tk-deflist--sm .tk-deflist__val {
    flex: 1 1 100%;
  }
  .tk-hairgrid--480 {
    grid-template-columns: 1fr;
  }
  .tk-philosophy__text {
    white-space: normal;
  }
}

@media (max-width: 639px) {
  .tk-topbar {
    display: none;
  }
  .tk-newsstrip__inner {
    grid-template-columns: 1fr;
  }
  .tk-newsstrip__list {
    --news-row-h: 83px;
  }
  .tk-newsstrip__item {
    flex-wrap: wrap;
    gap: 6px 0;
    padding: 13px 2px;
  }
  .tk-newsstrip__date {
    min-width: 0;
    padding: 4px 10px;
    font-size: 1.2rem;
  }
  .tk-newsstrip__link {
    flex: 0 0 100%;
    font-size: 1.4rem;
  }
  .tk-header__inner {
    padding: 10px 16px;
  }
  .tk-logo img {
    width: 38px;
    height: 38px;
  }
  .tk-logo__name {
    font-size: 1.6rem;
  }
  .tk-sec,
  .tk-sec--lg,
  .tk-sec--xs {
    padding-left: 20px;
    padding-right: 20px;
  }
  .tk-mv__inner,
  .tk-newsstrip__inner,
  .tk-crumb__list,
  .tk-anchornav__inner,
  .tk-footer__inner,
  .tk-footer__bottom,
  .tk-pagehead {
    padding-left: 20px;
    padding-right: 20px;
  }
  .tk-srow__body {
    gap: 16px;
  }
  .tk-license {
    gap: 16px;
    padding: 22px 20px;
  }
  .tk-license__thumb {
    width: 80px;
    height: 110px;
  }
  .tk-history {
    padding-left: 20px;
  }
  .tk-cta__right,
  .tk-cta__left {
    min-width: 0;
  }
  /* 639px以下では共通CSSが .tk-cta__inner を flex-direction:column に切り替えるため、
     横並び用に指定した flex-basis（左380px／右340px）が「主軸＝高さ」の指定になり、
     中身より背の高い箱ができて説明文の下と電話ボタンの下に大きな空きが出ていた。
     縦積み時は中身なりの高さに戻す。 */
  .tk-cta__left,
  .tk-cta__right {
    flex: 0 0 auto;
  }
  /* --- SPのCTA帯（includes/contact-cta.php）をコンパクトにする ---
     ボタン群の上下に空きが目立つ主因は次の2つ。
      1) .tk-cta__inner の gap … site.css の 40px が、共通CSS側の
         @media(max-width:639px) の 20px より後に読まれて勝っていた
      2) .tk-cta の上下パディング … clamp() の下限 48px が
         共通CSS側の 40px より後に読まれて勝っていた
     いずれもここで明示的に上書きする。タップ領域は44px以上を維持。 */
  .tk-cta {
    padding: 32px 20px;
  }
  /* 説明文 ↔ 電話ボタンの間隔 */
  .tk-cta__inner {
    gap: 30px;
  }
  .tk-cta__title {
    margin-bottom: 1rem;
  }
  .tk-cta__desc {
    line-height: 1.9;
  }
  .tk-cta__right {
    gap: 8px;
  }
  .tk-cta__right .tk-telbox--white {
    padding: 13px 16px;
  }
  .tk-cta__right .tk-btn--ghost,
  .tk-cta__right .tk-btn--ghost-thin {
    padding: 13px 16px;
  }
}

/* ============================== 電話アイコン（ヘッダー／電話ボックス／SPナビ） ============================== */
.tk-headtel__num,
.tk-telbox__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28em;
}
.tk-tel-ico {
  font-size: 0.66em;
  line-height: 1;
  transform: translateY(-0.04em);
}
.tk-btn__ico {
  margin-right: 0.5em;
  font-size: 0.88em;
  line-height: 1;
}