*{margin:0;padding:0;box-sizing:border-box;}

body{
  font-family:'Noto Sans JP',sans-serif;
  background:#fff;
  color:#fff;
  line-height:1.9;
}

/* =============================
   SECTION
============================= */
section{
  padding-left: 15px; 
  margin-right: auto; 
  margin-left: auto; 
}
h2{
  font-size:22px;
  margin-bottom:60px;
  border-left:4px solid #0f1a24;
  padding-left:15px;
}
p{
  color:#444;
}
a {
  color: #4e4e4e;
}

/* =============================
   HEADER
============================= */
header{
  position:fixed;
  width:100%;
  top:0;
  left:0;
  background:#243f5c;
  color:#fff;
  padding:20px 8%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:999;
  opacity: 0.9;
}
.logo img{
  height:40px;
}

.nav{
  display:flex;
  gap:30px;
}
.nav a{
  color:#fff;
  text-decoration:none;
  font-size:14px;
  letter-spacing:.05em;
}


/* =============================
  1. ファーストビュー
============================= */
.hero{
  position:relative;
  height:100vh;
  overflow:hidden;
}
.hero video{
  position:absolute;
  top:50%;
  left:50%;
  min-width:100%;
  min-height:100%;
  transform:translate(-50%,-50%);
  object-fit:cover;
  z-index:-1;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.4);
}
.hero-text{
  position:absolute;
  top:50%;
  left:80%;
  transform:translate(-50%,-50%);
  font-size:clamp(20px,4vw,48px);
  line-height:1.4;
  max-width:600px;
  z-index:2;
}

/* =============================
  2. 事業内容
============================= */
.business{
  background:#f5f5f5;
  color:#333;
  padding:120px 10%;
}
.business h2{
  border-color:#ccc;
}
.business-wrap{
  display:flex;
  gap:60px;
}
.card{
  position:relative;
  overflow:hidden;
  cursor:pointer;
  flex:1;
}
.card img{
  width:100%;
  height:600px;
  object-fit:cover;
  transition:0.6s;
}
.card:hover img{
  transform:scale(1.1);
}
.card-title{
  position:absolute;
  bottom:0;
  width:100%;
  background:#2f4f6f;
  color:#fff;
  text-align:center;
  padding:20px;
  font-size:20px;
}

/* =============================
  3. 会社概要
============================= */
#company{
  background:#2f4f6f;
}
#company p{
  color:#fff;
}

/* =============================
  4. リクルート
============================= */
#recruit{
  background:#f5f5f5;
  color: black;
}

.recruit-list{
  margin-top:30px;
}
.recruit-item{
  margin-bottom:20px;
}
.recruit-item a{
  color:#fff;
  text-decoration:none;
  font-size:clamp(16px,3vw,20px);
  display:inline-block;
  padding:10px 0;
}
.recruit-item a:hover{
  text-decoration:underline;
}


/* =============================
   SPLIT LAYOUT
============================= */
.split-section{
  margin:0;
}

body{
  overflow-x:hidden;
}

.split-section{
  min-height:100vh;        /* 画面いっぱい */
  display:flex;
  align-items:stretch;     /* 上下いっぱいにする */
  padding:0;               /* 余白を消す */
}

.split-inner{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
}


.split-text h2{
  font-size:22px;
  margin-bottom:40px;
  border-left:4px solid #0f1a24;
  padding-left:15px;
}

.split-text{
  padding:120px 10%;
  display:flex;
  flex-direction:column;
  justify-content:center;
}


.split-image{
  height:100%;
  overflow:hidden;
}

.split-image img{
  width:100%;
  height:100%;
  object-fit:cover; 
}

/* 反転 */
.split-reverse .split-inner{
  direction:rtl;
}
.split-reverse .split-text{
  direction:ltr;
}

/* ボタン */
.btn-outline{
  display:inline-block;
  margin-top:40px;
  padding:16px 40px;
  border:1px solid #0f1a24;
  text-decoration:none;
  color:#0f1a24;
  letter-spacing:.05em;
  border:2px solid red; /* 🔴 リンク差し替え目印 */
}

