/*
================================================================
越後精工 採用サイト テーマスタイルシート
assets/css/style.css

【構成】
  1. CSS変数（カラー・タイポグラフィトークン）
  2. ベーススタイル
  3. プレースホルダー画像（ワイヤー確認用 / 本番削除）
  4. data-cmsラベル（ワイヤー確認用 / 本番削除）
  5. コンポーネント別スタイル

【Tailwindについて】
  現時点はTailwind CDNを使用（functions.phpでenqueue済み）。
  本番再コーディング時に削除し、このファイルにカスタムCSSを集約する。
================================================================
*/

/* ============================================================
   1. CSS変数（カラー・タイポグラフィトークン）
   WP移行時: theme.json の color palette / typography に対応
   ============================================================ */
:root {
  /* ワイヤーフレーム用グレースケールトークン */
  --wf-bg:          #ffffff;
  --wf-bg-alt:      #f5f5f5;
  --wf-bg-dark:     #e0e0e0;
  --wf-border:      #cccccc;
  --wf-text:        #333333;
  --wf-text-sub:    #666666;
  --wf-placeholder: #d4d4d4;
  --wf-accent:      #999999;

  /* WP移行時に置き換えるカラートークン（製造業: 紺×白×赤） */
  --color-primary:  #1a2744;   /* ディープブルー → メイン色 */
  --color-accent:   #c0392b;   /* レッド → CTAボタン */
  --color-text:     #1a1a1a;
  --color-bg:       #ffffff;
  --color-bg-sub:   #f5f5f5;

  /* タイポグラフィトークン */
  --font-base:    'Noto Sans JP', sans-serif;
  --font-heading: 'Noto Sans JP', sans-serif; /* 移行後: 游ゴシック Bold */
}

/* ============================================================
   2. ベーススタイル
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-base);
  color: var(--wf-text);
  background: var(--wf-bg);
  margin: 0;
  padding: 0;
}

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

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

/* ============================================================
   3. プレースホルダー画像（ワイヤー確認用 / 本番時に削除）
   ============================================================ */
