/* =====================================================
   Nekofuru Recruit Styles — Cleaned & Consolidated v1.0
   - 重複/未閉鎖のルールを整理、メディアクエリ修正
   - 変数導入、タイポ修正、レスポンシブ最適化
   - 共通UI（ボタン/吹き出し/フッター/写真ブロック/サブナビ）統合
   ===================================================== */

/* ========================================
   0) CSS変数（テーマトークン）
   ======================================== */
:root{
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Roboto, sans-serif;
  --text: #333;
  --text-muted: #666;
  --text-subtle: #999;
  --bg: #fff;
  --bg-soft: #fffaf0;            /* やさしい生成り */
  --bg-hero-from:#fff9e6;
  --bg-hero-to:#fffef5;
  --bg-green-from:#f0f8f0;
  --bg-green-to:#f9fff9;
  --card:#fff;
  --card-soft:#f9f9f9;
  --border:#e0e0e0;
  --border-accent:#f9e79f;
  --accent:#d4a944;              /* メインの黄土系 */
  --accent-deep:#c49736;
  --accent-strong:#b8831f;
  --accent-shadow: 212, 169, 68; /* rgba用 */
  --ok:#85c88a;
  --link:#2563EB;                /* 未使用だがトークンとして保持 */
  --nav-h: 72px;
  --container: 1200px;
}

/* ========================================
   1) リセット＆基本
   ======================================== */
* { margin:0; padding:0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-base);
  line-height: 1.7;
  color: var(--text);
  background-color: var(--bg);
  padding-bottom: 80px; /* ページ最下部の余白（固定ナビ等を想定） */
}
img { max-width:100%; height:auto; vertical-align: middle; }
a { text-decoration: none; color: inherit; }
figure { margin: 0; }

/* コンテナ */
.container,[class*="__container"]{ max-width: var(--container); margin: 0 auto; padding: 0 20px; }

/* ========================================
   2) セクションタイトル
   ======================================== */
