/* ===========================================
   Hirukawa Corporation - Variation 2
   =========================================== */

/* --- CSS Variables --- */
:root {
  --bg: #ffffff;
  --bg-sub: #f6f8fa;
  --fg: #333;
  --muted-fg: #666680;
  --accent: #0058b9;
  --accent-light: #e8f0fe;
  --teal: #00a59b;
  --border: #e0e4ea;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 6px 24px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { 
	scroll-behavior: smooth; 
	font-size: clamp(14px, 13px + 0.3vw, 17px);
	}

h1{font-size:2.2rem;}
h2{font-size:1.6rem;}
h3{font-size:1.3rem;}
p{font-size:1rem;}
body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Segoe UI", "Meiryo", sans-serif;
  color: #333;
  line-height: 1.8;
  color: var(--fg);
  background-color: var(--bg);
  font-size:1rem;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.norm_txt {margin-bottom: 1.6rem; /* 節ごとに余白 */}
.mar_bt15{margin-bottom: 15px;}
.mar_bt50 {margin-bottom: 50px;}
.pad_bt100 {padding-bottom: 100px;}
.wrap100 {width: 100%;}
.mar_auto{margin: 0 auto;}
.googlemap {
	width: 100%;
	height: 400px;
}
@media screen and (max-width: 768px) {
	.googlemap {
	width: 100%;
	height: 160px;
}
}


@media screen and (max-width: 768px) {
  body {
    zpadding: 0 8px;
  }
  .norm_txt {
    font-size: 0.8rem;
    line-height: 1.5;
  }
}


.safty_concept_title{/*h3サブタイトル*/
  position: relative;
  padding-left: 40px;
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 15px;
  color: var(--teal);
}    

.safty_concept_title::before{/*h3サブタイトル*/
  content:"";
  position:absolute;
  left:0;
  top:0.8em;
  width:28px;
  height:2px;
  background:var(--teal);
}

.safty_concept_title::after{/*h3サブタイトル*/
  content:"";
  position:absolute;
  left:28px;
  top:0.8em;
  width:6px;
  height:6px;
  background:var(--teal);
  border-radius:50%;
  transform:translateY(-2px);
}




/*============ cookie-banner ================*/
.cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 95%; 
  max-width: 1000px; 
  background-color: rgba(255, 255, 255, 0.95); /* 少し透過させるとオシャレです */
  color: #333;
  padding: 12px 25px; /* 上下を少し詰めると1行感がアップします */
  border-radius: 60px; /* カプセル型 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  z-index: 9999;
  display: none; /* JSでflexに切り替え */
  
  /* 横並びの肝 */
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.cookie-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  flex: 1; /* テキストが余ったスペースを埋める（ボタンを右に押し出す） */
}

.cookie-btn {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 30px;
  cursor: pointer;
  font-weight: bold;
  white-space: nowrap; /* ボタン内の文字が改行されないように固定 */
  transition: background 0.3s;
}

.cookie-btn:hover {
  background-color: #0056b3;
}

/* スマホ対応（600px以下） */
@media (max-width: 600px) {
  .cookie-banner {
    flex-direction: column; /* 縦並びに変更 */
    border-radius: 15px; /* 角丸を少し緩める */
    padding: 20px;
    text-align: center;
    gap: 15px;
  }
  
  .cookie-text {
    text-align: center;
    /* white-space: normal; (自動で改行されるようになります) */
  }

  .cookie-btn {
    width: 100%; /* スマホではボタンを横いっぱいにすると押しやすい */
  }
}




/* ===========================================
   Header - Rounded nav bar, floating over hero
   =========================================== */
.header2 {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 1300px;
  z-index: 1000;
  transition: all 0.4s ease;
}

.header2-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  border-radius: 60px;
  padding: 0 30px;
  height: 64px;
  box-shadow: var(--shadow-md);
  transition: all 0.4s ease;
}

/* Scrolled state: bottom corners rounded only */
.header2.scrolled {
  top: 0;
  width: 100%;
  max-width: 100%;
  border-radius: 0;
}

.header2.scrolled .header2-inner {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  height: 60px;
  padding: 0 40px;
}

/* Logo area */
.header2-logo {
  display: flex;
  align-items: center;
}

.header2-logo-img {
  height: 40px;
  width: auto;
  transition: height 0.3s ease;
}

.header2.scrolled .header2-logo-img {
  height: 34px;
}

/* Nav */
.nav2 { display: flex; align-items: center; }

.nav2-list {
  display: flex;
  align-items: center;
  gap: 0;
}

.nav2-item { position: relative; }

.nav2-link {
  display: block;
  padding: 20px 14px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--fg);
  transition: color 0.3s;
  white-space: nowrap;
}

.nav2-link:hover { color: var(--accent); }

/* Dropdown */
.dropdown2 {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  min-width: 200px;
  background-color: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
  padding: 8px 0;
  z-index: 100;
}

.nav2-item:hover .dropdown2 {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dropdown2-link {
  display: block;
  padding: 10px 24px;
  font-size: 0.82rem;
  color: var(--fg);
  transition: all 0.2s;
}

.dropdown2-link:hover {
  background-color: var(--accent-light);
  color: var(--accent);
}

/* Language toggle */
.nav2-lang {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 20px 14px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted-fg);
}

.nav2-lang a {
  transition: color 0.3s;
}

.nav2-lang a:hover,
.nav2-lang .active {
  color: var(--accent);
  font-weight: 700;
}

.nav2-lang-sep {
  color: var(--border);
}

/* Recruit CTA in nav */
.nav2-recruit .nav2-link {
  background-color: var(--teal);
  color: #fff;
  border-radius: 50px;
  padding: 10px 24px;
  margin-left: 8px;
  transition: all 0.3s;
}

.nav2-recruit .nav2-link:hover {
  background-color: #008f86;
  color: #fff;
}


.nav2-close{/*バツ*/
display:none;
}

/* Hamburger */
.menu2-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  background-color: var(--accent);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  gap: 5px;
  transition: background-color 0.3s;
}

.menu2-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background-color: #fff;
  border-radius: 2px;
  transition: all 0.3s;
}

.menu2-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu2-toggle.active span:nth-child(2) { opacity: 0; }

.menu2-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

.nav-disabled {/*新卒暫定措置*/
  color: #aaa;
  pointer-events: none;
  cursor: default;
}

.nav-disabled:hover {/*新卒暫定措置*/
  color: #aaa;
  background: none;
}


/* ===========================================
   Hero Slider - Full width
   =========================================== */
.hero2 {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
}

.hero2-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease, transform 6s ease;
  transform: scale(1.08);
  /* 追加: 通常時はマウスに反応させない（後ろのスライドを無視する） */
  pointer-events: none; 
  z-index: 1;
}

