@charset "utf-8";

/*loading*/
#loading{
 position: fixed;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: #01aae7;
 z-index: 1002;
 pointer-events: none;
}
.loadEnd{
 opacity: 0 !important;
 transition: all 0.7s cubic-bezier(0.86, 0, 0.07, 1)!important;
}
#ldAnm{
width: auto;
position: fixed;
top: 50%;
left: 50%;
margin-left: -99px;
margin-top: -9px;
z-index: 100000;
pointer-events: none;
}
.sclON{
 overflow: auto;
}
#container{
  padding:0;
}
@media screen and (max-width: 767px) {
#container{
  overflow:hidden;
}
}
/*menu*/
#menuContainer{
 position: fixed;
 top: 0;
 width:100%;
 height: 60px;
 z-index: 1000;
}
#menuBg{
 top: -60px;
 position: absolute;
 transition: top .4s cubic-bezier(0.86, 0, 0.07, 1);
 background-color: #FFF;
 width: 100%;height: 100%;
}
#menu{
 position: relative;
 top: -7px;
 transition: all .4s cubic-bezier(0.86, 0, 0.07, 1);
}
#menu #header{
 background:transparent;
 transition: opacity 0.3s  cubic-bezier(0.215, 0.61, 0.355, 1);
}
.menuBgOn{
 top:0 !important;
 transition: top .8s cubic-bezier(0.86, 0, 0.07, 1)!important;
}
.menuOn{
 top: 0px !important;
 transition: all .8s cubic-bezier(0.86, 0, 0.07, 1)!important;
}
/*top header*/
#header img.sptop{
 display: block;
}
#header img.sp{
 display: none;
}
#spNavibtn span,
#spNavibtn span:after,
#spNavibtn span:before{
 background: #fff;
}
#menu.mv img.sptop{
 display: none;
}
#menu.mv #spNavibtn span {
 background: #00aae7;
}
#menu.mv #spNavibtn span:after{
 background: #919191;
}
#menu.mv #spNavibtn span:before{
 background: #074787;
}
/*video*/
#videoSpWrap{
 height: calc(100vh - 100px);
 position: relative;
 overflow: hidden;
 background-color: #00aae7;
}
#videoSpWrap span{
  display: block;
  position: relative;
  width: 100%;
  height:100%;
  background:url(../image/topview.jpg);
  background-size: cover;
  background-position: center;
}
#dot{
 position: absolute;
 top: 0;
 width: 100%;
 height:100%;
 background-image: url(../../image/dot.png);
 background-repeat: repeat;
 z-index: 10;
}
#topBGL{
  position: absolute;
  top: 0;
  width: auto;
  height: calc(100vh - 100px);
}
#topBGR{
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  height: calc(100vh - 100px);
}
#titles{
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  z-index: 990;
  display: block;
  pointer-events: none;
}
/* title */
#ttlBox{
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50%;
  margin-top:-50%;
  z-index: 8000;
}
#sptitle{
  width: 95%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  top: 35%;
  position: relative;
  transform : translateY(-50%);
}
.ttlTxs{
  position: absolute;
  overflow: hidden;
  display:block;
  width:0px;
  height: 90px;
  left: -50px;
}
.ttlTx{
  display: block;
  position: absolute;
  height: auto;
  width: auto;
}
#t1{
  left:-70px;
}
#t2{
  top:72px;
  left:-33px;
}
#t3{
  top:162px;
  left:214px;
}
/* nmzBtn */
.nmzBtn{
  width:50vw;
  background-color: #fff;
  position: absolute;
  bottom:140px;right:0;
  z-index: 100;
  opacity: 0;
  transform: translateY(10px)
}
/* btnArea */
.btnArea{
  width:100%;
  height:auto;
  padding:20px 0 ;
  position: absolute;
  bottom:0;left:0;
  overflow:hidden;
  z-index: 100;
}
.btnArea a.careerBtn{
  display: block;
  width:90%;
  height: 46px;
  margin:0 auto;
  line-height: 46px;
  font-size: 16px;
  color:#00aae7;
  font-weight:bold;
  text-align:center;
  background-color: #fff;
  text-decoration: none;
  box-shadow:3px 3px 5px 0px rgba(0,0,0,0.2);
}
.btnLft{
  position: static;
  opacity: 0;
  transform: translateY(20px)
}
.btnRht{
  padding-top:10px;
  position: static;
  opacity: 0;
  transform: translateY(20px)
}

