/* ===== デザインシステム（CSS変数で管理） ===== */
:root{
  /* 配色：信頼感のあるダークブルー基調（家具製造の正確性）+ 木材のアンバーアクセント */
  --c-bg:#ffffff;
  --c-bg-alt:#fafbfc;
  --c-bg-soft:#f7f3ee;
  --c-primary:#1e3a5f;
  --c-primary-dark:#14283f;
  --c-accent:#d97706;
  --c-accent-soft:#fbbf24;
  --c-text:#1a1f2c;
  --c-text-soft:#4a5568;
  --c-text-muted:#6b7280;
  --c-border:#e2e8f0;
  --c-border-strong:#cbd5e0;
  /* 比率・余白 */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --radius:12px;
  --radius-sm:8px;
  --shadow-card:0 2px 8px rgba(15,30,55,.06),0 8px 24px rgba(15,30,55,.05);
  --shadow-strong:0 4px 16px rgba(30,58,95,.15),0 12px 32px rgba(30,58,95,.10);
  --transition:.25s cubic-bezier(.2,.6,.2,1);
}

/* ===== ベース ===== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:80px;}
body{
  margin:0;
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  font-weight:400;
  line-height:1.85;
  color:var(--c-text);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;height:auto;}
a{color:var(--c-primary);text-decoration:none;transition:color var(--transition);}
a:hover{color:var(--c-accent);}
.container{max-width:1100px;margin:0 auto;padding:0 24px;}
.section{padding:var(--space-8) 0;position:relative;}
.section:nth-of-type(even){background:var(--c-bg-soft);}
.section > .container > h2{
  margin:0 0 var(--space-3);
  font-size:32px;font-weight:900;letter-spacing:.04em;
  color:var(--c-primary-dark);
  text-align:center;
  position:relative;padding-bottom:var(--space-3);
}
.section > .container > h2::after{
  content:"";display:block;width:48px;height:4px;
  background:var(--c-accent);border-radius:2px;
  margin:var(--space-3) auto 0;
}
.lead{margin:0 0 var(--space-7);color:var(--c-text-soft);font-weight:500;text-align:center;font-size:18px;line-height:1.85;}
h3{margin:0 0 var(--space-3);font-size:20px;font-weight:700;color:var(--c-primary-dark);line-height:1.45;}
p{margin:0 0 var(--space-4);font-weight:400;}
strong{
  font-weight:700;
  color:var(--c-accent);
  background:linear-gradient(transparent 60%,rgba(217,119,6,.16) 60%);
  padding:0 2px;
}

/* ===== プレースホルダー ===== */
.ph{
  /* フォールバック：画像読み込み失敗時の平場面 */
  background:repeating-linear-gradient(135deg,#d8dde3 0 16px,#cfd4db 16px 32px);
  color:#5b6473;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:500;border:none;border-radius:var(--radius-sm);
  position:relative;overflow:hidden;
}
.ph::before{content:"IMAGE";letter-spacing:.15em;font-weight:700;color:rgba(91,100,115,.78);}
/* 画像が指定されたら ::before の "IMAGE" 文字は隠す */
.ph:not([src=""]):not([src])::before{display:none;}
/* 実画像が入ったら背景を無効化 */
.ph[src]:not([src=""]){background:transparent;}
.ph[src]:not([src=""])::before{display:none;}
.ph-169{aspect-ratio:16/9;width:100%;}
.ph-43{aspect-ratio:4/3;width:100%;}

/* ===== ヘッダー ===== */
.header{
  position:sticky;top:0;z-index:50;
  background:#E1E1DF;
  border-bottom:1px solid #E1E1DF;
  transition:box-shadow var(--transition);
}
.header.is-scrolled{box-shadow:0 4px 12px rgba(0,0,0,.06);}
.header .container{display:flex;align-items:center;justify-content:space-between;height:72px;background:#E1E1DF;gap:var(--space-4);}
.brand{display:flex;align-items:center;background:transparent;padding:0;border-radius:0;line-height:0;flex-shrink:0;}
.brand a{display:flex;align-items:center;line-height:0;}
.brand img{height:44px;width:auto;display:block;}
.nav ul{list-style:none;display:flex;flex-wrap:nowrap;gap:var(--space-5);margin:0;padding:0;font-size:14px;font-weight:500;white-space:nowrap;}
.nav ul a{color:var(--c-text);padding:8px 4px;position:relative;display:inline-block;}
.nav ul a::after{
  content:"";position:absolute;left:50%;bottom:0;width:0;height:2px;
  background:var(--c-accent);transition:all var(--transition);
  transform:translateX(-50%);
}
.nav ul a:hover{color:var(--c-accent);}
.nav ul a:hover::after{width:100%;}
/* ハンバーガーボタン（SPのみ表示） */
.nav-toggle{
  display:none;background:transparent;border:1px solid var(--c-border);
  border-radius:var(--radius-sm);padding:8px 10px;cursor:pointer;
  align-items:center;justify-content:center;width:44px;height:44px;
}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--c-primary-dark);border-radius:2px;transition:transform var(--transition),opacity var(--transition);margin:5px 0;}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){opacity:0;}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ===== FV ===== */
.fv{position:relative;overflow:hidden;}
.fv .ph-169{border-radius:0;}
.fv-copy{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  color:var(--c-text);padding:var(--space-5);
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(250,251,252,.75) 100%);
}
.fv-copy h1{
  font-size:clamp(28px,5vw,48px);font-weight:900;line-height:1.4;
  margin:0 0 var(--space-4);color:var(--c-primary-dark);letter-spacing:.02em;
  text-shadow:0 2px 4px rgba(255,255,255,.5);
}
.fv-copy p{margin:0 0 var(--space-3);max-width:780px;font-size:clamp(15px,1.8vw,18px);font-weight:500;color:var(--c-text);text-shadow:0 1px 2px rgba(255,255,255,.7);}
.fv-copy strong{font-size:clamp(16px,2vw,19px);}
.fv-cta{
  display:flex;gap:var(--space-4);justify-content:center;flex-wrap:wrap;
  margin-top:var(--space-5);
}
.fv-cta .btn{min-width:200px;}

