@charset "UTF-8";

/**********************************************************
 * Loading
 **********************************************************/
#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background:#FFF;
  text-align:center;
  color:#fff;
}
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#splash_logo img {
  width:200px;
}
.fadeUp {
  -webkit-animation-name: fadeUpAnime;
          animation-name: fadeUpAnime;
  -webkit-animation-duration:1.0s;
          animation-duration:1.0s;
  -webkit-animation-fill-mode:forwards;
          animation-fill-mode:forwards;
  opacity: 0;
}
@-webkit-keyframes fadeUpAnime{
  from {
  opacity: 0;
  transform: translateY(100px);
  }
  to {
  opacity: 1;
  transform: translateY(0);
  }
}
@keyframes fadeUpAnime{
  from {
  opacity: 0;
  transform: translateY(100px);
  }
  to {
  opacity: 1;
  transform: translateY(0);
  }
}

@media screen and (min-width:768px) and ( max-width:1365px) {
  #splash_logo img {
    width: 14.65vw;
  }
  @-webkit-keyframes fadeUpAnime{
    from {
    opacity: 0;
    transform: translateY(7.33vw);
    }
    to {
    opacity: 1;
    transform: translateY(0);
    }
  }
  @keyframes fadeUpAnime{
    from {
    opacity: 0;
    transform: translateY(7.33vw);
    }
    to {
    opacity: 1;
    transform: translateY(0);
    }
  }
}

/**********************************************************
 * header
 **********************************************************/
header {
  background-color: inherit;
}
header.fixed {
  background-color: rgba(255,255,255,0.8);
}
header nav a {
  color: #FFF;
}
header.fixed nav a {
  color: #000;
}
header .bg_header {
  position: absolute;
  top: 0;
  left: 0;
  width: 312px;
  transition: all .3s;
  opacity: 1;
}
header.fixed .bg_header {
  opacity: 0;
}

@media screen and (min-width:768px) and ( max-width:1365px) {
  header .bg_header {
    width: 22.86vw;
  }
}

/**********************************************************
 * main
 **********************************************************/
main {
  margin-top: 0;
  padding-bottom: 125px;
}
.bg_video {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-39.5%);
  min-width: 100vw;
  min-height: 100vh;
  width: auto;
  height: auto;
  z-index: -1;
}

/*
MV
================================================ */
#first {
  position: relative;
  height: 100vh;
}
#first .catchphrase {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: left;
  font-size: 68px;
  line-height: 1.6;
  letter-spacing: .1em;
  color: #FFF;
  z-index: 1;
}
#first .catchphrase span {
  opacity: 0;
  display: block;
  white-space: nowrap;
}
#first .news {
  position: fixed;
  right: 0;
  bottom: 40px;
  display: -ms-flexbox;
  width: 555px;
  background-color: rgba(15,139,149,0.6);
  padding: 30px 0 30px 45px;
  box-sizing: border-box;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  z-index: 1;
}
#first .news .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#first .news.is-hidden {
  opacity: 0;
  transform: translate(100px,0);
  transition: opacity .6s ease-out,transform .6s ease-out,visibility 0s linear .6s;
}
#first .news.is-visibility {
  opacity: 1;
  transform: translate(0,0);
  transition: opacity .6s ease-out,transform .6s ease-out,visibility 0s linear .6s;
}
#first .news h2 {
  width: 20%;
  font-size: 2.2rem;
  color: #FFF;
  padding-right: 30px;
}
#first .news .bx-wrapper {
  width: 80%;
}
#first .news ul {
  font-size: 1.6rem;
  line-height: 1.6;
  color: #FFF;
  padding-left: 30px;
  border-left: dotted 2px #FFF;
}
#first .news ul a {
  color: #FFF;
  text-decoration: none;
}
#first .news ul .date {
  margin-bottom: .2em;
  display: block;
}
#first .news ul li {
  width: 100% !important;
  max-height: 4.8em;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  letter-spacing: .1em;
}