/* ----- ボタン ----- */
.fancy {
 background-color: transparent;
 border: 2px solid #000;
 border-radius: 0;
 box-sizing: border-box;
 color: #fff;
 cursor: pointer;
 display: inline-block;
 float: right;
 font-weight: 700;
 letter-spacing: 0.05em;
 margin: 0;
 margin-top:40px;
 outline: none;
 overflow: visible;
 padding: 1.25em 2em;
 position: relative;
 text-align: center;
 text-decoration: none;
 text-transform: none;
 transition: all 0.3s ease-in-out;
 user-select: none;
 font-size: 13px;
}
.fancy::before {
 content: " ";
 width: 1.5625rem;
 height: 2px;
 background: black;
 top: 50%;
 left: 1.5em;
 position: absolute;
 transform: translateY(-50%);
 transform-origin: center;
 transition: background 0.3s linear, width 0.3s linear;
}
.fancy .text {
 font-size: 1.125em;
 line-height: 1.33333em;
 padding-left: 2em;
 display: block;
 text-align: left;
 transition: all 0.3s ease-in-out;
 text-transform: uppercase;
 text-decoration: none;
 color: black;
}
.fancy .top-key {
 height: 2px;
 width: 1.5625rem;
 top: -2px;
 left: 0.625rem;
 position: absolute;
 background: #e8e8e8;
 transition: width 0.5s ease-out, left 0.3s ease-out;
}
.fancy .bottom-key-1 {
 height: 2px;
 width: 1.5625rem;
 right: 1.875rem;
 bottom: -2px;
 position: absolute;
 background: #e8e8e8;
 transition: width 0.5s ease-out, right 0.3s ease-out;
}
.fancy .bottom-key-2 {
 height: 2px;
 width: 0.625rem;
 right: 0.625rem;
 bottom: -2px;
 position: absolute;
 background: #e8e8e8;
 transition: width 0.5s ease-out, right 0.3s ease-out;
}
.fancy:hover {
 color: white;
 background: black;
}
.fancy:hover::before {
 width: 0.9375rem;
 background: white;
}
.fancy:hover .text {
 color: white;
 padding-left: 1.5em;
}
.fancy:hover .top-key {
 left: -2px;
 width: 0px;
}
.fancy:hover .bottom-key-1,
 .fancy:hover .bottom-key-2 {
 right: 0;
 width: 0;
}

/* =============================
   CONTACT
============================= */
.contact{
  background:#0f1a24;
  color:#fff;
  text-align:center;
  padding:120px 10%;
}
.contact a{
  color:#fff;
  text-decoration:none;
  border:1px solid #fff;
  padding:15px 40px;
  display:inline-block;
  margin-top:30px;
}


/* =========================
   FOOTER DESIGN
========================= */

.footer{
  background:#243f5c;
  color:#ffffff;
  padding:120px 10% 40px;
  position:relative;
  overflow:hidden;
}

/* 背景ロゴ（薄く） */
.footer::after{
  content:"";
  position:absolute;
  right:20px;
  bottom:-60px;
  width:400px;
  height:400px;
  background:url(img/company-logo.png);
  background-size:contain;
  background-repeat:no-repeat;
  opacity:0.19;
}

/* レイアウト */
.footer-inner{
  max-width:1200px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  gap:60px;
}

.footer-left{
  max-width:350px;
}

.footer-logo{
  font-size:22px;
  font-weight:500;
  letter-spacing:2px;
  margin-bottom:30px;
  border-bottom:1px solid rgba(255,255,255,.2);
  padding-bottom:15px;
}

.footer-address{
  font-size:14px;
  line-height:2;
  color:#dcdcdc;
}

