/*  #topmassage
================================================ */
#intro { background-image: url(../img/recruit/top_message/pic01.png); background-size: contain; background-repeat: no-repeat; padding: 248px 23px 44px; }

#intro .box { position: relative; background-color: transparent; }

#intro .box:before { position: absolute; top: -4px; left: -4px; height: 4px; width: 238px; content: ""; background-image: -webkit-linear-gradient(-90deg, #088cad 0%, #525eff 100%); background-image: -webkit-gradient(linear, right top, left top, from(#088cad), to(#525eff)); background-image: -webkit-linear-gradient(right, #088cad 0%, #525eff 100%); background-image: linear-gradient(-90deg, #088cad 0%, #525eff 100%); }

#intro .box .contents { box-shadow: 0 0 0 4px #f7f7f7; }

#intro .box .contents .txtArea { padding: 69px 24px 57px; }

#intro .box .contents .txtArea .copy { font-size: 2rem; font-weight: 600; text-align: center; background-color: #fff; }

#intro .box .contents .txtArea .txt { font-size: 1.4rem; font-weight: 300; padding-top: 18px; background-color: #fff; }

#intro .box .contents .txtArea .img { width: 210px; padding: 18px 0 0 71px; }

#about { background-image: url(../img/recruit/top_message/pic02_sp.png); background-size: contain; background-repeat: no-repeat; }

#about .inner { padding-top: 44px; }

#about .tit { color: #fff; font-size: 3rem; font-weight: bold; text-align: center; letter-spacing: .3em; line-height: 1.2; }

#about .name { overflow: hidden; position: relative; color: #fff; font-size: 1.4rem; font-weight: bold; letter-spacing: .08em; line-height: 1; text-align: center; padding-top: 4px; }

#about .name:before { position: absolute; right: 50%; top: 9px; height: 0; width: 100%; margin-right: 85px; content: ""; border-bottom: 1px solid #fff; }

#about .name:after { position: absolute; left: 50%; top: 9px; height: 0; width: 100%; margin-left: 85px; content: ""; border-bottom: 1px solid #fff; }

#about .box01 { margin: 22px -20px 0; }

#about .box01 .img { padding-bottom: 10px; }

#about .box01 .txtArea .subtit { line-height: 1.5; text-align: left; }

#about .box01 .txtArea .txt { margin-top: 12px; }

#about .box02 { margin: 27px -20px 0; }

#about .box02 .txtArea .subtit { line-height: 1.5; text-align: left; }

#about .box02 .txtArea .txt { margin-top: 11px; }

#about .box03 { margin: 23px -20px 0; }

#about .box03 .txtArea .subtit { line-height: 1.5; text-align: left; }

#about .box03 .txtArea .txt { margin-top: 11px; }

#contents .areaImg { display: block; position: relative; padding: 20px 0 0 20px; margin-top: 28px; }

#contents .areaImg .areaImgBg { position: absolute; top: 0; left: 0; content: ""; display: block; width: 85%; padding-top: 61.4%; background: #103675; }

#contents .areaImg .listImg { position: relative; z-index: 1; letter-spacing: -.5em; font-size: 0; }

#contents .areaImg .listImg li { display: inline-block; width: 33.333%; }

.lnavBox { margin-top: 35px; }