.placeholder {
  background-color: var(--wf-placeholder);
  background-image:
    linear-gradient(45deg, #c8c8c8 25%, transparent 25%),
    linear-gradient(-45deg, #c8c8c8 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #c8c8c8 75%),
    linear-gradient(-45deg, transparent 75%, #c8c8c8 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, 10px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  line-height: 1.6;
}

/* ============================================================
   4. data-cmsラベル（ワイヤー確認用 / 本番時に削除）
   data-cms属性: WP移行時のACFフィールド名を示す
   ============================================================ */
[data-cms]::before {
  content: attr(data-cms);
  display: block;
  font-size: 10px;
  color: #aaa;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

/* ============================================================
   5. コンポーネント別スタイル
   ============================================================ */

/* --- ヘッダー --- */
#site-header {
  /* sticky は Tailwind の sticky top-0 z-50 で制御 */
}

/* ハンバーガーメニュー開閉アニメーション（フェードイン） */
#js-sp-nav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* --- SP固定エントリーボタン ---
   初期は画面外に隠し、スクロールで表示（ヒーローCTAと重複させない）
   iOSセーフエリア（ホームインジケーター領域）にも対応 */
.sp_fixed_cta {
  transform: translateY(100%);
  transition: transform 0.3s ease;
  will-change: transform;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.sp_fixed_cta.is-visible {
  transform: translateY(0);
}

/* page-entry では SP固定CTAを完全非表示 */
.page-entry ~ .sp_fixed_cta,
body.page-entry .sp_fixed_cta {
  display: none;
}

/* --- スケジュールタイムライン --- */
.schedule_item:last-child {
  padding-bottom: 0;
}

/* --- SPナビ フルスクリーンモーダル ---
   ヘッダー（z-index:10000）より前面に出し、内部に閉じるボタン行を持つ
   フェードイン/アウト：opacity + visibility で制御 */
.sp-nav-modal {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #fff;
  z-index: 10001;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.sp-nav-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* WP管理バー表示時の位置調整 */
.admin-bar .sp-nav-modal {
  top: 46px;
  height: calc(100vh - 46px);
}
@media (min-width: 783px) {
  .admin-bar .sp-nav-modal {
    top: 32px;
    height: calc(100vh - 32px);
  }
}
/* 閉じるボタン行：ヘッダーと同じ高さ・右端に揃える */
.sp-nav-close-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 72px;
  padding: 0 16px;
  border-bottom: 1px solid #f3f4f6;
}

/* --- フッターロゴを白に反転 --- */
.footer_logo_img {
  filter: brightness(0) invert(1);
}

/* --- CF7 エントリーフォーム スタイリング --- */

/* CF7 が改行を <br> に変換するのを無効化 */
.page-entry .wpcf7-form br {
  display: none;
}

/* フォーム全体: 縦並び gap-6 相当 */
.page-entry .wpcf7 form.wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* フィールドラッパー <p> のマージンリセット */
.page-entry .wpcf7-form p,
.page-entry .wpcf7-form .cf7-field {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ラベル */
.page-entry .wpcf7-form label,
.page-entry .wpcf7-form .cf7-label {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ラベル行（テキスト＋バッジ横並び） */
.page-entry .cf7-label-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-entry .cf7-label-text {
  font-size: 14px;
  font-weight: 700;
}

/* 必須/任意バッジ */
.page-entry .cf7-badge {
  display: inline-block;
  font-size: 12px;
  padding: 1px 8px;
}
.page-entry .cf7-badge--required {
  background-color: #1f2937;
  color: #fff;
}
.page-entry .cf7-badge--optional {
  background-color: #d1d5db;
  color: #374151;
}

/* text / email / tel */
.page-entry .wpcf7-form-control.wpcf7-text,
.page-entry .wpcf7-form-control.wpcf7-email,
.page-entry .wpcf7-form-control.wpcf7-tel {
  width: 100%;
  height: 48px;
  border: 1px solid #9ca3af;
  padding: 0 16px;
  font-size: 14px;
  font-family: inherit;
  border-radius: 0;
  background: #fff;
}

/* select */
.page-entry .wpcf7-form-control.wpcf7-select {
  width: 100%;
  height: 48px;
  border: 1px solid #9ca3af;
  padding: 0 16px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  border-radius: 0;
}

/* textarea */
.page-entry .wpcf7-form-control.wpcf7-textarea {
  width: 100%;
  min-height: 120px;
  border: 1px solid #9ca3af;
  padding: 12px 16px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  border-radius: 0;
}

/* 注記テキスト */
.page-entry .cf7-note {
  font-size: 12px;
  color: #6b7280;
}

/* ラジオボタン */
.page-entry .wpcf7-form input[type="radio"],
.page-entry .wpcf7-form input[type="checkbox"] {
  accent-color: #1f2937;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.page-entry .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.page-entry .wpcf7-radio .wpcf7-list-item {
  margin: 0 !important;
}
.page-entry .wpcf7-radio .wpcf7-list-item label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: normal;
  cursor: pointer;
}

/* 個人情報セクション */
.page-entry .cf7-privacy {
  background-color: #f9fafb;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.page-entry .cf7-privacy-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}
.page-entry .cf7-privacy .cf7-privacy-text {
  display: block;
  font-size: 12px;
  color: #4b5563;
  line-height: 1.6;
  margin: 0;
}
.page-entry .cf7-privacy .cf7-privacy-text a {
  text-decoration: underline;
}

/* 承認チェックボックス */
.page-entry .wpcf7-acceptance .wpcf7-list-item {
  margin: 0 !important;
}
.page-entry .wpcf7-acceptance .wpcf7-list-item label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: normal;
  cursor: pointer;
}

/* 送信ボタンラッパー */
.page-entry .cf7-submit-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0;
}

/* 送信ボタン */
.page-entry .wpcf7-form input[type="submit"] {
  width: 100%;
  height: 64px;
  background-color: #1f2937;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: inherit;
  display: block;
}
@media (min-width: 1024px) {
  .page-entry .wpcf7-form input[type="submit"] {
    width: 320px;
  }
}

/* 送信後の注記 */
.page-entry .cf7-submit-note {
  font-size: 12px;
  color: #6b7280;
}

/* バリデーションエラー */
.page-entry .wpcf7-not-valid {
  border-color: #ef4444 !important;
}
.page-entry .wpcf7-not-valid-tip {
  font-size: 12px;
  color: #ef4444;
  margin-top: 4px;
  display: block;
}

/* レスポンスメッセージ */
.page-entry .wpcf7-response-output {
  border: 1px solid #9ca3af;
  padding: 12px 16px;
  font-size: 14px;
  margin: 0 !important;
}

/* --- エントリーフォーム ステップインジケーター --- */
.entry_step_num {
  background: #e5e7eb;
  color: #9ca3af;
}
.entry_step.is-active .entry_step_num {
  background: #1f2937;
  color: #fff;
  font-weight: bold;
}
.entry_step_label {
  color: #9ca3af;
}
.entry_step.is-active .entry_step_label {
  color: #1f2937;
  font-weight: bold;
}

/* --- エントリーフォーム 確認するボタン --- */
.entry_check_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 64px;
  background: #1f2937;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  border: none;
  cursor: pointer;
  font-family: inherit;
  margin: 8px auto 0;
}
@media (min-width: 1024px) {
  .entry_check_btn { width: 320px; }
}
.entry_check_btn:not(:disabled):hover { background: #374151; }
.entry_check_btn:disabled {
  background: #d1d5db;
  color: #9ca3af;
  cursor: not-allowed;
}

/* --- エントリーフォーム 確認画面 --- */
.entry_confirm {
  display: none;
}
.confirm_header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 32px;
}
.confirm_header_en {
  font-size: 12px;
  color: #9ca3af;
  letter-spacing: 0.1em;
}
.confirm_header_title {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.2;
}
@media (min-width: 1024px) {
  .confirm_header_title { font-size: 32px; }
}
.confirm_header_desc {
  font-size: 14px;
  color: #4b5563;
  margin-top: 4px;
}
.confirm_table {
  border-bottom: 1px solid #e5e7eb;
}
.confirm_row {
  display: flex;
  gap: 16px;
  border-top: 1px solid #e5e7eb;
  padding: 14px 0;
}
.confirm_label {
  font-size: 14px;
  font-weight: bold;
  width: 160px;
  flex-shrink: 0;
}
.confirm_value {
  font-size: 14px;
  color: #374151;
  flex: 1;
  line-height: 1.6;
}
.confirm_actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}
@media (min-width: 1024px) {
  .confirm_actions {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.confirm_back_btn {
  background: none;
  border: 1px solid #9ca3af;
  color: #6b7280;
  font-size: 14px;
  padding: 0 24px;
  height: 48px;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
}
@media (min-width: 1024px) {
  .confirm_back_btn { width: auto; }
}
.confirm_back_btn:hover { background: #f9fafb; }
.confirm_send_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1f2937;
  color: #fff;
  border: none;
  font-size: 16px;
  font-weight: bold;
  height: 64px;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
}
@media (min-width: 1024px) {
  .confirm_send_btn { width: 320px; }
}
.confirm_send_btn:hover { background: #374151; }

/* --- エントリーフォーム 完了画面 --- */
.entry_complete {
  display: none;
  text-align: center;
  padding: 48px 0;
}
.entry_complete_title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 24px;
}
.entry_complete_text {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.8;
}

/* --- FAQ アコーディオン --- */
.faq_question {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.faq_question:focus-visible {
  outline: 2px solid #1a2744;
  outline-offset: -2px;
}
.faq_label {
  flex-shrink: 0;
  width: 1.5em;
}
/* FAQアコーディオン：CSS Grid 方式
   grid-template-rows: 0fr → 1fr のトランジションで実コンテンツ高さに完璧追従
   max-height 方式の体感速度ズレ問題を解消（Chrome 117+/Safari 17.4+/Firefox 122+） */
.faq_answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.faq_item.is-open .faq_answer {
  grid-template-rows: 1fr;
}
.faq_answer_body {
  overflow: hidden;
  min-height: 0;
}
.faq_chevron {
  transition: transform 0.2s ease;
}
.faq_item.is-open .faq_chevron {
  transform: rotate(180deg);
}

/* ============================================================
   グローバル変数（テーマ全体で参照）
   ============================================================ */
:root {
  --header-h: 73px;       /* ヘッダーの高さ（py-4 + h-[40px] + border-b 1px） */
  --admin-bar-h: 0px;     /* WP管理バー（ログイン時のみ上書き） */
  --anim-duration: 0.8s;  /* セクション出現アニメ時間（業種で調整可） */
  --anim-easing: cubic-bezier(0.16, 1, 0.3, 1); /* ease-out 系 */
}
body.admin-bar { --admin-bar-h: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar { --admin-bar-h: 46px; }
}

/* ============================================================
   グローバルナビ（PCヘッダー）
   wp_nav_menu() の <li> リストマーカーを非表示
   メニュー項目の間隔は画面幅に応じて可変（16〜32px）
   ============================================================ */
.header_nav {
  gap: clamp(16px, 2vw, 32px);
}
.header_nav ul,
.header_nav li {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* メニュー項目のホバー時アンダーライン
   テキストとラインの間にpadding、ラインは左から引かれる */
.header_nav a {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
}
.header_nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.header_nav a:hover::after {
  transform: scaleX(1);
}

/* ============================================================
   CTA・キャッチコピーの自動改行制御
   - p（本文）: pretty で最終行の孤立を防止
   ============================================================ */
.top_cta p,
.single_job_entry_cta p,
.common_entry_cta p {
  text-wrap: pretty;
}

/* CTA見出し（h2）の <br> 制御：SP有効・PC無効
   PCでは1行で繋いで力強く、SPでは改行で読みやすく */
@media (min-width: 1024px) {
  .top_cta h2 br,
  .single_job_entry_cta h2 br,
  .common_entry_cta h2 br {
    display: none;
  }
}

/* CTA本文（p）の <br> 制御：PC有効・SP無効
   PCでは意図した改行位置を尊重、SPでは画面幅で自然に折り返し */
@media (max-width: 1023px) {
  .top_cta p br,
  .single_job_entry_cta p br,
  .common_entry_cta p br {
    display: none;
  }
}

/* ============================================================
   プライバシーポリシー本文（the_content() 出力）
   ============================================================ */
.privacy_body {
  color: #1f2937;
  font-size: 14px;
  line-height: 1.9;
}
@media (min-width: 1024px) {
  .privacy_body {
    font-size: 15px;
  }
}
.privacy_body h2 {
  font-size: 18px;
  font-weight: 700;
  margin-top: 2.5em;
  margin-bottom: 0.8em;
  padding-left: 12px;
  border-left: 4px solid #1f2937;
  line-height: 1.4;
}
@media (min-width: 1024px) {
  .privacy_body h2 {
    font-size: 20px;
  }
}
.privacy_body h2:first-child {
  margin-top: 0;
}
.privacy_body h3 {
  font-size: 16px;
  font-weight: 700;
  margin-top: 1.8em;
  margin-bottom: 0.6em;
}
.privacy_body p {
  margin: 0 0 1.2em;
}
.privacy_body ul,
.privacy_body ol {
  margin: 0 0 1.2em;
  padding-left: 1.5em;
}
.privacy_body ul {
  list-style: disc;
}
.privacy_body ol {
  list-style: decimal;
}
.privacy_body li {
  margin-bottom: 0.4em;
}
.privacy_body a {
  color: #1f2937;
  text-decoration: underline;
}
.privacy_body a:hover {
  opacity: 0.7;
}
.privacy_body strong {
  font-weight: 700;
}

/* ============================================================
   初回ロード時アニメーション
   ヒーローのコピー・ボタン：下からスライドイン（ステップ表示）
   ============================================================ */
@keyframes hero-slide-up {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.hero_title    { animation: hero-slide-up 0.8s var(--anim-easing) 0.3s both; }
.hero_subtitle { animation: hero-slide-up 0.8s var(--anim-easing) 0.5s both; }
.hero_actions  { animation: hero-slide-up 0.8s var(--anim-easing) 0.7s both; }

/* モーション削減設定への対応 */
@media (prefers-reduced-motion: reduce) {
  .hero_title,
  .hero_subtitle,
  .hero_actions {
    animation: none !important;
  }
}

/* ============================================================
   出現アニメーション（IntersectionObserverで .is-in-view 付与）
   業種で強度・速度を変えたい時は --anim-duration を上書き
   ============================================================ */
/* セクション内のコンテナ（section 直下の div）の中身を時間差で表示
   - セクション自体は背景固定（opacity 維持）
   - コンテナ直下の最初の子要素 → ヘッダーとして 0.3s 遅延
   - 2番目以降の子要素 → 本文として 0.6s 遅延 */
.fade-up > * > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--anim-duration) var(--anim-easing),
              transform var(--anim-duration) var(--anim-easing);
}
.fade-up > * > *:first-child {
  transition-delay: 0.3s;
}
.fade-up > * > *:nth-child(n+2) {
  transition-delay: 0.6s;
}
.fade-up.is-in-view > * > * {
  opacity: 1;
  transform: translateY(0);
}

/* アクセシビリティ：モーション削減設定を尊重 */
@media (prefers-reduced-motion: reduce) {
  .fade-up > * > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* サンクスページではアニメ全無効（送信完了後の安心感を優先）
   body にはWPデフォルトで page-{slug} が付かないので、main 要素のクラスで判定 */
main.page-thanks .fade-up,
main.page-thanks .fade-up > * > * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ============================================================
   ホバーアニメーション
   ボタン・カード・画像のシンプルな反応
   ============================================================ */

/* ボタン共通：塗りつぶし系（bg-gray-800） */
a[class*="bg-gray-800"]:not(.header_cta):not(.sp-nav-modal a),
button[class*="bg-gray-800"] {
  transition: opacity 0.2s ease;
}
a[class*="bg-gray-800"]:not(.header_cta):not(.sp-nav-modal a):hover,
button[class*="bg-gray-800"]:hover {
  opacity: 0.85;
}

/* ボタン共通：境界線系 */
a[class*="border-gray-800"],
a[class*="border-white"] {
  transition: opacity 0.2s ease, background-color 0.2s ease;
}
a[class*="border-gray-800"]:hover {
  background-color: rgba(31, 41, 55, 0.05);
}
a[class*="border-white"]:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* ヘッダーCTAは独立制御 */
.header_cta {
  transition: opacity 0.2s ease;
}
.header_cta:hover {
  opacity: 0.85;
}

/* 社員インタビューカード：ホバー時の反応
   - 画像：1.05倍にゆっくりズーム
   - 名前：不透明度をやや下げる（控えめな反応） */
.people_grid_item img {
  transition: transform 0.5s ease;
}
.people_grid_item:hover img {
  transform: scale(1.05);
}
.people_grid_item_name {
  transition: opacity 0.2s ease;
}
.people_grid_item:hover .people_grid_item_name {
  opacity: 0.85;
}

/* テキストリンクの下線アニメ（パンくず・サイトマップなど） */
.breadcrumb a,
.sitemap_section a {
  transition: opacity 0.2s ease;
}
.breadcrumb a:hover,
.sitemap_section a:hover {
  opacity: 0.7;
}

/* ============================================================
   本文テキスト共通クラス
   ============================================================ */
.prose-text {
  font-size: 15px;
  line-height: 1.8;
}

/* ============================================================
   本番再コーディング時の作業メモ
   - Tailwind CDN削除 → カスタムCSSに置き換え
   - .placeholder クラス削除（実際の画像に差し替え）
   - [data-cms]::before ルール削除
   - --wf-* 変数を --color-* 変数に統一
   ============================================================ */