@charset "UTF-8";

/* ==========================================================================
   Modern Detail Page Styles
   ========================================================================== */

/* 260807 ここにあった :root を common.css の :root へ統合した。**書き戻さないこと。**
   全トークンは common.css:300 付近にある。 */

body.modern-detail-theme {
  font-family: var(--font-family-base);
  color: var(--text-main);
  background-color: var(--bg-light);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-size: var(--font-size-base);
}

/* 260819 ここにあった padding-bottom: 80px は削除した。
   追従CTAぶんの余白のつもりだったが、**CTAを持たない企業ページ（company-detail /
   company-list / company-gyosyu）も同じ modern-detail-theme を使っている**ため、
   フッターの下に80pxの余白だけが残っていた（実測: /company/1039）。
   CTAがあるページ用の指定は下の `body.has-floating`（:1107）に既にあるので、そちらへ寄せる。 */

/* Common Resets & Utils */
/* 260806 color: inherit は :where() で包むこと（page.search.css:51 と同じ事故）。
   `.modern-detail-theme a` の詳細度 (0,1,1) が layout.css の `.btn-login`(0,1,0) 等に勝ち、
   page.detail.css は import.css より後に読まれるため、<a> で作ったボタンの文字色が
   全部 --text (#1A1A2E) に潰れていた。実測: /company/1 のヘッダー「ログイン」「会員登録」、
   「TOPに戻る」等が本来の #992F3B / #FFF ではなく rgb(26,26,46) になっていた。
   宣言を消すと今度はクラス無しリンクが base.css:141 の a{color:#006CD8} で青くなるため、
   :where() で詳細度を a の (0,0,1) だけに落として両立させる。 */
.modern-detail-theme a { text-decoration: none; transition: all 0.3s; }
:where(.modern-detail-theme) a { color: inherit; }
.modern-detail-theme img { max-width: 100%; height: auto; vertical-align: middle; }
/* 260820 1140px → 1180px（Design A 準拠）。※実効するのは :941 の同名ルール（後勝ち・padding:0）。
   ここは打ち消される側だが、値を残すと将来 :941 を消した時に幅が戻るのでそろえておく。 */
.modern-detail-theme .container { max-width: 1180px; margin: 0 auto; padding: 0 30px; } /* Added bottom padding for footer spacing */

/* Header & Breadcrumbs */
.detail-header-wrap {
  background: #fff;
  padding: 30px 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 40px;
}
.detail-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 15px;
  line-height: 1.4;
  color: var(--text-main);
}
.detail-breadcrumbs {
  font-size: 14px;
  color: var(--text-sub);
}
.detail-breadcrumbs ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}
.detail-breadcrumbs li { display: flex; align-items: center; }
.detail-breadcrumbs li:after { content: "/"; margin: 0 10px; color: #ccc; }
.detail-breadcrumbs li:last-child:after { content: none; }

@media (max-width: 767px) {
    .detail-breadcrumbs li,
    .detail-breadcrumbs li a {
        font-size: clamp(13px, 3.0vw, 14px);
    }
    .detail-breadcrumbs a {
        font-weight: normal;
    }
}

/* Main Layout */
.detail-content {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 40px;
  margin-bottom: 40px;
  border: 1px solid var(--border-color);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.section-title {
  font-size: 24px;
  font-weight: 700;
  margin-top: 30px;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--bg-light);
  position: relative;
}
.section-title:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--primary-color);
}

/* Detail Top Section (Image & Info) */
.detail-top-section {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 40px;
}

@media (min-width: 769px) {
  .detail-top-section {
    flex-direction: row; /* Horizontal layout on PC */
    align-items: flex-start;
  }
  .detail-images-area {
    width: 35%; /* Reduced width */
    flex-shrink: 0;
  }
  .detail-info-area {
    flex: 1; /* Right side width */
    min-width: 0;
  }
}

@media (max-width: 767px) {
   .detail-top-section {
      margin-bottom: 20px;
    } 
}

.detail-main-image {
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 10px;
}
.detail-main-image img { width: 100%; display: block; }

/* Sub Images Gallery */
.detail-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-bottom: 40px;
}
.detail-gallery-grid img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  /*cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s;*/
}
/*.detail-gallery-grid img:hover { transform: scale(1.03); opacity: 1; }*/
/* スマホでは画像を大きく表示 */
@media (max-width: 767px) {
  .detail-gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 30px;
  }
  .detail-gallery-grid img {
    min-height: 120px;
    object-fit: cover;
  }
}

.detail-sub-images { display: none; }

.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}
.detail-tag {
  background: #f1f3f5;
  color: #555;
  padding: 8px 15px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #dee2e6;
  text-decoration: none !important;
  display: inline-block;
}
.detail-tag:hover {
  background: #e9ecef;
}
@media (max-width: 767px) {
  .detail-tag {
    font-size: clamp(12px, 3.0vw, 13px) !important;
    padding: 4px 8px !important;
  }
}


.detail-period {
  font-size: 13px;
  color: var(--text-sub);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
.detail-period:before {
  content: "\f017"; /* FontAwesome clock icon if available, or just generic icon */
  font-family: FontAwesome;
  margin-right: 5px;
}

.detail-catch {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 20px;
  line-height: 1.4;
  border-bottom: 1px dashed var(--border-color);
  padding-bottom: 15px;
}
.detail-text {
  font-size: 16px;
  font-weight: normal;
  line-height: 1.8;
  margin-bottom: 20px;
  color: var(--text-main);
}

/* Info Tables */
.detail-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 40px;
}
.detail-table th {
  background: #e9ecef;
  padding: 20px;
  font-size: 15px;
  text-align: left;
  font-weight: bold;
  width: 25%;
  /*border-bottom: 1px solid #fff;*/
  border-bottom: 1px solid var(--border-color);
  vertical-align: top;
}
.detail-table td {
  font-size: 15px;
  font-weight: normal;
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: top;
}
.detail-table tr:last-child td { border-bottom: 1px solid var(--border-color); }