@media all and (max-width: 340px) { #intro .box .contents .txtArea .img { padding: 14px 0 0 30px; } }

@media screen and (min-width: 600px) { #intro { background-size: 965px 680px; background-position: left -180px top 64px; max-width: 1920px; padding: 0 0 241px; margin: 0 auto; -webkit-transition: background-position .3s ease; transition: background-position .3s ease; }
  #intro .box { margin: 35px 60px 0; }
  #intro .box:before { top: -7px; left: -7px; height: 7px; width: 71%; }
  #intro .box .contents { box-shadow: 0 0 0 7px rgba(247, 247, 247, 0.5); min-height: 605px; margin: 0 auto; }
  #intro .box .contents .txtArea { background-color: #fff; float: right; width: 550px; margin: 0 14.5% 0 0; padding: 175px 0 30px 30px; }
  #intro .box .contents .txtArea .copy { font-size: 3.8rem; font-weight: bold; text-align: left; }
  #intro .box .contents .txtArea .txt { font-size: 1.5rem; font-weight: normal; margin-top: 40px; padding: 0 0 0 3px; }
  #intro .box .contents .txtArea .img { width: 230px; padding: 47px 0 0 7px; }
  #about { background-color: #f7f7f7; }
  #about .inner { padding-top: 124px; }
  #about .tit { font-size: 8.5rem; padding-left: 15px; }
  #about .name { overflow: unset; font-size: 2.8rem; line-height: .7; padding-top: 13px; }
  #about .name:before { right: auto; top: 20px; left: 0px; width: 284px; margin-right: 0; }
  #about .name:after { left: auto; top: 20px; right: 0px; width: 284px; margin-left: 0; }
  #about .copy { font-size: 2.8rem; margin-top: 67px; }
  #about .bg_gray { background-color: #f7f7f7; margin: 386px -320px -240px; }
  #about .bg_gray .sectionBox { position: relative; top: -304px; }
  #about .bg_gray .sectionBox .box01 { margin: 80px 321px 0; }
  #about .bg_gray .sectionBox .box01 .img { padding-bottom: 60px; }
  #about .bg_gray .sectionBox .box01 .txtArea { width: 1340px; margin-top: -270px; padding: 93px 58px 120px; }
  #about .bg_gray .sectionBox .box01 .txtArea .txt { margin-top: 22px; }
  #about .bg_gray .sectionBox .box02 { margin: 60px 321px 0; }
  #about .bg_gray .sectionBox .box02 .img { padding-bottom: 58px; }
  #about .bg_gray .sectionBox .box02 .txtArea { width: 1340px; margin-top: -285px; padding: 72px 58px 79px; }
  #about .bg_gray .sectionBox .box02 .txtArea .subtit { line-height: 1.5; text-align: left; }
  #about .bg_gray .sectionBox .box02 .txtArea .txt { margin-top: 24px; }
  #about .bg_gray .sectionBox .box03 { margin: 60px 321px 0; }
  #about .bg_gray .sectionBox .box03 .img { padding-bottom: 58px; }
  #about .bg_gray .sectionBox .box03 .txtArea { width: 1340px; margin-top: -270px; padding: 72px 58px 85px; }
  #about .bg_gray .sectionBox .box03 .txtArea .subtit { line-height: 1.5; text-align: left; }
  #about .bg_gray .sectionBox .box03 .txtArea .txt { margin-top: 24px; }
  .areaImg { position: relative; margin: -40px auto 0; max-width: 1280px; padding: 60px 0 0 0; }
  .areaImg .areaImgBg { width: 100vw; min-width: 1600px; padding-top: 640px; left: auto; right: 0; }
  .areaImg .listImg { position: relative; width: 1600px; height: 640px; margin-right: -320px; overflow: hidden; }
  .areaImg .listImg li { position: relative; display: inline-block; width: 20%; vertical-align: top; overflow: hidden; }
  .areaImg .listImg li:nth-child(2) { width: 40%; }
  .areaImg .listImg li:nth-child(5) { position: absolute; bottom: 0; left: 0; }
  .areaImg .listImg li:nth-child(6) { position: absolute; bottom: 0; left: 60%; }
  .areaImg .listImg li:nth-child(7) { position: absolute; bottom: 0; left: 80%; }
  .areaImg .listImg li img { position: absolute; top: 0; left: 0; bottom: 0; right: 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .areaImg .listImg li a { display: block; width: 100%; }
  .areaImg .listImg li a:before { content: ""; display: block; padding-top: 100%; }
  .areaImg .listImg li a:after { position: absolute; top: 0; right: 0; left: 0; bottom: 0; content: ""; display: block; width: 100%; height: 100%; background: url("../img/common/ico_insta01.png") rgba(16, 54, 117, 0.6) no-repeat center; background-size: 48px; opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .areaImg .listImg li a:hover img { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }
  .areaImg .listImg li a:hover:after { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
  .lnavBox { margin-top: 119px; } }

@media all and (min-width: 1600px) { #intro { background-position: left 0 top 64px; } }