@charset 'utf-8';

header { width:89%; height:auto; background:none; margin:0 0 0px 0; position:relative; }
#top-head { width:100%; padding:0; }
#top-head  .inner { width:90%; margin:0 auto;  }
#top-head { top:0; position:fixed; margin-top:0; }
#top-head.fixed { padding-top:0; background:transparent; }
#mobile-head { width:50px; height:56px; z-index:999; position:absolute; top:5px; right:5%; }
#mobile-head .bird_menu { width:22px; height:16px; position:absolute; top:15px; right:14px; transition: transform 0.6s ease, opacity 0.6s ease; overflow:hidden; }
#mobile-head .bird_menu_inner { width:100%; }

#top-head.fixed .logo, #top-head .logo { position:absolute; left:20px; top:24px; color:#333; font-size:26px; }
#global-nav { top:-500px; background:#fff; width:100%; text-align:center; padding:10px 0; -webkit-transition:.5s ease-in-out; -moz-transition:.5s ease-in-out; transition:.5s ease-in-out; position:absolute; padding-top:100px; }
#global-nav ul { list-style:none; position:static; right:0; bottom:0; font-size:14px; }
#global-nav ul li { float:none; position:static; }
#nav-toggle { display:block; position:relative; }
#nav-toggle .bird_menu { width:23px; position:absolute; top:0; }
.open #nav-toggle span:nth-child(1) { width:100%; top:11px; -webkit-transform:rotate(315deg); -moz-transform:rotate(315deg); transform:rotate(335deg); }
.open #nav-toggle span:nth-child(2) { width:0; left:50%; }
.open #nav-toggle span:nth-child(3) { width:100%; top:11px; left:0; -webkit-transform:rotate(-315deg); -moz-transform:rotate(-315deg); transform:rotate(-335deg); }
.open #global-nav { transform:translateY(500px); }

/* ハンバーガーが開いたときに飛び立つ動き */
#top-head.open #mobile-head .bird_menu {
  height:21px; 
  animation: birdFly 0.8s ease-out forwards;
}

@keyframes birdFly {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
  30% {
    transform: translate(-30px, -10px) rotate(-10deg) scale(1.1);
  }
  60% {
    transform: translate(-90px, -40px) rotate(10deg) scale(1.15);
  }
  100% {
    transform: translate(-160px, -80px) rotate(-8deg) scale(0.9);
    opacity: 0; /* 飛び去るようにフェードアウト */
  }
}




.inner:after { content:""; clear:both; display:block; }
.inner .header_logo { width:250px; display:inline-block; }
.inner .header_logo img { width:100%; display:inline-block; margin-top:25px;  }
@media screen and (min-width:768px) {
  .inner .header_logo { width:250px;}
  .inner .header_logo img { margin-top:10px; }
}
#top-head { top:-100px; position:absolute; width:100%; margin:100px auto 0; line-height:1; z-index:10; }
#top-head a, #top-head { color:#434343; text-decoration:none; }
#top-head a { mix-blend-mode: multiply;}
#top-head .inner { width:90%; margin:0 auto; display:flex; }



#top-head .logo { float:left; font-size:36px; }
#global-nav ul { list-style:none; font-size:14px; }
@media screen and (min-width:768px) {
  #global-nav ul { width:80%; position:relative; right:initial; bottom:initial; display:flex; flex-direction:column; justify-content:space-between; margin-right:5%; }
}
@media screen and (min-width:1280px) {
  #global-nav ul { width:55%; margin-right:initial; }
}

#global-nav ul li { margin-left:0px; border-bottom:1px solid #ccc; }
#top-head #global-nav ul li a { display:flex; text-align:left; position:relative; }
@media screen and (min-width:768px) {
  #global-nav ul li { width:48%; border-bottom:0; display:flex; }
  #global-nav ul li a { padding:0 30px; }
  #top-head #global-nav ul li a.noborder { border-bottom:0; }
  #top-head #global-nav ul li a { display:block; position:relative; }
  #top-head #global-nav ul li a:hover { opacity:0.7; }

}

#nav-toggle { display:block; position:absolute; right:0; top:30px; width:50px; height:25px; cursor:pointer; z-index:101; }


