@charset "utf-8";


.header_wrap { width:100%; position:absolute; padding:10px 0; z-index:999; top:0; }
.header_wrap .h_a_company { margin-left:50px; display:block; color:#fff; font-size:13px; line-height:1.5em; font-weight:normal; }
#header { width:auto; }
.header_wrap .h_a_company small { font-weight:bold; }
@media screen and (min-width: 768px) {
    .header_wrap { height:80px; display:flex; padding:0; }
    .header_wrap .h_a_company { margin-top:20px; margin-left:90px; text-align:left; float:left; }
    .header_wrap .h_a_company h1 { font-size:18px; }
    .header_wrap .h_a_company small { font-size:20px; line-height:1.2em; }
    #header { width:100%; text-align:left; }
}

#header .h_a_company span { width:100%; display:inline-block; margin:0; font-size:15px; line-height:1.2em; font-weight:600; }
#header .h_a_company span img { width:30%; }
@media screen and (min-width:768px) {
    #header .h_a_company span img { width:126px; }
}

span.btnarrow { display:none;}

/*========= ボタンのためのCSS ===============*/
.header_wrap .openbtn {width:50px;height:50px; position:fixed;top:0;left:0; z-index: 99999; display: flex;justify-content: center;align-items: center;cursor: pointer;}
.header_wrap .openbtn span { width:30px; display: block;position: absolute;height: 2px;background-color: #fff;transition: all 0.4s ease;}
@media screen and (min-width:768px) {
    .header_wrap .openbtn { width:70px; height:70px; }
    .header_wrap .openbtn span { width:40px; }
}

.header_wrap .openbtn span:nth-of-type(1) {top: calc(50% - 10px); }
.header_wrap .openbtn span:nth-of-type(2) {top: 50%;transform: translateY(-50%);}
.header_wrap .openbtn span:nth-of-type(3) {top: calc(50% + 8px); }
.header_wrap .openbtn.active { position:fixed; top:0; left:0; }
.header_wrap .openbtn.active span:nth-of-type(1) {transform: translateY(10px) rotate(-45deg);}
.header_wrap .openbtn.active span:nth-of-type(2) {opacity: 0;}
.header_wrap .openbtn.active span:nth-of-type(3) {transform: translateY(-8px) rotate(45deg); }


#header{ margin-bottom:0; }
@media screen and (min-width:768px) {
    #header{ margin-bottom:0; text-align:right; }
    #header strong { font-weight:normal; font-size:14px;  font-weight:bold; }
    
}




/*メニューを開いた状態*/
#g-nav { width:100%; height: 100dvh;  position:fixed; inset:0; background:url(/img/bg_menu_sp.jpg); background-size:cover; background-repeat:none; transform: translateX(-100%); z-index:9999; background-position:center;
transition: transform .35s ease;  overflow: hidden; pointer-events: none;  /* 閉じている間はクリックを通す */ }
#g-nav.panelactive{ position:fixed;z-index:30;top: 0;width:100%;height: 100vh;overflow:hidden;left:0; transform: translateX(0); /*z-index:999; */ transform: translateX(0);pointer-events: auto;}
@media screen and (min-width: 768px) {
    #g-nav {
    width: 100%;
    height: 100vh; /* 画面の高さにフィット */
    background-image: url(/img/bg_menu.jpg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain; /* ← 幅が狭くなると画像も自動縮小 */
    background-color: #000;   /* 背景に余白ができたときの下地 */
    }

}
#g-nav a.logo_top { display:none; }
#g-nav .gamushara { display:none; }
@media screen and (min-width: 768px) {
    #g-nav  { width:auto; height:100vh;}
    #g-nav a.logo_top { width:45%; position:absolute; top:20px; left:20px; display:block; }
    #g-nav .gamushara { width:auto; height:100%; top:0; left:40%; opacity:1; display:block; position:absolute; }

}
#g-nav.panelactive #g-nav-list{ width:90%; height:100vh; display: flex; flex-wrap:wrap; overflow-y: scroll; margin:0 0 0 5%;}
@media screen and (min-width: 768px) {
    #g-nav.panelactive #g-nav-list{ width:100%; margin:0; }
}

/* メニューが開いたら本体スクロールを止める */
body.is-menu-open{ overflow:hidden; }

/*ナビゲーション*/
#g-nav ul {
	opacity: 0;
    position:relative;
    z-index: 999;
    top:0;
    left:50%;
    transform: translate(-50%,0);
    margin-top:20px;
    padding-top:20px; 
}
#g-nav ul { width:100%; }
@media screen and (min-width: 768px) {
    #g-nav ul { width:50%; margin:0 auto; padding-top:0; }
}

#g-nav ul li { width:90%; text-align:left; display: block; margin:0 5%; text-align:left; font-size:12px; }
#g-nav a span { width:100%; display:block; color:#000;}
#g-nav a strong { width:auto; display:inline; font-size:40px; color:#000;  margin-right:20px; }
/*背景が出現後にナビゲーションを表示*/
#g-nav.panelactive ul {
    opacity:1;
}

/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
#g-nav.panelactive ul li{
animation-name:gnaviAnime;
animation-duration:1s;
animation-delay:.2s;/*0.2 秒遅らせて出現*/
animation-fill-mode:forwards;
opacity:0;
}
@keyframes gnaviAnime{
0% {
opacity: 0;
}
100% {
opacity: 1;
}

}

#g-nav-list .inline_pc { display:none; }
@media screen and (min-width: 768px) {
    #g-nav-list .inline_pc { display:block; }
}

.header_arrow { float:right; }
.header_arrow_active { display:none; }
#g-nav.panelactive ul li a:hover .header_arrow { display:none;} 
#g-nav.panelactive ul li a:hover .header_arrow_active { display:inline; } 