.hero2-slide.active {
  opacity: 1;
  transform: scale(1);
  /* 追加: アクティブな時だけマウスに反応させる */
  pointer-events: auto;
  z-index: 2; /* 前に出す */
}

.hero2-slide-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.hero2-slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0,30,80,0.65) 0%, rgba(0,0,0,0.2) 100%);
  z-index: 5;
}

.hero2-content {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 15%;
  color: #fff;
  pointer-events: auto;
}

.hero2-title {
  font-size: 4.0rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;
}

.hero2-slide.active .hero2-title {
  opacity: 1;
  transform: translateY(0);
}

.hero2-desc {
  font-size: 1.1rem;
  max-width: 34rem;
  line-height: 1.7;
  margin-bottom: 35px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease 0.6s, transform 0.8s ease 0.6s;
}

.hero2-slide.active .hero2-desc {
  opacity: 0.9;
  transform: translateY(0);
}

.hero2-btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 10px 24px;
  background-color: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 1.05rem;
  border-radius: 50px;
  transition: all 0.3s;
  opacity: 0;
  transform: translateX(-30px);
  pointer-events: auto; /* ボタンだけはクリックを有効にする */
}

.hero2-slide.active .hero2-btn {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.8s ease 0.9s, transform 0.8s ease 0.9s, background-color 0.3s;
}

.hero2-btn:hover {
  background-color: #003d8a;
  gap: 15px;
}

.hero2-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* Slider dots */
.hero2-dots {
  position: absolute;
  bottom: 40px;
  left: 8%;
  display: flex;
  gap: 10px;
  z-index: 20;
}

.hero2-dot {
  width: 40px;
  height: 3px;
  border: none;
  background-color: rgba(255,255,255,0.3);
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.3s;
}

.hero2-dot.active {
  background-color: #fff;
  width: 60px;
}


/* 左（今の状態） */
.hero-left .hero2-content {
  align-items: flex-start;
  text-align: left;
  padding-left: 15%;
  padding-right: 0;
}
.hero-left .hero2-btn {
  align-self: flex-start;
}

/* 中央 */
.hero-center .hero2-content {
  align-items: center;
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}
.hero-center .hero2-btn {
  align-self: center;
}

/* 右 */
.hero-right .hero2-content {
  align-items: flex-end;
  text-align: right;
  padding-right: 15%;
  padding-left: 0;
}
.hero-right .hero2-btn {
  align-self: flex-end;
}



@media (max-width:768px){

.hero-left .hero2-content,
.hero-right .hero2-content,
.hero-center .hero2-content{
  align-items:center;
  text-align:center;
  padding-left:20px;
  padding-right:20px;
}

.hero2-btn{
  align-self:center;
  font-size:1rem;
}
.hero2-desc{
font-size:0.95rem;
max-width: 28rem;
margin-left:auto;
margin-right:auto;
}


}


/* ===========================================
   News Section
   =========================================== */
.news2 {
  padding: 80px 0;
}

.news2-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

.news2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}

.news2-header .sec-title2 {
  margin-bottom: 0;
}

.news2-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  transition: gap 0.3s;
  white-space: nowrap;
}

.news2-more:hover {
  gap: 10px;
}

.sec-title2 {
  display: flex;
  align-items: baseline;
  gap: 15px;
  margin-bottom: 40px;
}

.sec-title2-en {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.sec-title2-ja {
  font-size: 2rem;
  font-weight: 700;
  color: var(--fg);
  position: relative;
  display: inline-block;
  padding-bottom: 12px;
}

.sec-title2-ja::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}

.sec-title2 {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.sec-title2.animated {
  opacity: 1;
  transform: translateY(0);
}

.sec-title2.animated .sec-title2-ja::after {
  transform: scaleX(1);
}


@media (max-width:768px){

.sec-title2{
flex-direction:column;
align-items:center;
text-align:center;
gap:6px;
}

.sec-title2-ja{
font-size:24px;
}

.sec-title2-en{
font-size:11px;
letter-spacing:2px;
}

}




.news2-list { border-top: 1px solid var(--border); }

.news2-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  transition: background-color 0.2s;
}

.news2-item:hover { background-color: var(--bg-sub); }

.news2-date {
  font-size: 0.85rem;
  color: var(--muted-fg);
  white-space: nowrap;
  min-width: 100px;
}

.news2-cat {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 50px;
  white-space: nowrap;
  min-width: 80px;
  text-align: center;
}

.news2-cat.info { background-color: #e8f0fe; color: #0058b9; }
.news2-cat.product { background-color: #e6f7f5; color: #00a59b; }
.news2-cat.event { background-color: #fff3e0; color: #e67e22; }
.news2-cat.ir { background-color: #f3e5f5; color: #8e24aa; }

.news2-body { flex: 1; }

.news2-title {
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--fg);
}

.news2-excerpt {
  font-size: 0.82rem;
  color: var(--muted-fg);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===========================================
   Features Section (3 columns - About style)
   =========================================== */
.features2 {
  padding: 100px 0;
  background-color: var(--bg-sub);
}

.features2-header {
  text-align: center;
  margin-bottom: 60px;
}

.features2-header .sec-title2 {
  justify-content: center;
  margin-bottom: 15px;
}

.features2-lead {
  font-size: 0.95rem;
  color: var(--muted-fg);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.9;
}

.features2-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  align-items:stretch;
}

.feature2-card {/*カードの中み*/
  background-color: #fff;
  border-radius: var(--radius-lg);
  padding: 40px 30px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s;
  display:flex;
  flex-direction:column;
}
.feature2-btn{/*カードのボタン*/
margin-top:auto;
align-self:center;
	width:auto;
}
.feature2-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.feature2-num {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 15px;
  line-height: 1;
}

.feature2-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--fg);
  line-height: 1.4;
}

.feature2-text {
  font-size: 0.88rem;
  color: var(--muted-fg);
  line-height: 1.9;
  text-align: left;
  margin-bottom:20px;
}

.feature2-title{/*蛍光線*/
position:relative;
display:inline-block;
}

.feature2-title::after{/*蛍光線*/
content:"";
position:absolute;

left:50%;
transform:translateX(-50%) skewX(-8deg);

width:90%;
bottom:-0.18em;
height:0.85em;

background:linear-gradient(
transparent 20%,
#eff709 20%,
#eff709 95%,
transparent 95%
);

opacity:.7;
z-index:-1;
}

.feature2-num{/*数字*/
font-family: "Poetsen One", sans-serif;
font-weight: 400;
font-size:3.2rem;
color:#1a5fb4;
transform:rotate(-10deg);
text-shadow:3px 3px 0 #f3fa88;
}




@media (max-width: 768px) {
.onlypc {
	display: none;
}
	.feature2-title {
		font-size: 1.3rem;}
	
}

/*------動画3個並ぶエリア、背景に動画------*/
	/* グリッド */
.cards2-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* 動画部分 */
.card2-video {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}

.card2-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* レスポンシブ */
@media (max-width: 1024px) {
  .cards2-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .cards2-grid {
    grid-template-columns: 1fr;
  }
}
.features2 {
  position: relative;
  overflow: hidden;
  color: #333; /* 背景が暗い想定 */
}

/* 背景動画 */
.features2-bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 0;
}