@media screen and (min-width: 768px) {
  #videoSpWrap{
   height: calc(100vh - 160px);
  }
  #topBGL{
   height: calc(100vh - 160px);
  }
  #topBGR{
   height: calc(100vh - 160px);
  }
  /* nmzBtn */
  .nmzBtn{
  width:300px;
  bottom:80px;
  }
  .nmzBtn a{
  transition: opacity .3s;
  }
  .nmzBtn a:hover{
  opacity: 0.6;
  }
  /*menu*/
  #menuContainer{
   position: fixed;
   top: 0;
   width:100%;
   height: 80px;
  }
  #menuBg{
   top: -80px;
   position: absolute;
   transition: top .4s cubic-bezier(0.86, 0, 0.07, 1);
   background-color: #FFF;
   width: 100%;height: 100%;
  }
  /*top header*/
  #header h1{
   background:url(../image/head_logo_pc_w.png) no-repeat 0 0;
  }
  #header h1 img{
   display: none!important;
  }
  #menu #pcNavi > li > p,
  #menu #pcNavi > li > a{
   color: #fff!important;
  }
  #menu #pcNavi > li > a.linkB:after{
   background:url(../image/icon_link_w.png) no-repeat 0 0;
   background-size: 10px 10px;
  }
  #menu #pcNavi > li:hover > p,
  #menu #pcNavi > li:hover > a{
   color:#00aae7!important;
  }

/*mv*/
  #menu.mv h1{
   background:url(../image/head_logo_pc.png) no-repeat 0 0;
  }
  #menu.mv #pcNavi > li > p,
  #menu.mv #pcNavi > li > a{
   color: #074787!important;
  }
  #menu.mv #pcNavi > li:hover > p,
  #menu.mv #pcNavi > li:hover > a{
   color:#00aae7!important;
  }

/*mv2*/
  #menu.mv2 #header{
   background:#fff;
   transition: opacity .3s cubic-bezier(0.86, 0, 0.07, 1);
  }
  #menu.mv2 h1{
   background:url(../image/head_logo_pc.png) no-repeat 0 0;
  }
  #menu.mv2 #pcNavi > li > p,
  #menu.mv2 #pcNavi > li > a{
   color: #074787!important;
  }
  #menu.mv2 #pcNavi > li:hover > p,
  #menu.mv2 #pcNavi > li:hover > a{
   color:#00aae7!important;
  }
  #menu.mv #pcNavi > li > a.linkB:after,
  #menu.mv2 #pcNavi > li > a.linkB:after{
   background:url(../image/icon_link.png) no-repeat 0 0;
   background-size: 10px 10px;
  }

  /* title */
  #ttlBox{
    transform: scale(1);
    display: block;
    position: absolute;
    top: 43%;
    left: 50%;
    margin-left: -395px;
    margin-top:-150px;
    z-index: 8000;
  }
  #sptitle{
    display: none;
  }
}
/*info
------------------------------------------------------*/
.info{
 padding:6vw 5vw;
 background-color: #00aae7;
}
.info .inner{
 font-size:3vw;
 color:#fff;
}
.info h2{
 width:30vw;
 margin: 0 auto 3vw;
}
dl.infoList{
 width: 100%;
 line-height:1.4;
}
dl.infoList dt{
 width:100%;
 margin-top: 4vw;
 padding: 5px 0 0;
 position: relative;
}
dl.infoList dt .icon{
 display: inline-block;
 position: absolute;
 top:0.6vw;left:28vw;
 padding:2px 10px;
 font-size:2.6vw;
 font-weight: bold;
 background-color: #fff;
 color:#00aae7;
 box-shadow:2px 2px 4px 0px rgba(0,0,0,0.2);
}
dl.infoList dt .icon.event{
 background-color: #074787;
 color:#fff;
}
dl.infoList dd{
 width:100%;
 padding: 8px 0 0;
}
dl.infoList dd a{
 color:#fff;
}
@media screen and (min-width: 768px) {
  .info{
   padding:90px 0 50px;
   background-color: #00aae7;
   position: relative;
  }
  .info .inner{
   width:960px;
   margin:0 auto;
   font-size:16px;
   color:#fff;
  }
  .info h2{
   width:100%;
   height:24px;
   margin: 0 auto;
   text-align: center;
  }
  .info h2 img{
   width:134px;
  }
  dl.infoList{
   display: flex;
   flex-wrap:wrap;
   width: 840px;
   line-height:1.4;
   margin:0 auto 0;
  }
  dl.infoList dt{
   width: 320px;
   margin-top: 20px;
   padding: 8px 0;
  }
  dl.infoList dt .icon{
   top:5px;left:160px;
   padding:4px 30px;
   font-size:16px;
   font-weight: bold;
   box-shadow:3px 3px 5px 0px rgba(0,0,0,0.3);
  }
  dl.infoList dd{
   width: 520px;
   margin-top: 20px;
   padding: 8px 0;
  }
  /* btnArea */
  .btnArea{
    width:100%;
    height:100px;
    position: absolute;
    top:-50px;left:0;
    overflow:hidden;
  }
  .btnLft{
    padding-right:10px;
    position: absolute;
    top:3px;right:50%;
    transform: translateX(0px);
    transform: translateY(20px);
    opacity: 0;
  }
  .btnRht{
    padding-left:10px;
    padding-top:0;
    position: absolute;
    top:3px;left:50%;
    opacity: 0;
    transform: translateX(0px);
    transform: translateY(20px);

  }
  .btnArea a.careerBtn{
    display: block;
    width:400px;
    height: 90px;
    line-height: 90px;
    font-size: 24px;
    color:#00aae7;
    font-weight:bold;
    text-align:center;
    background-color: #fff;
    box-shadow:3px 3px 5px 0px rgba(0,0,0,0.2);
    transition: background-color 0.3s,color 0.3s;
  }
  .btnArea a.careerBtn:hover{
    background-color: #074787;
    color:#fff;
  }
}

