@charset "utf-8"; /* CSS Document */
/* ヘッダー全体 */
.header{  position: fixed;top: 0;left: 0;width: 100%;/* ▼ 修正: 初期背景を透明に、影を削除 */ box-shadow: none;z-index: 1000;transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;}
#about .header , #people .header, .Environment .header, .recruitinginfo .header{ background-color: rgba(255, 255, 255, 0.7);}
.header-inner{  display: flex;justify-content: space-between;align-items: center;padding: 0 20px;max-width: 1200px;margin: 0 auto;transition: all 0.3s ease;}
/* ロゴ */
.header-logo a{  display: block;}
.header-logo img{  display: block;transition: all 0.3s ease;}
.header:not(.scrolled) .logo-small{  display: none;}
.header:not(.scrolled) .logo-large{  display: block;width: 96px;}
/* スクロール時のヘッダースタイル */
.header.scrolled , #about .header.scrolled , #people .header .scrolled{  /* ▼ 追加: スクロール時に背景色、影、文字色を設定 */ background-color: #fff !important;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);color: #333;}
.header.scrolled .header-inner{  padding-top: 0;padding-bottom: 0;}
.header.scrolled .logo-large{  display: none;}
.header.scrolled .logo-small{  display: block;width: 96px;position: absolute;top: 0;z-index: 9999}
.header-right{  display: flex;align-items: center;}
/* ▼▼▼ スマホ向けスタイル (〜959px) ▼▼▼ */
@media screen and (max-width: 959px){  .header:not(.scrolled) .logo-large{  width: 50px;transition: all 0.3s ease;}
.header.scrolled .logo-small{  width: 40px;padding: 0;z-index: 1}
/* ▼ 追加: スマホ用のENTRYボタン */ .entry-button-sp{  display: block;background-color: #00243F;color: #fff; /* padding: 8px 16px; */ padding: 17px 16px; font-size: 14px;font-weight: bold;z-index: 999;margin-right: 15px;}
.is-active + .entry-button-sp{ background-color: #fff;color: #00243F}
.hamburger-button{  display: flex;flex-direction: column;justify-content: space-around;width: 32px;height: 32px;background: transparent;border: none;cursor: pointer;padding: 0;z-index: 1001;}
.hamburger-button span{  display: block;width: 100%;height: 3px;background-color: #333;border-radius: 3px;transition: all 0.3s ease;}
.hamburger-button.is-active span{  background: #fff}
.hamburger-button.is-active span:nth-of-type(1){  transform: translateY(11px) rotate(45deg);}
.hamburger-button.is-active span:nth-of-type(2){  opacity: 0;}
.hamburger-button.is-active span:nth-of-type(3){  transform: translateY(-11px) rotate(-45deg);}
.global-nav{  position: fixed;top: 0;right: 0;width: 90%;max-width: 350px;height: 100vh;background-color: #00243F;padding-top: 80px;transform: translateX(100%);transition: transform 0.3s ease;overflow-y: auto;z-index: 99}
.global-nav.is-active{  transform: translateX(0);}
.nav-list{  display: block;}
/* ▼ 修正: スマホでも英語表記が見えるように調整 */ .nav-item > a{  display: block;padding: 15px 20px;border-bottom: 1px solid #ddd;font-weight: bold;}
.nav-en{  display: block;font-size: 0.7em;font-weight: normal;color: #777;}
/* ▼ 修正: スマホでのメガメニュー（アコーディオン）の見た目 */ .megamenu{  display: none;/* JSで開閉 */ background-color: #e9e9e9;position: static;width: auto;box-shadow: none;padding: 0;/* ▼ 修正: 内側の余白を削除 */}
.megamenu-inner{  /* ▼ 修正: グリッドレイアウトを解除 */ display: block;gap: 0;}
/* ▼ 修正: カードスタイルをリストスタイルに変更 */ .megamenu-card{  display: block;background-color: transparent;border-radius: 0;overflow: visible;box-shadow: none;color: #fff}
.megamenu-card img{  display: none;/* 画像を非表示に */}
.megamenu-card-title{  display: block;padding: 10px 20px 10px 30px;/* 左側にインデントを追加 */ font-size: 14px;text-align: left;font-weight: normal;background-color: #36749D;}
/* アコーディオン用の矢印 */ .has-megamenu > a{  position: relative;color: #fff;font-size: 20px;letter-spacing: 0.05em}
.has-megamenu > a::after{  content: '';position: absolute;right: 18px;top: 50%;width: 8px;height: 8px;border-bottom: 2px solid #FFF;border-right: 2px solid #FFF;transform: translateY(-50%) rotate(-45deg);transition: transform 0.3s ease;}
.has-megamenu.is-open > a::after{  transform: translateY(-25%) rotate(45deg);}
.has-megamenu > a span{  display: none}
}
/* ▼▼▼ 大PC向けスタイル (1280px〜) ▼▼▼ */
/* ▼▼▼ PC向けスタイル (960px〜) ▼▼▼ */
@media screen and (min-width: 960px){  /* ▼ 追加: スマホ用のENTRYボタンはPCでは非表示 */ .header-right{  width: 75%;}
.entry-button-sp{  display: none;}
.hamburger-button{  display: none;}
.global-nav{  display: block;width: 100%}
.nav-list{  display: flex;align-items: center;}
.nav-item{  position: static;}
/* ▼ 修正: メインメニュー項目のデザイン */ .nav-item > a{  display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 30.2px 40px;font-weight: bold;letter-spacing: 0.2em;transition: background-color 0.2s;line-height: 1em;}
.header.scrolled .nav-item > a{  padding: 20.2px 40px;}
.is-small .nav-item > a{ padding: 15px 60px;}
.nav-item > a:hover{  background-color: #36749D;color: #fff;opacity: 1 !important;}
.nav-en{  font-size: 14px;font-weight: normal;color: #00243F;letter-spacing: 0.1em}
.nav-item > a:hover .nav-en{  color: #fff}
#about .nav-item:first-child a ,#people .nav-item:nth-child(2) a ,.Environment .nav-item:nth-child(3) a , .recruitinginfo .nav-item:nth-child(4) a{  background-color: #36749D;color: #fff;opacity: 1 !important;}
#about .nav-item:first-child a .nav-en , #people .nav-item:nth-child(2) a .nav-en ,.Environment .nav-item:nth-child(3) a .nav-en , .recruitinginfo .nav-item:nth-child(4) a .nav-en{  color: #fff}
/* ▼ 修正: 画像カード式メガメニューのデザイン */ .megamenu{  display: none;position: absolute;top: 100%;left: 0;width: 100%;background-color: #36749D;/* 参考サイトの青色背景 */ box-shadow: 0 4px 8px rgba(0,0,0,0.1);padding: 40px 0;}
.nav-item.has-megamenu:hover .megamenu{  display: block;}
.megamenu-inner{  max-width: 1000px;margin: 0 auto;padding: 0 20px;display: flex;justify-content: center;align-items: flex-start;gap: 20px;flex-wrap: wrap;/* ▼ 追加: カードが自動で折り返すように設定 */}
.megamenu-card{  display: block;width: 220px;/* カードの幅を固定 */ transition: opacity 0.2s;}
.megamenu-card:hover{  opacity: 0.8;}
.megamenu-card img{  width: 100%;height: auto;display: block;}
.megamenu-card-title{  display: block;background-color: #00243F;color: #fff;padding: 10px;text-align: center;font-size: 12px;font-weight: bold;}
.megamenu-card-title span { padding: 0; }
/* ヘッダー全体がマウスオーバーされたときのスタイル */ .header.is-hovered{  /* メニューにマウスが乗った時に背景色を白にしたい */ background-color: #fff !important;/* 必要であれば影も追加 */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
}


span#people03_txt.megamenu-card-title{
  display:block !important;
  font-size:10px;
  padding:11.5px;
}

.megamenu-card-title.people03_txt_sml{
  font-size: 9px !important;
}