/* 黒 or 白オーバーレイ */
.features2-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.6); /* ← 黒50% */
  z-index: 1;
}

/* コンテンツを前面に */
.features2 .container {
  position: relative;
  z-index: 2;
}	





/* ===========================================
   Reason Section (text left, image right)
   =========================================== */
.reason2 {
  padding: 100px 0;
}

.reason2-inner {
  display: flex;
  align-items: center;
  gap: 60px;
}

.reason2-text {
  flex: 1;
}

.reason2-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.reason2-heading {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 25px;
  padding-bottom: 18px;
  color: var(--fg);
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reason2-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
}

.reason2-heading.animated {
  opacity: 1;
  transform: translateY(0);
}

.reason2-heading.animated::after {
  transform: scaleX(1);
}

.reason2-desc {
  font-size: 0.92rem;
  color: var(--muted-fg);
  line-height: 2;
  margin-bottom: 30px;
}

.reason2-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 36px;
  background-color: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 50px;
  transition: all 0.3s;
}

.reason2-link:hover {
  background-color: #003d8a;
  gap: 12px;
}

.reason2-link svg {
  width: 16px;
  height: 16px;
}

.reason2-image {
  flex: 0 0 48%;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.reason2-image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

/* ===========================================
   Cards Section (3 columns)
   =========================================== */
.cards2 {
  padding: 80px 0 100px;
  background-color: var(--bg-sub);
}

.cards2-header {
  text-align: center;
  margin-bottom: 50px;
}

.cards2-header .sec-title2 { justify-content: center; }

.cards2-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.card2 {
  background-color: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s;
}

.card2:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.card2-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card2-body {
  padding: 25px;
}

.card2-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--fg);
}

.card2-text {
  font-size: 0.85rem;
  color: var(--muted-fg);
  line-height: 1.8;
}

.card2-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 15px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  transition: gap 0.3s;
}

.card2-link:hover { gap: 10px; }

.card2-link svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
}


/*採用情報*/
/* ===========================================
   Recruit Banner - Modern Dark Version
   =========================================== */

.recruit-banner {
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.recruit-banner-bg {
  position: absolute;
  inset: 0;
  background-color: var(--teal);
}
.recruit-banner-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.05),
    rgba(255,255,255,0.05) 2px,
    transparent 2px,
    transparent 10px
  );
}

/* コンテンツ */
.recruit-banner-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
}

.recruit-banner-label {
  font-size: 0.85rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 20px;
  opacity: 0.7;
}

.recruit-banner-title {
  font-size: 2.6rem;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: 0.05em;
}

.recruit-banner-desc {
  font-size: 1rem;
  max-width: 640px;
  margin: 0 auto 50px;
  line-height: 1.9;
  opacity: 0.85;
}

/* ガラス風ボタン */
.recruit-banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 50px;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 50px;

  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;

  transition: all 0.3s ease;
}

/* 矢印 */
.recruit-banner-btn svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
  fill: #fff;
}

/* ホバー */
.recruit-banner-btn:hover {
  background: rgba(255,255,255,0.2);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.recruit-banner-btn:hover svg {
  transform: translateX(5px);
}
@media (max-width: 768px) {
  .recruit-banner {
    padding: 80px 20px;
  }

  .recruit-banner-title {
    font-size: 1.8rem;
  }

  .recruit-banner-desc {
    font-size: 0.95rem;
  }
}





/* ===========================================
   Contact Banner
   =========================================== */
.contact-banner {
  padding: 80px 0;
  background-color: var(--muted);
}

.contact-banner-inner {
  background: var(--primary);
  border-radius: var(--radius-xl);
  padding: 60px;
  text-align: center;
  color: var(--primary-foreground);
  position: relative;
  overflow: hidden;
}

.contact-banner-inner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: rgba(255,255,255,0.03);
  border-radius: 50%;
}

.contact-banner-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 15px;
  position: relative;
  z-index: 1;
}

.contact-banner-desc {
  font-size: 0.95rem;
  opacity: 0.8;
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
}

.contact-banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 42px;
  background-color: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 50px;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.contact-banner-btn:hover {
  background-color: #0052cc;
  transform: translateY(-2px);
  gap: 15px;
}



@media (max-width: 768px) {

.contact-banner-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
	line-height: 1.3;
}
.contact-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 20px;
    background-color: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    border-radius: 40px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}
}




/* ===========================================
   Footer
   =========================================== */
.footer2 {
  background-color: var(--fg);
  color: rgba(255,255,255,0.7);
  padding: 60px 0 30px;
}

.footer2-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(8, auto);
  gap: 15px; /* ← 少し詰める */
  margin-bottom: 20px;
  align-items: start;
}

.footer2-logo-img {
  height: 34px;
  width: auto;
  margin-bottom: 15px;
  }

.footer2-desc {
  font-size: 0.7rem;
  line-height: 1.6;
}

.footer2-title {
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 7px;
}

.footer2-links li { margin-bottom: 0px;
line-height: 1.3;}

.footer2-links a {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.6);
  transition: color 0.3s;
}

.footer2-links a:hover { color: #fff; }

.footer2-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 25px;
  text-align: center;
  color: rgba(255,255,255,0.4);
}
.footer2-bottom p{
  font-size: 0.7rem;
}