.detail-table td .kyuyo_info {
    margin: 5px 0 0 0;
    font-size: clamp(12px, 3.5vw, 14px);
    line-height: 1.5em;
}

/* Form Table Styles */
.detail-table.form-table {
  background: #fff;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  /*border-radius: var(--radius-md);*/
  overflow: hidden;
  margin-bottom: 40px;
}
.detail-table.form-table th {
  background: #f8f9fa;
  padding: 20px;
  font-weight: 600;
  font-size: 15px;
  color: var(--text-main);
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
  position: relative;
}
.detail-table.form-table td {
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
  background: #fff;
}
@media (max-width: 767px) {
    .detail-table.form-table th {
        border-right: none;
    }
    
    .detail-table.form-table th,
    .detail-table.form-table td {
        padding: 10px 10px;
    }
    
}

/* フォームテーブルのtd内の最初の要素の上にマージンを追加 */
.detail-table.form-table td > *:first-child {
  margin-top: 0;
}
.detail-table.form-table tr:first-of-type th,
.detail-table.form-table tr:first-of-type td {
    border-top: 1px solid #ced4da;
}
@media (max-width: 767px) {
    .detail-table.form-table tr:first-of-type th,
    .detail-table.form-table tr:first-of-type td {
        border-top: none;
    }
}

/* フォームグループの間隔調整 */
.detail-table.form-table td .form-group {
  margin-bottom: 20px;
}
.detail-table.form-table td .form-group:first-child {
  margin-top: 0;
}
.detail-table.form-table td .form-group:last-child {
  margin-bottom: 0;
}

/* フォームグループ内のラベルと入力欄の間隔 */
.detail-table.form-table td .form-group .form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-main);
}

/* フォームグループ内の入力欄とエラーメッセージの間隔 */
.detail-table.form-table td .form-group .input-text,
.detail-table.form-table td .form-group .input-select {
  margin-bottom: 0;
}

.detail-table.form-table td .form-group .error-text {
  margin-top: 8px;
  margin-bottom: 0;
}
/*.detail-table.form-table tr:last-child th,
.detail-table.form-table tr:last-child td {
  border-bottom: none;
}*/
.detail-table.form-table tr:last-of-type th,
.detail-table.form-table tr:last-of-type td {
    border-bottom: 1px solid #ced4da;
}

/* フォーム項目名と必須マークのレイアウト */
.detail-table.form-table th .badge-required,
.detail-table.form-table th .form_mark {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
}

/* フォーム入力欄のスタイル */
.detail-table.form-table input[type="text"],
.detail-table.form-table input[type="email"],
.detail-table.form-table input[type="tel"],
.detail-table.form-table input[type="password"],
.detail-table.form-table select,
.detail-table.form-table textarea {
  width: 100%;
  max-width: 500px;
  padding: 10px 15px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 15px;
  transition: border-color 0.3s, box-shadow 0.3s;
  margin-bottom: 0;
}
.detail-table.form-table input[type="text"]:focus,
.detail-table.form-table input[type="email"]:focus,
.detail-table.form-table input[type="tel"]:focus,
.detail-table.form-table input[type="password"]:focus,
.detail-table.form-table select:focus,
.detail-table.form-table textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

/* エラーメッセージと注釈テキストのスタイル */
.detail-table.form-table .error-text {
  margin-top: 8px;
  margin-bottom: 0;
  color: #dc3545;
  font-size: 13px;
  display: block;
}
.detail-table.form-table .note-text {
  margin-top: 12px;
  margin-bottom: 0;
  color: #6c757d;
  font-size: 13px;
  line-height: 1.6;
  display: block;
}

/* Buttons & Actions */
.detail-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 40px 0 0;
  padding: 30px;
  background: var(--bg-light);
  border-radius: var(--radius-md);
}
.btn-detail-apply {
  background: var(--primary);
  color: #fff !important;
  font-weight: 700;
  padding: 15px 60px;
  border-radius: 50px;
  font-size: 20px;
  box-shadow: 0 4px 10px rgba(153, 47, 59, 0.3);
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--primary);
  transition: all 0.3s;
}
.btn-detail-apply:hover {
  background: #fff;
  color: var(--primary) !important;
  box-shadow: 0 6px 15px rgba(153, 47, 59, 0.4);
}
.btn-detail-save {
  background: #fff;
  color: var(--text-sub);
  border: 1px solid var(--border-color);
  font-weight: 700;
  padding: 15px 40px;
  border-radius: 50px;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-detail-save:hover {
  background: #f0f0f0;
}
.btn-detail-save.already {
  background: #fff3cd;
  color: #856404;
  border-color: #ffeeba;
}

/* Related Jobs - 4 Column Grid (Same as Top Page) */
.related-section {
  padding: 40px 0;
}
.related-section .section-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 40px;
  color: var(--text-main);
}

