/*-------------menu(1)------------------*/
#g-nav{
position: fixed;
z-index: -1;
opacity: 0;
top: 0px;
box-sizing: border-box;
width: 100vw;
height: 100vh;
background: rgba(255, 255, 255, 0.8);
}


.g-nav_inner{
position: fixed;
top: 0px;
box-sizing: border-box;
width: 90%;
height: 100vh;
padding: 50px 18px;
background: var(--egreen100);
transition: all 0.3s;
overflow: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
background-image: url(../img/clsalogoBgGreen_b.svg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 5rem 0 0 0;
margin-left: 10%;
}

.g-nav_inner_wrap{
display:flex;
padding-left: 5rem;
flex-direction: column;
}

@media screen and (max-width:1100px){
.g-nav_inner_wrap{
flex-direction:column;
padding-left:0;
}
}

#g-nav::-webkit-scrollbar{
display: none;
}

#g-nav.panelactive{
opacity: 1;
z-index:99;
transition-duration: 0.5s;
}

#g-nav.panelactive #g-nav-list{
position: fixed;
z-index: 99; 
width: 100%;
height: 100vh;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}

#g-nav .grid-container{
margin-bottom:50px;
}

.openbtn1{
position: relative;
background:var(--egreen100);
border:solid 2px var(--egreen100);
/*border-radius:50%;*/
cursor: pointer;
width: 50px;
height:50px;
}

.openbtn1 span {
display: inline-block;
transition: all .4s;
position: absolute;
left: 14px;
height: 2px;
border-radius: 5px;
background: #fff;
width: 20px;
}

.openbtn1 span:nth-of-type(1) {
top:13px;	
}

.openbtn1 span:nth-of-type(2) {
top:19px;
}

.openbtn1 span:nth-of-type(3) {
top:25px;
}

.openbtn1 span:nth-of-type(3)::after {
content:"Menu";
position: absolute;
top:5px;
left:-3px;
color: #fff;
font-size: 0.5rem;
text-transform: uppercase;
}

.closebtn1{
position: fixed;
top:25px;
right: 10px;
background:rgba(250, 248, 245, 1);
cursor: pointer;
width: 50px;
height:50px;
}

.closebtn1 span{
display: inline-block;
transition: all .4s;
position: absolute;
left: 14px;
height: 2px;
background:var(--egreen100);
width: 45%;
}

.closebtn1 span:nth-of-type(1) {
top: 14px;
left: 18px;
transform: translateY(6px) rotate(-45deg);
width: 30%;
}

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

.closebtn1 span:nth-of-type(3){
top: 26px;
left: 18px;
transform: translateY(-6px) rotate(45deg);
width: 30%;
}

.closebtn1 span:nth-of-type(3)::after {
content:"Close";
position: absolute;
top:5px;
left:-2px;
color:var(--egreen100);
font-size: 0.6rem;
transform: translateY(0) rotate(-45deg);
top:5px;
left:4px;
}


/*-------------事業内容------------------*/
.g-nav2-list, .g-nav3-list, .g-nav15-list, .g-nav16-list, .g-nav17-list, .g-nav4-list, .g-nav18-list, .g-nav5-list{
display: block;
position: fixed;
z-index: 999; 
width: 100%;
height: 100vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
}


/*-------------相談支援員（6）------------------*/
#g-nav6.panelactive{
        position:fixed;
    z-index: 999;
	top: 0;
	width:100%;
    height: 100vh;
}


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

#g-nav6.panelactive #g-nav6-list{
     display: block; /*クラスが付与されたら出現*/
}


/*-------------ヘルパー（7）------------------*/
#g-nav7.panelactive{
        position:fixed;
    z-index: 999;
	top: 0;
	width:100%;
    height: 100vh;
}

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

#g-nav7.panelactive #g-nav7-list{
     display: block; /*クラスが付与されたら出現*/
}


/*-------------保育士（8）------------------*/
#g-nav8.panelactive{
        position:fixed;
    z-index: 999;
	top: 0;
	width:100%;
    height: 100vh;
}


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

#g-nav8.panelactive #g-nav8-list{
     display: block; /*クラスが付与されたら出現*/
}

/*-------------ドライバー（9）------------------*/
#g-nav9.panelactive{
        position:fixed;
    z-index: 999;
	top: 0;
	width:100%;
    height: 100vh;
}


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

#g-nav9.panelactive #g-nav9-list{
     display: block; /*クラスが付与されたら出現*/
}

/*-------------当社の取り組み（10）------------------*/
#g-nav10.panelactive{
        position:fixed;
    z-index: 999;
	top: 0;
	width:100%;
    height: 100vh;
}


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