/* ===== スライダー（FV下/4:3 10枚・無限ループ） ===== */
.slider-section{
  background:linear-gradient(180deg,var(--c-bg-soft) 0%,var(--c-bg) 100%);
  border-top:1px solid var(--c-border);
  border-bottom:1px solid var(--c-border);
  padding:var(--space-6) 0;
  overflow:hidden;
}
.slider-track{
  display:flex;gap:var(--space-4);flex-wrap:nowrap;
  width:max-content;
  animation:slider-loop 40s linear infinite;
}
.slider-track:hover{animation-play-state:paused;}
.slider-track .slide{flex:0 0 auto;width:240px;border-radius:var(--radius-sm);overflow:hidden;}
.slider-track .slide img{width:100%;height:auto;display:block;border-radius:var(--radius-sm);}
@keyframes slider-loop{
  0%   {transform:translateX(0);}
  100% {transform:translateX(calc(-100% / 2));}
}

/* ===== こんな人歓迎 ===== */
.welcome ul{
  list-style:none;margin:0;padding:0;
  display:grid;gap:var(--space-4);
}
.welcome li{
  display:grid;grid-template-columns:80px 1fr;gap:var(--space-5);
  padding:var(--space-5) var(--space-6);
  border:1px solid var(--c-border);
  background:var(--c-bg);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  align-items:center;
  transition:transform var(--transition),box-shadow var(--transition);
}
.welcome li:hover{transform:translateY(-2px);box-shadow:var(--shadow-strong);}
.welcome li .num{
  display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,var(--c-primary),var(--c-primary-dark));
  color:#fff;font-size:22px;font-weight:900;
  flex-shrink:0;
}

/* ===== 私たちについて ===== */
.about{display:grid;gap:var(--space-6);}
.about .ph{border-radius:var(--radius);overflow:hidden;}
.about img{border-radius:var(--radius);}

/* ===== 仕事内容ジグザグ ===== */
.job-block{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7);
  align-items:center;margin-bottom:var(--space-8);
}
.job-block:last-child{margin-bottom:0;}
.job-block .job-img{order:0;}
.job-block .job-text{order:1;}
.job-block.reverse .job-img{order:1;}
.job-block.reverse .job-text{order:0;}
.job-block .ph{border-radius:var(--radius);box-shadow:var(--shadow-card);overflow:hidden;}
.job-block img{border-radius:var(--radius);}
.job-text{background:var(--c-bg);padding:var(--space-6);border-radius:var(--radius);border:1px solid var(--c-border);}

