/* ============================================
   田原工業 スタイルシート
   モバイルファースト / ブレークポイント: 768px
   ベースフォントサイズ: 16px
   ============================================ */

/* ----------------------------------------
   CSS カスタムプロパティ（デザイントークン）
   ---------------------------------------- */
:root {
  --color_main: #1A3C80;       /* メインカラー */
  --color_sub: #E5EEFF;        /* サブカラー */
  --color_white: #FFFFFF;
  --color_black: #000000;
  --color_gray: #666;
  --color_bg: #FFFFFF;

  --font_family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;

  --header_height_sp: 75px;
  --header_height_pc: 136px;
}

/* ----------------------------------------
   リセット・ベース
   ---------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
}

body {
  font-family: var(--font_family);
  background-color: var(--color_bg);
  color: var(--color_black);
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.spn { display:none; }

/* ============================================
   ヘッダー（SP）
   ============================================ */
.l_header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--color_white);
  z-index: 100;
  height: var(--header_height_sp);
}

.header_inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 15px 20px;
}

/* ロゴ */
.header_logo_link {
  display: flex;
  align-items: center;
  height: 100%;
}

.header_logo_link img {
  height: 45px;
  width: auto;
}

/* PC用右側エリア（SP では非表示） */
.header_right {
  display: none;
}

/* ハンバーガーボタン（SP のみ表示） */
.header_hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  flex-shrink: 0;
}

.hamburger_bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color_black);
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

/* ハンバーガー：開いた状態 */
.header_hamburger.is_open .hamburger_bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.header_hamburger.is_open .hamburger_bar:nth-child(2) {
  opacity: 0;
}

.header_hamburger.is_open .hamburger_bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ============================================
   SP ナビゲーションドロワー
   ============================================ */
.l_sp_nav {
  position: fixed;
  top: var(--header_height_sp);
  left: 0;
  width: 100%;
  background: var(--color_white);
  z-index: 99;
  display: flex;
  flex-direction: column;
  /* 非表示状態 */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  border-top: 1px solid #eee;
}

.l_sp_nav.is_open {
  max-height: 540px;
  background-color: #f0f0f0;
  padding: 10px 0 15px;
  /* border-bottom: 2px solid #ccc; */
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.3);
}

.sp_nav_item {
  position: relative;
  display: block;
  margin-left: 7.5vw;
  padding: 3.2vw 0 3.2vw 16px;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color_black);
  /* border-bottom: 1px solid #eee; */
  transition: background 0.2s;
}

.sp_nav_item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  /* アイコンの設定 */
  width: 8px;
  height: 14px;
  background-image: url("../images/arrows.png");
  background-size: contain;
  background-repeat: no-repeat;
}

.sp_nav_item2 {
  margin: 20px 6vw 0;
}

.sp_nav_item:hover {
  background: var(--color_sub);
}

/* ============================================
   メインビジュアル（SP）
   ============================================ */

/*
  スライドショー タイムライン（12s 1サイクル）
  0s  〜 5s  : スライド1 表示 + ズームアウト（scale 1.1→1.0）
  5s  〜 6s  : クロスフェード（スライド1→スライド2）
  6s  〜 11s : スライド2 表示 + ズームアウト（scale 1.1→1.0）
  11s 〜 12s : クロスフェード（スライド2→スライド1）
*/

/* スライド1：前半に表示、後半は非表示でscaleリセット */
@keyframes hero_slide_1 {
  0%     { opacity: 1; transform: scale(1.1); }
  41.67% { opacity: 1; transform: scale(1.0); } /* 5s: ズーム完了 */
  50%    { opacity: 0; transform: scale(1.0); } /* 6s: フェードアウト完了 */
  50.1%  { opacity: 0; transform: scale(1.1); } /* 非表示中にscaleリセット */
  91.67% { opacity: 0; transform: scale(1.1); } /* 11s: まだ非表示 */
  100%   { opacity: 1; transform: scale(1.1); } /* 12s: フェードイン完了 */
}

/* スライド2：前半は非表示、後半に表示 */
@keyframes hero_slide_2 {
  0%     { opacity: 0; transform: scale(1.1); }
  41.67% { opacity: 0; transform: scale(1.1); } /* 5s: フェードイン開始 */
  50%    { opacity: 1; transform: scale(1.083); } /* 6s: 完全表示（ズーム進行中） */
  91.67% { opacity: 1; transform: scale(1.0); }  /* 11s: ズーム完了 */
  100%   { opacity: 0; transform: scale(1.0); }  /* 12s: フェードアウト完了 */
}

