@charset "utf-8";
/* CSS Document */

section#mv{
  margin-top: 80px;
  width:100%;
  height: 730px;
  overflow: hidden;
  position: relative;
}
section#mv:before {
  animation: img-wrap 1s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

@keyframes img-wrap {
  100% {
    transform: translateX(100%);
  }
}
section#mv h2{
  font-size: 116px;
  letter-spacing: 0.06em;
  font-family: 'BarlowSemiCondensed-BoldItalic';
  font-weight: 900;
  position: absolute;
  top: 30%;
  left: 86px;
}

section#mv h2 span{
  color: var(--color-style2);
}

section#mv h3{
  font-size: 28px;
  font-weight: bold;
  line-height: 2.6;
  letter-spacing: 0.2em;
  position: absolute;
  top: 50%;
  left: 20%;
  font-family:"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  animation: fadeIn 3s ease 0.5s 1 normal backwards;

}
@media (max-width:1280px){
  section#mv h2{
    font-size: 9vw;
  }
}
@media (max-width:960px){
  section#mv h2{
    font-size: 8vw;
  }
}

/* slide */
.slider {
  height: 730px;
  margin-inline: auto;
  overflow: hidden;
  width: 100vw;
}
.slick-img img {
  width: 100vw;
  height: 730px;
  object-fit: cover;
}
@keyframes zoomUp {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1.0);
  }
}
.add-animation {
  animation: zoomUp 10s linear 0s normal both;

}
@media (max-width:768px){
  section#mv{
    margin-top: 70px;
    height: 690px;
  }

  .slider {
    height: 420px;
  }

  .slick-img img {
    height: 420px;
  }

  section#mv h2{
    font-size: 60px;
    letter-spacing: 0.07em;
    transform: rotate(90deg);
    transform-origin: 0;
    top: 7%;
    left: 12%;
    white-space: nowrap;
    animation: unset;

  }

  section#mv h3{
    font-size: 22px;
    line-height: 2.2;
    top: 45%;
    animation: unset;

  }
}

@media (max-width:420px){
  section#mv h3{
    top: 55%;
  }
}


/* NEWS・TOPICS */
section#news{
  margin:102px 0 152px;
  position: relative;
}

section#news::after{
  content:"Technology and Trust.";
  position: absolute;
  top: -173px;
  right:5px;
  font-size: 108px;
  font-family: 'BarlowSemiCondensed-BoldItalic';
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(150,223,23,0.22);
  text-stroke: 1px rgba(150,223,23,0.22);
  letter-spacing: 0.06em;
}

@media (max-width:768px){
  section#news{
    margin: 7px 0 83px;
  }

  section#news::after{
    content: unset;
  }
}

.news_wrap > li:first-child{
  box-sizing: border-box;
  padding-left:40px;
  width: 550px;
}

.news_wrap > li:last-child{
  width: 690px;
}

.news_wrap h2{
  font-weight:500;
  margin-bottom:50px;
  line-height: 1.3;
}

.news_wrap h2:first-line{
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 36px;
  font-weight:900;
  letter-spacing: 0.2em;
}

.h_list.nws{
  width: 400px;
}

.h_list.tpc{
  width: 659px;
}

@media (max-width:1240px){
  .news_wrap > li:first-child{
    padding-left:20px;
    width: 400px;
  }

  .news_wrap > li:last-child{
    width: calc(100% - 430px);
  }

  .h_list.tpc{
    width: 100%;
  }
}

@media (max-width:768px){
  .news_wrap h2{
    margin-left: 35px;
    margin-bottom: 20px;
  }

  .news_wrap h2:first-line{
    font-size: 30px;
  }

  .news_wrap > li:first-child{
    padding-left:0;
    width: 100%;
  }

  .news_wrap > li:last-child{
    width: 100%;
  }

  .h_list.nws{
    width: 100%;
    margin-bottom: 32px;
  }

}


.h_list li{
  display: flex;
  align-items: center;
  border-bottom: solid 1px #E8E8E8;
  padding: 0 22px 0 58px;
  box-sizing: border-box;
  position: relative;
  height: 89px;
}

.h_list li a{
  color: var(--color-style1);
  line-height: 1.7;
}

.h_list.nws li a{
  font-weight: bold;
  width: 100%;
}

.h_list.nws li a span{
  font-weight: normal;
  font-size: 14px;
  line-height: 2.8;
  display: block;
}

.h_list.nws li::before{
  font-family: "Font Awesome 5 Free";
  content: "\f054";
  font-weight: 900;
  color:#C4EE7C;
  position: absolute;
  top: 50%;
  left: 5%;
}


.h_list.nws li::after{
  font-family: "Font Awesome 5 Free";
  content: "\f054";
  font-weight: 900;
  color:#96DF17;
  position: absolute;
  top: 50%;
  left: 7%;
}