/*contents
------------------------------------------------------*/
/*topbg*/
.topbg{
 background-color:#fff;
}
@media screen and (min-width: 768px) {
  .topbg{
    width:100%;
    min-width: 970px;
    padding:1px 0 0;
    background-image:url(../../image/top_bg_l2.png), url(../../image/top_bg_r2.png);
    background-repeat: no-repeat, no-repeat;
    background-position: left top, right top;
  }
}

/*aboutus*/
#aboutus{
 background:url(../../image/aboutus_bg_sp.png) no-repeat;
 background-size: 100% auto;
}
#aboutus .title{
 padding:10vw 5vw 8vw;
}
#aboutus .title h2 img{
 height:10vw;
 width:auto;
}
#aboutus .title p{
 margin-top:5vw;
 font-size: 3.2vw;
 line-height: 1.6;
 letter-spacing: 0;
}
#aboutus .aboutLink a{
 display: block;
 width:100%;
 height:0;
 padding-top:60%;
 position: relative;
}
#aboutus .aboutLink a:after{
 content: "";
 display: block;
 width: 100%;
 height: 100%;
 background:url(../../common/image/dot2.png) 0 0;
 overflow: hidden;
 position: absolute;
 bottom:0;left:0;
 z-index:1;
}
#aboutus .aboutLink a span{
 display: block;
 width:100%;
 position: absolute;
 top:50%;
 transform: translateY(-50%);
 font-size: 5vw;
 color:#fff;
 font-weight: bold;
 text-align:center;
 letter-spacing: 3px;
 z-index:2;
}
#aboutus .aboutLink a.message{
 background:url(../../image/aboutus_message.jpg) no-repeat 40% 0;
 background-size: cover;
}
#aboutus .aboutLink a.life{
 background:url(../../image/aboutus_life.jpg) no-repeat 40% 0;
 background-size: cover;
}
#aboutus .aboutLink a.number{
 background:url(../../image/aboutus_number.png) no-repeat 40% 0;
 background-size: cover;
}
.movies{
 padding:3vw 5vw 5vw;
 width: 100%;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 flex-wrap:nowrap;
}
.movies a{
 margin-top: 5vw;
 display: block;
 width: 100%;
 text-decoration: none;
 color: #000;
 overflow: hidden;
}
.movies img{
 display: block;
 width: 100%!important;
 border: 1px solid #FFF;
 transform-origin: center center;
 transition: all .3s;
}
.movies a:hover img {
 opacity: 0.5;
}
.movies p{
 font-size: 3.2vw;
 line-height: 1.75em;
 letter-spacing: 0;
 margin-top: 5px;
 text-align: center;
}
@media screen and (min-width: 768px) {
  #aboutus{
   height:1680px;
   padding:114px 0 0;
   background:none;
  }
  #aboutus .title{
   padding:0 0 45px 100px;
  }
  #aboutus .title h2 img{
   width:392px;
   height:68px;
  }
  #aboutus .title p{
   padding-top:36px;
   margin-top:0;
   font-size: 18px;
   line-height: 2;
   text-align: left;
   font-weight: bold;
   letter-spacing: 0px;
  }
  #aboutus .aboutLink{
   display:flex;
   flex-direction: row;
   justify-content: center;
   align-items:center;
   width:100%;
   min-width: 970px;
  }
  #aboutus .aboutLink a{
   display: block;
   width:33.333%;
   height:380px;
   padding-top:0;
  }
  #aboutus .aboutLink a span{
   font-size: 22px;
  }
  #aboutus .aboutLink a:after{
   transition: .3s;
  }
  #aboutus .aboutLink a:hover:after{
   opacity:0;
  }
  #aboutus a.message{
   background:url(../../image/aboutus_message.jpg) no-repeat center center;
   background-size: cover;
  }
  #aboutus a.life{
   background:url(../../image/aboutus_life.jpg) no-repeat center center;
   background-size: cover;
  }
  #aboutus a.number{
   background:url(../../image/aboutus_number.png) no-repeat center center;
   background-size: cover;
  }
  .movieWrap{
   padding: 100px 20px 0;
   margin: 0 auto;
   max-width: 1040px;
  }
  .movies{
   display: grid;
   padding: 0;
   margin: 0;
   grid-template-columns: 48% 48%;
   column-gap: 4%;
   row-gap: 40px;
  }
  .movies li{
   display: block;
  }
  .movies a{
   display: block;
   margin: 0;
   width: 100%;
   text-decoration: none;
   color: #000;
   overflow: hidden;
  }
  .movies img{
   display: block;
   width: 100%!important;
   height: auto;
   border: 1px solid #FFF;
   transition: all .3s;
  }
  .movies a:hover img {
   opacity: 0.5;
  }
  .movies p{
   font-size: 16px;
   line-height: 1.75em;
   letter-spacing: 0;
   margin-top: 5px;
   text-align: center;
  }
 }