/* ===== 3カード系（入社後・会社の魅力・メンバー） ===== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);}
.card{
  padding:var(--space-5);
  background:var(--c-bg);
  border-radius:var(--radius);
  border:1px solid var(--c-border);
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-card);
  transition:transform var(--transition),box-shadow var(--transition);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-strong);border-color:var(--c-primary);}
.card .ph{margin-bottom:var(--space-4);border-radius:var(--radius-sm);overflow:hidden;}
.card img{border-radius:var(--radius-sm);}
.cards-single{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto;justify-items:center;}
.cards-single .card{padding:var(--space-7);}

/* ===== 会社の魅力：約束ボックス ===== */
.promise{
  margin-top:var(--space-6);
  padding:var(--space-5) var(--space-6);
  border-left:4px solid var(--c-accent);
  background:var(--c-bg-soft);
  border-radius:var(--radius-sm);
  position:relative;
}
.promise::before{
  content:"⚠";display:inline-block;
  color:var(--c-accent);font-weight:900;
  margin-right:var(--space-2);
}

/* ===== 1日の流れ（タイムライン） ===== */
.timeline{
  background:var(--c-bg);
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  padding:var(--space-6);
  box-shadow:var(--shadow-card);
}
.timeline ol{list-style:none;margin:0;padding:0;counter-reset:tl;}
.timeline li{
  display:grid;grid-template-columns:120px 48px 1fr;
  gap:var(--space-4);padding:var(--space-4) 0;
  border-bottom:1px dashed var(--c-border);
  align-items:center;
  position:relative;
}
.timeline li:last-child{border-bottom:0;}
.timeline time{
  font-weight:700;color:var(--c-primary-dark);
  font-size:18px;white-space:nowrap;
  font-feature-settings:"tnum";
}
.timeline li::before{
  counter-increment:tl;content:counter(tl);
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--c-primary),var(--c-primary-dark));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:14px;flex-shrink:0;
}
.timeline li > span{font-weight:400;color:var(--c-text);}

/* ===== 募集要項 ===== */
.job-info{
  border:1px solid var(--c-border);
  background:var(--c-bg);
  border-radius:var(--radius);
  padding:0;box-shadow:var(--shadow-card);
  overflow:hidden;
}
.job-info h2{padding:var(--space-6) var(--space-6) 0;margin:0;text-align:left;}
.job-info h2::after{margin-left:0;margin-right:0;}
.job-info .ji-list{padding:0;margin:0;}
.ji{display:grid;grid-template-columns:220px 1fr;border-bottom:1px solid var(--c-border);}
.ji:last-child{border-bottom:0;}
.ji dt{
  padding:var(--space-5) var(--space-6);
  background:var(--c-bg-soft);font-weight:700;
  border-right:1px solid var(--c-border);
  color:var(--c-primary-dark);
}
.ji dd{padding:var(--space-5) var(--space-6);margin:0;color:var(--c-text);}

