@charset "UTF-8";
/* CSS Document */
/*-------------------------------------------------------
共通
-------------------------------------------------------*/
.h1_top {
  font-family: bebas-neue-pro, sans-serif;
  font-weight: 600;
  font-size: 14rem;
  line-height: 1em;
  text-align: left; }

.h1_top .textJP {
  font-size: 2.5rem;
  color: #666;
  margin-left: 1em;
  vertical-align: middle; }

@media screen and (max-width: 780px) {
  .h1_top {
    font-size: 5rem; }

  .h1_top .textJP {
    font-size: 1.5rem; } }
/*-------------------------------------------------------
main
-------------------------------------------------------*/
#slider {
  width: 100%;
  height: 70vh;
  overflow: hidden;
  position: relative; }

.main-text {
  background: #00abb3;
  background: linear-gradient(130deg, #00abb3 5%, #00c850 100%);
  display: inline-block;
  color: #FFF;
  font-size: 2.7rem;
  line-height: 1.4em;
  padding: 1em;
  font-weight: 600;
  position: absolute;
  right: 0;
  bottom: 0; }

#slider .bnr-recruit {
  position: absolute;
  bottom: 1em;
  left: 2em; }

.vegas-content-scrollable {
  overflow: hidden !important; }

.btnripple2 {
  /*波紋の基点とするためrelativeを指定*/
  position: relative;
  /*波紋の形状*/
  display: inline-block;
  border-radius: 50%;
  outline: none;
  /*アニメーションの設定*/
  transition: all .3s;
  width: 235px;
  height: 235px;
  /*hoverした際の背景色の設定*/
  /*波形を2つ設定*/
  /*波形の2つ目は0.5秒遅らせてアニメーション*/ }
  .btnripple2:hover {
    background: #1BC268; }
  .btnripple2::after, .btnripple2::before {
    content: '';
    /*絶対配置で波形の位置を決める*/
    position: absolute;
    left: -10%;
    top: -10%;
    /*波形の形状*/
    border: 1px solid #1BC268;
    width: 120%;
    height: 120%;
    border-radius: 50%;
    /*はじめは不透明*/
    opacity: 1;
    /*ループするアニメーションの設定*/
    animation: 2s circleanime linear infinite; }
  .btnripple2::before {
    animation-delay: 1s; }

/*波形のアニメーション*/
@keyframes circleanime {
  0% {
    transform: scale(0.68); }
  100% {
    transform: scale(1.2);
    opacity: 0; } }
@media screen and (max-width: 780px) {
  .main-text {
    font-size: 1.4rem; }

  #slider .bnr-recruit {
    position: absolute;
    right: 0;
    left: auto;
    bottom: 3em;
    z-index: 10; }

  .btnripple2 {
    width: 100px;
    height: 100px; } }
/*-------------------------------------------------------
News
-------------------------------------------------------*/
#news {
  background-image: repeating-linear-gradient(90deg, #F0EFEF, #F0EFEF 1px, transparent 1px, transparent 20px), repeating-linear-gradient(0deg, #F0EFEF, #F0EFEF 1px, #fff 1px, #fff 20px);
  padding: 3em 0; }

#news .h1_top {
  color: #1BC55B;
  line-height: 0.5em; }

#news .h1_top .pointC {
  color: #1AB788; }

#news .inner {
  display: flex; }

#news .inner iframe {
  border: none;
  width: 100%;
  margin: 2em;
  height: 280px; }

/*#news .h1_top:after {
    content: "お知らせ";
    display: block;
    margin-top: -1em;
}*/
@media screen and (max-width: 780px) {
  #news .h1_top br {
    display: none; }

  #news .inner {
    display: block;
    padding-bottom: 0; }

  #news .inner iframe {
    margin: 0;
    padding: 1em; } }
/*-------------------------------------------------------
Business
-------------------------------------------------------*/
#business .boxP {
  background: url("../img/img_business01.png") no-repeat right 2em;
  background-size: contain;
  padding-bottom: 2em;
  width: 100%; }

#business .boxP .txtbox {
  width: 50%;
  padding: 1em 2em;
  line-height: 2em; }