@media screen and (min-width:768px) and ( max-width:1365px) {
  main {
    padding-bottom: 9.16vw;
  }
  #first .catchphrase {
    font-size: 4.98vw;
  }
  #first .news {
    bottom: 2.93vw;
    width: 40.66vw;
    padding: 2.2vw 0 2.2vw 3.3vw;
    -webkit-border-top-left-radius: 0.73vw;
    -webkit-border-bottom-left-radius: 0.73vw;
    -moz-border-radius-topleft: 0.73vw;
    -moz-border-radius-bottomleft: 0.73vw;
    border-top-left-radius: 0.73vw;
    border-bottom-left-radius: 0.73vw;
  }
  #first .news.is-hidden {
    transform: translate(7.33vw,0);
  }
  #first .news h2 {
    font-size: 1.61vw;
    padding-right: 2.2vw;
  }
  #first .news ul {
    font-size: 1.17vw;
    padding-left: 2.2vw;
    border-left: dotted 0.15vw #FFF;
  }
}

/*
コンテンツ共通
================================================ */
.l-content {
  position: relative;
}
.l-content .bg_content {
  position: absolute;
  left: 50%;
  max-width: none;
  z-index: 0;
}
.l-content .catchphrase {
  font-size: 6rem;
  line-height: 1.2;
  letter-spacing: .05em;
  margin-bottom: 30px;
}
.l-content .text {
  margin-top: 2em;
  font-size: 1.7rem;
  line-height: 2.2;
}
.l-content .link {
  margin-top: 40px;
}

@media screen and (min-width:768px) and ( max-width:1365px) {
  .l-content .catchphrase {
    margin-bottom: 2.2vw;
  }
  .l-content .text {
    font-size: 1.25vw;
  }
  .l-content .catchphrase {
    font-size: 4.4vw;
  }
  .l-content .link {
    margin-top: 2.93vw;
  }
}

/*
NEWS
================================================ */
#content_news {
  padding: 220px 0 350px;
}
#content_news .bg_content {
  top: 0;
  transform: translateX(-818px);
  width: 1480px;
}
#content_news .content_news-list {
  display: flex;
  gap: 30px;
}
#content_news .content_news-item  {
  width: 227.5px;
}
#content_news .content_news-item a {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-decoration: none;
  color: #000;
}
#content_news .content_news-item a .photo {
  position: relative;
  width: 100%;
  height: 150.5515px;
  overflow: hidden;
}
#content_news .content_news-item a .photo img {
  min-width: 100%;
  min-height: 100%;
  transition: all .3s;
  object-fit: cover;
}
#content_news .content_news-item a:hover .photo img {
  transform: scale(1.1, 1.1);
}
#content_news .content_news-item a h4 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-align: left;
  margin: 1em 0 .6em;
  line-height: 1.6;
  font-size: 16px;
}
#content_news .content_news-item a span {
  display: inline-block;
  font-size: 12px;
}

@media (width < 768px) {
  #content_news .content_news-list {
    gap: 2.604vw;
  }
  #content_news .content_news-item  {
    width: 21.712vw;
  }
  #content_news .content_news-item a .photo {
    height: 14.368vw;
  }
}

@media screen and (min-width:768px) and ( max-width:1365px) {
  #content_news {
    padding: 16.105vw 0 25.622vw;
  }
  #content_news .bg_content {
    transform: translateX(-59.883vw);
    width: 108.346vw;
  }
  #content_news .content_news-list {
    gap: 2.196vw;
  }
  #content_news .content_news-item  {
    width: 16.654vw;
  }
  #content_news .content_news-item a .photo {
    height: 11.021vw;
  }
  #content_news .content_news-item a h4 {
    font-size: 1.17vw;
  }
  #content_news .content_news-item a span {
    font-size: 0.88vw;
  }
}