/*voice*/
#voice{
 padding:0 0 14vw;
 background: url(../../image/voice_bg.jpg) no-repeat left 26vw;
 background-size:cover;
}
#voice .title{
 padding:14vw 0 8vw;
 background:url(../../image/voice_bg_sp.png) no-repeat;
 background-size: 100% auto;
}
#voice .title{
 display: flex;
 flex-direction:column;
}
#voice .title h2{
 order: 2;
 text-align: center;
}
#voice .title h2 img{
 height:10vw;
 width:auto;
}
#voice .title p{
 order: 1;
 font-size: 3.4vw;
 text-align: center;
 padding-bottom:4vw;
}
#voice a{
 width:86vw;
 margin:0 auto;
 display: block;
 text-decoration: none;
}
#voice a + a{
  margin-top:6vw;
}
#voice ul{
 background-color: #fff;
}
#voice ul li.txt{
 padding:8vw 4vw;
 color:#000;
}
#voice ul li.txt h3{
 font-size: 4.6vw;
 font-weight:bold;
 padding-bottom:3vw;
}
#voice ul li.txt p{
 font-size: 3.2vw;
 line-height: 1.6;
}
@media screen and (min-width: 768px) {
  #voice{
   width:100%;
   max-width:1400px;
   margin:0 auto;
   height:1055px;
   padding:0 90px 0;
   background: url(../../image/voice_bg.jpg) no-repeat left 40px;
   background-size:866px 771px;
  }
  #voice a{
   width:530px;
   margin:0;
  }
  #voice a + a{
    margin-top:66px;
  }
  #voice .title{
   width:530px;
   padding:0;
   background:none;
   margin:0 0 0 auto;
  }
  #voice .title h2{
   order: 1;
   text-align: left;
  }
  #voice .title h2 img{
   width:530px;
   height:auto;
  }
  #voice .title p{
   order: 2;
   font-size: 18px;
   text-align: left;
   font-weight: bold;
   padding:30px 0 75px;
  }
  #voice ul{
   display: table;
   width:910px;
   height:300px;
   margin:0;
   background-color: #fff;
   box-shadow:5px 5px 5px 0px rgba(0,0,0,0.2);
   transition: all .3s;
  }
  #voice ul li.photo{
   display: table-cell;
   width:456px;
  }
  #voice ul.interviews li.photo{
   background:url(../../image/voice_interviews.jpg) no-repeat center center;
  }
  #voice ul.questionnaire li.photo{
   background:url(../../image/voice_questionnaire.jpg) no-repeat center center;
  }
  #voice ul li.txt{
   display: table-cell;
   width:454px;
   padding:100px 30px 30px 50px;
   color:#000;
  transition: all .3s;
  }
  #voice ul li.txt h3{
   font-size:26px;
   font-weight:bold;
   padding-bottom:24px;
   letter-spacing: 0.5px;
  }
  #voice ul li.txt p{
   font-size: 14px;
   line-height: 2.3;
  }
  #voice ul:hover li.txt{
    background-color: #074787;
  }
  #voice ul:hover li.txt h3,
  #voice ul:hover li.txt p{
   color:#fff;
  }
}
@media screen and (min-width: 768px)  and (max-width: 1020px) {
  #voice{
   padding:0 45px 0;
  }
}

