@charset "utf-8";


.st0 {
fill:none;
stroke:#fff;
stroke-width:5;
stroke-linecap:round;
stroke-linejoin:round;
stroke-miterlimit:10;
animation-name: DASH;
animation-delay: 7s;
animation-duration: 5s;
animation-fill-mode: forwards;
}

@keyframes DASH {
0% {
 stroke: #fff;
}
100% {
 stroke: #fff !important;
}
}

@-webkit-keyframes DASH {
0% {
 stroke: #fff;
}
100% {
 stroke: #fff !important;
}
}

svg {
  width: 100% !important;
}
@media screen and (max-width:980px){
svg {
  height: 198px;
}
}

.main-visual {
  overflow: hidden;
  position: relative;
  min-height: 100vh;
  padding: 0 !important;
}
.main-visual::after {
  display: block;
  content: "";
  width: 100%;
  height: 100vh;
  position: absolute; top: 0; left: 0; z-index: -1;
  animation-name: backimage;
  animation-delay: 5s;
  animation-duration: 2s;
  animation-fill-mode: forwards;
 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#80cbd8+0,e6f3ee+100 */
  background: #80cbd8; /* Old browsers */
  background: -moz-linear-gradient(top, #80cbd8 0%, #e6f3ee 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #80cbd8 0%,#e6f3ee 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #80cbd8 0%,#e6f3ee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80cbd8', endColorstr='#e6f3ee',GradientType=0 ); /* IE6-9 */
}
@media screen and (max-width:980px){
.main-visual,
.main-visual::after {
  height: 75vh;
  min-height: 75vh;
}
}


.main-box {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 9995;
  width: 90%; max-width: 1080px;
  height: 50vh; min-height: 50%; max-height: 370px;
  margin: auto;
}
@media screen and (max-width:980px){
.main-box {
  height: 50vh; min-height: 300px; max-height: 300px;
  margin: auto;
}
}
@media screen and (max-width:768px){
.main-box {
  top: -25%;
}
}
@media screen and (max-width:599px){
.main-box {
  top: -10%;
}
}

.main-text {
  opacity: 0;
  font-size: 17px; font-size: 1.7rem;
  font-weight: bold;
  text-align: center;
  color: #fff;
  animation-name: maintext;
  animation-delay: 5s;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
@media screen and (max-width:599px){
.main-text {
  margin-top: -2em;
}
}
@keyframes maintext {
0% {
 opacity: 0;
 color: #fff;
}
100% {
 opacity: 1;
 color: #fff;
}
}

@-webkit-keyframes maintext {
0% {
 opacity: 0;
}
100% {
 opacity: 1;
}
}

/*.main-image {
  opacity: 0;
  animation-name: backimage;
  animation-delay: 3s;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}*/
/*@keyframes backimage {
0% {
 opacity: 0;
}
100% {
 opacity: 1;
}
}

@-webkit-keyframes backimage {
0% {
 opacity: 0;
}
100% {
 opacity: 1;
}
}*/
/*@keyframes backimage {
0% {
}
100% {
 background: url("../img/index/main_visual.jpg") top center no-repeat;
 background-size: cover;
}
}

@-webkit-keyframes backimage {
0% {
 opacity: 0;
}
100% {
 background: url("../img/index/main_visual.jpg") top center no-repeat;
 background-size: cover;
}
}*/

#main-image {
  position: absolute; top: 0; left: 0;
  width: 100%;
  height: 100%;
}

.main-image-sp {
  display: none;
  position: relative;
}
@media screen and (max-width:980px){
#main-image {
  display: none;
}

.main-image-sp {
  display: block;
}
.main-image-sp img {
  display: block;
  width: 100%;
}
}

.tori {
  position: absolute; top: 0; left: 0;
}
.tori img {
  display: block;
  width: 100%;
}
@media screen and (max-width:980px){
.tori {
  max-width: 800px;
}
}

