@charset "utf-8";
/* CSS Document */

@import url("reset.css");
@import url("mailform.css");

@font-face {
  font-family: 'Noto Sans CJK JP Subset';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Sans CJK JP'),
    local('NotoSansCJKjp-Regular'),
    local('NotoSansJP-Regular'),
    url('NotoSansCJKjp-Regular.woff2') format('woff2'),
    url('NotoSansCJKjp-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Noto Sans CJK JP Subset';
  font-style: normal;
  font-weight: 700;
  src: local('NotoSansCJKjp-Bold'),
    local('NotoSansJP-Bold'),
    url('NotoSansCJKjp-Bold.woff2') format('woff2'),
    url('NotoSansCJKjp-Bold.woff') format('woff');
}


body {
  font-family:'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK JP Subset', sans-serifs;
  font-weight: 400;
}

/*--Link------------------------------------------------------------*/
a, a:link { color: #20a7cf; text-decoration: none; }
a:visited { color: #20a7cf; }
a:hover, a:active { text-decoration: none; }
a:focus { outline: none; }

/*-- #contents----------------------------------------------------------*/
.contents-inner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

#sec01,
#sec02,
#sec03,
#sec05,
#r-sec01 { font-weight: 700; }

/*--header----------------------------------------------------------*/
header {
  width: 100%;
  padding: 20px 0;
}

header h1.main-logo {
  display: flex;
  align-items: center;
  color: #595758;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}
header h1.main-logo img {
  margin-right: 15px;
}

/* #gnav */
nav {
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  background: rgba(32,167,207,0.9);
  left: 0;
  z-index: 100;
}

#gnav-list {
  width: 80%;
  position: relative;
  top: 90px;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  font-size: 1.1em;
  border-top: #fff 1px solid;
}

#gnav-list li {
  text-align: center;
  line-height: 1.1;
  font-size: 1.0em;
  border-bottom: #fff 1px solid;
}
#gnav-list li a {
  padding: 20px 0;
  display: block;
  color: #fff;
  font-weight: 700;
}
#gnav-list li a:hover {
  color: #20a7cf;
  background-color: #fff;
}

/* #nav-toggle */
#nav-toggle {
  display: block;
  width: 65px;
  height: 65px;
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 200;
  background-color: #20a7cf;
}
#nav-toggle div { position: relative; }
#nav-toggle span {
  display: block;
  width: 40px;
  height: 2px;
  background-color: #fff;
  position: absolute;
  left: 13px;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}
#nav-toggle span:nth-child(1){ top: 22px; }
#nav-toggle span:nth-child(2){ top: 32px; }
#nav-toggle span:nth-child(3){ top: 42px; }

.open #nav-toggle {
  background-color: #fff;
}

.open #nav-toggle span:nth-child(1) {
  width: 60px;
  top: 32px;
  left: 3px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  transform: rotate(135deg);
  background-color: #20a7cf;
}
.open #nav-toggle span:nth-child(2) {
  width: 0;
  left: 50%;
  background-color: #20a7cf;
}
.open #nav-toggle span:nth-child(3) {
  width: 60px;
  top: 32px;
  left: 3px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  transform: rotate(-135deg);
  background-color: #20a7cf;
}

/* .tw-btn */
.tw-btn {
  position: fixed;
  right: 90px;
  top: 20px;
  font-size: 1rem;
  z-index: 200;
}

.tw-btn a {
  width: 50px;
  height: 50px;
  display: block;
  text-align: center;
}
.tw-btn img {
  width: 100%;
}

/*--Retina------------------------------------------------------------*/
@media screen and (max-width: 640px) {
  .contents-inner { width: 94%; }
  header h1.main-logo { font-size: 1.2rem; }
  header h1.main-logo img {
    margin-right: 10px;
    zoom: 0.6;
  }

  #gnav-list { top: 70px; }

  #nav-toggle {
    width: 35px;
    height: 35px;
    top: 15px;
  }
  #nav-toggle span {
    width: 23px;
    height: 1px;
    left: 6px;
  }
  #nav-toggle span:nth-child(1){ top: 12px; }
  #nav-toggle span:nth-child(2){ top: 17px; }
  #nav-toggle span:nth-child(3){ top: 22px; }

  .open #nav-toggle span:nth-child(1) {
    width: 30px;
    top: 18px;
  }
  .open #nav-toggle span:nth-child(3) {
    width: 30px;
    top: 18px;
  }

  .tw-btn {
    right: 50px;
    top: 15px;
    font-size: 0.75rem;
  }
  .tw-btn a { width: 35px; height: 35px; }
}


/*--footer----------------------------------------------------------*/
footer {
  width: 100%;
  margin-top: 40px;
  padding: 30px 0;
  text-align: center;
  background-color: #20a7cf; 
}