/* SPだけアコーディオン */
@media (max-width: 768px) {

  .footer2-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .footer2-title {
    position: relative;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;
  }

/* ulがあるタイトルだけ＋表示 */
.footer2-title.has-child::after {
  content: "＋";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.footer2-title.active::after {
  content: "−";
}
.footer2-title a {
  pointer-events: none;
}
  /* 開いたとき */
  .footer2-title.active::after {
    content: "−";
  }

  /* 最初は閉じる */
  .footer2-links {
    display: none;
    padding: 5px 0 10px;
  }

  /* 開いたら表示 */
  .footer2-links.open {
    display: block;
  }

  .footer2-links li {
    margin-bottom: 6px;
  }
	.footer2-bottom p{font-size: 0.6rem;}
}

/* ===================================
   About Hero - PC blue Box Layout
=================================== */

.wrapper_01{/*コンテンツのインナー*/
	max-width: 1200px; 
	margin: 0 auto; 
	padding: 0 20px;	
}

.section-block {/*セクションの区切り*/
  padding: 50px 0;
}


@media (min-width: 769px) {

	
  .about2-hero {
    position: relative;
    height: 420px;
    overflow: hidden;
    display: flex;
    align-items: center;
  }

  /* 右側画像を広げる */
  .about2-hero-bg {
    position: absolute;
    right: 0;
    top: 0;
    width: 75%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
  }
 .page_lead {/*ヘッダの中の説明*/
			color: #fff;
			font-size: 0.8rem;
			line-height: 1.4;
			margin-top: 15px;
			border-top: 1px solid #fff;
	 		padding-top: 10px;
		}
  /* overlayは消す（グリーンと喧嘩するので） */
  .about2-hero-overlay {
    display: none;
  }

  /* 中央コンテナ */
  .hero2-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }
	

	

  /* 左ボックス */
  .hero2-left {
    background: #00478b;
    color: #fff;
    width: 520px;
    padding: 40px 60px 40px;

    /* 画像に少し重ねる */
    transform: translate(100px, 30px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
  }
	.hero2-left::before {/*ななめせん*/
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.05) 0px,
    rgba(255,255,255,0.05) 2px,
    transparent 2px,
    transparent 10px
  );
  pointer-events: none;
}
  .hero2-en {
    font-size: 0.9rem;
    letter-spacing: 0.15em;
    margin-bottom: 18px;
    opacity: 0.8;
  }

  .hero2-ja {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.4;
  }

}
/*PCここまで*/

@media (max-width: 768px) {/*ヘッダースマホ*/

  .about2-hero {
    position: relative;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 画像を完全リセット */
  .about2-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    left: 0;
    right: 0;
    background-size: cover;
    background-position: center;
  }

  /* うっすら暗く */
  .about2-hero-overlay {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
  }

  /* 中央配置に完全リセット */
  .about2-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    text-align: center;
  }

  .hero2-inner {
    width: 100%;
    margin: 0;
	transform: translateY(40px);  /* ← 数値で微調整 */
  }

  /* 青ボックス解除 */
  .hero2-left {
    background: none;
    box-shadow: none;
    transform: none;
    padding: 0;
    width: auto;
  }

  .hero2-en {
    font-size: 0.75rem;
    color: #fff;
  }

  .hero2-ja {
    font-size: 1.6rem;
    color: #fff;
  }

}







/* 会社情報：企業コンセプト2個に分ける */
.divide_2_txtimg {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;  /* ← 上揃え */
  gap: 60px;
}

/* 左右幅 */
.text_area {
  flex: 3;
}

.image_area {
  flex: 2;
}
.flex_4 {
  flex: 4;
}
.flex_3 {
  flex: 3;
}

.flex_2 {
  flex: 2;
}

.flex_1 {
  flex: 1;
}
/* 画像 */
.divide_txt_wrap img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}
.divide_2_txtimg.reverse {/*左右逆にする*/
  flex-direction: row-reverse;
}

@media (max-width: 768px) {
  .divide_2_txtimg,
  .divide_2_txtimg.reverse{
    flex-direction: column;
    gap: 30px;
  }
}


/* ===== 引用風タイトル ===== */
.concept_title {
  position: relative;
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 30px;
  text-align: center; /* 中央なら */
}

/* spanを基準にする */
.concept_title span {
  position: relative;
  display: inline-block;
  padding: 0 50px; /* 左右に引用分の余白 */
}

/* 左 */
.concept_title span::before {
  content: "“";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 80px;
  color: #CBE4FA;
  font-family: serif;
  line-height: 1;
}

/* 右 */
.concept_title span::after {
  content: "”";
  position: absolute;
  right: 0;
  top: 0;
  font-size: 80px;
  color: #CBE4FA;
  font-family: serif;
  line-height: 1;
}


/* ===== レスポンシブ ===== */
@media screen and (max-width: 768px) {

  .divide_2_txtimg {
    flex-direction: column;
    gap: 30px;
  }

  .concept_title {
    font-size: 18px;
	line-height: 1.5;
  }

  .concept_title::before {
    font-size: 20px;
    top: -5px;
  }

  .concept_title::after {
    font-size: 20px;
  }

  .image_area img {
    max-width: 90%;   /* 画像が大きすぎないように */
    margin: 0 auto;
  }

}

.kaisyagaiyou {
	width: 100%;
	border-collapse: collapse;
}

.divide_2_txtimg table{
	flex: 1;
}



/*沿革のテーブル*/
.timeline {
  width: 100%;
  border-collapse: collapse;
  position: relative;
  margin-top: 40px;
}

/* 縦ライン */
.timeline::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--accent-light);

  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.2s ease;
}

.timeline.line-active::before {
  transform: scaleY(1);
}
/* 年号 */
.timeline th {
  width: 230px;
  text-align: left;
  vertical-align: top;
  padding: 0 20px 35px 50px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
  position: relative;
}

/* 丸 */
.timeline th::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 0px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--accent);
  border: 3px solid var(--accent-light);
}

/* 内容 */
.timeline td {
  padding: 0 0 35px 20px;
  font-size: 0.9rem;
  color: var(--fg);
  line-height: 1.7;
}


.timeline td span{
	color: #13C0C6;
	font-weight: bold;
}

.anim-up {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

.anim-up.is-active {
  opacity: 1;
  transform: translateY(0);
}

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

  .timeline::before {
    left: 12px;
  }

  .timeline tr {
    display: block;
    margin-bottom: 30px;
  }

  .timeline th,
  .timeline td {
    display: block;
    width: 100%;
  }

  .timeline th {
    padding: 0 0 8px 40px;
  }

  .timeline td {
    padding: 0 0 0 40px;
  }

  .timeline th::before {
    left: 3px;
  }
}