.l_main_visual {
  position: relative;
  width: 100%;
  height: 480px;
  overflow: hidden;
}

.l_main_visual_slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.l_main_visual_slide picture,
.l_main_visual_slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* スライド1は手前に配置 */
.slide_1 {
  z-index: 2;
  animation: hero_slide_1 12s linear infinite;
}

.slide_2 {
  z-index: 1;
  animation: hero_slide_2 12s linear infinite;
}

/* ============================================
   スクロールフェードイン
   ============================================ */
.js_fade_target {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s ease, transform 1s ease;
}

.js_fade_target.is_visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   おまかせセクション（SP）
   ============================================ */
.l_omakase {
  width: 100%;
  background: var(--color_white);
}

.omakase_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 30px 0 0;
  width: 100%;
}

/* テキストエリア */
.omakase_text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 360px;
  max-width: calc(100% - 12vw);
}

.omakase_heading {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* SP: 完全自社請負・施工 (style_3CZA0X: 28px/600) */
.omakase_label {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.362;
  color: var(--color_black);
}

/* SP: 解体工事は当社にお任せください。(style_1PWE3L: 20px/600) */
.omakase_title {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.362;
  color: var(--color_black);
}

/* 本文 (style_SRMKQN: 16px/400 line-height 1.5) */
.omakase_body {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color_black);
}

/* 画像エリア */
.omakase_img {
  width: 100%;
}

.omakase_img picture,
.omakase_img img {
  width: 100%;
  height: 184px;
  object-fit: cover;
  display: block;
}

/* ============================================
   共通：セクション見出し
   ============================================ */
/* SP: style_S530MC 24px/600 | PC: style_K4ER6Q 26px/600 */
.section_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.section_title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.362;
  color: var(--color_black);
}

/* style_YQC9G1: 13px/600, gray */
.section_en {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color_gray);
  line-height: 1.362;
}

/* ============================================
   共通：ボタン（c_btn）
   ============================================ */
.c_btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  background: var(--color_main);
  border-radius: 12px;
  box-shadow: 0px 0px 2px 2px rgba(255, 255, 255, 0.8);
  color: var(--color_white);
  text-decoration: none;
  cursor: pointer;
}

.c_btn span {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.362;
  white-space: nowrap;
}

.btn_arrow {
  width: 11px;
  height: 18px;
  flex-shrink: 0;
}

/* 事業・事例セクション 大ボタン（SP: 360x60） */
.c_btn_large {
  width: 360px;
  max-width: calc(100% - 30px);
  height: 60px;
}

/* 事業カード上のボタン：SP（360x60, 絶対配置） */
.c_btn_business {
  position: absolute;
  bottom: 0;
  left: 6vw;
  width: 360px;
  height: 60px;
  max-width: calc(100% - 12vw);
}

/* 採用情報 小ボタン（260x60, br:10px） */
.c_btn_small {
  width: 100%;
  height: 60px;
  border-radius: 10px;
}

/* ============================================
   事業内容セクション（SP）
   ============================================ */
.l_business {
  background: var(--color_white);
  padding: 60px 0 0;
}

.business_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.business_cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
}

/* 各カード（SP: 400x430） */
.c_business_card {
  position: relative;
  width: 400px;
  max-width: 100%;
  height: 430px;
  /* overflow はカード img ラッパー側で制御（boxShadow クリップ防止） */
}

.business_card_img {
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.business_card_img img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}

/* ============================================
   解体工事の事例セクション（SP）
   ============================================ */
.l_case {
  background: var(--color_white);
  padding: 60px 0 0;
}

.case_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.case_cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
}

/* case card コンポーネント（UQU9QE: column, gap: 8px） */
.c_case_card {
  width: 360px;
  max-width: calc(100% - 12vw);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.case_card_img {
  width: 100%;
  overflow: hidden;
}

.case_card_img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

/* style_QT7PO2: 17px/600 */
.case_card_title {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.362;
  color: var(--color_black);
}

/* style_SJ1AA1: 15px/400 */
.case_card_detail {
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.362;
  color: var(--color_black);
}

/* ============================================
   採用情報セクション（SP）
   ============================================ */
.l_recruit {
  background: var(--color_white);
  padding: 60px 0 0;
}

.recruit_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.recruit_content {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 30px;
}

.recruit_img img {
  width: 100%;
  height: auto;
  display: block;
}

.recruit_text {
  display: flex;
  justify-content: center;
  padding: 0 20px;
}

.recruit_text_inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  max-width: 380px;
}