#g-nav10.panelactive #g-nav10-list{
     display: block; /*クラスが付与されたら出現*/
}


/*-------------法人情報（11）------------------*/
#g-nav11.panelactive{
position:fixed;
z-index: 999;
top: 0;
width:100%;
height: 100vh;
}

/*ナビゲーションの縦スクロール*/
#g-nav11-list{
display: none;
position: fixed;
z-index: 999; 
width: 100%;
height: 100vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
}

#g-nav11.panelactive #g-nav11-list{
display: block;
}


/*-------------情報公開（12）------------------*/
#g-nav12.panelactive{
        position:fixed;
    z-index: 999;
	top: 0;
	width:100%;
    height: 100vh;
}


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

#g-nav12.panelactive #g-nav12-list{
     display: block; /*クラスが付与されたら出現*/
}



/*-------------個人情報（13）------------------*/

#g-nav13.panelactive{
        position:fixed;
    z-index: 999;
	top: 0;
	width:100%;
    height: 100vh;
}


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

#g-nav13.panelactive #g-nav13-list{
     display: block; /*クラスが付与されたら出現*/
}


/*-------------サイトポリシー（14）------------------*/
#g-nav14.panelactive{
        position:fixed;
    z-index: 999;
	top: 0;
	width:100%;
    height: 100vh;
}

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

#g-nav14.panelactive #g-nav14-list{
     display: block; /*クラスが付与されたら出現*/
}



/*-------openbtn------------*/
.openbtn2, .openbtn3, .openbtn4, .openbtn5, .openbtn15, .openbtn16, .openbtn17, .openbtn18{
display:flex;
position: absolute;
bottom:20px;
background:#c41a30;
cursor: pointer;
width: 150px;
height:50px;
/*border:solid 1px rgb(114, 134, 112);*/
border:solid 1px #c41a30;
border-radius: 25px;
font-size:15px;
color: #fff;
align-items:center;
justify-content:center;
transition: 0.5s;
}

.openbtn6, .openbtn7, .openbtn8, .openbtn9{
display:flex;
position: relative;
background:#c41a30;
cursor: pointer;
width: 150px;
height:50px;
/*border:solid 1px rgb(114, 134, 112);*/
border:solid 1px #c41a30;
border-radius: 25px;
font-size:15px;
color: #fff;
align-items:center;
justify-content:center;
transition: 0.5s;
}

.openbtn10, .entry-button{
display:flex;
cursor: pointer;
width: 500px;
aspect-ratio:3.236;
font-size:1.5rem;
color: #fff;
align-items:center;
justify-content:center;
transition: 0.5s;
text-decoration:none;
margin:20px;
font-family: "RocknRoll One", sans-serif;
}

.openbtn10{
background:var(--bg_blue);
}

.entry-button{
background:var(--bg_pink);
}


.pg03-b{
width:100%;
padding:0px;
flex-direction:column;
}

.openbtn10, .entry-button{
width:25rem;
margin:20px auto;
max-height:100px;
}


/*
@media screen and (max-width:1500px){
.pg03-b{
width:100%;
padding:0px;
flex-direction:column;
}
.openbtn10, .entry-button{
width:25rem;
margin:20px auto;
max-height:100px;
}
}*/

.openbtn-navi{
position: absolute;
right: 30px;
top: 35px;
background: #fff;
cursor: pointer;
width: 36px;
height: 36px;
border: solid 12px var(--egreen100);
border-radius: 50%;
color: #fff;
display: inline-block;
justify-content: center;
align-items: center;
transition: 0.5s;
text-decoration: none;
font-size: 1rem;
z-index: 10;
box-sizing: border-box;
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
}

.openbtn-navi:hover{
animation-name:navimenu ;
animation-duration:0.5s;
animation-delay:.2s;
animation-fill-mode:forwards;
}

@keyframes navimenu {
  0% {border: solid 12px var(--egreen100); }
  25% {border: solid 15px var(--egreen100); }
  50% {border: solid 8px var(--egreen100); }
  75% {border: solid 12px var(--egreen100); }
  100% {border: solid 12px var(--egreen100); }
}

/*
@media screen and (max-width:960px){
.openbtn-navi{
right:20px;
}
}
*/

.openbtnBN{
display:flex;
background:#fff;
cursor: pointer;
width: 350px;
height:50px;
border:solid 1px var(--egreen100);
border-radius: 0.5rem;
font-size:15px;
color: var(--egreen100);
align-items:center;
justify-content:center;
transition: 0.5s;
text-decoration:none;
margin-top:15px;
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
}