.history-wrap {/*沿革と画像の二分割*/
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

/* 左 */
.history-gallery {
  flex: 0.9;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  grid-auto-flow: dense;
  position: sticky;
  top: 80px;
  align-content:start;
  align-items: stretch;
}

.history-gallery a {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.history-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  transition: transform .5s ease, filter .5s ease;
}

.history-gallery img:hover{
  transform: scale(1.05);
  filter: brightness(1.05);
}

/* 横長 */
.history-gallery a.landscape {
  grid-column: span 2;
  aspect-ratio: auto;
}

/* 縦長 */
.history-gallery a.portrait {
  grid-row: span 2;
  aspect-ratio: auto;
}


/* 右 */
.history-timeline {
  flex: 1.1;
  position: relative;
}

@media screen and (max-width: 768px) {

  .history-wrap {
    flex-direction: column;
    gap: 40px;
  }

  .history-gallery {
    grid-template-columns: repeat(2, 1fr);
	  position: static;
  }

  .history-gallery a.landscape,
  .history-gallery a.portrait {
    grid-column: span 1;
    grid-row: span 1;
    aspect-ratio: 1 / 1;
  }

}




/*----------- 会社情報ー　事業紹介 ------------*/

/* 全体 */
.solution-list{
  max-width:900px;
}

/* 各行 */
.solution-item{
  display:flex;
  align-items:center;
  gap:20px;
  padding:18px 0;
  border-bottom:1px solid #eee;
}

/* 左アクセント */
.solution-accent{
  width:8px;
  height:80px;
  border-radius:20px;
  flex-shrink:0;
  margin-top: 20px;
}

/* テキスト */
.solution-text{
  flex:1;
}

.solution-title{
  font-size:18px;
  margin:0 0 5px;
}

.solution-desc{
  margin:0;
  font-size:14px;
  color:#666;
}

/* 右リンク */
.solution-link{
  position: relative;
  padding: 8px 18px;
  border-radius: 50px;
  text-decoration: none;
  font-size: 14px;
  transition: .3s;
  width: 12rem;
  text-align: center;
  display: inline-block;
  
  /* これがポイント */
  background: #fff;
  z-index: 1;
}

/* 共通：疑似ボーダー */
.solution-link::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50px;
  padding:2px; /* ←線の太さ */
  
  /* グラデ枠 */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  
  z-index:-1;
}

.solution-link:hover{
  background:#f5f5f5;
}

/* カラー */
.pink .solution-title{
  color:#c9497a;
}
.pink .solution-accent{
  background:#c9497a;
}


.purple .solution-accent{
  background:#7465c9;
}
.purple .solution-title{
  color:#7465c9;
}

.green .solution-accent{
  background:#42aa52;
}
.green .solution-title{
  color:#42aa52;
}