.recruit_heading_group {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* style_3CZA0X: 28px/600（SP・PC 共通） */
.recruit_heading {
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.362;
  color: var(--color_black);
}

/* style_SRMKQN: 16px/400 line-height 1.5 */
.recruit_body {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color_black);
}

/* ============================================
   会社案内セクション（SP）
   ============================================ */
.l_company {
  background: var(--color_white);
  padding: 60px 0 0;
}

.company_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.company_bg_area {
  width: 100%;
  /* background-color: var(--color-sub); */
  background: url(/images/company_bg.png) 50%;
  background-size: cover;
  padding: 0;
}

.company_box {
  width: 88%;
  background: color-mix(in srgb, var(--color_white), transparent 10%);
  padding: 4% 6% 6% 6%;
  margin: 6%;
  box-sizing: border-box;
}

.company_content {
  display: flex;
  flex-direction: column-reverse;
  gap: 30px;
}

.company_top {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.company_info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 12px;
}

.company_name {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-black);
  line-height: 1.4;
}

.company_address {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-black);
  line-height: 1.8;
}

/* .company_tablebox {
  overflow-x: scroll;
} */

.company_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-black);
  line-height: 2.5;
  overflow-x: auto;
  display: block;
}

.company_table tbody {
  display: table;
  width: 100%;
}

.company_table tr {
  border-bottom: 1px solid #d0d0d0;
}

.company_table th {
  display: block;
  padding: 10px 0 6px 12px;
  white-space: nowrap;
  font-weight: 600;
  text-align: left;
  /* vertical-align: top; */
  min-width: 4.5em;
  font-size: 1rem;
  line-height: 1.5;
}

.company_table td {
  display: block;
  padding: 0 12px;
  /* vertical-align: top; */
  font-size: 0.9375rem;
  line-height: 1.5;
  white-space: nowrap;
}

.company_table td:last-child {
  padding-bottom: 8px;
  color: var(--color-gray);
  /* white-space: nowrap; */
}

/* ============================================
   フッター（SP）
   ============================================ */
.l_footer {
  width: 100%;
  padding: 60px 0 0;
}

/* --- お問い合わせエリア --- */
.footer_contact {
  /* background-color: var(--color-main); */
  background: url(/images/footer_contact_bg.png) 50%;
  background-size: cover;
  padding: 35px 0;
}

.footer_contact_inner {
  max-width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.footer_contact_text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.footer_contact_heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.footer_contact_title {
  font-size: 2rem;
  font-weight: 600;
  color: var(--color_white);
  line-height: 1.2;
}

.footer_contact_sub {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color_white);
  line-height: 1.6;
}

.footer_tel_area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.footer_tel_row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.footer_tel_label {
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color_white);
}

.footer_tel_num {
  font-size: 2rem;
  font-weight: 600;
  color: var(--color_white);
  line-height: 1.2;
}

.footer_tel_hours {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color_white);
  line-height: 1.6;
}

.footer_mail_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 300px;
  height: 60px;
  background-color: var(--color_white);
  border-radius: 30px;
  text-decoration: none;
  color: var(--color-black);
  font-size: 1.125rem;
  font-weight: 600;
  transition: opacity 0.2s ease;
}

.footer_mail_btn:hover {
  opacity: 0.8;
}

/* --- ナビゲーションエリア --- */
.footer_nav_area {
  background-color: var(--color_sub);
  padding: 35px 0;
}

.footer_nav_inner {
  max-width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.footer_logo {
  width: 160px;
  height: auto;
}

.footer_nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 22px;
}

.footer_nav_item {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-black);
  text-decoration: none;
  line-height: 1.4;
}

.footer_nav_item:hover {
  text-decoration: underline;
}

/* ============================================
   PC レイアウト（768px 以上）
   ============================================ */