/* ===== CTA ===== */
.cta{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-5);
  background:linear-gradient(135deg,var(--c-primary) 0%,var(--c-primary-dark) 100%);
  margin:var(--space-7) calc(50% - 50vw);padding:var(--space-8) var(--space-4);
  border:none;border-radius:0;color:#fff;
}
.cta h2{
  margin:0;padding:0;text-align:center;
  color:var(--c-accent-soft);
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.cta h2::after{background:var(--c-accent-soft);}
.cta-row{display:flex;justify-content:center;gap:var(--space-4);flex-wrap:wrap;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:16px 32px;border:none;border-radius:10px;
  font-weight:700;min-width:240px;font-size:16px;
  cursor:pointer;letter-spacing:.04em;line-height:1.4;
  transition:transform var(--transition),box-shadow var(--transition),background var(--transition);
  text-align:center;
}
.btn-primary{
  background:var(--c-accent);color:#fff;
  box-shadow:0 6px 18px rgba(217,119,6,.35);
}
.btn-primary:hover{background:var(--c-accent-soft);transform:translateY(-2px);box-shadow:0 10px 24px rgba(217,119,6,.45);color:#fff;}
.btn-secondary{
  background:#fff;color:var(--c-primary);
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.btn-secondary:hover{background:var(--c-bg-soft);color:var(--c-primary-dark);transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.24);}
.cta .btn{color:#fff;}
.cta .btn-primary{background:var(--c-accent);color:#fff !important;}
.cta .btn-secondary{background:#fff;color:var(--c-primary)!important;}
.cta .btn-secondary:hover{background:var(--c-accent-soft);color:var(--c-primary-dark)!important;}
.cta .btn:not(.btn-primary):not(.btn-secondary){background:var(--c-accent);color:#fff !important;border:1px solid rgba(255,255,255,.2);}
.cta .cta-row > a.btn:nth-child(2):not(.btn-primary):not(.btn-secondary){background:#fff;color:var(--c-primary)!important;border:1px solid rgba(255,255,255,.4);}

/* ===== 応募フォーム ===== */
.form-grid{display:grid;gap:var(--space-5);max-width:680px;margin:0 auto;}
.form-row{display:grid;gap:6px;}
.form-row label{font-weight:700;font-size:15px;color:var(--c-primary-dark);}
.form-row label .req{color:var(--c-accent);font-size:12px;margin-left:6px;font-weight:700;}
.form-row label .opt{color:var(--c-text-muted);font-size:12px;margin-left:6px;font-weight:400;}
.form-row input,.form-row textarea{
  border:1.5px solid var(--c-border-strong);
  padding:12px 14px;font:inherit;width:100%;background:var(--c-bg);
  border-radius:8px;transition:border-color var(--transition),box-shadow var(--transition);
}
.form-row input:focus,.form-row textarea:focus{
  outline:none;border-color:var(--c-primary);
  box-shadow:0 0 0 3px rgba(30,58,95,.12);
}
.form-actions{margin-top:var(--space-5);text-align:center;}
.form-actions .btn{background:var(--c-accent);color:#fff;min-width:280px;}
.form-actions .btn:hover{background:var(--c-accent-soft);color:#fff;}

/* ===== おわりに ===== */
.end{display:grid;gap:var(--space-5);}
.end .ph,.end img{border-radius:var(--radius);overflow:hidden;}

/* ===== フッター ===== */
.footer{
  background:var(--c-primary-dark);color:rgba(255,255,255,.85);
  padding:var(--space-6) 0;text-align:center;font-size:13px;
  margin-top:var(--space-8);
}
.footer p{margin:0;}

/* ===== SP 768px以下 ===== */
@media (max-width:768px){
  .container{padding:0 16px;}
  .fv{min-height:500px;}
  .fv .ph-169{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;}
  .fv-copy{padding:var(--space-5) var(--space-4);}
  .fv-cta{flex-direction:column;gap:var(--space-3);margin-top:var(--space-4);}
  .fv-cta .btn{min-width:0;width:100%;}
  .section{padding:var(--space-7) 0;}
  .section > .container > h2{font-size:24px;}
  .lead{font-size:15px;margin-bottom:var(--space-5);}
  .slider-track .slide{width:180px;}
  .slider-track{animation-duration:30s;}
  .nav-toggle{display:flex;}
  .nav ul{
    display:none;flex-direction:column;gap:0;
    position:fixed;top:72px;left:0;right:0;
    background:#E1E1DF;
    border-bottom:1px solid #E1E1DF;
    padding:var(--space-3) 0;
    box-shadow:0 8px 16px rgba(0,0,0,.08);
  }
  .nav ul.is-open{display:flex;}
  .nav ul li{border-bottom:1px solid var(--c-border);}
  .nav ul li:last-child{border-bottom:0;}
  .nav ul a{display:block;padding:14px 24px;font-size:16px;}
  .job-block,.job-block.reverse{grid-template-columns:1fr;gap:var(--space-4);}
  .job-block .job-img,.job-block.reverse .job-img{order:0;}
  .job-block .job-text,.job-block.reverse .job-text{order:1;}
  .job-text{padding:var(--space-5);}
  .cards{grid-template-columns:1fr;gap:var(--space-4);}
  .timeline{padding:var(--space-5);}
  .timeline li{grid-template-columns:80px 36px 1fr;gap:var(--space-3);padding:var(--space-3) 0;}
  .timeline time{font-size:14px;}
  .ji{grid-template-columns:1fr;}
  .ji dt{border-right:0;border-bottom:1px solid var(--c-border);padding:var(--space-3) var(--space-4);}
  .ji dd{padding:var(--space-3) var(--space-4);}
  .cta{padding:var(--space-7) var(--space-3);}
  .cta-row{flex-direction:column;align-items:stretch;width:100%;}
  .btn{min-width:0;width:100%;}
  .footer{padding:var(--space-5) 0;}
}