footer h2.copyright {
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

#recruit footer {
  margin-top: 0;
}

/*--Retina------------------------------------------------------------*/
@media screen and (max-width: 640px) {
  footer { padding: 20px 0; }
  footer h2.copyright { font-size: 0.6rem; }
}


/*--#main-img----------------------------------------------------------*/
#main-img {
  height: 100vh;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}

#video-area {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
}

#video {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 177.77777778vh;
  height: 56.25vw;
  min-height: 100%;
  min-width: 100%;
}

#main-img h2 {
  z-index: 10;
  position: absolute;
  top: 50%;
  left: 45%;
  width: 100%;
  max-width: 1000px;
  transform: translate(-45%, -45%);
}

#main-img h2 img { max-width: 95%; }

@media screen and (max-width: 640px) {
  #main-img { height: calc(100vh - 69px); }
}

/*--section----------------------------------------------------------*/
main .contents-inner { padding: 80px 0; }

main .contents-inner p {
  line-height: 1.6;
  font-size: 1rem;
}

main .contents-inner img {
  max-width: 100%;
  display: block;
}

/* .sec-ttl */
.sec-ttl {
  margin-bottom: 40px;
  text-align: center;
  font-weight: 700;
}
.sec-ttl span {
  position: relative;
  display: inline-block;
  padding: 0 130px;
  margin: 0 auto;
  text-align: center;
  color: #20a7cf;
  font-size: 2.5rem;
}
.sec-ttl span:before,
.sec-ttl span:after {
  position: absolute;
  top: calc(50% - 1px);
  width: 120px;
  height: 1px;
  content: '';
  border-top: solid 1px #20a7cf;
}
.sec-ttl span:before { left: 0; }
.sec-ttl span:after { right: 0; }

.sec-ttl-r span {
  position: relative;
  display: inline-block;
  padding: 0 130px 0 0;
  margin: 0 auto;
  text-align: center;
  color: #20a7cf;
  font-size: 2.5rem;
  font-weight: 700;
}
.sec-ttl-r span:after {
  position: absolute;
  top: calc(50% - 1px);
  width: 120px;
  height: 1px;
  content: '';
  border-top: solid 1px #20a7cf;
}
.sec-ttl-r span:after { right: 0; }

@media screen and (max-width: 640px) {
  main .contents-inner { padding: 40px 0; }
  main .contents-inner p { font-size: 0.9rem; }
  .sec-ttl { margin-bottom: 20px; }
  .sec-ttl span { font-size: 1.8rem; padding: 0 100px; }
  .sec-ttl span:before,
  .sec-ttl span:after { width: 80px; }
  .sec-ttl-r span { font-size: 1.8rem; padding: 0 100px 0 0; }
  .sec-ttl-r span:after { width: 80px; }
}


/*--#sec01----------------------------------------------------*/
#sec01 .contents-inner {
  display: flex;
  align-items: center;
}

#sec01 h3 {
  margin: 30px 0 40px;
  color: #20a7cf;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.4;
}
#sec01 .sec-box {
  margin-right: 20px;
}

#sec01 p {
line-height: 2;
}

#sec01 img {
  margin-left: 20px;
}

@media screen and (max-width: 640px) {
  #sec01 .contents-inner { display: block; }
  #sec01 .sec-box { margin: 0; }
  #sec01 h3 { margin: 10px 0 20px; font-size: 1.4rem; }
  #sec01 img { margin: 20px auto 0; max-width: 80%; }
}


/*--#sec02----------------------------------------------------*/
#sec02 {
  background: url(../images/sec02_bg.png) no-repeat center top #fff;
  background-size: cover;
}

#sec02 p {
  text-align: center;
}

.list-img {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
}
.list-img li {
  width: 19%;
}
.list-img li p {
  margin-top: 10px;
}

@media screen and (max-width: 640px) {
  #sec02 { background: url(../images/sec02_bg_sp.png) no-repeat center top #fff; }
  .list-img { margin-top: 0; justify-content: center; flex-wrap: wrap; }
  .list-img li { width: 29%; margin: 20px 2% 0; }
}


/*--#sec03----------------------------------------------------*/
#sec03 .contents-inner > p {
  text-align: center;
}

#sec03 .sec-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#sec03 .sec-box {
  width: 48%;
  max-width: 480px;
  margin-top: 30px;
}

#sec03 .sec-box h3 {
  margin: 20px 0;
  color: #20a7cf;
  font-size: 1.7rem;
}

@media screen and (max-width: 640px) {
  #sec03 .sec-inner { display: block; }
  #sec03 .sec-box { width: 80%; margin: 20px auto 0; }
  #sec03 .sec-box h3 { margin: 10px 0; font-size: 1.1rem; }
}