.openbtn11, .openbtn12, .openbtn19{
display:flex;
background:var(--egreen100);
cursor: pointer;
width: 150px;
height:50px;
border:solid 1px var(--egreen100);
border-radius: 0.5rem;
font-size:15px;
color: #fff;
align-items:center;
justify-content:center;
transition: 0.5s;
text-decoration:none;
margin-top:30px;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
}

 .openbtn19{
margin:0px auto;
}

.openbtnBN:hover{
background: var(--bege100);
}

.openbtn11:hover, .openbtn12:hover, .openbtn19:hover{
background: #fff;
color:var(--egreen100);
}

.openbtn2:hover, .openbtn3:hover, .openbtn4:hover, .openbtn5:hover, .openbtn6:hover, .openbtn7:hover, .openbtn8:hover, .openbtn9:hover, .openbtn10:hover, .openbtn15:hover, .openbtn16:hover, .openbtn17:hover, .openbtn18:hover{
background: rgb(114, 134, 112);
border:solid 1px  rgb(114, 134, 112);
box-sizing: border-box;
color:#fff;
}

.openbtn13, .openbtn14{
display:flex;
position: relative;
margin:0px 10px;
padding:0px 10px;
background:;
cursor: pointer;
width: fit-content;
color:#333;
align-items:center;
justify-content:center;
transition: 0.5s;
}

.openbtn13:before, .openbtn14:before {
content: "";
display: inline-block;
width: 0.5rem;
height: 0.5rem;
/*margin-top: .2rem;*/
margin-right: 0.8rem;
background: url(../img/dots_black25_a45.svg) center center no-repeat;
background-size: contain;
}

/*
.openbtn13:hover:before, .openbtn14:hover:before{

background: url(../img/dots_color100_a45.svg) center center no-repeat;
background-size: contain;
transition: transform 1s;
transform: rotate(360deg);
}
*/

@media screen and (max-width:640px){
.openbtn13, .openbtn14{
font-size:13px;
}
.openbtn13:hover, .openbtn14:hover{
background:none;
color:#333;
}
}

.openbtn2m, .openbtn3m, .openbtn4m, .openbtn6m, .openbtn7m, .openbtn8m, .openbtn9m, .openbtn10m, .openbtn11m, .openbtn15m, .openbtn16m, .openbtn17m, .openbtn18m{
display:flex;
position: relative;
padding:0px 0px 0.5rem 1rem;
cursor: pointer;
font-size:0.7rem;
align-items:center;
justify-content:center;
transition: 0.5s;
border-left:solid 1px var(--brown020);
}

.openbtn0m, .openbtn5m, .openbtn12m{
display:flex;
position: relative;
padding-left:1rem;
cursor: pointer;
font-size:0.7rem;
align-items:center;
justify-content:center;
transition: 0.5s;
border-left:solid 1px var(--brown020);
}



/*
.openbtn2m:hover, .openbtn3m:hover, .openbtn4m:hover, .openbtn5m:hover, .openbtn6m:hover, .openbtn7m:hover, .openbtn8m:hover, .openbtn9m:hover, .openbtn10m:hover, .openbtn13m:hover, .openbtn14m:hover, .openbtn15m:hover, .openbtn16m:hover, .openbtn17m:hover, .openbtn18m:hover, .openbtn19m:hover{
background:#333;
color:#fff;
}
*/

/*--------closebtn--------*/
.modal-close{
width: 100%;
position: relative;
display: flex;
align-items: center;
height: 108px;
/*background: #fff;*/
padding-left:20px;
box-sizing:border-box;
}

.modal-close-services{
width: 90%;
position: relative;
display: flex;
align-items: center;
height: 108px;
padding-left: 20px;
box-sizing: border-box;
margin: 0px 0px 0px auto;
}

@media screen and (max-width:640px){
.modal-close-services{
width:100%;
}
}

.closebtn0,.closebtn00{
position: relative;
/*margin:80px auto 30px 50px;*/
background:#333;
cursor: pointer;
width: 100px;
height:30px;
border:solid 1px #333;
border-radius:25px;
color:#fff;
display:flex;
justify-content:center;
align-items:center;
transition: 0.5s;
text-decoration:none;
font-size:1rem;
}

.closebtn0::before, .closebtn00::before{
content:"CLOSE　×";
font-size:0.75rem;
}

.closebtn0:hover, .closebtn00:hover{
background:#fff;
color:#333;
}