.pink .solution-link{
  color:#c9497a;
}
.pink .solution-link::before{
  background: linear-gradient(135deg, #c9497a, #7465c9);
}

.purple .solution-link{
  color:#7465c9;
}
.purple .solution-link::before{
  background: linear-gradient(135deg, #7465c9, #42aa52);
}

.green .solution-link{
  color:#42aa52;
}
.green .solution-link::before{
  background: linear-gradient(135deg, #42aa52, #c9497a);
}
.solution-link:hover{
  color:#fff;
}

.pink .solution-link:hover{
  background: linear-gradient(135deg, #c9497a, #7465c9);
}

.purple .solution-link:hover{
  background: linear-gradient(135deg, #7465c9, #42aa52);
}

.green .solution-link:hover{
  background: linear-gradient(135deg, #42aa52, #c9497a);
}

.divide_2_txtimg.solution-section{/*右の画像真ん中*/
  align-items: center;
}




@media (max-width:768px){

.solution-item{
  flex-direction: column; /* ←縦並びにする */
  align-items: center;   /* ←中央寄せ */
  text-align: center;
  gap:15px;
}

/* 順番を変える */
  .solution-accent{
    display: none;
  }

 .solution-text{
  }
.solution-title{
  font-size:16px;
　margin-bottom: 8px;
}

/* タイトル下にライン */
  .solution-title::after{
    content:"";
    display:block;
    width:40px;
    height:6px;
    border-radius:10px;
    margin:8px auto 0;
  }

  /* カラーごとに色分け */
  .pink .solution-title::after{
    background:#c9497a;
  }

  .purple .solution-title::after{
    background:#7465c9;
  }

  .green .solution-title::after{
    background:#42aa52;
  }	
	
	
	
	
.solution-desc{
  font-size:13px;
  width: 100%;
}

.solution-link{
  padding:6px 14px;
  font-size:12px;
  margin-top: 10px;
}

}


/*------------- 営業所ページ -----------------*/

.office{
max-width:1100px;
margin: 0 auto 60px;
padding:0px 20px;
zzfont-size: clamp(0.95rem, 0.9rem + 0.4vw, 1.1rem);
line-height:1.7;
}


/* タイトル */

.office-title{
text-align:center;
margin-bottom:40px;
font-size:28px;
}


/* ナビ */


.office-nav a:hover{
opacity:.85;
}


.office-nav{
display:flex;
justify-content:center;
gap:14px;
margin-bottom:60px;
position:sticky;
top:80px;
background:#fff;
padding:12px 0;
z-index:20;
}

.office-nav a{
padding:10px 20px;
border-radius:999px;
text-decoration:none;
font-size:14px;
color:#fff;
}

/* 色 */

.nav-east{background:#002b49;}
.nav-west{background:#0076ce;}
.nav-overseas{background:#93bcd6;}
/* エリア */

.area-header{
margin:40px 0 20px;
}

/* h3 */
.area-header{
margin:40px 0 20px;
}

/* カプセル */

.area-pill{

display:inline-block;

padding:12px 28px;

border-radius:999px;

background:#002b49;

text-align:center;

}


/* 英字 */

.area-en{

display:block;
font-size:11px;
letter-spacing:2px;
color:#e9f707;
font-weight:700;
margin-bottom:2px;

}


/* 日本語 */

.area-ja{

color:#fff;
font-size:22px;
font-weight:700;
margin:0;
}
.west .area-pill{
background:#0076ce;
}

.overseas .area-pill{
background:#93bcd6;
}


/* リスト */

.office-list{
border-top:1px solid #dce6f5;
}

/* 営業所 */

.office-item{

display:grid;

grid-template-columns: 180px minmax(300px,1fr) 160px 160px;
gap:20px;

padding:20px;

border-bottom:1px solid #dce6f5;

align-items:center;
}

.office-address{

display:flex;
gap:10px;
align-items:flex-start;
}


.office-post{
white-space:nowrap;
}


.office-address-main{
flex:1;
}
@media (max-width:768px){

.office-address{
flex-direction:column;
gap:2px;
}

}


/* 交互背景 */

.office-item:nth-child(even){
background:#f3f8ff;
}


/* 営業所名 */

.office-name{
font-weight:bold;
position:relative;
padding-left:14px;
}

#east .office-name:before{
content:"";
width:4px;
height:16px;
background:#002b49;
position:absolute;
left:0;
top:4px;
}

#west .office-name:before{
content:"";
width:4px;
height:16px;
background:#0076ce;
position:absolute;
left:0;
top:4px;
}

#overseas .office-name:before{
content:"";
width:4px;
height:16px;
background:#93bcd6;
position:absolute;
left:0;
top:4px;
}

/* 住所 */

#east .office-address i{
color:#002b49;
margin:0 6px;
}

#west .office-address i{
color:#0076ce;
margin:0 6px;
}

#overseas .office-address i{
color:#93bcd6;
margin:0 6px;
}

.office-contact{
display:grid;
grid-template-columns:160px 160px;
gap:20px;
}

/* TEL FAX */

.office-tel,
.office-fax{
font-size: 1rem;
white-space:nowrap;
}

@media (max-width:768px){
	
.wrapper_01 {
	width: 100%;
	padding: 0;
	}	

.section-block {
    padding: 0px 0;
}

	
.office-contact{
display:flex;
gap:16px;
}	
	
	
	
.sec-title2-ja{
font-size:22px;
}

.sec-title2-en{
font-size:11px;
}
	
.hero2-left{
text-align:center;
width:100%;
}

.hero2-inner{
justify-content:center;
}

.hero2-left p,
.hero2-left span{
display:block;
font-size:12px;
letter-spacing:2px;
margin-bottom:4px;
color: #fff;
width: 80%;
margin: 0 auto;
}

.hero2-ja{
font-size:28px;
}	
	
.office-item{
padding:16px;
border-radius:6px;
background:#fff;
margin-bottom:10px;
}	
	
.area-header{
margin:30px 0 10px;
}

.area-pill{
display:block;
width:100%;
border-radius:8px;
padding:12px 10px;
}

.area-en{
font-size:11px;
}

.area-ja{
font-size:18px;
}
.area-title{
font-size:20px;
}
.office{
padding:0px 5px;
}

.office-item{

grid-template-columns:1fr;

gap:6px;

}


.office-name{
font-size:16px;
}


.office-tel,
.office-fax{
display:inline-block;
}

.office-fax{
margin-left:16px;
}
.office-contact{
gap:15px;
}
.office-nav{
margin-bottom:30px;
gap:10px;
}

.office-nav a{
padding:8px 16px;
font-size:13px;
}

}






/* ===========================================
   Scroll animation
   =========================================== */
.anim-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.anim-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===========================================
   Responsive
   =========================================== */
@media (max-width: 1024px) {
  .nav2-link { padding: 20px 10px; font-size: 0.78rem; }
  .reason2-inner { gap: 40px; }
  .reason2-image { flex: 0 0 42%; }
}

@media (max-width: 768px) {
  .header2 { top: 10px; width: calc(100% - 20px); }

  .header2-inner {
    padding: 0 8px;
    height: 40px;
    border-radius: 16px;
  }

.header2-logo-img {
    height: 30px;
    width: auto;
}
.menu2-toggle {
	width: 28px;
	height: 28px;
	}	
.menu2-toggle span {
    display: block;
	width: 15px;
	height: 1px;
	margin: 0.1px 0;    /* ★ここの数値を小さくすると間隔が狭くなります */
    transition: all 0.3s ease;
	}
	
	
	
	
  .header2.scrolled .header2-inner {
    border-radius: 0 0 16px 16px;
	height: 40px;
  }

  .menu2-toggle { display: flex;
	box-shadow:0 4px 10px rgba(0,0,0,.15);}
.menu2-toggle:hover{
background:#004aa0;
}
  .nav2 {
    position: fixed;
    top: 0;
    right: -100%;
    width: 95%;
    max-width: 380px;
    height:100vh;
	overflow:hidden; 
	-webkit-overflow-scrolling:touch;
    transition:right .35s cubic-bezier(.4,0,.2,1);
    padding: 30px 0 40px;
    background:#fff;
    box-shadow: -5px 0 30px rgba(0,0,0,0.15);
    z-index: 1001;
	overscroll-behavior:contain;
  }

.nav2.open { 
	right: 0;
	}
.nav2-close{
position:absolute;
top:20px;
right:20px;
font-size:26px;
background:none;
border:none;
cursor:pointer;
color:#333;
display: block;
}
.nav2-link{
  scroll-margin-top:80px;
}	
	
  .nav2-list {
    flex-direction: column;
    gap: 0;
	width:100%;
	padding:0 20px;
	overflow-y:auto;
    max-height:100vh;
  }

 /* 各メニュー */

.nav2-item{
border-bottom:1px solid #eee;
width:100%;
}
  .nav2-link {/* メニューリンク */
    font-size:15px;
	padding:18px 24px;
	font-weight:500;
    width:100%;
	display:flex;
	align-items:center;
	justify-content:space-between;
  }

  .nav2-recruit .nav2-link {
    border-radius: 0;
    margin-left: 0;
    justify-content: center;
  }

 
.dropdown2{
  position: static;
  transform: none;
  box-shadow: none;
  border-radius: 0;
  left: 0;
  transform:none !important;
  width: 100%;
  display:none;
  padding:6px 0;
  background:#f7f9fc;
  border-top:1px solid #eee;
}
.dropdown2 li{
  width:100%;
}
.nav2-item.open .dropdown2{
  display:block;
}

/* サブメニュー */

.dropdown2-link{
font-size:14px;
padding:14px 24px 14px 40px;
border-bottom:1px solid #eef1f6;
display:block;
width:100%;
}
/* hover */

.dropdown2-link:hover{
background:#eef4ff;
}

/* 言語 */

.nav2-lang{
font-size:13px;
padding:18px 24px;
   border-bottom: 1px solid var(--border);
  }

  .dropdown-arrow2 {
    display: inline-flex;
    margin-left: auto;
    padding: 4px;
    transition: transform 0.3s;
  }

  .nav2-item.open .dropdown-arrow2 { transform: rotate(180deg); }

/* 採用ボタン */

.nav2-recruit .nav2-link{
margin:15px 0 0;
border-radius:30px;
font-size:14px;
}	
	
	
	
  /* Mobile overlay */
  .nav2-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:rgba(0,0,0,.45);
backdrop-filter:blur(3px);
    z-index: 998;
  }

  .nav2-overlay.show { display: block; }

  /* Hero */
  .hero2 { height: 80vh; min-height: 500px; }
  .hero2-title { font-size: 2rem; }
  .hero2-content { padding: 0 20px; }
  .hero2-dots { left: 20px; bottom: 30px; }

  /* News */
  .news2-item { flex-wrap: wrap; gap: 8px; }
  .news2-date { min-width: auto; }

  /* Features */
  .features2-grid { grid-template-columns: 1fr; gap: 20px; }

  /* Reason */
  .reason2-inner { flex-direction: column; gap: 30px; }
  .reason2-image { flex: 0 0 auto; width: 100%; }
  .reason2-image img { height: 260px; }
  .reason2-heading { font-size: 1.5rem; }

  /* Cards */
  .cards2-grid { grid-template-columns: 1fr; }

  /* Footer */
  .footer2-grid { grid-template-columns: 1fr; gap: 30px; }

  /* About hero */
  .zabout2-hero { height: 350px; }
  .about2-title { font-size: 2rem; }
  .about2-hero-content { padding: 0 0 30px; }
}

@media (min-width: 769px) {
  .dropdown-arrow2 { display: none; }
  .nav2-overlay { display: none !important; }
}







/*------------------------------------------

取り扱いメーカー

---------------------------------------------*/


.suppliers_list_wrap > div{/*グループレイアウト（h3 左・リスト右）*/
  display:flex;
  align-items:stretch;
  margin-bottom:20px;
}

.suppliers_list_wrap h3{/*見出し（あ・か・さ）*/
  width:80px;
  min-width:80px;
  font-size:28px;
  font-weight:700;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
}

.suppliers_list_wrap ul{/*メーカーリスト（右2列）*/
  flex:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 20px;
  padding:20px;
  list-style:none;
}

.suppliers_list_wrap li{/*メーカーリスト（右2列）*/
  zfont-size:16px;
}

.suppliers_list_wrap li a{/*メーカーリスト（右2列）*/
  color:#1f4f8b;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:all .25s;
}

.suppliers_list_wrap li a:hover{/*メーカーリスト（右2列）*/
  color:#0c2f5a;
  border-bottom:1px solid #0c2f5a;
}


.suppliers_list_wrap > div:nth-child(odd) h3{/*行ごと背景色（交互）*/
  background:#e6f0fa;
}

.suppliers_list_wrap > div:nth-child(odd) ul{/*行ごと背景色（交互）*/
  background:#f4f8fc;
}

.suppliers_list_wrap > div:nth-child(even) h3{/*行ごと背景色（交互）*/
  background:#f3efe6;
}

.suppliers_list_wrap > div:nth-child(even) ul{/*行ごと背景色（交互）*/
  background:#faf7f0;
}

.oursuppliers_head{/*上の説明テキスト（中央＆大きめ）*/
  text-align:center;
  font-size: 1.2rem;
  margin-bottom:40px;
  line-height: 1.5;
}

.oursuppliers_head span{/*上の説明テキスト（中央＆大きめ）*/
  margin:0 10px;
  font-weight:600;
}



.oursuppliers_head{/*TEL / FAX 固定*/
  position:sticky;
  top:80px;   /* ヘッダー高さに合わせて調整 */
  z-index:100;
  
  text-align:center;
  font-size: 1.2rem;
  font-weight:500;

  background:#f0f0d0;
  padding:16px 20px;
  margin-bottom:40px;

  border-radius:6px;
  border:1px solid #d0d15a;
}
.oursuppliers_head span{/*TEL / FAX は強調*/
  margin:0 10px;
  font-weight:700;
  color:#1f4f8b;
}

.oursuppliers{/*本文が隠れないように*/
  padding-bottom:80px;
}


.suppliers_list_wrap i{/*外部リンクアイコン余白*/
  margin-left:6px;
  color:#1f4f8b;
}

@media (max-width:768px){/*sp用*/

.suppliers_list_wrap > div{
  flex-direction:column;
}
.oursuppliers_head{
	font-size: 0.9rem;
	line-height: 1.5;
	}
.suppliers_list_wrap h3{
  width:100%;
  padding:8px 0;
}
.oursuppliers_head span{
  display:block;
  margin:6px 0;
}
.suppliers_list_wrap ul{
  grid-template-columns:1fr;
}

}

/*----------------- BIM -------------------*/

.biminfo {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 500;
    background: #f0f0d0;
    padding: 16px 20px;
    margin-bottom: 40px;
    border-radius: 6px;
    border: 1px solid #d0d15a;
}


 /* BIM画像タイル */
#aboutbim .image_area {/*4枚*/
  flex:2;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}

#aboutbim .image_area a {/*4枚*/
  display: block;
　overflow:hidden;
  border-radius:10px;
}

