@charset "utf-8";
/*共通設定*/
.information,
.about,
.service {
    margin-bottom: 120px;
}
/*終わり*/


/*<section class="first-view">*/
.first-view {
    height: 100vh;
    position: relative;
    text-align: right;
}

.first-view img {
    width: 90%;
    height: 115vh;
    object-fit: cover;
}

.first-text {
    position: absolute;
    top: 55%;
    left: 15vw;
    color: #fff;
    text-shadow: 0 0 10px #333;
    text-align: left;
}

.first-text h1 {
    font-size: 30px;
}

.first-text span {
    font-size: 55px;
}

/*スクロール促すアクション*/
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
  position:absolute;
  bottom: 5%;
  left: 5vw;
  }
  
  /*Scrollテキストの描写*/
  .scrolldown2 span{
    /*描画位置*/
  position: absolute;
  left:10px;
  bottom:10px;
    /*テキストの形状*/
  color: #333;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
  }
  
  /* 丸の描写 */
  .scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
  width:10px;
  height:10px;
  border-radius: 50%;
  background:#333;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
  animation:
    circlemove 1.6s ease-in-out infinite,
    cirlemovehide 1.6s ease-out infinite;
  }
  
  /*下からの距離が変化して丸の全体が上から下に動く*/
  @keyframes circlemove{
      0%{bottom:45px;}
     100%{bottom:-5px;}
  }
  
  /*上から下にかけて丸が透過→不透明→透過する*/
  @keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
  100%{opacity:0;}
  }
  
  /* 線の描写 */
  .scrolldown2:after{
  content:"";
    /*描画位置*/
  position: absolute;
  bottom: 0;
  left:0;
    /*線の形状*/
  width:2px;
  height: 50px;
  background:#333;
  }
  /*終わり*/
  

/*終わり*/


/*<section class="infomation">*/
.information {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 3vw;
    text-align: center;
    background-color: #fff;
}

.info-inner {
    margin: 0 auto;
    width: 90%;
}

.info-inner ul li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    padding: 15px;
    border-top: solid 1px #f1f1f1;
}

.info-inner ul li:last-child {
    border-bottom: solid 1px #f1f1f1;
}

.info-inner ul li img {
    width: 15%;
}

.info-text {
    width: 80%;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.info-text a {
    font-weight: bold;
    transition: 0.2s;
}

.info-text a:hover {
    opacity: 0.7;
}

/*終わり*/


/*<section class="about">*/
.about-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.about-inner img {
    width: 55%;
}

.about-text {
    width: 40%;
    padding-right: 5vw;
}

.about-text span {
    font-weight: 600;
    font-size: 35px;
    display: block;
    margin-bottom: 30px;
}
/*終わり*/


/*<section class="service">*/
.service {
    background-color: #f1f1f1;
    padding: 50px 5vw;
}

.service-inner {
    display: flex;
    justify-content: space-between;
}

.service-det {
    width: 31%;
    background-color: #fff;
    padding: 25px 25px 35px 25px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.service-det h3 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

.service-det img {
    width: 100%;
    margin-bottom: 20px;
}

.service-det span {
    padding: 3px;
    font-weight: bold;
    margin-right: 10px;
    margin-bottom: 20px;
    border: solid 1px #333;
    font-size: 14px;
    display: inline-block;
}

.service-det p {
    text-align: left;
}

.service-det .btn {
    text-align: center;
}

.service-inner .scroll:nth-child(2) {
    transition-delay: 0.2s;
}

.service-inner .scroll:nth-child(3) {
    transition-delay: 0.4s;
}
/*終わり*/


/*<div class="rec-con">*/
.rec-con {
    display: flex;
    transition: 0.2s;
}

.rec-con a:hover {
    opacity: 0.8;
}

.recruit {
    background-image: url(/img/recruit.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;  
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;  
    width: 50%;
    padding: 15vh 0;
}

.contact {
    background-image: url(/img/contact.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;  
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;  
    width: 50%;
    padding: 15vh 0;

}

.recruit .in-title,
.contact .in-title {
    margin-bottom: 0;
}

.recruit h2,
.contact h2 {
    color: #fff;
}
/*終わり*/


/*<div class="map">*/
.map iframe {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}
/*終わり*/


/*タブレット*/
@media (max-width: 1024px) {
/*<section class="first-view">*/
.first-view {
    height: 90vh;
}

.first-view img {
    width: 100%;
    height: 65vh;
}

.first-text {
    text-shadow: none;
    color: #333;
    top: 72%;
    left: 5vw;
}

.first-text h1 {
    font-size: 20px;
}

.first-text span {
    font-size: 30px;
}

.scrolldown2 {
    display: none
}
/*終わり*/


/*<section class="information">*/
.information {
    width: 100%;
}
/*終わり*/


/*<section class="about">*/
.about {
    padding-right: 5vw;
}

.about-inner {
    display: block;
}

.about-inner img {
    width: 90%;
}

.about-text {
    width: 90%;
    margin: 50px 0 0 auto;
    padding-right: 0;
}
/*終わり*/


/*<section class="service">*/
.service-inner {
    display: block;
}

.service-det {
    width: 100%;
    margin-bottom: 70px;
}
/*終わり*/


/*<div class="rec-con">*/
.rec-con {
    display: block;
}

.recruit,
.contact {
    width: 100%;
    padding: 10vh 0;
}
/*終わり*/

}


/*スマホ*/
@media (max-width: 599px) {
/*<section class="first-view">*/
.first-view {
    height: 80vh;
}

.first-view img{
    height: 50vh;
}

.first-text {
    top: 65%;
}

.first-text h1 {
    font-size: 20px;
}
/*終わり*/


/*<section class="information">*/
.info-inner ul li {
    padding-left: 0;
    padding-right: 0;
}

.info-inner ul li img {
    width: 25%;
}

.info-inner .info-text {
    width: 70%;
}
/*終わり*/


/*<section class="about">*/
.about-inner img {
    width: 95%;
}

.about-text {
    width: 95%;
}

.about-text span {
    font-size: 20px;
}
/*終わり*/
   
}