.closebtn2, .closebtn3, .closebtn4, .closebtn5, .closebtn6, .closebtn7, .closebtn8, .closebtn9, .closebtn10, .closebtn11, .closebtn12, .closebtn13, .closebtn14, .closebtn15, .closebtn16, .closebtn17, .closebtn18{
position: fixed;
top:25px;
right:25px;
background:#333;
cursor: pointer;
width: 36px;
height:36px;
border:solid 1px #333;
border-radius:50%;
color:#fff;
display:flex;
justify-content:center;
align-items:center;
transition: 0.5s;
}

.closebtn2::before, .closebtn3::before, .closebtn4::before, .closebtn5::before, .closebtn6::before, .closebtn7::before, .closebtn8::before, .closebtn9::before, .closebtn10::before, .closebtn11::before, .closebtn12::before, .closebtn13::before, .closebtn14::before, .closebtn15::before, .closebtn16::before, .closebtn17::before, .closebtn18::before {
content:"×";
}

.closebtn2:hover, .closebtn3:hover, .closebtn4:hover, .closebtn5:hover, .closebtn6:hover, .closebtn7:hover, .closebtn8:hover, .closebtn9:hover, .closebtn10:hover, .closebtn11:hover, .closebtn12:hover, .closebtn13:hover, .closebtn14:hover, .closebtn15:hover, .closebtn16:hover, .closebtn17:hover, .closebtn18:hover{
background:#fff;
color:#333;
}


/*-----丸の拡大下から-----*/
/*
.circle-bg{
position: fixed;
z-index:100;
width: 100px;
height: 100px;
border-radius: 50%;
background: #dbe7b0;
transform: scale(0);
bottom:-50px;
left:calc(50% - 50px);
transition: 0.6s;
}

.circle-bg.circleactive{
transform: scale(50);
transition: 1.0s;
}
*/

#g-nav2 .circle-bg{
position: fixed;
z-index:100;
width: 100px;
height: 100px;
border-radius: 50%;
background: #dbe7b0;
transform: scale(0);
bottom:-50px;
left:calc(50% - 50px);
transition: 0.6s;
}

#g-nav2:target .circle-bg{
transform: scale(50);
transition: 1.0s;
}

/*------丸の拡大右上から------*/
.circle-bg-lr{
position: fixed;
z-index:100;
width: 100px;
height: 100px;
border-radius: 50%;
background: #dbe8ba;
transform: scale(0);
right:-50px;
top: -50px;
transition: all .6s;
}

.circle-bg-lr.circleactive{
transform: scale(50);
}

/*-------------nav-flame---------------*/
.nav-flame{
width:100%;
background:var(--bege100);
}

/*
@media screen and (max-width:640px){
.nav-flame{
width:100%;
}
}
*/

.title{
width: 100%;
position:relative;
display: flex;
flex-direction: column;
height: 100px;
justify-content: center;
box-sizing: border-box;
}

.title-recruit{
width: 100%;
position: sticky;
top: 0px;
display: flex;
flex-direction: column;
height: 100px;
justify-content: center;
box-sizing: border-box;
/*background:var(--yellow_a100);*/
}

.title_services{
width: 100%;
position:absolute;
display: flex;
flex-direction: column;
height: 100px;
justify-content: center;
box-sizing: border-box;
}

.title h1{
font-family: "RocknRoll One", sans-serif;
font-size:2rem;
font-weighr:200;
}

.title h2{
font-size:1rem;
}

.nav-flame .table dl{
display:flex;
flex-wrap: wrap;
width:80%;
margin:0px auto;
justify-content:center;
box-sizing: border-box;
}

.nav-flame .table dt{
width:200px;
padding:20px;
margin:0px;
/*border:solid 1px rgb(114, 134, 112);*/
box-sizing: border-box;
}

.nav-flame .table dd{
margin:0px;
box-sizing: border-box;
width:calc(100% - 200px);
padding:20px;
/*border:solid 1px rgb(114, 134, 112);*/
}

@media screen and (max-width:940px){
.nav-flame .table dl{
width:100%;
}
}


@media screen and (max-width:640px){
.nav-flame .table dt{
width:150px;
}
.nav-flame .table dd{
width:calc(100% - 150px);
}
}


/*-------table text ul--------*/
/*
#g-nav2 ul {
opacity: 0;
position: absolute;
z-index: 999;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}

#g-nav2.panelactive ul {
opacity:1;
}

#g-nav2.panelactive ul li{
animation-name:gnaviAnime;
animation-duration:1s;
animation-delay:.2s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes gnaviAnime{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

#g-nav2 li{
text-align: center; 
list-style: none;
}

#g-nav2 li a{
color: #333;
text-decoration: none;
padding:10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold;
}
*/


.scroll-menu{
top:25px;
}
/*
#g-nav.panelactive.scroll-g-nav{
top:60px;
}
*/