/* ナビ */
.footer-nav{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.footer-nav a{
  color:#dcdcdc;
  text-decoration:none;
  font-size:14px;
  letter-spacing:1px;
  transition:.3s;
}

.footer-nav a:hover{
  color:#ffffff;
  transform:translateX(5px);
}

/* 採用ボタン */
.recruit-btn{
  display:inline-block;
  padding:14px 28px;
  border:1px solid #ffffff;
  color:#ffffff;
  text-decoration:none;
  font-size:14px;
  letter-spacing:1px;
  transition:.3s;
}

.recruit-btn:hover{
  background:#ffffff;
  color:#243f5c;
}

/* 下部 */
.footer-bottom{
  margin-top:100px;
  text-align:center;
}

.footer-line{
  width:100%;
  height:1px;
  background:rgba(255,255,255,.15);
  margin-bottom:20px;
}

.footer-bottom p{
  font-size:12px;
  color:#bbbbbb;
}

/* =============================
  フェードアップ
============================= */
.fade-up{
  opacity:0;
  transform:translateY(60px);
  transition:1s ease;
}
.fade-up.show{
  opacity:1;
  transform:translateY(0);
}


/* =============================
   HAMBURGER FIX
============================= */

.hamburger{
  display:none;
  width:28px;
  height:20px;
  position:relative;
  cursor:pointer;
  z-index:1001;
}

.hamburger span{
  position:absolute;
  width:100%;
  height:2px;
  background:#fff;
  left:0;
  transition:.3s;
}

.hamburger span:nth-child(1){top:0;}
.hamburger span:nth-child(2){top:9px;}
.hamburger span:nth-child(3){bottom:0;}

.hamburger.active span:nth-child(1){
  transform:rotate(45deg);
  top:9px;
}
.hamburger.active span:nth-child(2){
  opacity:0;
}
.hamburger.active span:nth-child(3){
  transform:rotate(-45deg);
  bottom:9px;
}
/* =======================================================================================
============================= *//* ===========================
  ここから各ページ
/* ===========================================================================================
  ビジネスページ
============================= */
/* =============================
   SUB PAGE HEADER
============================= */
.sub-header{
  background:#243f5c;
  padding:20px 8%;
}

.sub-header a{
  color:black;
  text-decoration:none;
  font-size:16px;
  letter-spacing:.05em;
}

/* =============================
   BREADCRUMB
============================= */
.breadcrumb{
  padding:20px 8%;
  font-size:14px;
  margin-top: 90px;
  color: #333;
}

.breadcrumb a{
  color:#333;
  text-decoration:none;
}


.breadcrumb span{
  margin:0 8px;
}

/* =============================
   BUSINESS SECTION
============================= */
.business-section{
  padding:20px 8%;
}

.business-section.gray{
  background:#f5f5f5;
}

.business-section h2{
  font-size:22px;
  margin-bottom:0px;
  border-left:4px solid #0f1a24;
  padding-left:15px;
  color:#333;
}
.business-section p{
  margin-top:2px;
  color:#333;
  letter-spacing:.2em;
}

/* =============================
   SLIDER
============================= */
.swiper{
  width:100%;
  height:500px;
}

.swiper-slide img{
  width:100%;
  height:100%;
  object-fit:contain;  
  background:#fff;    
}
.swiper-slide.gray img{ 
  background:#f5f5f5;    
}

/* ナビボタン色 */
.swiper-button-next,
.swiper-button-prev{
  color:#0f1a24;
}

/* =============================
   FOOTER
============================= */
.sub-footer{
  background:#243f5c;
  color:#fff;
  text-align:center;
  padding:40px 0;
  font-size:12px;
}

/* =============================
   RESPONSIVE
============================= */
@media(max-width:768px){
  .swiper{
    height:300px;
  }

}

/* ============================================================================================
   会社概要ページ
============================= */
.page-title{
  padding:30px 8% 30px;
}
.page-title h2{
  font-size:22px;
  margin-bottom:0px;
  border-left:4px solid #0f1a24;
  padding-left:15px;
  color:#333;
}

.page-title p{
  margin-top:2px;
  color:#333;
  letter-spacing:.2em;
}

/* =============================
   COMPANY INFO
============================= */
.company-wrap{
  padding:20px 8% 120px;
}

.company-info{
  max-width:800px;
}

.info-row{
  display:flex;
  padding:28px 0;
  border-bottom:1px solid #ddd;
}

.label{
  width:200px;
  font-weight:600;
  color:black;
}

.content{
  flex:1;
  line-height:1.8;
  color:#444;
}

/* =============================
   FACTORY BACKGROUND BLOCK
============================= */
.factory-visual{
  height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  color:#fff;
  background-size:cover;
  background-position:center;
  background-attachment:fixed; /* パララックス風 */
}


.factory-visual-1{
  background-image:url("img/about.jpg");
}

.factory-visual-2{
  background-image:url("img/IMG_0522.JPG");
}

.factory-overlay{
  background:rgba(0,0,0,.55);
  padding:60px 80px;
}

.factory-overlay h2{
  font-size:32px;
  margin-bottom:20px;
  letter-spacing:.08em;
}

.factory-overlay p{
  font-size:16px;
  letter-spacing:.1em;
  color:#ccc;
}


/* 背景リンク全体 */
.factory-link{
  display:block;
  text-decoration:none;
  color:inherit;
}

/* ホバー演出（控えめ） */
.factory-link:hover .factory-visual{
  transform:scale(1.02);
  transition:1s ease;
}

.factory-visual{
  transition:1s ease;
}

/* Mapテキスト */
.map-text{
  display:inline-block;
  margin-top:30px;
  font-size:14px;
  letter-spacing:.15em;
  color:#ddd;
  opacity:.8;
  transition:.3s;
}

.factory-link:hover .map-text{
  opacity:1;
  letter-spacing:.2em;
}




/* =============================
   FOOTER
============================= */
.sub-footer{
  text-align:center;
  padding:40px 0;
  background:#111;
  color:#aaa;
  font-size:13px;
}

/* =============================
   RESPONSIVE
============================= */
@media(max-width:900px){

  .info-row{
    flex-direction:column;
  }

  .label{
    margin-bottom:8px;
  }

  .factory-visual{
    height:50vh;
    background-attachment:scroll;
  }

  .factory-overlay{
    padding:20px 30px;
  }
  .factory-overlay h2{
    font-size: 22px;
  }

}





/* ============================================================================================
  　お問い合わせページ
============================= */
/* =============================
   CONTACT
============================= */
.contact-wrap{
  padding:0 8% 120px;
  max-width:800px;
  margin:auto;
}

.contact-intro{
  margin-bottom:60px;
  color:#555;
  line-height:1.8;
}

.contact-form{
  width:100%;
  color: black;
}

.form-group{
  margin-bottom:30px;
}

.form-group label{
  display:block;
  margin-bottom:10px;
  font-weight:600;
  font-size:14px;
}

.required{
  font-size:12px;
  color:#999;
  margin-left:10px;
}

.form-group input,
.form-group textarea{
  width:100%;
  padding:14px;
  border:1px solid #ccc;
  font-size:14px;
  background:#fafafa;
  transition:.3s;
}

.form-group input:focus,
.form-group textarea:focus{
  border:1px solid #000;
  background:#fff;
  outline:none;
}

.form-button{
  margin-top:40px;
}

.form-button button{
  background:#111;
  color:#fff;
  padding:14px 40px;
  border:none;
  font-size:14px;
  letter-spacing:.1em;
  cursor:pointer;
  transition:.3s;
}

.form-button button:hover{
  background:#333;
}

/* =============================
   RESPONSIVE
============================= */
@media(max-width:900px){

  .contact-wrap{
    padding:0 6% 100px;
  }

}






/* =======================================================================================
  　　　　　　　　タブレット以下
============================= */

/* =======================================================================================
  タブレット以下
============================= */
@media (max-width:1024px){

  section{
    padding:80px 6%;
  }

  .business-wrap{
    gap:30px;
  }

  .card img{
    height:300px;
  }
}

/* =============================
   MOBILE
============================= */
@media(max-width:900px){
  .split-inner{
    grid-template-columns:1fr;
    gap:60px;
  }
  .split-image img{
    height:350px;
  }
/* ハンバーガーメニュー */
  .nav{
    display:none !important;
  }
  .hamburger{
    display:block !important;
  }
  .nav.open{
    display:flex !important;
    position:fixed;
    top:0;
    right:0;
    width:70%;
    height:100vh;
    background:#0f1a24;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:30px;
  }
/* フッター */
  .footer{
    padding:80px 8% 30px;
  }
  .footer-inner{
    flex-direction:column;
    gap:50px;
  }
  .footer-right{
    margin-top:20px;
  }
  .footer::after {
    width: 220px;
    bottom: -0px;
  }

}

/* =============================
  スマホ
============================= */
@media (max-width:768px){

  section{
    padding:60px 5%;
  }
  .logo img{
    width: 75%;
    height: auto;
  }

  .hero-text{
    left:50%;
    top: 70%;
    text-align:center;
    width:90%;
  }

  .business-wrap{
    flex-direction:column;
  }

  .card img{
    height:250px;
  }

  .card-title{
    font-size:18px;
  }

}


/* ============================================================================================
   採用ページ
============================= */
/* RECRUIT PAGE */

.recruit-page{
font-family:'Noto Sans JP',sans-serif;
color: black;
}

/* HERO */

.recruit-hero{
padding:120px 20px;
text-align:center;
background:#f5f7fa;
}

.recruit-hero h1{
font-size:42px;
margin-bottom:20px;
}

.recruit-main-btn{
display:inline-block;
margin-top:30px;
padding:15px 40px;
background:#1e3a5f;
color:white;
text-decoration:none;
}

/* TITLE */

.recruit-title{
text-align:center;
margin-bottom:60px;
font-size:30px;
}

/* FACTORY */

.recruit-factory{
padding:100px 20px;
}

.recruit-swiper{
max-width:1000px;
margin:auto;
}

.recruit-swiper img{
width:100%;
height:350px;
object-fit:cover;
}

/* FEATURE */

.recruit-feature{
padding:100px 20px;
}

.recruit-feature-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
max-width:1000px;
margin:auto;
}