.main-image {
  position: absolute; top: 0; left: 0;
  width: 100%;
  height: 100%;
}
.main-image img {
  display: block;
  width: 100%;
  height: 100%;
  animation-name: backimage2;
  animation-delay: 5s;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes backimage2 {
0% {
  opacity: 0;
  transform: translateY(100%);
}
50% {
  opacity: 1;
}
100% {
  opacity: 1;
  transform: translateY(0);
}
}
@-webkit-keyframes backimage2 {
0% {
  opacity: 0;
  transform: translateY(100%);
}
50% {
  opacity: 1;
}
100% {
  opacity: 1;
  transform: translateY(0);
}
}

.main-image2 {
  z-index: 1;
}
.main-image2 img {
  animation-delay: 5s;
  width: 120%;
  margin-left: -10%;
}
.main-image3 {
  z-index: 3;
}
.main-image3 img {
  animation-delay: 5.5s;
}
.main-image4 {
  z-index: 2;
}
.main-image4 img {
  animation-delay: 6s;
  width: 120%;
  margin-left: -10%;
}
.main-image5 {
  z-index: 1;
}
.main-image5 img {
  animation-delay: 6.5s;
  width: 120%;
  margin-left: -10%;
}
.main-image6 {
  position: absolute; bottom: 0; left: 0;
  overflow: hidden;
  z-index: 6;
  width: 100%;
  height: 100%;
}
.main-image6 img {
  animation-delay: 7s;
  animation-name: backimage3;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes backimage3 {
0% {
  opacity: 0;
}
50% {
  opacity: 1;
}
100% {
  opacity: 1;
}
}
@-webkit-keyframes backimage3 {
0% {
  opacity: 0;
  transform: translateY(100%);
}
50% {
  opacity: 1;
}
100% {
  opacity: 1;
  transform: translateY(0);
}
}
/*.main-image2 {
  position: absolute; top: 0; left: 0; z-index: 1;
}
.main-image2 img {
  display: block;
  width: 100%;
  animation-name: backimage2;
  animation-delay: 3s;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  
  opacity: 0;
}
.main-image3 {
  position: absolute; top: 0; left: 0; z-index: 3;
}
.main-image3 img {
  display: block;
  width: 100%;
  animation-name: backimage2;
  animation-delay: 3.5s;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  
  opacity: 0;
}
.main-image4 {
  position: absolute; top: 0; left: 0; z-index: 2;
}
.main-image4 img {
  display: block;
  width: 100%;
  animation-name: backimage2;
  animation-delay: 4s;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  
  opacity: 0;
}
.main-image5 {
  position: absolute; top: 0; left: 0; z-index: 1;
}
.main-image5 img {
  display: block;
  width: 100%;
  animation-name: backimage2;
  animation-delay: 4.5s;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  
  opacity: 0;
}*/

@keyframes backimage2 {
0% {
  opacity: 0;
  transform: translateY(100%);
}
50% {
  opacity: 1;
}
100% {
  opacity: 1;
  transform: translateY(0);
}
}

@-webkit-keyframes backimage2 {
0% {
  opacity: 0;
  transform: translateY(100%);
}
50% {
  opacity: 1;
}
100% {
  opacity: 1;
  transform: translateY(0);
}
}

.section {
  display: block;
  padding: 0 0 8em;
}
@media screen and (max-width:1024px){
.section {
  display: block;
  height: inherit;
  padding: 5em 0;
}
}

.about {
  margin-bottom: 8em;
  padding-bottom: 15em;
  position: relative;
  background: url("../img/index/about_back.png") bottom left no-repeat;
}
@media screen and (max-width:980px){
.about {
  padding-top: 5em;
  padding-bottom: 10em;
  background-size: 50% auto;
}
}
@media screen and (max-width:899px){
.about {
  background-size: 80% auto;
}
}
.about::before {
  display: block;
  content: "";
  position: absolute; top: -5em; left: 0;
  width: 100%;
  height: 229px;
  background: url("../img/index/back2.png") top center no-repeat;
  background-size: cover;
}
@media screen and (max-width:768px){
.about::before {
  display: none;
}
}

.about-inner {
  display: flex;
  justify-content: space-between;
  width: 90%; max-width: 1140px;
  margin: auto;
  padding-top: 5em;
}
@media screen and (max-width:1050px){
.about-inner {
  padding-top: 2em;
}
}
@media screen and (max-width:899px){
.about-inner {
  display: block;
  max-width: 500px;
}
}

.about-image {
  position: relative; z-index: 1;
  width: 45%; max-width: 460px;
}
@media screen and (max-width:899px){
.about-image {
  width: 70%; max-width: 320px;
  margin: 0 auto 2em;
}
}

.about-image img {
  display: block;
  width: 100%;
}

.about-box {
  width: 50%; max-width: 585px;
  padding-top: 2em;
}
@media screen and (max-width:899px){
.about-box {
  width: 100%; max-width: 800px;
  margin: auto;
}
}

.about-title {
  /*width: 50%; max-width: 185px;*/
  margin-bottom: 3em;
}
/*@media screen and (max-width:768px){
.about-title {
  max-width: 150px;
  margin-bottom: 1em;
}
}*/

.about-title img {
  display: block;
  width: 100%;
}

.about-catch {
  margin-bottom: 1em;
  font-size: 22px; font-size: 2.2rem;
  color: #335380;
}

.about-text {
  font-size: 14px; font-size: 1.4rem;
  letter-spacing: 0.01em;
}
@media screen and (max-width:1024px){
.about-text br {
  display: none;
}
.about-text br:nth-of-type(1) {
  display: block;
}
}
@media screen and (max-width:599px){
.about-text br:nth-of-type(1) {
  display: none;
}
}



.service {
}


.service-inner {
  width: 90%; max-width: 1175px;
  margin: auto;
}

.service-title._center {
  margin-bottom: 3em;
  padding-top: 3em;
  /*width: 50%; max-width: 279px;
  margin: 0 auto 5em;*/
}

.service .column {
  margin-bottom: 5em;
}
.service .column-item._col3 {
  max-width: 353px;
}
@media screen and (max-width:768px){
.service .column-item._col3 {
  margin: 0 auto 2em;
}
}

.card {
  padding-bottom: 2em;
  background: #E9F4F5;
}

.card-image {
  overflow: hidden;
}

.card-image img {
  display: block;
  width: 100%;
  transition: 0.5s;
}
.card:hover img {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}

.card-heading {
  margin: 1.2em 0 1.5em;
  font-size: 12px; font-size: 1.2rem;
  text-align: center;
  color: #335380;
}

.card-heading b {
  display: block;
  font-family: quasimoda, sans-serif;
  font-size: 25px; font-size: 2.5rem;
}

.card > p {
  display: flex;
  width: 90%; max-width: 292px;
  min-height: 8em;
  margin: 0 auto;
  font-size: 14px; font-size: 1.4rem;
  letter-spacing: 0.02em;
}
@media screen and (max-width:768px){
.card > p {
  min-height: inherit;
}
}




.recruit {
  background: url("../img/index/recruit_back.png") bottom left no-repeat;
  background-size: 100% auto;
}
@media screen and (max-width:980px){
.recruit {
  padding-bottom: 12em;
  background-size: auto 35%;
}
}


.recruit-title._center {
  /*width: 50%; max-width: 233px;*/
  margin: 0 auto 3em;
  padding-top: 3em;
}

.recruit-title img {
  display: block;
  width: 100%;
}

.recruit-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%; max-width: 1117px;
  margin: 0 auto;
}
@media screen and (max-width:980px){
.recruit-inner {
  display: block;
}
}


.recruit-box {
  position: relative;
  width: 40%; max-width: 446px;
}
@media screen and (max-width:980px){
.recruit-box {
  width: 80%; max-width: 400px;
  margin: 0 auto 5em;
}
}

.recruit-box img {
  display: block;
  width: 100%;
}

.recruit-interview {
  position: absolute; bottom: -2em; left: -2em;
  width: 80%; max-width: 171px;
}
@media screen and (max-width:768px){
.recruit-interview {
  width: 80%; max-width: 120px;
}
}
@media screen and (max-width:499px){
.recruit-interview {
  width: 100%; max-width: 100px;
}
}

.recruit-interview img {
  display: block;
  width: 100%;
}


.recruit-textbox {
  width: 55%; max-width: 570px;
}
@media screen and (max-width:980px){
.recruit-textbox {
  width: 100%; max-width: 550px;
  margin: auto;
}
}

.recruit-heading {
  max-width: 900px;
  margin: 0 auto 1.2em;
  font-family: ryo-display-plusn, serif;
  font-size: 28px; font-size: 2.8rem;
  color: #335380;
}
.recruit-heading span {
  display: block;
  margin-bottom: 0.5em;
  font-size: 22px; font-size: 2.2rem;
  color: #7D8A91;
}

.recruit-text {
  max-width: 522px;
  font-size: 14px; font-size: 1.4rem;
}

.recruit-text:nth-last-of-type(1) {
  margin-bottom: 6em;
}