.h_list.tpc li::before{
  font-family: "Font Awesome 5 Free";
  content: "\f054";
  font-weight: 900;
  color:#C4EE7C;
  position: absolute;
  top: 46%;
  left: 3%;
}


.h_list.tpc li::after{
  font-family: "Font Awesome 5 Free";
  content: "\f054";
  font-weight: 900;
  color:#96DF17;
  position: absolute;
  top: 46%;
  left: 4.2%;
}

@media (max-width:768px){
  .h_list li{
    padding: 20px 22px 20px 58px;
    height: auto;
  }

  .h_list.nws li::before{
    left: 3%;
  }

  .h_list.nws li::after{
    left: 4.2%;
  }
}


/*periodic check*/
.check_w.it_1{
  margin-bottom: 92px;
}

.check_w li h3{
  color: var(--color-style2);
  font-size: 18px;
  font-weight: bold;
  display: block;
  transform: rotate(90deg);
  transform-origin: 0 0;
  position: absolute;
  top:0;
  font-family:"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}

.check_w.it_1 li:first-child h3{
  left:35px;
}

.check_w.it_2 li:first-child h3{
  right:-35%;
}

.check_w.it_2{
  flex-direction: row-reverse;
  margin-bottom: 130px;
}

.check_w li{
  box-sizing: border-box;
  width: 50%;
}

.check_w.it_1 li:first-child{
  padding-left: 55px;
  position: relative;
}

.check_w.it_1 li:last-child{
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  position: relative;
  padding-bottom: 83px;
}

.check_w.it_1 li figure.hv_img{
  width: 320px;
  height:460px;
  position: absolute;
  top:150px;
  left:67px;
}

.check_w.it_2 li:first-child{
  padding-right: 55px;
  position: relative;
}

.check_w.it_2 li:last-child{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  position: relative;
  padding-bottom: 83px;
}

.check_w.it_2 li figure.hv_img{
  width: 320px;
  height:460px;
  position: absolute;
  top:150px;
  right:67px;
}

@media (max-width:1240px){
  .check_w.it_1 li:first-child{
    width: 48%;
  }

  .check_w.it_1 li:last-child{
    width: 40%;
  }

  .check_w.it_1 li figure.hv_img{
    height: 400px;
    object-fit: cover;
    left: -67px;
  }

  .check_w.it_2 li:first-child{
    width: 48%;
  }

  .check_w.it_2 li:last-child{
    width: 40%;
  }

  .check_w.it_2 li figure.hv_img{
    height: 400px;
    object-fit: cover;
    right: -67px;
  }

  .check_w.it_1 {
    margin-bottom: 160px;
    align-items: flex-start;
  }

  .check_w.it_2 {
    align-items: flex-start;
  }

}


@media (max-width:768px){
  .check_w.it_1{
    flex-wrap: wrap;
    margin-bottom: 0;
  }

  .check_w.it_2{
    flex-wrap: wrap;
    margin-bottom: 55px;
  }

  .check_w.it_1 li:first-child{
    padding-left:0;
    margin-bottom: 60px;
    width: 100%;
  }

  .check_w.it_1 li:last-child{
    width: 100%;
  }

  .check_w.it_2 li:first-child{
    padding-right:0;
    margin-bottom: 60px;
    width: 100%;
  }

  .check_w.it_2 li:last-child{
    width: 100%;
  }

  .check_w.it_1 li:first-child h3{
    left: 15px;
  }
  .check_w.it_2 li:first-child h3{
    right: -100px;
  }

  .check_w li figure:nth-of-type(1){
    width: 60%;
  }

  .check_w.it_1 li figure.hv_img{
    top: 70px;
    left:0;
    height: 360px;
  }

  .check_w.it_2 li figure.hv_img{
    top: 70px;
    right:0;
    height: 360px;
  }
}

@media (max-width:420px){
  .check_w li figure:nth-of-type(1){
    width: 260px;
  }

  .check_w.it_1 li figure.hv_img,
  .check_w.it_2 li figure.hv_img{
    width: 180px;
    height: 255px;
  }
}

.h2_st{
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 0.25em;
  line-height: 1.3;
  margin-bottom: 43px;
}

.txt_st_1{
  line-height: 2.8;
  margin-bottom: 50px;
}

.check_w.it_2 li:first-child .h2_st{
  display: flex;
  justify-content: center;
}

@media (max-width:768px){
  .h2_st{
    font-size: 22px;
  }

  .check_w.it_1 li:first-child .h2_st{
    margin-left: 40px;
  }
}

@media (max-width:420px){
  .txt_st_1{
    line-height: 2.3;
  }

  .check_w.it_2 li:first-child .h2_st{
    justify-content: flex-start;
  }
}

.detail_txt_lnk{
  font-weight: bold;
  color:var(--color-style1);
  text-decoration: underline;
  position: relative;
  display: inline-block;
}

.detail_txt_lnk::after{
  content:"";
  cursor: default;
  background: var(--color-style2);
  width: 216px;
  height: 1px;
  position: absolute;
  top: 50%;
  right: -250px;
  transition: all 0.5s 0s ease;
}

.detail_txt_lnk:hover::after{
  right: -350px;
}

.yh_5{
  display: flex;
  justify-content: flex-end;
}

.detail_txt_lnk.rh::after{
  right:unset;
  left: -250px;
}

.detail_txt_lnk.rh:hover::after{
  right: unset;
  left: -350px;
}

@media (max-width:768px){
  .detail_txt_lnk.rh{
    display: unset;
    justify-content: unset;
  }

  .detail_txt_lnk::after{
    right: -190px;
  }

  .detail_txt_lnk.rh::after{
    left: unset;
    right: -190px;
  }

  .detail_txt_lnk.rh:hover::after{
    left: unset;
    right: -350px;
  }
}

@media (max-width:420px){
  .detail_txt_lnk::after{
    width: 160px;
  }

}

section#link{
  margin-bottom: 132px;
}

