@charset "utf-8";


#header{width:100%; height:90px; border-bottom:1px solid #ccc; color:#000; text-align:left; padding:0px 20px 0 20px;position:relative; }
#header strong { font-weight:normal; font-size:14px; font-weight:bold;}
#header .h_a_company { width:200px; position:absolute; z-index:5; top:10px; left:15px; }
#header .h_a_company img { width:100%; }
@media screen and (min-width: 840px) {
    #header .h_a_company { width:initial; top:15px; }
    #header .h_a_company img { width:215px; }
    #header{border-bottom:0px solid #ccc; }
}
#header .h_a_company:link { color:#000; }
#header .h_a_company:visited { color:#000; }
#header .h_a_company span { margin:0 0 0 10px; font-size:14px; }
span.btnarrow { display:none;}

.omosirogare { width:100%; margin:20px auto 0 auto;}
@media screen and (min-width: 840px) {
    #header{ margin-bottom:50px; }
    #header strong { font-weight:normal; font-size:14px;  font-weight:bold; }
    .omosirogare { margin:80px 0 50px 0;}
}
.g-nav { position:relative; }
#g-nav a.logo_top { display:none; }
@media screen and (min-width: 840px) {
    #g-nav a.logo_top { width:45%; position:absolute; top:20px; left:20px; display:block; }
}


/*アクティブになったエリア*/
@media screen and (min-width: 840px) {
    #g-nav.panelactive { height:auto; overflow: visible; overflow-y: scroll;}
}
#g-nav.panelactive{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index:30;
	top: 0;
	width:100%;
    height: 100vh;
    overflow:hidden;
}

/*丸の拡大*/
.circle-bg{
    position: fixed;
	z-index:10;
    /*丸の形*/
    width: 100px;
    height: 100px;
    border-radius: 50%;
    /*丸のスタート位置と形状*/
	transform: scale(0);/*scaleをはじめは0に*/
	right:-50px;
    top:-50px;
    transition: all .6s;/*0.6秒かけてアニメーション*/
    background:url(https://www.daylife-recruit.com/img/naviback.jpg);
    background-repeat:none; 
    background-repeat:none; 
    background-size:cover;
}

.circle-bg.circleactive{
	transform: scale(50);/*クラスが付与されたらscaleを拡大*/
}

/*ナビゲーションの縦スクロール*/
#g-nav-list{
    display: none;/*はじめは表示なし*/
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height:auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

@media screen and (min-width: 840px) {
    #g-nav-list{ height: 100vh;}
}

#g-nav.panelactive #g-nav-list{
     display: flex; /*クラスが付与されたら出現*/
     flex-wrap:wrap; 
     overflow-y: scroll;
     width:90%; margin:0 5%; 
}

/*ナビゲーション*/
#g-nav ul {
	opacity: 0;/*はじめは透過0*/
    /*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
    position:relative;
    z-index: 999;
    top:0;
    left:50%;
    transform: translate(-50%,0);
    margin-top:20px;
}

@media screen and (min-width: 840px) {
    margin-top:0px;
}
#g-nav ul { width:100%; }
#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; font-family: "din-2014-narrow", sans-serif;font-weight: 700;font-style: normal; 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;
padding:8px 2.5%; 
}
@keyframes gnaviAnime{
0% {
opacity: 0;
}
100% {
opacity: 1;
}

}

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

@media screen and (min-width: 840px) {
    #g-nav.panelactive ul li{ padding:20px 2.5%; }
}

#g-nav.panelactive ul li a { font-size:16px; }
@media screen and (min-width:840px) {
    #g-nav.panelactive ul li a { width:100%; font-size:24px; }
    
}

/*リストのレイアウト設定*/
#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;}
.a_entry { width:100%; height:auto; padding:0; background:none; color:#000;text-align:center; margin-top:0px; }
.a_entry .entry_wrap { width:100%; margin:0 auto;  display:block; align-items:left; }
@media screen and (min-width:840px) {
    .a_entry { background:#FFFF02; padding:10px 0; margin-top:30px; }
    .a_entry .entry_wrap { width:100%; margin:0 auto;  display:block; align-items:left; }
}

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

}

#g-nav-list ul:nth-child(1) li { border-bottom:0; }
#g-nav ul { position:relative; }
#g-nav ul li { width:100%; text-align:left; display: block; margin:0; border-bottom:1px solid #fff; }
@media screen and (min-width:840px) {
    #g-nav.panelactive #g-nav-list{ width:100%; height:auto; }
    #g-nav { display:flex; align-items: center;}
    #g-nav ul { width:45%; display:flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; margin:0 2.5%; 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-list a.a_entry { width:430px; height:auto; padding:10px 0; text-align:center; background:#FFFF02; margin-top:50px; white-space: nowrap; transition: all 0.35s; }
    #g-nav-list a.a_entry .entry_wrap { width:205px; color:#fff; display:flex; margin:0 auto; padding:0; align-items: center; transition: all 0.35s;}
    #g-nav-list a.a_entry .entry_wrap strong { width:auto; color:#fff; margin:0 10px 0 0; font-size:48px; line-height:1.2em; transition: all 0.35s;}
    #g-nav-list a.a_entry:hover { background:#ffff00; transition: all 0.35s; }
    #g-nav-list a.a_entry:hover .entry_wrap strong { color:#00124E; transition: all 0.35s; }
    #g-nav-list a.a_entry:hover .entry_wrap span { color:#00124E; 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-list .entry_pc { display:none; }
#g-nav-list .entry_sp { display:block; margin:10px; }
#g-nav.panelactive ul { margin-top:0; }
@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:840px) {
    #g-nav-list .entry_pc { display:block; }
    .entry_pc:hover { opacity:0.7; }
    #g-nav-list .entry_sp { display:none; }
}




/*========= ボタンのためのCSS ===============*/
.openbtn {
	position: fixed;
	top: 20px;
	right: 10px;
	z-index: 99999;
	width:50px;
	height:50px;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 35px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.openbtn span {
	display: block;
	position: absolute;
	width: 50%;
	height: 1px;
	background-color: #fff;
	transition: all 0.4s ease;
}

.openbtn span:nth-of-type(1) {
	top: calc(50% - 8px); /* 間隔を広げるために -6px から -8px に変更 */
}

.openbtn span:nth-of-type(2) {
	top: 50%;
	transform: translateY(-50%);
}

.openbtn span:nth-of-type(3) {
	top: calc(50% + 8px); /* 間隔を広げるために +6px から +8px に変更 */
}

.openbtn.active span:nth-of-type(1) {
	transform: translateY(8px) rotate(-45deg); /* translateY を 6px から 8px に変更 */
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3) {
	transform: translateY(-8px) rotate(45deg); /* translateY を -6px から -8px に変更 */
}

@media screen and (min-width:840px) {
    .openbtn {
        width: 70px;
        height: 70px;
}