.feature-box{
border:1px solid #ddd;
padding:30px;
text-align:center;
}

/* JOB */

.recruit-jobs{
padding:100px 20px;
background:#fafafa;
}

.jobs-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
max-width:1000px;
margin:auto;
}

.job-card a{
display:inline-block;
margin-top:10px;
color:#1e3a5f;
}
.job-card{

height:220px;
border-radius:10px;
overflow:hidden;
position:relative;
cursor:pointer;
background-size:cover;
background-position:center;

display:flex;
align-items:flex-end;

transition:0.3s;

}

.job-card:hover{
transform:scale(1.05);
}

.job-overlay{

width:100%;
padding:20px;
color:white;

background:linear-gradient(
transparent,
rgba(0,0,0,0.7)
);

}

.job-overlay h3{
margin:0;
font-size:20px;
}

.job-overlay p{
margin:5px 0 0;
font-size:14px;
color:white;
}
/* 募集要項の画像 */
.robot{
background-image:url(img/robot.png);
}
.laser{
background-image:url(img/laser.png);
}
.yuatu{
background-image:url(img/press.png);  
}
.press{
background-image:url(img/press2.png);
}
.kinzoku{
background-image:url(img/kinzoku.png);  
}
.kako{
background-image:url(img/kako.png);  
}