#nav-toggle div { position:relative; }
#nav-toggle span { display:block; position:absolute; height:2px; width:100%; background:#434343; left:0; -webkit-transition:.35s ease-in-out; -moz-transition:.35s ease-in-out; transition:.35s ease-in-out; }
#nav-toggle span:nth-child(1) { top:0; }
#nav-toggle span:nth-child(2) { top:11px; left:15%; width:70%; }
#nav-toggle span:nth-child(3) { top:22px; left:30%; width:40%; }
#global-nav ul li .menu_main { width:100%; display:flex; align-items:baseline; gap:10px; margin:10px 0 0 0; padding:10px 5%; font-size:24px; line-height:30px; text-align:left; }
#global-nav ul li .menu_entry { width:90%; margin:20px auto; padding:20px 5%; background:#9DC52C; border-radius:5px; border:1px solid #707070; color:#fff; }
.menu_main_wrapper .menu_main { border-bottom:none; }
#global-nav ul li .menu_main strong { font-size:22px; letter-spacing:0.05em; }
#global-nav ul li .menu_main span { font-size:13px; line-height:1.2; }
#global-nav ul li a.menu_main span { font-size:13px; line-height:1.2; }
#top-head #global-nav ul li a.menu_main .arrow_menu { width:50px; margin: 0 0 5px 10px; transition:0.3s; }
.menu_border { width:90%; margin:10px auto 0 auto; background:none; border:none; border-bottom:1px solid #707070; }
@media screen and (min-width:768px) {
  .menu_mains { margin:0 0 20px 0; }
  #global-nav ul li .menu_main { margin:0; display:block; }
  #global-nav ul li .menu_entry { margin:0; padding:10px 5%; background:none; border:none; color:#434343; }
  #top-head #global-nav ul li a.menu_main:hover .arrow_menu { transform:translate(10px, 0); transition:0.3s; }
  #global-nav ul li .menu_main strong { width:100%; font-size:40px; line-height:1.2em; }
  #global-nav ul li .menu_main span { width:100%; font-size:18px; margin-top:5px; }
  #global-nav ul li a.menu_main span { font-size:18px; margin-top:5px; }
  .menu_border { display:none; }
  .arrow_menu.staff { display:none; }
  .arrow_menu.inline_pc  { display:none; }
}
@media screen and (min-width:1280px) {
  #top-head #global-nav ul li a.menu_main .arrow_menu { display:inline-block; }
 #top-head #global-nav ul li a.menu_main:hover .arrow_menu { transform:translate(10px, 0); transition:0.3s; }
 .arrow_menu.staff { display:inline; }
 .arrow_menu.inline_pc  { display:inline; }
}


#top-head { position:fixed; top:0; left:0; width:100%; margin:0; z-index:999; }
#top-head.fixed { margin-top:0; top:0; position:fixed; background:#fff; background:rgba(255,255,255,.7); transition:top 0.65s ease-in; -webkit-transition:top 0.65s ease-in; -moz-transition:top 0.65s ease-in; padding-bottom:10px; }



#global-nav{position:fixed; inset:0; height:100vh; background:#fff;padding:80px 0 50px 0; overflow:auto; transform:translateY(100%);   transition:transform .45s ease-in-out;z-index:0;}
.open #global-nav{ width:100%; background:#fff; transform:translateY(0); }
@media (min-width:768px){
  .open #global-nav{ display:flex; flex-direction:row; align-items:center; justify-content:center; gap:30px;background:#fff; }
}
@media (min-width:1080px){
  .open #global-nav{ gap:50px; }
}
@media (min-width:1240px){
  .open #global-nav{ gap:70px; }
}
@media (min-width:1440px){
  .open #global-nav{ gap:100px; }
}

body.menu-open{ overflow:hidden; }


#global-nav ul li{ border-bottom:1px solid #fff; }
#global-nav ul li .english { width:100%; font-size:40px; display:inline-block; }
@media (min-width:768px){
  #global-nav ul li{ width:100%; border-bottom:0; border-bottom:1px solid #707070; padding-bottom:30px;}
  #global-nav ul li:last-child{ padding-top:30px;}
  #global-nav ul li .menu_wrapper { width:50%; display:flex; flex-direction:column; justify-content:space-between; }
  #global-nav ul li .door { margin-top:10px; }
}

.menu_small_wrapper { width:90%; margin:0 auto; display:flex; /*justify-content:space-between; */}
.menu_small_wrapper_left { margin-right:17%; }
#top-head #global-nav ul li a.menu_small { font-size:16px; border-bottom:0; padding:12px 5% 5px 5%;  }
#top-head #global-nav ul li a.menu_small span { margin-right:10px; font-size:14px; white-space:nowrap; }
#top-head #global-nav ul li a.menu_small span em { font-size:14px; margin-right:20px; }
#top-head #global-nav ul li a.menu_small .arrow_menu { width:50px; margin: 0 0 5px 20px; transition:0.3s; }
@media screen and (min-width:768px) {
  .menu_small_wrapper { width:100%; display:block; }
  .menu_small_wrapper_left { margin-right:initial; }
  #top-head #global-nav ul li a.menu_small span { font-size:15px; }
  #top-head #global-nav ul li a.menu_small:hover .arrow_menu { transform:translate(10px, 0); transition:0.3s; }
  #top-head #global-nav ul li a.menu_small .arrow_menu { margin-top:10px; }
  #top-head #global-nav ul li a.menu_small span em { margin-right:10px; }
  #top-head #global-nav ul li a.menu_small span { margin-right:0; }
}
@media screen and (min-width:1280px) {
   #top-head #global-nav ul li a.menu_small .arrow_menu { margin-top:initial; }
    #top-head #global-nav ul li a.menu_small span { font-size:16px; margin-right:0;}
    /*#top-head #global-nav ul li a.menu_small span em { margin-right:20px; }*/

}

.menu_sttaff1:before { content:"◆"; color:#4370E2; margin:0 5px 0 0; }
.menu_sttaff2:before { content:"◆"; color:#FC6253; margin:0 5px 0 0; }
.menu_company:before { content:"◆"; color:#ee6c2b; margin:0 5px 0 0; }
.menu_office:before { content:"◆"; color:#D9C82C; margin:0 5px 0 0; }
.menu_brand:before { content:"◆"; color:#2E9CC1; margin:0 5px 0 0; }
.menu_jobs:before { content:"◆"; color:#75C681; margin:0 5px 0 0; }
.menu_culture:before { content:"◆"; color:#C076C3; margin:0 5px 0 0; }
.menu_lalapark:before { content:"◆"; color:#79A500; margin:0 5px 0 0; }
.menu_careerstep:before { content:"◆"; color:#4572C4; margin:0 5px 0 0; }
.menu_parents:before { content:"◆"; color:#A87B00; margin:0 5px 0 0; }

.menu_main .door { width:80px; position:absolute; top:-20px; right:70px; display: inline-block; perspective: 1000px; border:0px; display:none; }
.menu_main .door::before { content: "";position: absolute;top: -20px;left: -10px;width: 44px;height: auto; aspect-ratio: 1 / 1; background: url("../img/door_kazari.png") no-repeat center / contain; border:0px;}
.menu_main .door::after { background:#fff; }
.menu_main .door .door_inner { height:107px; /*position: absolute; */top: 0; left: 0; z-index: 2; border:0px;}
.menu_main .door .tobira { height:107px; position: absolute; top: 0; left: 0; z-index: 3; transform-origin: left center; transform: rotateY(0deg); transition: transform .6s cubic-bezier(.2,.7,.2,1); backface-visibility: hidden; will-change: transform; border:0px; border:0; }
.menu_main .door:hover .tobira { transform: rotateY(-35deg); border:0px;}
.menu_image { width:40px; position:absolute; top:0; right:5%; display:none; }
@media screen and (min-width:768px) {
    .menu_main .door { display:block; }
    .menu_main .door::before { content: "";position: absolute;top: -20px;left: -10px;width: 44px;height: auto; aspect-ratio: 1 / 1; background: url("../img/door_kazari.png") no-repeat center / contain; border:0px;}
    .menu_main .door .door_inner { position: absolute; top: 0; left: 0; z-index: 2; border:0px;}
    .menu_main .door .tobira { position: absolute; top: 0; left: 0; z-index: 3; transform-origin: left center; transform: rotateY(0deg); transition: transform .6s cubic-bezier(.2,.7,.2,1); backface-visibility: hidden; will-change: transform; border:0px; border:0; }
    .menu_image { width:55px; position:absolute; top:0; right:0; display:block; }

}

.menu_logo_wrap .menu_logo { display:none; }
.menu_logo_wrap .menu_main { width:100%; display:flex; align-items:baseline; gap:10px; margin:10px 0 0 0; padding:10px 5%; text-align:left; position:relative; font-size:24px; line-height:30px; text-align:left; }
.menu_logo_wrap  a.menu_main span { display:block; font-size:13px; line-height: 1.2; }
.menu_logo_wrap  a.menu_main span .arrow_menu { width: 50px; margin: 0 0 5px 10px; transition: 0.3s; }

#top-head a.menu_parents{ display:none; }
.menu_parents.bottom { display:block; margin:20px 0 20px 5%; }
@media screen and (min-width:768px) {
  .menu_logo_wrap { width:20%; display:flex; flex-direction:column; justify-content:center; margin-right:5%; margin-left:5%; }
  .menu_logo_wrap .menu_logo { width:200px; display:block; margin-top:100px; margin-bottom:165px; }
  .menu_logo_wrap a.menu_main { padding:0; display:flex; flex-direction:column; }

  .menu_logo_wrap a.menu_main strong  { width:100%; font-size:40px; display:block; text-align:left; }
  .menu_logo_wrap a.menu_main span { width:100%; font-size:18px; margin-top:5px; text-align:left; }
  .menu_logo_wrap a.menu_main:hover span { opacity:0.7; }
  .menu_logo_wrap a.menu_main:hover .arrow_menu { transform:translate(10px, 0); transition:0.3s; }
  #top-head a.menu_parents{ display:block; }
  .menu_parents.bottom { display:none; }
  #top-head #global-nav ul li a.menu_parents.bottom { display:none; }
}
@media screen and (min-width:1280px) {
  .menu_logo_wrap { width:200px; margin-left:initial; margin-right:100px; }

}





/* ====== ハンバーガー開閉：その場表示（PC/スマホ共通） ====== */
#global-nav { position:fixed; inset:0; height:100vh; background:#fff; padding:50px 0 50px 0; overflow:auto; opacity:0; visibility:hidden; transform:none !important; transition:opacity .28s ease, visibility .28s step-end; z-index:99; }
.open #global-nav { opacity:1; visibility:visible; transform:none !important; transition:opacity .28s ease, visibility 0s step-start; }

/* スクロール固定は既存の .menu-open を継続 */
body.menu-open { overflow:hidden; }