/*work*/
#work{
 background:url(../../image/work_bg_sp.png) no-repeat;
 background-size: 100% auto;
}
#work .title{
 padding:12vw 5vw 8vw;
}
#work .title h2 img{
 height:22vw;
 width:auto;
}
#work .title p{
 margin-top:5vw;
 font-size: 3.2vw;
 line-height: 1.6;
 letter-spacing: 0;
}
#work a{
 display: block;
 width:100%;
 height:0;
 padding-top:60%;
 position: relative;
}
#work a:after{
 content: "";
 display: block;
 width: 100%;
 height: 100%;
 background:url(../../common/image/dot2.png) 0 0;
 overflow: hidden;
 position: absolute;
 bottom:0;left:0;
 z-index:1;
}
#work a span{
 display: block;
 width:100%;
 position: absolute;
 top:50%;
 transform: translateY(-50%);
 font-size: 5vw;
 color:#fff;
 font-weight: bold;
 text-align:center;
 letter-spacing: 3px;
 z-index:2;
}
#work a.workplace{
 background:url(../../image/work_place.jpg) no-repeat;
 background-size: cover;
}
#work a.welfare{
 background:url(../../image/work_welfare.jpg) no-repeat;
 background-size: cover;
}
#work a.development{
 background:url(../../image/work_development.jpg) no-repeat;
 background-size: cover;
}

@media screen and (min-width: 768px) {
  #work{
   max-width: 1300px;
   height:1150px;
   padding:0;
   margin: 0 auto;
   background: url(../../image/work_bg.jpg) no-repeat right 180px;
   position: relative;
  }
  #work .title{
   width:550px;
   padding:0;
   position: absolute;
   top:45px;left:100px;
  }
  #work .title h2 img{
   width:550px;
   height:152px;
  }
  #work .title p{
   padding-top:30px;
   margin-top:0;
   font-size: 18px;
   line-height: 2;
   text-align: left;
   font-weight: bold;
   letter-spacing: 0px;
  }
  #work ul{
    width: calc(100% - 100px);
    max-width: 1100px;
    height:970px;
    margin:0 0 0 auto;
    position: relative;
  }
  #work ul li.nav1{
    width: 380px;
    height:470px;
    position: absolute;
    top:0;right:0;
  }
  #work ul li.nav2{
    width: 550px;
    height:340px;
    position: absolute;
    top:380px;right:430px;
  }
  #work ul li.nav3{
    width: 550px;
    height:380px;
    position: absolute;
    bottom:0;right:0;
    z-index: 3;
  }
  #work a{
   display: block;
   width:100%;
   height:100%;
   background:url(../../image/work_message.jpg) no-repeat center center;
   background-size: cover;
   position: relative;
  }
  #work a span{
   font-size: 22px;
   text-shadow:0px 0px 4px #666666;
  }
  #work a:after{
   transition: .3s;
  }
  #work a:hover:after{
   opacity:0;
  }
}
@media screen and (min-width: 768px)  and (max-width: 1100px) {
  #work .title{
   top:45px;left:50px;
  }
  #work ul{
    width: calc(100% - 50px);
  }
  #work ul li.nav1{
    width: 330px;
    height:408px;
    position: absolute;
    top:0;right:0;
  }
  #work ul li.nav2{
    width: 500px;
    height:309px;
    position: absolute;
    top:380px;right:430px;
  }
  #work ul li.nav3{
    width: 500px;
    height:345px;
    position: absolute;
    bottom:0;right:0;
    z-index: 3;
  }
}