/*
ABOUT US
================================================ */
#content_01 {
  position: relative;
  padding: 170px 0 260px;
}
#content_01 .bg_content_01 {
  top: -100px;
  left: 50%;
  transform: translateX(-700px);
  width: 1604px;
  max-width: none;
  z-index: 0;
}
#content_01 .catchphrase {
  font-size: 6rem;
  line-height: 1.2;
  letter-spacing: .05em;
  margin-bottom: 30px;
}
#content_01 .text {
  font-size: 1.7rem;
  line-height: 2.2;
  margin-top: 2em;
}
#content_01 .img_action {
  position: absolute;
  top: 0;
  right: 0;
  width: 430px;
}

@media screen and (min-width:768px) and ( max-width:1365px) {
  #content_01 {
    padding: 12.45vw 0 19.05vw;
  }
  #content_01 .bg_content_01 {
    top: -7.33vw;
    transform: translateX(-51.28vw);
    width: 117.51vw;
  }
  #content_01 .catchphrase {
    font-size: 4.4vw;
    margin-bottom: 2.2vw;
  }
  #content_01 .text {
    font-size: 1.25vw;
  }
  #content_01 .img_action {
    width: 31.5vw;
  }
}

/*
OUR SOLUTION
================================================ */
#content_02 {
  position: relative;
  padding: 200px 0 145px;
}
#content_02 .bg_content_02 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-880px);
  width: 1544px;
  max-width: none;
  z-index: 0;
}
#content_02 .catchphrase {
  font-size: 6rem;
  line-height: 1.2;
  letter-spacing: .05em;
  margin-left: 390px;
  margin-bottom: 30px;
  white-space: nowrap;
}
#content_02 h2 {
  margin-left: 390px;
}
#content_02 h3 {
  margin-left: 390px;
}
#content_02 .text {
  font-size: 1.7rem;
  line-height: 2.2;
  margin-top: 2em;
  margin-left: 390px;
}
#content_02 .link {
  margin-left: 390px;
  margin-top: 40px;
}
#content_02 .img_smago {
  position: absolute;
  top: 110px;
  left: 20px;
  width: 260px;
}

@media screen and (min-width:768px) and ( max-width:1365px) {
  #content_02 {
    padding: 14.65vw 0 10.62vw;
  }
  #content_02 .bg_content_02 {
    transform: translateX(-64.47vw);
    width: 113.11vw;
  }
  #content_02 .catchphrase {
    font-size: 4.4vw;
    margin-left: 28.57vw;
    margin-bottom: 2.2vw;
  }
  #content_02 h2 {
    margin-left: 28.57vw;
  }
  #content_02 h3 {
    margin-left: 28.57vw;
  }
  #content_02 .text {
    font-size: 1.25vw;
    margin-left: 28.57vw;
  }
  #content_02 .link {
    margin-left: 28.57vw;
    margin-top: 2.93vw;
  }
  #content_02 .img_smago {
    top: 8.06vw;
    left: 1.47vw;
    width: 19.05vw;
  }
}

/*
SDGs ACTION
================================================ */
#content_03 {
  position: relative;
  padding: 215px 0 220px;
}
#content_03 .bg_content_03 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-625px);
  width: 1222px;
  max-width: none;
  z-index: 0;
}
#content_03 .catchphrase {
  font-size: 6rem;
  line-height: 1.2;
  letter-spacing: .05em;
  margin-bottom: 30px;
}
#content_03 .text {
  font-size: 1.7rem;
  line-height: 2.2;
  margin-top: 2em;
}

@media screen and (min-width:768px) and ( max-width:1365px) {
  #content_03 {
    padding: 15.75vw 0 16.12vw;
  }
  #content_03 .bg_content_03 {
    transform: translateX(-45.79vw);
    width: 89.52vw;
  }
  #content_03 .catchphrase {
    margin-bottom: 2.2vw;
  }
  #content_03 .text {
    font-size: 1.25vw;
  }
}