#business .boxC {
  background: url("../img/img_business02.png") no-repeat left top;
  background-size: contain;
  padding-bottom: 2em;
  width: 100%; }

#business .boxC .txtbox {
  padding-left: 50%;
  padding-top: 2em;
  line-height: 2em; }

/*#business .box1 {
    background: url("../img/img_business01.jpg") no-repeat top right;
    background-size: auto 100%;
}*/
#business .h1_top {
  color: #1AB788; }

#business .h1_top .pointC {
  color: #00ABB3; }

#business .h2_business {
  color: #00ABB3;
  font-size: 165%;
  letter-spacing: 0.7px;
  margin-top: 1em; }

#business .h2_business span {
  color: #777;
  font-size: 80%;
  margin-left: 1em; }

@media screen and (max-width: 780px) {
  #business .boxP {
    padding-bottom: 65vh;
    background-position: bottom right; }

  #business .boxP .txtbox,
  #business .boxC .txtbox {
    width: 100%;
    padding: 1em; }

  #business .boxC {
    padding-bottom: 65vh;
    background-position: bottom left; } }
/*-------------------------------------------------------
Recruit
-------------------------------------------------------*/
#recruit {
  background: url("../img/bg_recruit.png") no-repeat center;
  text-align: center;
  padding-bottom: 4em; }

#recruit .h1_top {
  color: #00ABB3; }

#recruit .h1_top .pointC {
  color: #1AB788; }

.personList {
  padding: 1em;
  display: flex; }

.personList a {
  width: calc((100% - 60px) / 3);
  margin: 10px 20px;
  text-align: center;
  display: block;
  color: #444;
  font-weight: 700;
  text-decoration: none; }

.personList a:hover {
  mix-blend-mode: luminosity; }

@media screen and (max-width: 780px) {
  .personList {
    display: block; }

  .personList a {
    width: calc(100% - 40px);
    margin-bottom: 2em; } }
/*-------------------------------------------------------
About us
-------------------------------------------------------*/
#about {
  background: url("../img/bg_about.png") no-repeat bottom center;
  margin-top: -50px;
  padding-top: 50px; }

#about .h1_top {
  color: #1BC55B; }

#about .h1_top .pointC {
  color: #1AB788; }

.aboutMenu {
  display: flex;
  padding: 60px 1em 100px;
  align-items: center; }

.aboutMenu li {
  display: block;
  width: calc((100% - 120px) / 3);
  margin: 20px;
  text-align: center;
  text-decoration: none;
  color: #444;
  background: #FFF; }

.aboutMenu .message {
  margin-top: -80px; }

.aboutMenu .message a {
  border: 1px solid #1AB788;
  display: block;
  text-decoration: none;
  color: #444; }

.aboutMenu .message a:hover {
  background: #1AB788;
  color: #FFF; }

.aboutMenu .overview a {
  border: 1px solid #00ABB3;
  display: block;
  text-decoration: none;
  color: #444; }

.aboutMenu .overview a:hover {
  background: #00ABB3;
  color: #FFF; }

.aboutMenu .koken {
  margin-bottom: -80px; }

.aboutMenu .koken a {
  border: 1px solid #1BC55B;
  display: block;
  text-decoration: none;
  color: #444; }

.aboutMenu .koken a:hover {
  background: #1BC55B;
  color: #FFF; }

.aboutMenu a figcaption {
  padding: 0.2em 1em 0.75em;
  font-weight: 700; }

@media screen and (max-width: 780px) {
  .aboutMenu {
    display: block;
    margin-top: 2em; }

  .aboutMenu li {
    width: calc(100% - 40px); } }
/*-------------------------------------------------------
Contact
-------------------------------------------------------*/
#contact {
  /*padding-top: 5rem;*/ }

#contact .inner {
  background: #E0FCF3;
  margin-top: -5rem;
  padding: 3em; }

#contact .h1_top {
  color: #1AB788; }

#contact .h1_top .pointC {
  color: #00ABB3; }

@media screen and (max-width: 780px) {
  #contact .inner {
    padding: 0; } }