/* 4列グリッドレイアウト（トップページと同じ） */
.new-job-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
/*  margin-bottom: 30px;*/
}
.new-job-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.new-job-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.new-job-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.new-job-image {
  width: 100%;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid #eee;
}
.new-job-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.new-job-card:hover .new-job-image img {
  transform: scale(1.05);
}
.new-job-body {
  padding: 15px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.new-job-company {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.new-job-title {
  font-size: 16px;
  font-weight: bold;
  color: var(--primary);
  margin-bottom: 10px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
}
.new-job-card:hover .new-job-title {
  text-decoration: underline;
}
.new-job-meta {
  font-size: 12px;
  color: #888;
  margin-top: auto;
}
.new-job-meta-row {
  display: flex;
  align-items: center;
  margin-bottom: 3px;
}
.new-job-meta-row i {
  margin-right: 5px;
  width: 2em;
  text-align: center;
  color: #005c53;
}
.new-job-meta-row i::before {
    font-size: 18px;
}
.new-job-meta-row span {
    font-size: clamp(13px, 3.0vw, 14px);
}

/* Responsive */
@media (max-width: 768px) {
  /* スマホでは全体的に文字サイズを下げる */
  body.modern-detail-theme {
    font-size: 14px !important;
  }
  /* detail-header-wrapの余白を圧縮 */
  .detail-header-wrap {
    padding: 20px 0 !important;
    margin-bottom: 20px !important;
  }
  .detail-header-wrap .container {
    padding: 0 15px!important;
  }
  .detail-title {
    font-size: clamp(18px, 5.5vw, 20px);
    margin-bottom: 10px;
  }
  .section-title {
    font-size: 18px !important;
  }
  /* detail-contentの幅を広げる（新着求人と同じ） */
  .detail-content {
    padding: 25px 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* detail-content内の要素も幅を広げる */
  .detail-content > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .detail-table th, .detail-table td {
    padding: 5px 10px;
    display: block;
    width: 100%;
    font-size: clamp(13px, 3.0vw, 15px)!important;
  }
  .detail-table th {
    background: #f8f9fa;
    /*background: transparent;
    color: var(--primary-color);*/
    border-bottom: none;
  }
  .detail-table tr:first-child th {
    border-top: 1px solid #ced4da;
  }
  .detail-table td {
  }
  .detail-info-title {
    font-size: 18px !important;
  }
  .detail-info-text {
    font-size: 14px !important;
  }
  /* detail-actionsのレイアウト修正 */
  .detail-actions {
    flex-direction: column;
    padding: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 15px !important;
    margin: 20px 0;
  }
  .btn-detail-apply, .btn-detail-save {
    width: 100% !important;
    justify-content: center;
    box-sizing: border-box;
    font-size: 14px !important;
    padding: 12px 20px !important;
    margin: 0 !important;
  }
  /* section要素も幅を広げる */
  .detail-content section {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .new-job-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  .related-section {
    margin-top: 0 !important;
    padding: 0 0 !important;
  }
  .related-section + .related-section {
    margin-top: 30px !important;
  }
  .related-section .section-title {
    font-size: 18px !important;
    margin-bottom: 20px !important;
  }
  .new-job-image {
    aspect-ratio: 16 / 9;
  }
  .new-job-title {
    font-size: 14px !important;
  }
  .new-job-company {
    font-size: 12px !important;
  }
  .new-job-meta {
    font-size: 11px !important;
  }
  .new-job-meta-row {
    width: 50%;
  }
}
@media (max-width: 480px) {
  /* さらに小さい画面では文字サイズをさらに下げる */
  body.modern-detail-theme {
    font-size: 13px !important;
  }
  /* detail-header-wrapの余白をさらに圧縮 */
  .detail-header-wrap {
    padding: 15px 0 !important;
    margin-bottom: 15px !important;
  }
  .detail-title {
    margin-bottom: 8px !important;
  }
  .section-title {
    font-size: 16px !important;
    margin-bottom: 20px;
    padding-bottom: 10px;
  }
  /* detail-contentの幅を広げる */
  .detail-content {
    padding: 20px 15px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* detail-content内の要素も幅を広げる */
  .detail-content > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .detail-table th, .detail-table td {
  }
  .detail-table th {
  }
  .detail-info-title {
    font-size: 16px !important;
  }
  .detail-info-text {
    font-size: 13px !important;
  }
  /* detail-actionsのレイアウト修正 */
  .detail-actions {
    padding: 15px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 12px !important;
  }
  .btn-detail-apply, .btn-detail-save {
    font-size: 13px !important;
    padding: 12px 20px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  /* section要素も幅を広げる */
  .detail-content section {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .related-section .section-title {
    font-size: 16px !important;
    margin-bottom: 15px !important;
  }
  .new-job-title {
    font-size: 13px !important;
  }
  .new-job-company {
    font-size: 11px !important;
  }
  .new-job-meta {
    /*font-size: 10px !important;*/
    display: flex;
    flex-wrap: wrap;
  }
    
    
  .detail-catch {
    font-size: 16px;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
  .detail-text {
    font-size: clamp(13px, 3.0vw, 14px);
  }
    
    
  /* 画像ギャラリーをさらに大きく */
  .detail-gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .detail-gallery-grid img {
    min-height: 140px !important;
  }
  .new-job-grid {
    grid-template-columns: 1fr;
  }
  .detail-sub-images {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Floating Actions */
.floating-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  border-top: 1px solid var(--border-color);
  padding: 8px 0;
  box-shadow: 0 -4px 10px rgba(0,0,0,0.1);
  z-index: 999;
  transform: translateY(100%); /* Hidden by default */
  transition: transform 0.3s ease-in-out;
  backdrop-filter: blur(5px);
}
.floating-actions .container {
  display: flex;
  justify-content: center;
  gap: 15px;
  align-items: center;
  padding: 0 30px !important;
  padding-bottom: 0 !important;
  margin: 0 auto;
  /* 260820 1140px → 1180px。ただし **このブロック自体が死にセレクタ**。
     現行の求人詳細（templates/detail.html:661）が使うのは `.floating-actions-a` で、
     中に .container を持たず :1119 の justify-content:center で画面中央寄せしている。
     実測で `.floating-actions .container` は ABSENT を確認済み。
     値だけは 1180px にそろえておく（復活させた時に40px狭くならないように）。 */
  max-width: 1180px;
  height: auto;
}
.floating-actions .btn-detail-apply,
.floating-actions .btn-detail-save {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap;
  line-height: 1.3 !important;
}
.floating-actions .btn-detail-apply {
  padding: 10px 60px !important;
  font-size: 20px !important;
}
.floating-actions .btn-detail-save {
  padding: 10px 40px !important;
  font-size: 16px !important;
}
.floating-actions .btn-detail-apply i,
.floating-actions .btn-detail-save i {
  line-height: 1;
}
.floating-actions.visible {
  transform: translateY(0);
}
@media (max-width: 768px) {
  .floating-actions {
    padding: 6px 0;
  }
  .floating-actions .container {
    padding: 0 15px !important;
    padding-bottom: 0 !important;
    width: 100%;
    box-sizing: border-box;
  }
  .floating-actions .btn-detail-apply {
    padding: 10px 20px !important;
    font-size: 16px !important;
    flex: 1.5;
  }
  .floating-actions .btn-detail-save {
    padding: 10px 15px !important;
    font-size: 14px !important;
    flex: 1;
  }
}

/* Override/Helpers */
.d-none { display: none !important; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mb-50 { margin-bottom: 50px; }

.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-50 { margin-top: 50px; }
@media (max-width: 767px) {
    .sp-mb-20 { margin-bottom: 20px; }
    .sp-mb-30 { margin-bottom: 30px; }
    .sp-mb-40 { margin-bottom: 40px; }
    .sp-mb-50 { margin-bottom: 50px; }
    
    .sp-mt-10 { margin-top: 10px; }
    .sp-mt-20 { margin-top: 20px; }
    .sp-mt-30 { margin-top: 30px; }
    .sp-mt-40 { margin-top: 40px; }
    .sp-mt-50 { margin-top: 50px; }
}


/* Modal Styles */
.modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5); z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(3px); display: none;
}
.modal-content {
  background: #fff; padding: 30px; border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); max-width: 400px; width: 90%;
  text-align: center; position: relative; animation: modalFadeIn 0.3s ease;
}
@keyframes modalFadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
.modal-close {
  position: absolute; top: 10px; right: 15px; font-size: 24px; cursor: pointer; color: #999;
}
.modal-title { font-size: 18px; font-weight: 700; margin-bottom: 15px; color: var(--text-main); }
.modal-message { font-size: 15px; color: var(--text-sub); margin-bottom: 25px; line-height: 1.6; }
.modal-actions { display: flex; flex-direction: column; gap: 15px; }
.btn-modal-login {
  display: block; padding: 12px; background: var(--primary-color);
  color: #fff; border-radius: 30px; font-weight: 700; text-decoration: none;
}
.btn-modal-register {
  display: block; padding: 12px; background: #fff;
  color: var(--primary); border: 2px solid var(--primary);
  border-radius: 30px; font-weight: 700; text-decoration: none;
}

/* フォーム下部のエリアのスタイル */
.agreement-area {
	margin-top: 30px;
	margin-bottom: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--border-color);
}

.submit-area {
	margin-top: 30px;
	margin-bottom: 40px;
	padding-top: 20px;
}


/* ===== DESIGN A: 求人詳細（mockup detail-a.html 260703 版から移植） =====
   ヘッダー/フッターは layout.css、トークンは common.css、CTA/newsearch-band は page.top.css を参照。
   detail系テンプレートのみが本ファイルを読むため、ページ全体系は .modern-detail-theme でスコープ */

body.modern-detail-theme { background: var(--bg-light); color: var(--text); line-height: 1.7; }
/* 260820 1140px → 1180px（Design A = mockup/design-a.html:38 準拠）。**これが実効値**。
   ガターのブレークポイントも 1179px → 1219px へ連動させること（下の Responsive 参照）。 */
.modern-detail-theme .container { max-width: 1180px; margin: 0 auto; padding: 0; }

/* ---- Page Header（パンくず＋タイトル帯） ---- */
.page-header { background: var(--white); border-bottom: 1px solid var(--border); padding: 18px 0 22px; }
.page-header .breadcrumbs { margin-bottom: 10px; }
.page-header .breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; gap: 2px; font-size: .78rem; color: var(--text-muted); margin: 0; padding: 0; }
.page-header .breadcrumbs ol li { display: flex; align-items: center; }
.page-header .breadcrumbs ol li:after { content: none; }
.page-header .breadcrumbs ol li a { color: var(--text-muted); transition: color .2s; }
.page-header .breadcrumbs ol li a:hover { color: var(--primary); }
.page-header .breadcrumbs ol li .material-icons-outlined { font-size: 14px; margin: 0 2px; }
/* 260829 パンくず末尾（求人名など現在地）の扱い。
   以前は pc/index.php が mb_strimwidth で60半角幅に切っており、PCでも途中で「…」になっていた。
   PHP側の切り詰めをやめたので、PCは ol の flex-wrap で折り返して全文を出す。
   SPだけ2行を超えたぶんを省略する。line-clamp を効かせるため li の display を上書きする。
   max-width:100% が無いと、長いテキストの li が max-content 幅のままはみ出す。 */
@media (max-width: 767px) {
  .page-header .breadcrumbs ol li:last-child {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    max-width: 100%;
  }
}
.detail-title { font-size: 1.55rem; font-weight: 700; color: var(--text); line-height: 1.45; margin-bottom: 6px; }
.detail-header-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: .84rem; color: var(--text-muted); }
.detail-header-meta .material-icons-outlined { font-size: 16px; }
.detail-header-meta span { display: flex; align-items: center; gap: 4px; }
a.company-link { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
a.company-link:hover { color: var(--primary-dark); }

/* ---- Detail Main Layout ---- */
/* 260819 タイトル帯（.page-header）と画像セクションがぴったりくっついていた。
   要素は class="container detail-wrap" で、936行の .modern-detail-theme .container (0,2,0) が
   padding:0 を宣言しており、モックアップから移した .detail-wrap (0,1,0) が詳細度で負けて
   上下の余白がまるごと消えていた（実測：page-header の bottom も detail-hero の y も 244px で密着。
   モックアップは 244 → 272 の 28px 空き）。
   左右のガターは .container 側（PC 30px / 1219px以下 20px）に任せ、ここは上下だけを
   .container より高い詳細度 (0,3,0) で戻す。メディアクエリ内の .container (0,2,0) にも勝つ。 */
.modern-detail-theme .container.detail-wrap { padding-top: 28px; padding-bottom: 40px; }
.detail-hero { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 36px; align-items: start; margin-bottom: 25px; }

/* Gallery */
.detail-gallery-a { overflow: hidden; }
.main-image-wrap { border-radius: var(--radius-lg); overflow: hidden; background: var(--accent); margin-bottom: 10px; aspect-ratio: 4/3; }
.main-image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.thumb-list { display: flex; gap: 0; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.thumb-list::-webkit-scrollbar { display: none; }
.thumb-item { flex: 0 0 80px; height: 60px; border-radius: 8px; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: border-color .2s; }
.thumb-item.active { border-color: var(--primary); }
.thumb-item img { width: 100%; height: 100%; object-fit: cover; }

/* Sidebar */
.detail-sidebar { background: var(--white); border-radius: var(--radius-lg); padding: 24px; border: 1px solid var(--border); }
.detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.badge { font-size: .72rem; font-weight: 500; padding: 3px 10px; border-radius: 4px; white-space: nowrap; }
.badge-type { background: var(--primary-pale); color: var(--primary); }
.badge-pickup { background: #FFF3CD; color: #856404; }
.badge-new { background: #E3F0FF; color: #1565C0; }
/* 260806 急募（C-2 parents_ord=5）。page.search.css と同一定義。
   company-detail.html は page.detail.css と page.search.css の両方を読むため、
   片方だけに入れると読み込み順で見た目が変わる。必ず両方を同じ値に保つこと。 */
.badge-urgent { background: #FDE7E9; color: #C62828; font-weight: 700; }
.detail-catch { font-size: 1rem; font-weight: 700; color: var(--text); line-height: 1.6; margin-bottom: 18px; border-left: 3px solid var(--primary); padding-left: 12px; }
.detail-text { font-size: .92rem; color: var(--text-light); line-height: 1.9; }
.highlight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.highlight-tile { background: var(--primary-pale); border-radius: var(--radius); padding: 12px 14px; }
.highlight-tile-full { grid-column: 1 / -1; }
.highlight-tile .hl-label { font-size: .7rem; color: var(--primary); letter-spacing: .5px; font-weight: 500; display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.highlight-tile .hl-label .material-icons-outlined { font-size: 14px; }
.highlight-tile .hl-value { font-size: .95rem; font-weight: 700; color: var(--text); line-height: 1.4; }
.action-block { display: flex; flex-direction: column; gap: 10px; }
.btn-apply-a { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 16px 24px; background: var(--primary); color: var(--white); border: none; border-radius: var(--radius); font-size: 1rem; font-weight: 700; box-shadow: 0 4px 16px rgba(153,47,59,0.25); cursor: pointer; transition: all .2s; font-family: inherit; }
.btn-apply-a:hover { background: var(--primary-dark); transform: translateY(-1px); }
.btn-apply-a .material-icons-outlined { font-size: 20px; }
/* 応募済み・受付終了の無効状態（本体実装用に追加） */
.btn-apply-a.already, .btn-apply-a.disabled { background: var(--text-muted); box-shadow: none; cursor: default; pointer-events: none; transform: none; }
.btn-save-a { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px 24px; background: var(--white); color: var(--primary); border: 1.5px solid var(--primary); border-radius: var(--radius); font-size: .95rem; font-weight: 600; cursor: pointer; transition: all .2s; font-family: inherit; }
.btn-save-a:hover, .btn-save-a.active { background: var(--primary-pale); }
.btn-save-a .material-icons-outlined, .btn-save-a .material-icons { font-size: 20px; }
.btn-phone-a { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px 24px; background: #E8F5E9; color: #2E7D32; border: 1.5px solid #A5D6A7; border-radius: var(--radius); font-size: .92rem; font-weight: 600; cursor: pointer; transition: all .2s; font-family: inherit; text-decoration: none; }
.btn-phone-a:hover { background: #C8E6C9; }
.btn-phone-a .material-icons-outlined { font-size: 20px; }
/* 260820 会員登録なしで送れる問い合わせ（紹介用カスタマイズ）。
   主CTAの「応募する」（塗り・臙脂）を食わないよう、電話応募と同じ「淡い地＋枠線」の
   従ボタンのトーンに揃える。色だけ電話（緑）と分けて役割の違いを出す。
   padding も .btn-phone-a と同じ 14px/24px にすること（主CTAの 16px より小さい＝従）。 */
.btn-inquiry-a { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px 24px; background: #E3F2FD; color: #1565C0; border: 1.5px solid #90CAF9; border-radius: var(--radius); font-size: .92rem; font-weight: 600; cursor: pointer; transition: all .2s; font-family: inherit; text-decoration: none; }
.btn-inquiry-a:hover { background: #BBDEFB; }
.btn-inquiry-a .material-icons-outlined { font-size: 20px; }
.btn-inquiry-a.already { background: var(--bg-light); color: var(--text-muted); border-color: var(--border); cursor: default; pointer-events: none; }

/* 問い合わせフォーム（toiawase.html / -confirm / -thankyou）の対象求人カード。
   「どの求人への問い合わせか」を見失わせないための表示。 */
.toiawase-target { background: var(--bg-light); border-left: 4px solid var(--primary); border-radius: var(--radius); padding: 18px 22px; }
.toiawase-target-label { font-size: .75rem; color: var(--primary); font-weight: 600; margin-bottom: 6px; }
.toiawase-target-title { font-size: 1.05rem; font-weight: 700; color: var(--text); line-height: 1.5; margin-bottom: 4px; }
.toiawase-target-company { font-size: .88rem; color: var(--text-light); margin-bottom: 8px; }
.toiawase-target-link { font-size: .82rem; color: var(--primary); text-decoration: underline; }

/* ---- Detail Sections ---- */
.detail-section { background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 32px; margin-bottom: 18px; }
.detail-section-header { margin-bottom: 22px; }
.detail-section-title { font-size: 1.2rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.detail-section-title .material-icons-outlined { font-size: 22px; color: var(--primary); }
.detail-section-divider { border: none; border-bottom: 2px solid var(--primary-pale); margin-bottom: 22px; }
.job-description { font-size: .92rem; color: var(--text-light); line-height: 1.9; }
.job-description p { margin-bottom: 12px; }
.detail-conditions { display: flex; flex-wrap: wrap; gap: 4px; }
.header-conditions { margin-top: 12px; }

/* Detail DL table */
.detail-dl .dl-row { display: grid; grid-template-columns: 180px 1fr; gap: 16px 24px; padding: 16px 0; border-bottom: 1px dashed var(--border); }
.detail-dl .dl-row:first-child { padding-top: 0; }
.detail-dl .dl-row:last-child { border-bottom: none; padding-bottom: 0; }
.detail-dl dt { font-size: .8rem; font-weight: 600; color: var(--primary); display: flex; align-items: flex-start; gap: 5px; padding-top: 2px; }
.detail-dl dt .material-icons-outlined { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.detail-dl dd { font-size: .9rem; color: var(--text); line-height: 1.7; }
.detail-dl dd strong { font-weight: 700; }

/* Map link */
.btn-map { display: inline-flex; align-items: center; gap: 4px; background: var(--white); color: var(--primary); border: 1px solid var(--primary); border-radius: 6px; padding: 3px 8px; font-size: .72rem; font-weight: 500; cursor: pointer; font-family: inherit; vertical-align: middle; text-decoration: none; }
.btn-map:hover { background: var(--primary-pale); }

/* Company card */
.company-card { display: flex; align-items: center; gap: 16px; padding: 18px; background: var(--bg-light); border-radius: var(--radius); margin-bottom: 20px; }
/* 260827 flex-shrink:0 → flex:none。page.top.css:1877 の .company-logo（TOPの企業ロゴ一覧用）に
   flex:1 が入っており、一括指定に含まれる flex-grow:1 / flex-basis:0% は flex-shrink だけでは
   打ち消せない。結果 width:64px を無視してロゴ枠が横いっぱいに伸びていた（山田様指摘 No.6）。
   一括指定は一括指定で打ち消すこと。 */
.company-card .company-logo { width: 64px; height: 64px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.company-card .company-logo .material-icons-outlined { font-size: 32px; color: var(--text-muted); }
.company-card .company-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.company-info { flex: 1; min-width: 0; }
/* 260820 h1 と重複していた h3 を p.company-name へ変えたのでセレクタも移す。
   要素セレクタ（.company-info h3）のままだとスタイルが丸ごと外れる。 */
.company-info .company-name { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.company-info a.company-url { font-size: .82rem; color: var(--primary); display: flex; align-items: center; gap: 4px; }
.company-info a.company-url .material-icons-outlined { font-size: 14px; }

/* Company message */
.company-message { background: var(--bg-light); border-radius: 0; padding: 24px 28px; border-left: 4px solid var(--primary); }
.company-message-title { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.company-message-body { font-size: .92rem; color: var(--text-light); line-height: 1.9; }

/* Video */
.video-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--radius); background: var(--accent); }
.video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Apply section bottom */
.apply-section-cta { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; max-width: 480px; margin-left: auto; margin-right: auto; }

/* ---- Related jobs（detail用の上書き） ---- */
.modern-detail-theme .section { padding: 36px 0 28px; }
/* 260827 text-align:left を明示。page.top.css:1805 の .section-header { text-align:center } が
   全ページに配信されており、求人詳細の3セクション（別の求人／こんな求人も／同エリア）が
   中央揃えになっていた。モックアップ（mockup/detail-a.html:186）は指定なし＝左揃えが正（山田様指摘 No.7）。
   .section-header を使うのは detail.html の3箇所だけなので、ここで打ち消せば影響は閉じる。 */
.modern-detail-theme .section-header { margin-bottom: 28px; text-align: left; }
.modern-detail-theme .section-title { font-size: 1.25rem; font-weight: 700; color: var(--text); margin-top: 0; border-bottom: none; padding-bottom: 0; }
.modern-detail-theme .section-title:after { content: none; }
/* 260820 1140px → 1180px。関連求人の横スクロール枠は本文の .container と左右をそろえる
   ための幅なので、コンテナ幅を変えたらここも必ず追随させる（ずれると関連求人だけ内側に入る） */
.related-jobs-scroll-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.modern-detail-theme .job-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.modern-detail-theme .job-card { background: var(--white); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); transition: all .2s; }
.modern-detail-theme a.job-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.modern-detail-theme .job-card-img { width: 100%; height: 160px; object-fit: cover; }
.modern-detail-theme .job-card-body { padding: 16px; }
.modern-detail-theme .job-card-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.modern-detail-theme .job-card-title { font-size: .92rem; font-weight: 600; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.modern-detail-theme .job-card-company { font-size: .8rem; color: var(--text-muted); margin-bottom: 8px; }
.modern-detail-theme .job-card-meta { display: flex; flex-direction: column; gap: 3px; }
.modern-detail-theme .job-card-meta-row { display: flex; align-items: center; gap: 5px; font-size: .8rem; color: var(--text-light); }
.modern-detail-theme .job-card-meta-row .material-icons-outlined { font-size: 15px; color: var(--text-muted); }
.modern-detail-theme .scroll-hint { display: none; justify-content: center; align-items: center; gap: 5px; margin-top: 10px; font-size: .8rem; color: var(--text-muted); }
.modern-detail-theme .scroll-hint .material-icons-outlined { font-size: 16px; animation: swipe 1.5s ease-in-out infinite; }

/* Tag cloud */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; padding: 28px 0; }
.tag-cloud a { font-size: .82rem; padding: 6px 14px; background: var(--white); color: var(--text-light); border: 1px solid var(--border); border-radius: 999px; transition: all .2s; }
.tag-cloud a:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-pale); }

/* ---- Bottom Navigation ---- */
.bottom-nav-wrap { background: var(--bg-light); border-top: 1px solid var(--border); padding: 32px 0 36px; }
.btn-back-search { display: inline-flex; align-items: center; gap: 6px; padding: 12px 28px; background: var(--primary); color: var(--white); border: none; border-radius: 30px; font-size: .95rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .2s; margin-bottom: 24px; }
.btn-back-search:hover { background: var(--primary-dark); }
.bottom-nav-buttons { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
/* 260807 基底の .btn-bottom-nav はレイアウト（padding/radius/flex）しか持たず、色は修飾子側に
   しか無かった。そのため修飾子なしで置かれている「企業一覧TOPに戻る」「IT・通信の企業一覧」
   （company-detail.html / company-gyosyu.html / detail-map.html）が
   background: transparent / color: rgb(26,26,46) になり、隣の塗りボタンと並んでボタンに見えなかった。
   基底にセカンダリ配色（白背景＋ブランド枠＋ブランド文字）を持たせる。
   .btn-bottom-company / .btn-bottom-top はこの後に同詳細度で宣言しているので従来どおり勝つ。 */
.btn-bottom-nav { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; border-radius: var(--radius); font-size: .92rem; font-weight: 600; transition: all .2s; text-decoration: none; background: var(--white); color: var(--primary); border: 2px solid var(--primary); }
.btn-bottom-nav:hover { background: var(--primary-pale); color: var(--primary); }
.btn-bottom-company { background: var(--white); color: var(--primary); border: 2px solid var(--primary); }
.btn-bottom-company:hover { background: var(--primary-pale); }
.btn-bottom-top { background: var(--primary); color: var(--white); border: 2px solid var(--primary); }
.btn-bottom-top:hover { background: var(--primary-dark); }

/* ---- Floating Action Bar ---- */
/* 260819 80px は実際のCTA高さ（PCで約63px＝上下padding 10px＋ボタン高）と合っておらず、
   ページ最下部までスクロールするとフッターの下に十数pxの帯が見えていた（実測: /detail/31）。
   ここの値はJSが動かないとき用のフォールバックに下げ、実寸は
   common/js/detail.designa.js の syncFloatingCtaSpace() が読み込み後・リサイズ時に上書きする。
   ※SP（≤768px）は下の @media が 0 に戻し、代わりに .footer-bottom 側で余白を作る方式。
     JS側も同じブレークポイントで判定して body には触らない。両方が余白を作ると二重になる。 */
body.has-floating { padding-bottom: 64px; }
.floating-actions-a { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(255,255,255,0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(255,255,255,0.4); padding: 10px 20px; display: flex; align-items: center; justify-content: center; gap: 10px; z-index: 80; transform: translateY(100%); transition: transform .3s ease; box-shadow: 0 -4px 24px rgba(0,0,0,0.08); }
.floating-actions-a.show { transform: translateY(0); }
.floating-job-title { flex: 1; font-size: .82rem; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: none; }
.floating-actions-a .btn-save-float { display: flex; align-items: center; gap: 5px; padding: 10px 16px; border: 1.5px solid var(--primary); border-radius: 8px; font-size: .84rem; font-weight: 600; color: var(--primary); background: var(--white); cursor: pointer; white-space: nowrap; font-family: inherit; flex-shrink: 0; transition: all .2s; text-decoration: none; }
.floating-actions-a .btn-save-float:hover { background: var(--primary-pale); }
.floating-actions-a .btn-apply-float { flex: 1; max-width: 280px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 24px; background: var(--primary); color: var(--white); border: none; border-radius: 8px; font-size: .92rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: all .2s; text-decoration: none; }
.floating-actions-a .btn-apply-float:hover { background: var(--primary-dark); }
.floating-actions-a .btn-apply-float.already, .floating-actions-a .btn-apply-float.disabled { background: var(--text-muted); cursor: default; pointer-events: none; }
.btn-phone-float { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 10px 14px; border: 1.5px solid #A5D6A7; border-radius: 8px; font-size: .84rem; font-weight: 600; color: #2E7D32; background: #E8F5E9; cursor: pointer; white-space: nowrap; font-family: inherit; flex-shrink: 0; transition: all .2s; text-decoration: none; }
.btn-phone-float:hover { background: #C8E6C9; }
.btn-phone-float .material-icons-outlined { font-size: 18px; }

/* ---- Responsive ---- */

/* 260807 【769〜1139px でコンテンツが画面の左右端に貼り付いていた】
   .modern-detail-theme .container（:941）は padding:0 で、左右の余白を
   max-width のセンタリングだけに頼っていた。コンテナ幅を下回ると余白が消えるのに、
   ガターを入れる指定は下の max-width:768px にしか無く、その間が素通しになっていた。
   実測（/detail/12 の .container 左ガター）: @1200=30px / @1139=0 / @1000=0 / @860=0 / @769=0 / @768=20px
   260820 コンテナを 1140px → 1180px に広げたため、このブレークポイントも
   1179px → 1219px へ連動させた（1180 + 20*2 = 1220）。**片方だけ直すと
   1180〜1219px に同じ素通しの帯が復活する。**
   page.search.css:1904 / page.top.css:1941 / page.blog.css:74 と同値。
   ※必ず下の 768 ブロックより前に置くこと（詳細度が同じ (0,2,0) なので後勝ち）。 */
@media (max-width: 1219px) {
  .modern-detail-theme .container { padding: 0 20px; }
}

@media (max-width: 1024px) {
  .detail-hero { grid-template-columns: 1fr 340px; gap: 28px; }
}

@media (max-width: 768px) {
  .modern-detail-theme .container { padding: 0 20px; }
  .detail-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .detail-gallery-a { min-width: 0; }
  .detail-sidebar { position: static; min-width: 0; }
  .highlight-grid { grid-template-columns: 1fr 1fr; }
  .detail-section { padding: 22px 18px; }
  .company-card { padding: 14px; gap: 12px; }
  /* SPでは枠だけのプレースホルダ（business アイコン）は場所を食うだけなので隠す。
     260804 企業ロゴ（company.logo）の登録が可能になったため、実画像がある企業だけは表示する */
  .company-card .company-logo { display: none; }
  .company-card .company-logo.has-logo { display: flex; width: 48px; height: 48px; }
  .company-info h3 { font-size: .92rem; }
  .company-info a.company-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
  .company-message { padding: 18px 16px; }
  .main-image-wrap { border-radius: 0; }
  .detail-dl .dl-row { grid-template-columns: 1fr; gap: 4px; }
  .detail-dl dt { font-size: .76rem; }
  .detail-title { font-size: 1.25rem; }
  .modern-detail-theme .job-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .floating-actions-a { transform: translateY(0); padding: 8px 10px; gap: 6px; }
  body.has-floating { padding-bottom: 0; }
  .modern-detail-theme .footer-bottom { padding-bottom: 80px; }
  .floating-actions-a .btn-save-float { padding: 10px 10px; font-size: .78rem; }
  .btn-phone-float { padding: 10px 8px; font-size: .78rem; }
  .floating-actions-a .btn-apply-float { max-width: none; padding: 10px 8px; font-size: .82rem; }
  .apply-float-prefix { display: none; }
  .btn-back-search, .btn-bottom-nav { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .detail-header-meta { flex-direction: column; align-items: flex-start; gap: 6px; }
  .highlight-grid { grid-template-columns: 1fr; }
  .related-jobs-scroll-wrap { max-width: none; margin: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 20px 8px; }
  .related-jobs-scroll-wrap .job-grid { display: flex; gap: 12px; scroll-snap-type: x mandatory; width: max-content; }
  .related-jobs-scroll-wrap .job-card { min-width: 72vw; max-width: 72vw; flex-shrink: 0; scroll-snap-align: start; }
  .modern-detail-theme .job-grid + .scroll-hint { display: flex; }
}

/* ---- 当社について（概要）----
   260810 追加。資料「260803/3-求人詳細ページ.png」の指定どおり、
   左に縦罫のある淡いグレーの囲みにする。本文は company.catch（企業一覧と同じ文章）。
   ※メディアクエリの外に置くこと（上のブロックは max-width:767px の中）。 */
.modern-detail-theme .company-about {
  border-left: 3px solid var(--primary);
  background: var(--bg-light);
  padding: 18px 20px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.modern-detail-theme .company-about p {
  margin: 0;
  /* 260810 意匠検品の指摘で .detail-text（:980 アピールポイント本文）と数値を揃えた。
     font-weight を書かないと body の 500 を継承し、**同じページの本文より太くなる**。 */
  font-size: .92rem;
  font-weight: 400;
  line-height: 1.9;
  color: var(--text-light);
}
@media screen and (max-width: 767px) {
  .modern-detail-theme .company-about { padding: 14px 16px; }
  /* SPでも .detail-text と同じ格にする（縮めると本文よりサイズが下がって逆転する） */
}