/*--#sec04----------------------------------------------------*/
#sec04 {
  background: url(../images/sec04_bg.png) no-repeat center top #20a7cf;
  background-size: cover;
  color: #fff;
}

#sec04 .contents-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#sec04 .sec-ttl-r span {
  color: #fff;
}
#sec04 .sec-ttl-r span:after {
  border-top: solid 1px #fff;
}

#sec04 dl {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  line-height: 1.6;
  font-size: 1rem;
}

#sec04 dl dt {
  width: 20%;
  margin-bottom: 10px;
}
#sec04 dl dd {
  width: 80%;
  margin-bottom: 10px;
}

@media screen and (max-width: 640px) {
  #sec04 { background: url(../images/sec04_bg_sp.png) no-repeat center top #20a7cf; background-size: cover; }
  #sec04 .contents-inner { display: block; }
  #sec04 .sec-ttl-r { width: 80%; margin: 0 auto; }
  #sec04 dl { width: 80%; margin: 20px auto 0; font-size: 0.8rem; }
  #sec04 dl dt { width: 30%; }
  #sec04 dl dd { width: 70%; }
}


/*--#sec05----------------------------------------------------*/
#sec05 p {
  margin-top: 40px;
  text-align: center;
}
#sec05 p:first-of-type { margin-top: 0; }

#sec05 p.note {
  margin-top: 40px;
  font-size: 0.8rem;
}


/*--#r-ttl----------------------------------------------------*/
#r-ttl {
  background: url("../images/recruit/photo02.jpg") no-repeat center;
  background-size: cover;
  text-align: center;
}

#r-ttl h2 {
  padding: 180px 0;
}

#r-ttl h2 img { max-width: 90%; }

@media screen and (max-width: 640px) {
  #r-ttl h2 { padding: 90px 0; }
  #r-ttl h2 img { zoom: 0.7; }
}

/*--#r-ttl----------------------------------------------------*/
#r-sec01 {
  text-align: center;
}

#r-sec01 h2 {
  color: #20a7cf;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.4;
}

#r-sec01 .list-img {
  justify-content: center;
  flex-wrap: nowrap;
}

#r-sec01 .list-img li {
  width: auto;
  margin: 0 2%;
}

#r-sec01 .contents-inner > p {
  margin-top: 20px;
}

#r-sec01 .contents-inner > p:first-of-type {
  margin-top: 40px;
}


@media screen and (max-width: 640px) {
  #r-sec01 h2 { font-size: 1.4rem; }
  #r-sec01 .contents-inner > p { margin-top: 10px; }
  #r-sec01 .contents-inner > p:first-of-type { margin-top: 20px; }
}


/*--#r-ttl----------------------------------------------------*/
#r-sec02 {
  background: url(../images/recruit/r-sec02_bg.png) no-repeat center;
  background-size: cover;
}

#r-sec02 dl {
  display: flex;
  flex-wrap: wrap;
  line-height: 1.6;
  font-size: 1rem;
}

#r-sec02 dl dt {
  width: 20%;
  margin-bottom: 20px;
  color: #20a7cf;
}
#r-sec02 dl dd {
  width: 80%;
  margin-bottom: 20px;
}

#r-sec02 dl dd p { margin-top: 10px; }
#r-sec02 dl dd p:first-of-type { margin-top: 0; }

@media screen and (max-width: 640px) {
  #r-sec02 dl { margin: 20px auto 0; font-size: 0.9rem; }
  #r-sec02 dl dt { width: 30%; }
  #r-sec02 dl dd { width: 70%; }
}


/*--#r-sec03----------------------------------------------------*/
#r-sec03 {
  text-align: center;
}

#r-sec03 .blue-txt img {
  display: inline-block;
}

#r-sec03 .blue-txt span {
  margin-top: 10px;
  display: block;
}

main .contents-inner p.txt-lead {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 20px;
}

#r-sec03 .submit-btn {
  width: 400px;
  margin: 40px auto 0;
  color: #fff;
  display: block;
  font-size: 1.25rem;
}

@media screen and (max-width: 640px) {
  #r-sec03 .blue-txt img { zoom: 0.7; }
  #r-sec03 .blue-txt span { margin-top: 5px; }
  main .contents-inner p.txt-lead { font-size: 1rem; }
  #r-sec03 .submit-btn { width: 80%; font-size: 1rem; }
}


/*=====================================================================*/
.blue-txt { color: #20a7cf; }

.pc { display: block; }	
.sp { display: none; }

/*--Retina------------------------------------------------------------*/
@media screen and (max-width: 640px) {
  .pc { display: none; }	
  .sp { display: block; }
}