@media (min-width: 768px) {

.spn { display:block; }
.pcn { display:none; }

  /* ----------------------------------------
     ヘッダー（PC）
     ---------------------------------------- */
  .l_header {
    height: var(--header_height_pc);
  }

  .header_inner {
    padding: 0;
    max-width: 1200px;
    margin: 0 auto;
    /* space-between でロゴ(240px) と右側(714px) の間に 258px の余白を確保 */
    justify-content: space-between;
    align-items: stretch; /* 子要素をヘッダー全高に引き伸ばす */
    gap: 0;
  }

  /* ロゴ */
  .header_logo_link {
    align-items: center;
    flex-shrink: 0;
    width: 240px;
  }

  .header_logo_link img {
    width: 240px;
    height: 76px;
  }

  /* PC: 右側エリアを表示 */
  .header_right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
    width: 714px;
    flex-shrink: 0;
  }

  /* CTA バー（メインカラー、上部から垂れ下がる形状） */
  .header_cta {
    background: var(--color_main);
    border-radius: 0 0 6px 6px;
    padding: 18px 36px;
    width: 383px;
    flex-shrink: 0;
  }

  .header_cta_inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
  }

  /* CTA: お見積無料 (style_JF5O60: 28px/400) */
  .header_cta_title {
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.362;
    color: var(--color_white);
    white-space: nowrap;
  }

  /* CTA: サブテキスト (style_F1ZX9V: 14px/400) */
  .header_cta_text {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.362;
    color: var(--color_white);
  }

  /* ナビゲーション */
  .header_nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px; /* ヘッダー下部に寄せる */
  }

  /* ナビリンク (style_N0DG5X: 14px/600) ※8項目対応でやや縮小 */
  .header_nav_item {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.362;
    color: var(--color_black);
    white-space: nowrap;
    transition: color 0.2s;
  }

  .header_nav_item:hover {
    color: var(--color_main);
  }

  /* SP 用ハンバーガーと SP ナビは PC で非表示 */
  .header_hamburger {
    display: none;
  }

  .l_sp_nav {
    display: none;
  }

  /* ----------------------------------------
     メインビジュアル（PC）
     ---------------------------------------- */
  .l_main_visual {
    height: 760px;
  }

  /* ----------------------------------------
     おまかせセクション（PC）
     ---------------------------------------- */
  .omakase_inner {
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 60px 0;
    max-width: 1280px;
    margin: 0 auto;
    justify-content: center;
  }

  /* テキストエリア: width 560px（内部テキストは 454px で中央揃え） */
  .omakase_text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* 内部テキストを 560px 内で中央揃え */
    gap: 12px;
    width: 560px;
    height: 340px;
    flex-shrink: 0;
  }

  /* テキストブロックを 454px 幅に統一 */
  .omakase_heading,
  .omakase_body {
    width: 454px;
  }

  .omakase_heading {
    gap: 5px;
  }

  /* PC: 完全自社請負・施工 (style_NE6WBX: 36px/600) */
  .omakase_label {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.362;
  }

  /* PC: 解体工事は当社にお任せください。(style_3CZA0X: 28px/600) */
  .omakase_title {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.362;
  }

  /* 画像エリア: 720x332 */
  .omakase_img {
    width: 680px;
    flex-shrink: 0;
    margin-right: 40px;
  }

  .omakase_img picture,
  .omakase_img img {
    width: 680px;
    height: 340px;
    object-fit: cover;
  }

  /* ----------------------------------------
     共通：セクション見出し（PC）
     ---------------------------------------- */
  .section_head {
    gap: 5px;
  }

  /* style_K4ER6Q: 26px/600 */
  .section_title {
    font-size: 1.625rem;
  }

  /* ----------------------------------------
     共通：ボタン（PC）
     ---------------------------------------- */
  .btn_arrow {
    width: 15px;
    height: 24px;
  }

  /* 大ボタン（432x74）: style_L0BC8P 26px/400 */
  .c_btn_large {
    width: 432px;
    max-width: 432px;
    height: 74px;
  }

  .c_btn_large span {
    font-size: 1.625rem;
  }

  /* 採用情報 小ボタン（260x60, br:10px） */
  .c_btn_small {
    width: 300px;
  }

  /* 事業カード上ボタン（PC: 3枚対応 left:10px, 幅広め） */
  .c_btn_business {
    left: 20px;
    bottom: 0;
    width: calc(100% - 40px);
    height: 60px;
    max-width: none;
  }

  .c_btn_business span {
    font-size: 1.125rem;
  }

  /* ----------------------------------------
     事業内容セクション（PC）
     ---------------------------------------- */
  .l_business {
    padding: 100px 0 0;
  }

  .business_inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
  }

  .business_cards {
    flex-direction: row;
    justify-content: center;
    gap: 15px;
    align-items: flex-start;
  }

  /* カード（PC: 3枚並び → 380x560） */
  .c_business_card {
    width: 390px;
    height: 420px;
  }

  .business_card_img {
    height: 390px;
  }

  .business_card_img img {
    width: 390px;
    height: 390px;
  }

  /* ----------------------------------------
     解体工事の事例セクション（PC）
     ---------------------------------------- */
  .l_case {
    padding: 100px 0 0;
  }

  .case_inner {
    max-width: 1200px;
    margin: 0 auto;
  }

  .case_cards {
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
  }

  /* UQU9QE: column, gap:8px, width:290 */
  .c_case_card {
    width: 290px;
    max-width: 290px;
  }

  .case_card_img img {
    width: 290px;
    height: 200px;
  }

  /* ----------------------------------------
     採用情報セクション（PC）
     ---------------------------------------- */
  .l_recruit {
    padding: 100px 0 0;
  }

  .recruit_inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0;
  }

  /* ZIQ5PU: row, space-between, center */
  .recruit_content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0;
  }

  /* 画像: 720x332 */
  .recruit_img {
    width: 680px;
    flex-shrink: 0;
    margin-left: 40px;
  }

  .recruit_img img {
    width: 720px;
    height: 332px;
    object-fit: cover;
  }

  /* テキストエリア: VLC8VF 560x332 */
  .recruit_text {
    width: 560px;
    height: 332px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    flex-shrink: 0;
  }

  /* U0LKZ8: column, gap:28px, width:418 */
  .recruit_text_inner {
    width: 418px;
    max-width: 418px;
  }

  /* ----------------------------------------
     会社案内セクション（PC）
     ---------------------------------------- */
  .l_company {
    padding: 100px 0 0;
  }

  .company_inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
  }

  .company_bg_area {
    height: 600px;
    background-image: url(../images/company_bg.png);
    background-size: cover;
    background-position: center;
    background-color: transparent;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .company_box {
    width: 800px;
    margin: 0;
    padding: 24px 40px 30px 40px;
    background-color: rgba(255, 255, 255, 0.9);
    box-sizing: border-box;
  }

  .company_content {
    width: 720px;
    gap: 35px;
  }

  .company_top {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0;
  }

  .company_name {
    font-size: 1.5rem;
  }

  .company_address {
    font-size: 0.875rem;
  }

  .company_table {
    font-size: 1rem;
    display: table;
    overflow-x: visible;
  }

  .company_table tbody {
    display: table-row-group;
  }

  .company_table th {
    display: table-cell;
    min-width: 100px;
    padding: 10px 12px;
  }

  .company_table td {
    display: table-cell;
    padding: 10px 12px;
  }


  /* ----------------------------------------
     フッター（PC）
     ---------------------------------------- */
  .l_footer {
    padding-top: 80px;
  }

  .footer_contact_inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
  }

  .footer_contact_text {
    align-items: flex-start;
  }

  .footer_contact_heading {
    align-items: flex-start;
  }

  .footer_contact_title {
    font-size: 2.25rem;
  }

  .footer_contact_sub {
    font-size: 1rem;
  }

  .footer_tel_area {
    align-items: flex-start;
  }

  .footer_tel_label {
    font-size: 2rem;
  }

  .footer_tel_num {
    font-size: 2.5rem;
  }

  .footer_tel_hours {
    font-size: 1rem;
  }

  .footer_nav_inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0;
  }

  .footer_logo {
    width: 200px;
  }

  .footer_nav {
    gap: 20px;
    flex-wrap: nowrap;
  }
}

/* ============================================
   強み数字帯セクション（SP）
   ============================================ */
.l_numbers {
  background: var(--color_main);
  padding: 30px 0;
}

.numbers_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0 6vw;
  max-width: 1200px;
  margin: 0 auto;
}

.numbers_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 0;
  width: 100%;
  text-align: center;
}

.numbers_divider {
  width: 60%;
  height: 1px;
  background: rgba(255,255,255,0.2);
}

.numbers_num {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color_white);
  line-height: 1;
}

.numbers_unit {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color_white);
}

.numbers_unit_small {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color_white);
}

.numbers_label {
  font-size: 0.8125rem;
  font-weight: 400;
  color: rgba(255,255,255,0.75);
  line-height: 1.4;
}

/* 数字帯セクション（PC） */
@media (min-width: 768px) {
  .l_numbers {
    padding: 40px 0;
  }

  .numbers_inner {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0;
  }

  .numbers_item {
    flex: 1;
    padding: 0 20px;
    border-right: none;
  }

  .numbers_divider {
    width: 1px;
    height: 60px;
    flex-shrink: 0;
  }

  .numbers_num {
    font-size: 3rem;
  }
}