@charset "utf-8";

/*index.css*/

/*●●●●●●●●●●●●●●●●●●●●　共通　●●●●●●●●●●●●●●●●●●●●*/

.ttl {
  margin-bottom: 30px;
  letter-spacing: 1px;
}

.ttl .en {
  display: flex;
  justify-content: space-between;
}

.ttl .en p.Roboto {
  font-size: 6rem;
  font-weight: 700;
  line-height: 1;
}

.ttl .en p.Roboto::first-letter {
  font-size: 9rem;
}

.ttl .en .border {
    position: relative;
    top: 52px;
    width: calc(100% - 300px);
    background: #044585;
    height: 1px;
}

.ttl h2 {
  color: #044585;
  font-size: 1.8rem;
  margin-top: 5px;
}

/*----------mv----------*/
.mv {
  width: 100%;
  height: 92vh;
  
  background-image: url("../img/index/mv_bg.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
}

.mv .catch {
  width: 90%;
  max-width: 1080px;
  color: #fff;
  font-weight: 700;
  font-size: 5rem;
  text-align: center;
  line-height: 1.3;
  letter-spacing: 2px;
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translateX(-50%);
}

/*----------about----------*/
.about {
  display: flex;
}

.about .picture {
  width: 48%;
  max-width: 700px;
  flex-direction: row-reverse;
  background: url("../img/index/about/figure.jpg") no-repeat center center;
  background-size: cover;
}

.about .txt {
  width: 52%;
  max-width: 955px;
  padding: 50px 70px;
}

.about .txt .ttl .en .border {
    width: calc(100% - 297px);
}

/*----------service----------*/
.service {
  background: #044585;
}

.service .ttl .en p.Roboto {
  color: #fff;
}

.service .ttl .en .border {
  width: calc(100% - 252px);
  background: #fff;
}

.service .ttl h2 {
  color: #fff;
}

.service ul li {
  display: flex;
  color: #fff;
  border: 1px solid #fff;
}

.service ul li:nth-child(even) {
  flex-direction: row-reverse;
  margin: 90px 0;
}

.service ul li .txt {
  width: 50%;
  padding: 40px;
  overflow: hidden;
}

.service ul li .txt h3 {
  color: #fff;
  font-size: 32px;
  margin-bottom: 30px;
}

.service ul li .txt p {
  margin-bottom: 16px;
}

.service ul li .txt p:last-child {
  margin-bottom: 0;
}

.service ul li .picture {
  width: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.service ul li:first-child .picture {
  background-image: url("../img/index/service/figure01.jpg");
}

.service ul li:nth-child(2) .picture {
  background-image: url("../img/index/service/figure02.jpg");
  background-position: left center;
}

.service ul li:nth-child(3) .picture {
  background-image: url("../img/index/service/figure03.jpg");
}

.service ul li .btn a {
  color: #044585;
  border: 1px solid #FFFFFF;
  background-color: #FFFFFF;
  text-align: center;
}

.service ul li .btn a::after {
  color: #044585;
}

/*----------news----------*/
.news .contents .flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.news .ttl .en .border {
  width: calc(100% - 197px);
}
.news .txt {
  width: 85%;
}

.news .txt .date {
  font-weight: 700;
  letter-spacing: 1px;
}

.news .txt .subject {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.3;
}

.news .txt .note {
  margin-top: 15px;
}

.news .txt .note P {
  margin-bottom: 15px;
}

/*●●●●●●●●●●●●●●●●●●●●　TB　●●●●●●●●●●●●●●●●●●●●*/

@media (max-width:980px) {
  
  /*----------mv----------*/
  .mv .catch {
    font-size: 4rem;
    top: 42%;
  }

  /*----------about----------*/
  .about {
    flex-direction: column-reverse;
  }
  
  .about .txt {
    width: 100%;
    max-width: inherit;
    padding: 50px;

  }
  
  .about .picture {
    width: 100%;
    height: 400px;
    max-width: inherit;
    background-attachment: fixed;
  }

  /*----------service----------*/
  .service ul li,
  .service ul li:nth-child(even) {
    flex-direction: column-reverse;
  }

  .service ul li .txt {
    width: 100%;
    padding: 20px 30px 40px;
    overflow: hidden;
  }
  
  .service ul li .picture {
    width: 100%;
    height: 300px;
  }

  /*----------news----------*/
  .news .contents .flex {
    display: inherit;
  }
  
  .news .txt {
    width: 100%;
  }
}

/*●●●●●●●●●●●●●●●●●●●●　SP　●●●●●●●●●●●●●●●●●●●●*/

@media (max-width:500px) {
  
  .ttl .en p.Roboto {
    font-size: 3rem;
  }

  .ttl .en p.Roboto::first-letter {
    font-size: 6rem;
  }

  .ttl .en .border {
    top: 45px;
  }

  .ttl h2 {
    font-size: 1.6rem;
  }

  /*----------mv----------*/
  .mv .catch {
    font-size: 2.4rem;
    top: 42%;
  }

  /*----------about----------*/
  .about .txt {
    padding: 50px 20px;
  }
  
  .about .txt .ttl .en .border {
    width: calc(100% - 168px);
  }

  /*----------service----------*/
  .service .ttl .en .border {
    width: calc(100% - 144px);
  }
  .service ul li .txt {
    padding: 20px 20px 30px;
  }

  /*----------service----------*/
  .news .ttl .en .border {
    width: calc(100% - 116px);
    top: 33px;
  }
  .news .txt .subject {
    font-size: 2.2rem;
  }

  /*----------news----------*/
  .news .txt .subject {
    font-size: 2rem;
  }
}