#aboutbim .image_area img {/*4枚*/
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#aboutbim .image_area.single{/*一枚の時*/
  display:block;
}

#aboutbim .image_area.single a{/*一枚の時*/
  display:block;
}

#aboutbim .image_area.single img{/*一枚の時*/
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
}
#aboutbim .image_area a img{
  transition: transform .4s ease;
}

#aboutbim .image_area a:hover img{
  transform: scale(1.05);
}


@media (max-width:768px){

#aboutbim .divide_2_txtimg{
  flex-direction:column;
}

#aboutbim .image_area{
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}

#aboutbim .image_area.single img{
  width:100%;
  height:auto;
}

}




/* ===========================================
   Works（施工実績）
=========================================== */

.works-section {
  padding: 00px 0;
}


/* containerの代わり */
.works-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.works-wrap {/*ボタンのスクロールのため*/
  position: relative;
  overflow: visible;
}

/* sticky */
.works-filter {
  position: sticky;
  top: 80px;
  z-index: 50;
  padding: 12px 0;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  background-color: #fff;
}

#ourworks .sec-title2 {
	margin-top: 60px;
}



/* ボタン共通（office-navベース） */
.filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: 0.3s;
  white-space: nowrap;
}


.works-filter .filter-btn:hover {
  opacity: 0.7;
}
/* PDFボタンだけ別 */
.pdf-btn {
  border: 1px solid #F36C6F;
  color: #fff;
  background: #e05e3f;
}

.pdf-btn:hover {
  background: #F36C6F ;
  color: #fff;
}

/* グリッド */
.works-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  align-items: stretch;
}
body#ourworks .first-works .works-grid {
  margin-top: 50px;
  margin-bottom: 50px;
}


/* カード */
.work-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

/* 画像 */
.work-img {
  width: 100%;
  height: 220px; /* ←固定 */
  overflow: hidden;
  border-radius: 12px;
}
.work-img a {
  display: block;
  width: 100%;
  height: 100%;
}
.work-img.portrait {
  height: 220px;
}

.work-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.4s;
}

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

/* 下の情報 */
.work-body {
  margin-top: 12px;
}

/* カテゴリ */
.work-cat {
  display: inline-block;
  font-size: 0.7rem;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--accent-light);
  color: var(--accent);
  margin-bottom: 6px;
}

/* タイトル */
.work-title {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 4px;
}

/* メタ */
.work-meta {
  font-size: 0.75rem;
  color: var(--muted-fg);
}

/* オフィス（青） */
.cat-office {
  background: #41a4f0;
  color: #fff;
}

/* 教育（緑） */
.cat-edu {
  background: #16b455;
  color: #fff;
}

/* 工場（オレンジ） */
.cat-factory {
  background: #d6ac05;
  color: #fff;
}

/* その他（紫） */
.cat-other {
  background: #a205d6;
  color: #fff;
}


/* Wide---PCサイズの場合：最初の2つを2列分の幅にする */
@media (min-width: 768px) {
  .work-card-lg {
    grid-column: span 2; /* 2枚分ぶち抜き */
  }

  /* ワイド表示の時、画像が伸びすぎないよう高さを調整（任意） */
  .work-card-lg .work-img {
    aspect-ratio: 16 / 9; /* 横長を維持 */
  }
  
  .work-card-lg .work-img img {/*Wide*/
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像を枠いっぱいに綺麗に収める */
  }
}




