@charset "utf-8";
/* CSS Document */
#KeyVisual{background:#fff; position:relative; z-index:1}
#MainNav::before,
.ServiceUl,
.ServiceSectionIcon,
#KeyV_img{background-image:linear-gradient(to right,#0b318f,#00aca0,#0b318f);background-repeat:repeat-x; background-position:0 0; animation:3s linear 1s infinite reverse both running}
#KeyV_img{display:block; width:100%}
.Ttl{text-align:center; font-weight:400}
.NewsLi{display:flex; justify-content:space-between; align-items:flex-start; line-height:1.7}
.WorksH3{text-align:center}
.ServiceUl{display:flex; justify-content:space-between; flex-wrap:wrap}
.ServiceLi{overflow:hidden}
#Footer{background:#ccc; color:#000; display:block; text-align:center}
.CloseBtn,.CloseBtn2{position:absolute; background:#f5f6f9; color:#888; text-align:center}
.CloseBtn::before,.CloseBtn2::before,
.CloseBtn::after,.CloseBtn2::after{content:""; display:block; position:absolute; transform-origin:center center; transform:rotate(45deg); background:#888}
.CloseBtn::after,.CloseBtn2::after{transform:rotate(-45deg)}
.ModalWinSmall{text-align:center; color:#777; display:block}
.ServiceSectionIcon{display:block; border:solid #fff}
.SectionServiceUl{display:flex; flex-wrap:wrap; justify-content:center}
.SectionServiceLi{background:#f5f6f9; text-align:center; font-size:1.2rem}
.ServiceDescription,
.ArticleDescription{line-height:2; text-align:justify}
.SectionServiceTtl{text-align:center; font-size:1.5rem}
#AboutDl{display:flex; flex-wrap:wrap}
#ContactSection{text-align:center}
.text_link{color:#00aca0}
.JobsLi{margin-bottom:2em; color:#00aca0; text-align:center}
.both{clear:both}
#RecForm{background:#f5f6f9}
.JobBlk span{display:inline-block; font-size:.8em}
.Inp,.RecTextarea{width:100%}
#FormCopyBox{font-size:14px}
.RecruitArticle p{margin-bottom:1em; text-align:justify}
strong{font-weight:inherit}
#RizinFlier{position:relative}
.RizinFlier1,
.RizinFlier2{position:absolute; display:block}
.RizinFlier1{bottom:0; right:0; z-index:2}
.RizinFlier2{top:0; left:0; z-index:1}
.NeoGames{text-align:center}
.RecruitNoModal{color:#727272;cursor:default}
label.RecruitNoModal{color:#555555;cursor:default}
.RecruitNoModal.JobsLi:hover{opacity:1}
label.RecruitNoModal:hover{opacity:1}
/*SEO上不要なワードを移動*/
.welcome::before{content:"歓迎"}
.required::before{content:"必須"}
.academic::before{content:"【学歴不問】"}
.exp::before{content:"経験"}
.all_right::before{content:"知識がなくても大丈夫"}
.all_right2::before{content:"スキルがあればOK"}
.joining::before{content:"入社"}
.ConceptChangeTxt{font-size:.8em; display:inline-block; background-image:linear-gradient(to top, #e8fbff, #fff, #fff); padding-bottom:.4em}
#ConceptSection{text-align:center}
@media(max-width:789px){
	body{font-size:1.5rem}
	#KeyVisual{height:90vh; width:100%; padding-top:10vh; overflow:hidden; display:block}
	#MainNav::before,
	.ServiceUl,
	.ServiceSectionIcon,
	#KeyV_img{background-size:200vw auto; animation-name:keyvisual}
	#KeyV_img{position:fixed; pointer-events:none}
	#MainNav::before{display:block; content:""; width:100%; height:5vw; }
	#SpNavMail{bottom:10vw; right:10vw}
	#SpNavTel{bottom:16vw; right:2vw}
	#SpNavMail::before{bottom:-10vw; right:-10vw}
	#SpNavTel::before{bottom:-16vw; right:-2vw}
	#Contents{min-height:100vh; background:#fff; transition:.3s}
	.Ttl{padding:30vw 0 10vw; font-size:2rem}
	.WorksLi{margin-bottom:10vw}
	.WorksH3{font-size:1.5rem; padding-top:2vw}
	.ModalWindow,
	.ModalWindow2{position:fixed; height:100vh; width:100vw; overflow:scroll; top:0; left:100vw; transition:.3s; z-index:101; background:#fff; box-sizing:border-box}
	.ModalWindow{padding:5vw}
	.ModalWindow2{background:rgba(255,255,255,.95); color:#333}
	.CloseBtn,.CloseBtn2{width:16vw; height:8vw; line-height:6vw; padding-top:16vw; font-size:1.5rem; top:5vw; right:5vw; border-radius:3vw; box-shadow:inset 0.5vw 0.5vw 1vw #e2e2e2}
	.CloseBtn::before,.CloseBtn2::before,
	.CloseBtn::after,.CloseBtn2::after{width:12vw; height:1px; top:9vw; left:2vw}
	html[class*="Open"]:not(.SpNavOpen) #Contents,
	html[data-open="WoeksSectionOpen"] #WoeksSection,
	html[data-open="ServiceSectionOpen"] #ServiceSection,
	html[data-open="ContactSectionOpen"] #ContactSection,
	html[data-open="AboutSectionOpen"] #AboutSection,
	html[data-open="ConceptSectionOpen"] #ConceptSection,
	html[data-open="RecruitSectionOpen"] #RecruitSection,
	html[data-open="NewsSectionOpen"] #NewsSection,
	.ModalWindow2.active{transform:translate(-100vw,0)}
	.ServiceUl{width:86vw; margin:0 auto 10vw}
	.ServiceLi{flex:0 0 43vw}
	.ServiceSectionIcon{width:20vw; border-width:0 40vw}
	.ModalWinSmall{padding:4vw}
	.ServiceDescription,
	.ArticleDescription{font-size:1.5rem; padding:5vw 5vw 30vw}
	.ServiceDescription{text-align:justify}
	.ArticleDescription:nth-last-of-type(1){padding-bottom:20vw}
	.ArticleDescriptionImg{margin-bottom:10vw}
	.SectionServiceUl{width:100%; margin:5vw auto}
	.SectionServiceLi{flex:0 0 38vw; font-size:1.2rem; padding:1vw 0; margin-bottom:2vw}
	.SectionServiceLi:not(:nth-of-type(even)):not(:last-child){margin-right:2vw}
	.SectionServiceUl:nth-last-of-type(1){padding-bottom:30vw}
	.ConceptCatchEng{text-align:center; font-size:2.5rem}
	.ConceptCatchJap{font-weight:normal; padding-top:10vw; text-align:center; font-size:1.5rem}
	.SectionServiceTtl{padding-top:5vw}
	.NewsLi{padding:2vw 0}
	.NewsLiSpan{flex:0 0 63vw; text-align:justify}
	.NewsLiSpan:first-child{flex:1 1 20vw}
	.ServiceSectionIcon{width:10vw; margin:3vw auto; display:block; border:5vw solid #fff; box-shadow:0 0 10vw #e6f0ff; border-radius:3vw}
	.ServiceSectionIcon:not(:nth-of-type(1)){margin-top:20vw}
	.ContactP{margin-top:10vw}
	.ContactUl{padding-top:10vw}
	.ContactLi{font-size:2rem; padding:3vw}
	#Footer{margin-top:15vw; padding:1vw 0 5vw}
	.ModalWindowFoot{padding:5vw 5vw 20vw}
	#MainNavUl{margin:30vw}
	.NavLi{text-align:center; font-size:1.8rem; padding:5vw}
	.WorksUl{padding-bottom:30vw}
	#AboutDl{width:80vw; margin:0 auto; padding-bottom:30vw}
	.AboutDt{flex:1 1 30vw}
	.AboutDd{flex:1 1 50vw; margin-bottom:20px}
    .AboutDdUl+.AboutDdUl{padding-top:20px}
	#RecruitSection p{text-align:justify; margin-bottom:4vw}
	#RecForm{width:100%; margin:0 auto; padding:5vw}
	#FormCopyBox{padding-bottom:30vw}
	.JobBlk{padding:6vw 2vw 6vw 0; width:25vw}
	#InpOcc{padding-bottom:6vw}
	#InpOcc label{margin-bottom:2vw; display:inline-block}
	.RecTextarea{height:30vw}
	.Inp{padding:4vw 2vw; font-size:1.3rem; box-sizing:border-box}
	.Inp,.RecTextarea{border:0; box-shadow:0 0 5vw #f5f6f9; background:#fff}
	.JobBlk span{display:block}
	#EntryFormSubmit,
	#EntryFormCopy{border:1px solid #555; width:40vw; height:15vw; line-height:15vw; text-align:center; margin:10vw auto}
	.Alert{margin:1em 0}
	#MainNav{background:#fff; position:relative; z-index:2}
	.RecruitArticle p{padding:0 5vw}
	.RecruitArticle p:nth-last-of-type(1){padding-bottom:30vw}
	.RizinFlier1,.RizinFlier2{width:50vw}
	#RizinFlier{height:90vw; width:90vw; margin:0 auto 30vw}
	#RizinMove{width:90vw; margin:0 auto 10vw; display:block}
	.PcImg img{width:90vw}
	.ConceptChangeTxt{margin-bottom:10vw}
}
@media(min-width:790px){
	[class*="Btn"]{cursor:pointer}
	::-webkit-scrollbar{width:5px}
	::-webkit-scrollbar-track{background:#fff; border:none; box-shadow:inset 2px 2px 3px #eee}
	::-webkit-scrollbar-thumb{background-image:linear-gradient(to bottom,#bbb,#eee); border:none; border-radius:5px}
	::-webkit-scrollbar-thumb:hover{transform:scale(1.1)}
	html{scrollbar-color:#bbb #efefef; scrollbar-width:thin}
	#Contents{width:100%; top:0; left:0; scrollbar-width:thin; transition:width .3s; font-size:2rem}
	#Footer{font-size:1.4rem; overflow:hidden}
	html:not([data-open]) #KeyVisual{margin:calc(50vh - 300px) auto; width:600px}
	
	html[data-open] #Contents{width:200px; position:fixed; left:0; top:0; height:100%}
	html[data-open] #Footer{height:0; padding:0; margin:0}
	html[data-open] #MainNav{position:absolute; left:0; top:220px; width:200px}
	#MainNavUl{margin:40px 0}
	.NavLi{text-align:center; padding:20px; transition:.3s}
	html[data-open] .NavLi{padding:10px}
	.NavLi:hover{transform:translateY(-2px); box-shadow:0 2px 20px #e6f0ff; color:#0b318f}
	.ServiceSectionIcon,
	#KeyV_img{background-size:1000px auto; animation-name:keyvisualPC; transition:filter .4s; width:200px; cursor:pointer}
	html:not([data-open]) #KeyV_img{width:100%}
	.NewsUl{max-width:600px; margin:0 auto}
	.Ttl{padding:60px 0 45px; font-size:2.2rem}
	.NewsLi{padding:10px 25px}
	.NewsLiSpan{flex:0 0 35vw; max-width:400px}
	.NewsLiSpan:first-child{flex:1 1 100px}
	.WorksLi{transition:.2s}
	.WorksLi:hover{transform:translateY(-3px)}
	.WorksH3{font-size:1.7rem; padding:10px; font-weight:400; margin-bottom:20px}
	.ServiceUl{width:430px; margin:0 auto 50px}
	.ServiceLi{flex:0 0 215px; transition:transform .2s}
	.ServiceLi:hover{transform:translateY(-5px)}
	.ModalWindow,.ModalWindow2{position:fixed; width:calc(100% - 230px); z-index:-1; left:200px; top:30px; height:calc(100vh - 60px); opacity:0; background:#fff; transition:opacity .3s; overflow-y:auto; box-shadow:0 0 40px #e6f0ff; box-sizing:border-box; padding:5vw; scrollbar-width:thin; scrollbar-color:#bbb #efefef; border-radius:5px}
	.ModalWindow2{padding:5vw 10vw}
	#Footer{margin-top:75px; padding:5px 0 20px}
	html[data-open="WoeksSectionOpen"] #WoeksSection,
	html[data-open="ServiceSectionOpen"] #ServiceSection,
	html[data-open="ContactSectionOpen"] #ContactSection,
	html[data-open="AboutSectionOpen"] #AboutSection,
	html[data-open="ConceptSectionOpen"] #ConceptSection,
	html[data-open="RecruitSectionOpen"] #RecruitSection,
	html[data-open="NewsSectionOpen"] #NewsSection,
	.ModalWindow2.active{z-index:5; opacity:1; transition:opacity .3s}
	.WorksUl{width:75%; margin:0 auto}
	.CloseBtn,.CloseBtn2{width:40px; height:20px; line-height:20px; padding-top:50px; font-size:1.5rem; top:10px; right:10px; transition:.3s; border-radius:5px}
	.CloseBtn::before,.CloseBtn2::before,
	.CloseBtn::after,.CloseBtn2::after{width:30px; height:1px; top:25px; left:5px; transition:.2s}
	.CloseBtn:hover,.CloseBtn2:hover{background:#555; color:#fff; box-shadow:inset 1px 1px 3px #333; text-shadow:1px 1px 3px #333}
	.CloseBtn:hover::before,.CloseBtn2:hover::before,
	.CloseBtn:hover::after,.CloseBtn2:hover::after{background:#fff; box-shadow:1px 1px 1px #333}
	.ModalWinSmall{padding:20px}
	.ServiceSectionIcon{width:100px; margin:0 auto; display:block; margin-top:50px}
	.Ttl + .ServiceSectionIcon{margin-top:0}
	.SectionServiceUl{margin:10px auto}
	.SectionServiceLi{flex:0 1 160px; font-size:1.2rem; padding:5px 0; margin:5px}
	.ServiceDescription,
	.ArticleDescription{font-size:1.5rem; padding:20px; text-align:center; line-height:2.5}
	.ArticleDescriptionImg{margin-bottom:20px}
	.SectionServiceTtl{padding-top:20px}
	.ConceptCatchEng{text-align:center; font-size:4rem}
	.ConceptCatchJap{margin-bottom:30px; text-align:center}
	.ContactUl{padding-top:30px}
	.ContactLi{font-size:2rem; padding:15px}
	#AboutDl{width:400px; margin:0 auto}
	.AboutDt{flex:1 1 150px}
	.AboutDd{flex:1 1 250px; margin-bottom:20px}
    .AboutDdUl+.AboutDdUl{padding-top:20px}
	.AboutDdLi{padding-bottom:5px}
	#RecruitSection{line-height:2}
	.Catch1{text-align:center; font-size:2rem}
	.AccessImg{width:300px; max-width:40%; margin-right:20px; float:left}
	.RecImg{display:block; max-width:500px; margin:0 auto}
	#RecruitSection p{text-align:center; margin-bottom:20px}
	#RecForm{width:100%; padding:20px; max-width:750px; margin:0 auto}
	.JobBlk{padding:10px 0; width:150px}
	#InpOcc{padding-bottom:10px}
	#InpOcc label{margin-bottom:5px; display:inline-block}
	.RecTextarea{height:200px}
	.Inp{padding:10px 5px; font-size:1.3rem; box-sizing:border-box}
	.Inp,.RecTextarea{border:0; box-shadow:0 0 10px #f5f6f9; background:#fff}
	.JobBlk span{display:inline-block; margin-left:10px}
	#EntryFormSubmit,
	#EntryFormCopy{border:1px solid #555; width:200px; height:45px; line-height:45px; text-align:center; margin:30px auto; cursor:pointer; transition:.3s}
	#EntryFormSubmit:hover,
	#EntryFormCopy:hover{background:#555; color:#fff; box-shadow:inset 1px 1px 3px #333; text-shadow:1px 1px 3px #333}
	.Alert{margin:1em 0}
	#RecruitSection .Ttl:not(:first-child){padding-top:75px}
	.RecruitArticle p{line-height:2}
	.JobsLi{transition:.3s}
	.JobsLi:hover{opacity:.6}
	.RizinFlier1,.RizinFlier2{width:53%}
	#RizinFlier{height:calc(80vw - 230px); width:100%; margin:0 auto 20px}
	#RizinMove{width:100%; margin-bottom:30px}
	.PcImg img{width:75%} 
	.ConceptChangeTxt{margin-bottom:30px}
}
@media(min-width:1000px){
	.WorksUl{display:flex; justify-content:space-between; flex-wrap:wrap; width:100%}
	.WorksLi{flex:0 0 calc(50% - 2.5vw); margin-bottom:5vw}
	.ModalWindow2{padding:5vw 15vw}
	#RizinFlier{height:calc(70vw - 230px)}
}
@media(min-width:1200px){
	.ModalWindow,.ModalWindow2{padding:5vw 15vw}
	.ModalWindow2{padding:5vw 25vw}
	#RizinFlier{height:calc(50vw - 230px)}
}
@keyframes keyvisual{
	0%{background-position:0 0}
	100%{background-position:200vw 0}
}
@keyframes keyvisualPC{
	0%{background-position:0 0}
	100%{background-position:1000px 0}
}
#IE11{display:none}
@media screen\0 {
	#IE11{display:block; width:100%; background:#0b318f; color:#fff; text-align:center; font-size:13px; padding:10px 0}
	#IE11 a{text-decoration:underline}
	html[data-open] #Contents #KeyVisual{display:none}
}