/* TABLE */

.recruit-detail{
padding:100px 20px;
}

.recruit-table{
max-width:800px;
margin:auto;
width:100%;
border-collapse:collapse;
}

.recruit-table th{
background:#f5f5f5;
padding:15px;
width:200px;
}

.recruit-table td{
padding:15px;
border-bottom:1px solid #eee;
}

/* FLOW */

.recruit-flow{
padding:100px 20px;
background:#fafafa;
}

.flow-grid{
display:flex;
justify-content:center;
gap:40px;
flex-wrap:wrap;
}

.flow-grid div{
border:1px solid #ddd;
padding:20px;
width:120px;
text-align:center;
}

/* APPLY */

.recruit-apply{
padding:100px 20px;
}

.recruit-apply form{
max-width:600px;
margin:auto;
}

.form-group{
margin-bottom:20px;
}

.form-group input,
.form-group textarea,
.form-group select{
width:100%;
padding:10px;
border:1px solid #ccc;
}

.apply-btn{
padding:15px 40px;
background:#1e3a5f;
color:white;
border:none;
}

/* 固定ボタン */

.recruit-fixed-btn{
position:fixed;
bottom:20px;
right:20px;
background:#e53935;
color:white;
padding:15px 30px;
text-decoration:none;
border-radius:50px;
}



.flow-grid{
display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
}

.flow-grid div{
height:150px;
border:1px solid #ddd;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
background:#fff;
position:relative;
}
/* 矢印 */

.flow-grid div::after{
content:"▶︎";
position:absolute;
right: -30px;
font-size:28px;
color:#999;
}

/* 最後は矢印なし */

.flow-grid div:last-child::after{
display:none;
}

/* スマホ */

@media (max-width:768px){

.flow-grid{
flex-direction:column;
align-items:center;
gap:40px;
}

.flow-grid div{
height:100px;
width:80%;
max-width:300px;
}

/* 矢印 */

.flow-grid div::after{
content:"▼";
position:absolute;
bottom:-40px;
font-size:28px;
color:#999;
right: 45%;
}

/* 最後は矢印なし */

.flow-grid div:last-child::after{
display:none;
}
.recruit-feature-grid p{
  display: none;
}

.recruit-feature-grid{
grid-template-columns:1fr 1fr;
}

.jobs-grid{
grid-template-columns:1fr;
}

.recruit-table th {
width:100px;
}}