@media (max-width: 1024px) {
  .works-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {

  .works-section {
    padding: 0px 0;
  }

  .works-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

   .work-img {
    height: 120px; /* ←SP用に少し小さく */
  }
	.work-img.portrait {
    height: 120px;
  }
	.work-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .work-title {
    font-size: 0.8rem;
    line-height: 1.3;
  }
	.work-cat {
    font-size: 0.65rem;
    padding: 2px 8px;
  }
  .work-meta {
    font-size: 0.7rem;
  }
 .filter-btn {
    height: 34px;
    font-size: 0.75rem;
    padding: 0 12px;
  }
.works-filter {
    gap: 10px;
    margin-bottom: 20px;
  }
  .pdf-btn {
    margin-left: 0; /* SPは横並び崩れるので解除 */
  }
	
	
 .work-card.wide {/*WIDE*/
    grid-column: span 1; /* ←リセット */
  }

}



/*------------- 採用情報 -----------------*/




#recruit .recruit-banner-bg {
  z-index: 0;
}

#recruit .recruit-banner .container {
  position: relative;
  z-index: 2;
  background-color: #fff; 
    max-width: 60%;
    margin: 0 auto;
    padding: 20px 20px;
	border-radius: 60px;
}

.h1-area {
	margin: 50px auto;
	text-align: center;
}

.h1-area h1 {
  position: relative;
  display: inline-block;
  color:  var(--teal);
}
.h1-area p{
	text-align: justify;
	width: 60%;
	margin: 20px auto;
}
.h1-area h1::before,
.h1-area h1::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 40px;
  height: 2px;
  background:  var(--teal);
  transform: rotate(45deg);
}

.h1-area h1::before {
  left: -50px;
}

.h1-area h1::after {
  right: -50px;
  transform: rotate(-45deg);
}



/*--------- 募集要項 -----------*/

/* ===============================
   採用テーブル（既存クラス拡張）
   =============================== */
.saiyoutable {
	width: 70%;
  border-collapse: collapse;
  font-size: 0.9rem;
}


/* 行 */
.saiyoutable tr {
  border-bottom: 1px solid var(--border);
}

.saiyoutable tr:first-child {
  border-top: 1px solid var(--border);
}

/* 見出し */
.saiyoutable th {
  width: 160px;
  padding: 18px 20px;
  text-align: left;
  font-weight: 600;
  color: var(--fg);
  background-color: #dcf2ed;
  vertical-align: top;
}

/* 内容 */
.saiyoutable td {
  padding: 18px 20px;
  color: var(--fg);
  line-height: 1.7;
}

/* rowspanのやつ中央寄せ（既存style上書き） */
.saiyoutable th[rowspan] {
  vertical-align: middle;
}

@media (max-width: 768px) {

  .saiyoutable,
  .saiyoutable tbody,
  .saiyoutable tr,
  .saiyoutable th,
  .saiyoutable td {
    display: block;
    width: 100%;
  }

  .saiyoutable tr {
    margin-bottom: 20px;
    border: 1px solid var(--border);
  }

  .saiyoutable th {
    width: 100%;
    padding: 12px 15px;
    font-size: 0.85rem;
    background-color: #dcf2ed;
  }

  .saiyoutable td {
    padding: 12px 15px;
    font-size: 0.85rem;
  }

  /* rowspan崩れ対策 */
  .saiyoutable th[rowspan] {
    vertical-align: top;
  }
}












/*---------インタビュー----------*/

/* 全体 */
.interview {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 20px;
}

/* 各ブロック（カード化） */
.interview-item {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  margin-bottom: 80px;

  position: relative;
  background: #d8eceb;
  padding: 40px;
  border-radius: 20px;
}

/* 逆配置 */
.interview .interview-item.reverse {
  flex-direction: row-reverse;
}

/* プロフィール（重なり） */
.profile {
  width: 260px;
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  text-align: center;

  position: relative;
  z-index: 2;
  transform: translateY(-80px);

  box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}

.profile-img img {
  width: 100%;
  border-radius: 12px;
}

.profile-meta {
  margin-top: 10px;
  font-weight: bold;
  font-size: 14px;
  color: #555;
}
/* Q&A（カード） */
.qa {
  flex: 1;
  background: #ffffff;
  padding: 30px;
  border-radius: 16px;
}

/* 各質問 */
.qa-block {
  margin-bottom: 25px;
}

/* 質問（線＋丸） */
.question {
  font-weight: bold;
  margin: 40px 0 20px 0;
  position: relative;
  padding-left: 50px;
}

/* 横線 */
.question::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 45px;
  height: 2px;
  background: #2f6fed;
  transform: translateY(-50%);
}

/* 丸 */
.question::before {
  content: "";
  position: absolute;
  left: 40px;
  top: 50%;
  width: 8px;
  height: 8px;
  background: #2f6fed;
  border-radius: 50%;
  transform: translateY(-50%);
}

/* 回答 */
.answer {
  background: #e7f4f7;
  padding: 15px 20px;
  border-radius: 12px;
  line-height: 1.7;
}

/* ホバーで少し浮く（任意） */
.interview-item:hover {
  transform: translateY(-5px);
  transition: 0.3s;
}

/* スマホ */
@media (max-width: 768px) {
  .interview-item {
    flex-direction: column;
    padding: 30px 20px;
  }

  .interview .interview-item.reverse {
    flex-direction: column;
  }
.interview-item {
	gap: 10px;
	}
  .profile {
    width: 50%;
    margin-top: 0; /* 重なり解除 */
	transform: none;
	margin: 0px auto;
  }
}

/* ===============================
   SP
=============================== */
@media (max-width:768px){

  #recruit .hero2-title {
    font-size: 2.3rem;
    line-height: 1.25;
    letter-spacing: 0.02em;

    padding: 0 0 0 20px;

    color: #222;
    font-weight: 700;

    /* 装飾なしでシンプルに */
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
	
  }

  #recruit .hero2-desc {
    width: 67%;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.6;
  }

#recruit .hero2-content {
	position: relative;
	z-index: 200;}
#recruit .recruit-banner .container {
	max-width: 95%;
	padding: 5px;
	border-radius: 30px;}
	

#recruit .news2-item {
    flex-direction: column;
    gap: 6px;
  }

#recruit .news2-date {
    font-size: 0.8rem;
  }

#recruit .news2-cat {
    margin-bottom: 4px;
  }

#recruit .news2-title {
    font-size: 0.95rem;
    line-height: 1.4;
  }
#recruit .features2-header {
		margin-bottom: 5px;
	}	
.h1-area h1{
	font-size: 1.5rem;
	padding: 15px;
	}
.h1-area {
	width: 90%;
	line-height: 1.2;
	}	
.h1-area h1::before,
.h1-area h1::after {
    display: none;

}
.saiyoutable {
	width: 98%;
}	
.h1-area p{
	width: 90%;}	
	
	
}