#g-nav.panelactive ul li a {  width:100%; font-size:16px; display:flex; justify-content:space-between; padding:20px 2.5% 20px 5%; }
#g-nav.panelactive ul li a .navtitle { width:70%;}
#g-nav.panelactive ul li.entry a .navtitle { width:60%; }
#g-nav.panelactive ul li a .navtitle.top { height:30px; }
#g-nav.panelactive ul li a.button_more.entry { margin-top:50px; }
#g-nav.panelactive ul li a span { line-height:80px; color:#fff; }
#g-nav a.button_more.entry  span { line-height:80px; color:#fff; }
@media screen and (min-width:768px) {
    #g-nav.panelactive ul li a .navtitle { width:90%;}
    #g-nav.panelactive ul li a { width:100%; height:100%; font-size:16px; text-align:left; position:relative; padding:30px 2.5%; }
    #g-nav.panelactive ul li a.button_more.entry { width:390px; margin:50px auto 0 auto; display:block; }
    #g-nav.panelactive ul li a:hover { background: rgba(0, 255, 19, 1.0);} 
    
}

/*リストのレイアウト設定*/
#g-nav li{text-align: center; list-style: none;}
#g-nav a { color: #fff;text-decoration: none; text-transform: uppercase;letter-spacing: 0.1em;display:inline-flex;align-items: center;flex-wrap:wrap; }

#g-nav a:link { color: #fff;}
#g-nav a:visited { color: #fff;}
#g-nav a:active { color: #fff;}

#g-nav.panelactive ul li a.a_entry span { color:#fff; font-size:20px; font-weight:bold;  }
#g-nav.panelactive ul li a.a_entry:link { color:#fff; }
#g-nav.panelactive ul li a.a_entry .arrow { width:7px; position:absolute; right:20px; top: 50%; transform: translateY(-50%);}
.a_entry .entry_wrap { width:100%; margin:0 auto;  display:block; align-items:left; }
@media screen and (min-width:768px) {
    #g-nav.panelactive ul li a.a_entry { width:350px; background:#DB262C; padding:15px 0; margin:50px auto 0 auto; color:#fff; display:block; font-weight:bold; position:relative; }

    .a_entry .entry_wrap { width:100%; margin:0 auto;  display:block; align-items:left; }
    #g-nav.panelactive ul li:last-child { border-bottom:initial; }
    
}

#g-nav a span { width:100%; font-size:15px; white-space:nowrap; line-height:1.7em; color:#000; }
#g-nav a span:hover { color:#000; }
@media screen and (min-width:768px) {

}

#g-nav-list ul li:nth-child(1)  { margin-top:50px; text-align:left; }
#g-nav-list ul li .current:link { color:#fff; }
#g-nav-list ul li:last-child  { margin-bottom:50px; }
#g-nav ul { position:relative; }
#g-nav ul li { width:100%; text-align:left; display: block; margin:0; border-bottom:1px solid #00FF13; }
@media screen and (min-width:768px) {
    #g-nav-list ul li:nth-child(1) { margin-top:0; }
    #g-nav.panelactive #g-nav-list{ width:100%; height:auto; }
    #g-nav { display:flex; align-items: center;}
    #g-nav ul { width:100%; display:flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; margin:0 auto; top:0%; left:auto; transform: translate(0,0); }
    #g-nav a strong { width:auto; font-size:50px; line-height:1.2; display:block; transition: all 0.35s; }
    #g-nav a { width:100%; font-size:16px; transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.35s; }

    #g-nav.panelactive .a_member { width:100%; display:block; margin-bottom:5px; padding:0; }
    #g-nav.panelactive .a_member small { width:auto; display:inline; margin-right:10px; }
    #g-nav.panelactive .a_member img { margin-right:10px;}

    /*矢印が右に移動する*/
    #g-nav-list span.btnarrow{width:80px;position: relative; right:0; display: inline-block;padding: 0 20px;color: #fff;text-decoration: none;outline: none;margin-bottom:10px;transition: all 0.35s }
    /*矢印と下線の形状*/
    #g-nav-list span.btnarrow::before{content: '';position: absolute;bottom:-8px;left:15%; width: 85%; height: 1px; background:#fff; transition: all 0.35s;}
    #g-nav-list span.btnarrow::after{content: '';position: absolute;bottom:-3px;right:0;width: 15px;height:1px;background:#fff;transform: rotate(35deg);transition: all 0.35s;}
    /*hoverした際の移動*/
    #g-nav-list a:hover span.btnarrow::before{left:20%;background:#ffff00; transition: all 0.35s;}
    #g-nav-list a:hover span.btnarrow::after{ right:-5%;background:#ffff00; transition: all 0.35s;}
    #g-nav-list a:hover span.btnarrow{color: #ffff00;right:-50px; transition: all 0.35s;}


}  

/*エントリーボタン*/
#g-nav ul li.entry a { width:100%; display:flex; align-items:center;}
#g-nav ul li.entry a:hover { background: rgba(0, 255, 19, 1.0);}
#g-nav-list .entry_pc { display:none; }
#g-nav-list .entry_sp { display:block; margin:10px; }
#g-nav.panelactive ul { margin-top:50px; }
@media screen and (min-width:375px) {
    #g-nav-list .entry_sp {  margin-top:20px; }
    #g-nav.panelactive ul { margin-top:20px; }
}


.entry_sp img { width:100%; }
@media screen and (min-width:768px) {
    #g-nav-list .entry_pc { display:block; }
    .entry_pc:hover { opacity:0.7; }
    #g-nav-list .entry_sp { display:none; margin-top:0; }
    #g-nav.panelactive ul { width:40%; margin-right:5%; margin-top:0; }
    #g-nav.panelactive ul li { text-align:left; }


}