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

.hamburger {
display: none;
}

@media screen and (max-width: 1024px) {
.hamburger {
display: block;
width: 80px;
height: 60px;
position: fixed;
top: 5px;
right: 10px;
z-index: 100000;  /* ← 18000から100000に変更 */
box-sizing: border-box;
padding-left: 10px;
padding-top: 16px;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
}

.hamburger__icon {
position: relative;
margin-top: 13px;
margin-bottom: 11px;
}

.hamburger__icon,
.hamburger__icon:before,
.hamburger__icon:after {
display: block;
width: 50px;
height: 1px;
background-color: #706e68;
transition: background-color 0.4s, transform 0.4s;
}

.hamburger__icon:before,
.hamburger__icon:after {
content: "";
position: absolute;
}

.hamburger__icon:before {
top: -10px;
}

.hamburger__icon:after {
top: 10px;
}

.hamburger.active .hamburger__icon {
background-color: transparent;
}

.hamburger.active .hamburger__icon:before {
transform: translateY(10px) rotate(45deg);
}

.hamburger.active .hamburger__icon:after {
transform: translateY(-10px) rotate(-45deg);
}


/* ===============================
FAT NAV BASE
=============================== */

.fat-nav {
position: fixed;
inset: 0;
z-index: 99999;
display: none;
width: 100%;
height: 100%;
background-color: #fff;
overflow-y: auto;
overflow-x: hidden;
}

.fat-nav.active {
display: block;
}


.fat-nav__wrapper {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: flex-start;
padding-top: 80px;
box-sizing: border-box;
}


/* ===============================
MENU LAYOUT
=============================== */

.full-menu {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 0 40px;
box-sizing: border-box;
text-align: center;
}

.logo_wrap {
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 0 0 60px;
padding: 0;
}


.logo_wrap .h1_logo {
width: 100px;
margin: 0;
}


.logo_wrap h1 {
font-family: var(--font-poppins);
font-size: 0.9em;
line-height: 1.4em;
text-align: left;
margin: 0 0 0 16px;
letter-spacing: 1px;
font-weight: 700;
}


.logo_wrap h1 a:link,
.logo_wrap h1 a:visited {
color: #000 !important;
}


.menu-area {
width: 100%;
margin: 0 auto;
padding: 0;
max-width: 90%;
}

/* メイン項目：2列グリッド */
.menu-area > ul {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px 60px;
width: 100%;
list-style: none;
padding: 0;
margin: 0;
}


/* TOPは独立した行で半分幅 */
.menu-area > ul > li:nth-child(2) {
grid-column-start: 1;
}

.menu-area > ul > li {
position: relative;
margin: 0 0 30px;
padding: 0;
text-align: left;
}

.menu-area > ul > li .en {
color: var(--color-main);
text-align: left;
font-size: 1.8rem;
line-height: 1;
font-family: var(--font-poppins);
font-weight: 500;
margin: 0;
}

.menu-area > ul > li .ja {
color: var(--color-gray);
font-size: 0.75rem;
line-height: 1;
margin: 6px 0 0;
border-bottom: thin solid #ccc;
padding-bottom: 15px;
}

/* TOPなどリンクのみの項目 */
.menu-area > ul > li > a {
position: absolute;
inset: 0;
display: block;
text-decoration: none;
}

.menu-area > ul > li > a:hover {
background-color: rgba(255,255,255,0.4);
}

/* サブメニュー：常時表示の縦リスト */
.menu-area > ul > li > ul {
display: flex;
flex-direction: column;
list-style: none;
padding: 10px 0 0;
margin: 0;
}

.menu-area > ul > li > ul > li {
position: relative;
margin: 0;
padding: 0;
}

.menu-area > ul > li > ul > li > a {
position: relative;
display: block;
font-size: 0.9rem;
line-height: 1.4;
color: var(--color-gray);
text-decoration: none;
padding: 6px 0;
transition: color 0.2s;
}

.menu-area > ul > li > ul > li > a:hover {
color: var(--color-red);
background-color: transparent;
}

/* 子サブメニュー（社員インタビュー、募集要項など） */
.menu-area .has-sub-child > span {
display: block;
font-size: 0.9rem;
line-height: 1.4;
color: var(--color-gray);
padding: 6px 0;
font-weight: 500;
}

.menu-area .sub-menu-child {
display: flex;
flex-direction: column;
list-style: none;
padding: 0 0 0 1em;
margin: 0;
/* fat-nav内では常時表示（GSAPの影響を受けない） */
visibility: visible !important;
opacity: 1 !important;
position: relative;
top: auto;
left: auto;
box-shadow: none;
background-color: transparent;
border-radius: 0;
min-width: auto;
}

.menu-area .sub-menu-child li {
border-bottom: none;
}

.menu-area .sub-menu-child li a {
display: block;
font-size: 0.9rem;
line-height: 1.4;
color: var(--color-gray);
text-decoration: none;
padding: 4px 0;
transition: color 0.2s;
white-space: nowrap;
}

.menu-area .sub-menu-child li a::before {
content: '▸';
margin-right: 0.4em;
color: var(--color-main);
}

.menu-area .sub-menu-child li a:hover {
color: var(--color-red);
background-color: transparent;
}

/* fat-nav内の矢印アイコンは非表示 */
.menu-area .has-sub-child > span::after {
display: none;
}


@media screen and (max-width: 768px) {
.fat-nav__wrapper {
padding-top: 150px;
}
}

@media screen and (max-width: 640px) {
.hamburger {
width: 50px;
height: 60px;
top: 10px;
right: 10px;
padding-top: 12px;
}

.hamburger.active .hamburger__icon:before {
transform: translateY(8px) rotate(45deg);
}

.hamburger.active .hamburger__icon:after {
transform: translateY(-8px) rotate(-45deg);
}

.hamburger__icon,
.hamburger__icon:before,
.hamburger__icon:after {
width: 30px;
}

.hamburger__icon:before {
top: -8px;
}

.hamburger__icon:after {
top: 8px;
}


.fat-nav__wrapper {
padding-top: 80px;
}

.logo_wrap {
margin: 0 0 40px;
}

/* 640px以下：1列に戻す */
.menu-area {
width: 100%;
margin: 0 auto;
padding: 0;
max-width: 100%;
}

.menu-area > ul {
display: block;
}

.menu-area > ul > li {
margin-bottom: 40px;
}

.menu-area > ul > li .en  {
font-size: 1.5rem;
}

.menu-area > ul > li .ja {
font-size: 0.7rem;
margin: 7px 0 0;
padding-bottom: 10px;
}

.menu-area > ul > li > ul > li > a {
padding: 3px 0;
}
}