@media (max-width:420px){
  section#link{
    margin-bottom: 26px;
  }
}

section#link ul{
  margin-bottom:84px;
}

section#link ul li{
  width: calc(100% / 3);
}

section#link figure{
  position: relative;
}

section#link ul li a{
  font-size: 26px;
  font-weight: bold;
  color:#fff;
  width:100%;
  height: 617px;
  overflow: hidden;
  position: relative;
  display: block;
}

section#link ul li a img{
  width: 100%;
  height: 100%;
  transition: transform .6s ease;
}


section#link a:hover img {
  transform: scale(1.1);
}

section#link ul li span{
  position: absolute;
  left:6%;
  bottom: 10%;
}

@media (max-width:420px){
  section#link ul li span{
     left: 4%;
     bottom: 22%;
  }

  section#link p span{
    left: 4%;
  }
}

section#link ul li span::after{
  content:"";
  background: #fff;
  width:166px;
  height: 1px;
  position: absolute;
  left: 108%;
  bottom: 40%;
}

section#link p a{
  font-size: 26px;
  font-weight: bold;
  color:#fff;
  overflow: hidden;
  position: relative;
  display: block;
}

section#link p a img{
  width: 100%;
  height: auto;
  transition: transform .6s ease;
}

section#link p a:hover img {
  transform: scale(1.1);
}

section#link p span{
  position: absolute;
  left:3%;
  bottom: 20%;
}

section#link p span::after{
  content:"";
  background: #fff;
  width:166px;
  height: 1px;
  position: absolute;
  left: 108%;
  bottom: 40%;
}


@media (max-width:768px){
  section#link ul{
    flex-wrap: wrap;
  }

  section#link ul li{
    width: 100%;
  }

  section#link ul li a{
    height: 300px;
  }
}

@media (max-width:420px){
  section#link ul{
    margin-bottom: 35px;
  }

  section#link ul li a{
    height: 186px;
  }
}

section#contact{
  background: url('../img/index/info.png') no-repeat;
  background-size: cover;
  padding: 74px 0;
  position: relative;
}

@media (max-width:768px){
  section#contact{
    padding: 48px 0;
  }
}

section#contact::before{
  content:"";
  background: rgba(255,255,255,.62);
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left:0;
}

section#contact .wrap{
  padding: 57px 0;
  background: rgba(255,255,255,.7);
  z-index: 9;
  position: relative;
}

@media (max-width:768px){
  section#contact .wrap{
    box-sizing: border-box;
    padding: 23px;
  }
}


section#contact h2{
  font-size:36px;
  font-weight: bold;
  line-height: 1.3;
  padding-left: 148px;
  margin-bottom: 15px;
}

section#contact p.hkd2{
  padding-left: 128px;
  font-size:16px;
  font-weight: 500;
  color:#000;
  margin-bottom: 48px;
}
section#contact p.hkd2:first-line{
  color: var(--color-style2);
  font-size:18px;
  font-weight: bold;
  line-height:3;
}

section#contact .contact_btn{
  background: var(--color-style2);
  color: #fff;
  width: 404px;
  height: 71px;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width:768px){
  section#contact h2{
    font-size: 24px;
    padding-left:0;
    margin-bottomo: 0;
  }

  section#contact p.hkd2{
    padding-left: 0;
    margin-bottom: 36px;

  }

  section#contact .contact_btn{
    width: 100%;
  }
}