.section-title{ text-align:center; margin-bottom: 24px; }
.section-title img{ max-width: 400px; margin: 0 auto; display:block; }
.section-title figcaption{ display:none; }
.section-title__subtitle{ color:#777; font-size:1rem; }

/* ========================================
   3) ヒーロー
   ======================================== */
.recruit-hero{ background: linear-gradient(135deg, var(--bg-hero-from) 0%, var(--bg-hero-to) 100%); padding: 80px 0 60px; }
.recruit-hero__container{ display:flex; flex-direction:column; align-items:center; gap:40px; }
.recruit-hero__visual{ width:100%; max-width: 600px; }
.recruit-hero__image{ width:100%; height:auto; border-radius:16px; }
.recruit-hero__content{ text-align:center; }
.recruit-hero__title{ font-size:2rem; font-weight:700; color:var(--text); line-height:1.4; margin-bottom:20px; }
.recruit-hero__lead{ font-size:1.1rem; color:#555; margin-bottom:30px; }
.recruit-hero__badges{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; list-style:none; margin-bottom:40px; }
.recruit-hero__badge{ background:#fff; color:var(--accent); padding:10px 20px; border-radius:30px; font-size:0.9rem; font-weight:700; border:2px solid var(--border-accent); }
.recruit-hero__cta{ display:inline-block; background:var(--accent); color:#fff; padding:18px 50px; border-radius:40px; font-size:1.2rem; font-weight:700; transition: all .3s ease; box-shadow: 0 4px 12px rgba(var(--accent-shadow), .3); }
.recruit-hero__cta:hover{ background:var(--accent-deep); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(var(--accent-shadow), .4); }

/* ========================================
   4) EVP（選ばれる理由）
   ======================================== */
.recruit-evp{ padding:80px 0; background:#fff; }
/* Grid: 3列（可変） */
.recruit-evp__grid{ display:grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap:30px; }
.recruit-evp__card{ background: var(--card-soft); padding: 40px 30px; border-radius:12px; text-align:center; box-shadow: 0 4px 12px rgba(0,0,0,.04); }
.recruit-evp__icon{ width:130px; height:130px; margin:0 auto 20px; display:flex; align-items:center; justify-content:center; }
.recruit-evp__icon img{ width:130px; height:130px; object-fit:contain; display:block; }
.recruit-evp__card-title{ font-size:1.3rem; font-weight:700; color:var(--text); margin-bottom:15px; }
.recruit-evp__card-text{ font-size:.95rem; color:var(--text-muted); line-height:1.7; }

/* ========================================
   5) 募集職種
   ======================================== */
.recruit-positions{ padding:80px 0; background: linear-gradient(135deg, var(--bg-green-from) 0%, var(--bg-green-to) 100%); }
.recruit-positions__grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap:40px; }
.recruit-positions__card{ background: var(--card); border-radius:16px; overflow:hidden; box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.recruit-positions__header{ background: linear-gradient(135deg, var(--bg-hero-from) 0%, var(--bg-hero-to) 100%); padding:30px; }
.recruit-positions__badge{ display:inline-block; padding:6px 16px; border-radius:20px; font-size:.85rem; font-weight:700; margin-bottom:15px; color:#fff; }
.recruit-positions__badge--beginner{ background: var(--accent); }
.recruit-positions__badge--management{ background: #7fb3d5; }
.recruit-positions__job-title{ font-size:1.5rem; font-weight:700; color:var(--text); }
.recruit-positions__body{ padding:30px; }
.recruit-positions__section{ margin-bottom:25px; }
.recruit-positions__section-title{ font-size:1rem; font-weight:700; color:#555; margin-bottom:10px; padding-left:12px; border-left:4px solid var(--accent); }
.recruit-positions__text{ font-size:.95rem; color:var(--text-muted); line-height:1.7; }
.recruit-positions__list{ list-style:none; padding-left:0; }
.recruit-positions__list li{ padding:6px 0 6px 24px; position:relative; font-size:.95rem; color:var(--text-muted); }
.recruit-positions__list li::before{ content:"✓"; position:absolute; left:0; color: var(--ok); font-weight:700; }
.recruit-positions__details{ margin-top:30px; padding-top:30px; border-top:1px solid #eee; }
.recruit-positions__detail-list{ display:grid; gap:15px; }
.recruit-positions__detail-list dt{ font-weight:700; color:#555; font-size:.9rem; }
.recruit-positions__detail-list dd{ color:var(--text-muted); font-size:.95rem; line-height:1.6; margin:0; }
.recruit-positions__detail-list dd small{ font-size:.85rem; color:var(--text-subtle); }
.recruit-positions__footer{ padding:0 30px 30px; }
.recruit-positions__apply-btn{ display:block; width:100%; padding:16px; background:var(--accent); color:#fff; text-align:center; border-radius:8px; font-weight:700; transition: all .3s ease; }
.recruit-positions__apply-btn:hover{ background: var(--accent-deep); transform: translateY(-2px); }

/* ========================================
   6) FAQ（アコーディオン）
   ======================================== */
.recruit-faq{ padding:80px 0; background: linear-gradient(135deg, var(--bg-green-from) 0%, var(--bg-green-to) 100%); }
.recruit-faq__list{ max-width:900px; margin:0 auto; }
.recruit-faq__item{ background:#fff; margin-bottom:20px; border-radius:12px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.08); transition: box-shadow .3s ease; }
.recruit-faq__item.is-open{ box-shadow:0 4px 16px rgba(0,0,0,.12); }
.recruit-faq__question{ font-size:1.1rem; font-weight:700; color:var(--text); padding:25px 30px; background:#fff; cursor:pointer; position:relative; padding-right:60px; }
.recruit-faq__question::after{ content:"▼"; position:absolute; right:30px; top:50%; transform: translateY(-50%); color:var(--accent); transition: transform .3s ease; font-size:.9rem; }
.recruit-faq__item.is-open .recruit-faq__question::after{ transform: translateY(-50%) rotate(180deg); }
.recruit-faq__answer{ max-height:0; overflow:hidden; padding:0 30px; font-size:.95rem; color:var(--text-muted); line-height:1.8; transition: max-height .3s ease, padding .3s ease; }
.recruit-faq__item.is-open .recruit-faq__answer{ max-height:500px; padding:0 30px 25px; }

/* ========================================
   7) 応募フォーム
   ======================================== */
.recruit-apply{ padding:80px 0; background: linear-gradient(135deg, var(--bg-hero-from) 0%, var(--bg-hero-to) 100%); }
.recruit-apply__lead{ text-align:center; color:var(--text-muted); font-size:1.1rem; margin-bottom:50px; }
.recruit-apply__form-wrapper{ background:#fff; padding:40px; border-radius:16px; box-shadow: 0 4px 12px rgba(0,0,0,.08); max-width:800px; margin:0 auto; }
.recruit-apply__method-title{ font-size:1.5rem; font-weight:700; color:var(--text); margin-bottom:30px; }
.recruit-apply__form{ display:grid; gap:25px; }
.recruit-apply__field{ display:grid; gap:8px; }
.recruit-apply__label{ font-size:.95rem; font-weight:700; color:#555; }
.recruit-apply__required{ color:#e74c3c; font-size:.85rem; background:#ffe6e6; padding:2px 8px; border-radius:4px; margin-left:8px; }
.recruit-apply__optional{ color:var(--text-subtle); font-size:.85rem; background:#f5f5f5; padding:2px 8px; border-radius:4px; margin-left:8px; }
.recruit-apply__input,
.recruit-apply__select,
.recruit-apply__textarea{ padding:12px 16px; border:2px solid var(--border); border-radius:8px; font-size:1rem; font-family:inherit; transition: all .3s ease; }
.recruit-apply__input:focus,
.recruit-apply__select:focus,
.recruit-apply__textarea:focus{ outline:none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-shadow), .1); }
.recruit-apply__radio-group,
.recruit-apply__checkbox-group{ display:grid; gap:12px; }
.recruit-apply__radio-label,
.recruit-apply__checkbox-label{ display:flex; align-items:center; gap:10px; font-size:.95rem; color:var(--text-muted); cursor:pointer; }
.recruit-apply__radio-label input,
.recruit-apply__checkbox-label input{ width:20px; height:20px; cursor:pointer; }
.recruit-apply__file{ padding:10px; border:2px dashed var(--border); border-radius:8px; cursor:pointer; }
.recruit-apply__file-note{ font-size:.85rem; color:var(--text-subtle); margin-top:5px; }
.recruit-apply__textarea{ resize:vertical; min-height:120px; }
.recruit-apply__char-count{ font-size:.85rem; color:var(--text-subtle); text-align:right; }
.recruit-apply__checkbox-label--privacy{ padding:15px; background:#f9f9f9; border-radius:8px; border:2px solid var(--border); }
.recruit-apply__submit-wrapper{ margin-top:20px; }
.recruit-apply__submit{ width:100%; padding:18px; background:var(--accent); color:#fff; border:none; border-radius:40px; font-size:1.2rem; font-weight:700; cursor:pointer; transition: all .3s ease; box-shadow: 0 4px 12px rgba(var(--accent-shadow), .3); }
.recruit-apply__submit:hover:not(:disabled){ background:var(--accent-deep); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(var(--accent-shadow), .4); }
.recruit-apply__submit:disabled{ background:#ccc; cursor:not-allowed; }
.figurecap{ display:none; }

/* ========================================
   8) 共通UI：猫アニメ/吹き出し/ボタン
   ======================================== */
.cat-container{ margin-right:6px; }
.cat-image{ width:86px; height:auto; transform-origin: bottom center; animation: catWave 2s ease-in-out infinite; }
@keyframes catWave{ 0%,100%{ transform:rotate(0) } 50%{ transform: rotate(-6deg) } }

/* 吹き出し */
.speech-bubble{ display:flex; align-items:center; gap:8px; padding:8px 12px; background: var(--bg-soft); border:2px solid #d4a373; border-radius:18px; box-shadow:0 6px 16px rgba(0,0,0,.12); position:relative; }
.speech-bubble::before,
.speech-bubble::after{ content:""; position:absolute; bottom:20px; border:8px solid transparent; }
.speech-bubble::before{ left:-14px; border-right-color:#d4a373; }
.speech-bubble::after{ left:-12px; border-right-color: var(--bg-soft); }

/* ボタン */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:7px 12px; border-radius:999px; font-weight:700; font-size:14px; background:#fffbe7; border:2px solid #f4c542; color:var(--text); white-space:nowrap; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.btn:hover{ background:#fff6cc; transform:none; box-shadow:none; }
.btn-tel{ font-size:.86em; font-weight:600; letter-spacing:.5px; }

/* ========================================
   9) フッター
   ======================================== */
.site-footer{ background:#2C2C2C; color:#E0E0E0; padding:48px 0 24px; font-family: var(--font-base); }
.site-footer .container{ max-width: var(--container); margin:0 auto; padding:0 20px; }
.footer-content{ display:grid; grid-template-columns:1.5fr 1fr; gap:48px; margin-bottom:32px; }
.footer-logo{ font-weight:700; font-size:20px; margin-bottom:16px; display:flex; align-items:center; gap:8px; color:#fff; }
.footer-address{ line-height:1.9; font-size:14px; color:#E0E0E0; }
.footer-address .footer-tel{ color:inherit; font-weight:600; text-decoration:none; }
.footer-address .footer-tel:hover{ text-decoration:underline; }
.footer-nav ul{ list-style:none; display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; padding:0; margin:0; }
.footer-nav a{ font-size:14px; color:#E0E0E0; text-decoration:none; transition: color .25s ease; line-height:1.6; display:inline-block; }
.footer-nav a:hover{ color:#FFD54F; }
.footer-copyright{ text-align:center; padding-top:24px; border-top:1px solid #444; font-size:13px; color:#BDBDBD; line-height:1.6; }

/* ========================================
   10) 写真ブロック（端まで）
   ======================================== */
.photo-section{ display:flex; justify-content:center; align-items:center; padding:1rem; background-color:#fff8ee; }
.photo-wrapper{ position:relative; width:100%; max-width: var(--container); aspect-ratio: 16/9; overflow:hidden; border-radius:12px; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.responsive-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transition: transform .5s ease; }

/* ========================================
   11) サブナビCTA（二連ボタン）
   ======================================== */
.subnav-cta{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:10px 0; background: linear-gradient(to right, #FFF9E6, #FFFEF7); border-top:1px solid #eee1a8; }
.subnav-btn{ display:flex; align-items:center; justify-content:center; gap:8px; height:44px; border-radius:22px; text-decoration:none; font-weight:700; font-size:14px; color:#fff; transition: all .3s ease; overflow:hidden; }
.subnav-icon{ font-size:18px; }
.subnav-btn--estimate{ background: var(--accent); box-shadow: 0 3px 10px rgba(var(--accent-shadow), .3); }
.subnav-btn--estimate:hover{ background: var(--accent-deep); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(var(--accent-shadow), .4); }
.subnav-btn--paint{ background: var(--accent-deep); box-shadow: 0 3px 10px rgba(var(--accent-shadow), .3); }
.subnav-btn--paint:hover{ background: var(--accent); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(var(--accent-shadow), .4); }

/* ========================================
   12) レスポンシブ
   ======================================== */
/* <= 1024px：若干詰める */
@media (max-width: 1024px){
  .recruit-evp__grid{ grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}

/* <= 768px：タブレット/スマホ共通 */
@media (max-width: 768px){
  .recruit-hero{ padding:40px 0 30px; }
  .recruit-hero__title{ font-size:1.6rem; }
  .recruit-hero__lead{ font-size:1rem; }
  .recruit-hero__badges{ flex-direction:column; align-items:center; }
  .recruit-hero__cta{ padding:14px 40px; font-size:1.1rem; }

  .section-title img{ max-width: 250px; }

  .recruit-evp{ padding:60px 0; }
  .recruit-evp__grid{ grid-template-columns: 1fr; gap:20px; }

  .recruit-positions, .recruit-faq, .recruit-apply{ padding: 60px 0; }
  .recruit-apply__form-wrapper{ padding: 25px; }

  .footer-content{ grid-template-columns: 1fr; gap: 32px; }
  .footer-logo{ font-size:18px; }
  .footer-address{ font-size:13px; line-height:1.8; }
  .footer-nav a{ font-size:13px; }
  .footer-copyright{ font-size:12px; }

  /* 写真ブロックを端まで */
  .photo-section{ padding:0; }
  .photo-wrapper{ max-width:none; width:100vw; margin:0; border-radius:0; box-shadow:none; }
  .responsive-photo{ object-position: center top; }
}

/* <= 640px：モバイル最適化（吹き出しボタン3分割） */
@media (max-width: 640px){
  .cat-image{ width:68px; }
  .speech-bubble{ display:grid; grid-template-columns: repeat(3, 1fr); gap:6px; width:100%; max-width:640px; padding:8px; border-radius:16px; border:2px solid #d4a373; background: var(--bg-soft); box-shadow: 0 6px 14px rgba(0,0,0,.12); }
  .speech-bubble::before, .speech-bubble::after{ display:none; }
  .btn{ width:100%; min-width:0; white-space:nowrap; padding:10px 4px; font-size: clamp(12px, 3.4vw, 14px); line-height:1.1; }
  .subnav-btn{ font-size:12px; height:40px; padding:0 8px; }
}

/* <= 480px：細かい文字サイズ調整 */
@media (max-width: 480px){
  .recruit-hero__title{ font-size:1.4rem; }
  .recruit-hero__lead{ font-size:.95rem; }
}