@charset "utf-8";

/* -------------------------------------------------- */
/* COMMON */
/* -------------------------------------------------- */

/* view moreボタン */
/* -------------------------------------------------- */
.viewMoreBtn a {
  display: block;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #008ccf;
  cursor: pointer;
}

.viewMoreBtn a::after {
  display: inline-block;
  content: "";
  width: 5px;
  height: 5px;
  margin-left: 5px;
  border-top: 1px solid;
  border-right: 1px solid;
  transform: rotate(45deg);
  vertical-align: middle;
  transition: all 0.3s;
}

/* ホバーアクション */
.viewMoreBtn a:hover::after,
.viewMoreBtn a:active::after {
  margin-left: 10px;
}

/* -------------------------------------------------- */
/* メインビジュアル */
/* -------------------------------------------------- */
#mv {
  width: 100%;
  /* height: 600px; */
  height: calc(100vh - 67px);
  background: url(../img/mv.jpg) no-repeat center center / cover;
}

#mvInner {
  padding: 79px 27px 27px 79px;
  width: 100%;
  height: 100%;
  position: relative;
}

#mvCatch {
  font-size: 5.208vw;
  font-weight: bold;
  color: #ffffff;
  letter-spacing: 0.15em;
  line-height: 1.45;
}

#mvBatch {
  width: 25%;
  max-width: 150px;
  position: absolute;
  top: 30px;
  right: 30px;

  & img {
    width: 100%;
  }
}

#mvBnr {
  position: absolute;
  right: 27px;
  bottom: 27px;
}

#mvBnr a {
  display: block;
  width: 335px;
  cursor: pointer;
  transition: all 0.6s;
}

#mvBnr a img {
  width: 100%;
  height: auto;
}

#mvBnr a:hover,
#mvBnr a:hover {
  opacity: 0.7;
}

/* -------------------------------------------------- */
/* TOPメインセクション共通 */
/* -------------------------------------------------- */
#topSectionWrap a {
  color: #ffffff;
  border-color: #ffffff;
}

.topSection {
  position: relative;
}

.topSection::after {
  display: block;
  content: "";
  width: 57%;
  height: calc(100% - 200px);
  position: absolute;
}

.topContentWrap {
  width: 36%;
}

.topSection:nth-child(even) .topContentWrap {
  margin-left: auto;
}

/* リンクリスト */
/* -------------------------------------------------- */
.linkListWrap {
  padding-top: 47px;
}

.linkList {
  column-gap: 8%;
}

.linkItem {
  width: 46%;
}

.linkItem a {
  display: block;
  padding-bottom: 10px;
  font-size: 1.2rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  border-bottom: 1px solid;
  position: relative;
}

.linkItem a::after {
  display: inline-block;
  content: "";
  width: 7px;
  height: 7px;
  border-top: 1px solid;
  border-right: 1px solid;
  position: absolute;
  top: calc(50% - 6px);
  right: 0;
  transform: rotate(45deg);
  transition: all 0.3s;
}

/* ホバーアクション */
.linkItem a:hover::after,
.linkItem a:active::after {
  right: -5px;
}

/* -------------------------------------------------- */
/* 原通信建設について（ABOUT US） */
/* -------------------------------------------------- */
#about {
  background: url(../img/about_bg_txt.png) no-repeat top left / auto 100%;
}

#about::after {
  background: url(../img/about_img.jpg) no-repeat center center / cover;
  top: 100px;
  right: 0;
}

#aboutInner {
  padding: 194px 135px;
}

/* -------------------------------------------------- */
/* お仕事について（SERVICE） */
/* -------------------------------------------------- */
#service {
  background: url(../img/service_bg_txt.png) no-repeat top 25px right / 46% auto;
}

#service::after {
  background: url(../img/service_img.jpg) no-repeat center center / cover;
  top: 86px;
  left: 0;
}

#serviceInner {
  padding: 180px 135px 203px;
}

/* -------------------------------------------------- */
/* 取り組み（SDGs） */
/* -------------------------------------------------- */
#sdgs {
  background: url(../img/sdgs_bg_txt.png) no-repeat bottom 73px center / 84%
    auto;
}

#sdgsInner {
  width: 1075px;
  padding: 100px 0 120px;
}

#sdgsWrap {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  column-gap: 41px;
}

#sdgsContentWrap {
  width: 26%;
}

#sdgsContentWrap {
  padding-top: 29px;
  column-gap: 50px;
}

#sdgsTtl {
  font-size: 2.4rem;
  letter-spacing: 0.3em;
}

#sdgsTxtWrap .viewMoreBtn {
  padding: 22px 0 32px;
}

#sdgsImgWrap {
  width: 61%;
  padding-bottom: 100px;
  position: relative;
}

#sdgsImg1 img {
  max-width: 80%;
  margin-left: auto;
}

#sdgsImg2 {
  max-width: 40%;
  position: absolute;
  left: 0;
  bottom: 0;
}

/* -------------------------------------------------- */
/* 新着情報（NEWS） */
/* -------------------------------------------------- */
#news {
  background: #f8f7f7;
}

#newsInner {
  width: 950px;
  padding: 100px 0;
}

#newsWrap {
  column-gap: 50px;
}

#newsTtl {
  margin-bottom: 35px;
  font-weight: 500;
  font-size: 4rem;
  letter-spacing: 0.05em;
}

#newsTtl span {
  display: block;
  font-size: 1.5rem;
  color: #0380c5;
}

#newsContentWrap {
  width: 80%;
}

/* -------------------------------------------------- */
/* IE対応 */
/* -------------------------------------------------- */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  #sdgsContentWrap {
    margin-right: 41px;
  }

  #sdgsTtl {
    margin-right: 67px;
  }

  #newsTtlWrap {
    margin-right: 76px;
  }
}

/* -------------------------------------------------- */
/* TAB&SP */
/* -------------------------------------------------- */
@media screen and (max-width: 1024px) {
  /* -------------------------------------------------- */
  /* ボタン */
  /* -------------------------------------------------- */

  /* View More ボタン */
  /* -------------------------------------------------- */
  .viewMoreBtn a {
    text-align: right;
  }

  /* -------------------------------------------------- */
  /* メインビジュアル */
  /* -------------------------------------------------- */
  #mv {
    /* height: 450px; */
  }
  #mvCatch {
    position: absolute;
    top: 5%;
    font-size: 6.6vw;
  }

  /* -------------------------------------------------- */
  /* TOPメインセクション共通 */
  /* -------------------------------------------------- */
  .topSection::after {
    display: none;
  }

  .topSectionInner {
    max-width: 80%;
    margin: 0 auto;
    padding: 100px 0 !important;
  }

  .topContentWrap {
    width: 100%;
  }

  .topContentImgBox {
    padding-top: 30px;
  }

  .topContentImgBox img {
    margin: auto;
  }

  /* -------------------------------------------------- */
  /* 原通信建設について（ABOUT US） */
  /* -------------------------------------------------- */
  #about {
    background-size: auto 70%;
  }

  /* -------------------------------------------------- */
  /* お仕事について（SERVICE） */
  /* -------------------------------------------------- */
  #service {
    background-size: 70% auto;
  }

  /* -------------------------------------------------- */
  /* 取り組み（SDGs） */
  /* -------------------------------------------------- */
  #sdgsInner {
    width: 80%;
  }

  #sdgsWrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    row-gap: 50px;
  }

  #sdgsContentWrap {
    width: 100%;
    padding-top: 0;
  }

  #sdgsImgWrap {
    width: 100%;
  }

  #sdgsImg1 img {
    width: 80%;
  }

  #sdgsImg2 {
    width: 40%;
  }

  #sdgsImg2 img {
    width: 100%;
  }

  /* -------------------------------------------------- */
  /* 新着情報（NEWS） */
  /* -------------------------------------------------- */
  #newsInner {
    width: 90%;
    padding: 70px 0;
  }

  #newsWrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  #newsContentWrap {
    width: 100%;
  }

  #newsTtl {
    margin-bottom: 20px;
    text-align: center;
  }
}

/* -------------------------------------------------- */
/* TAB(調整) */
/* -------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
}

/* -------------------------------------------------- */
/* SP(調整) */
/* -------------------------------------------------- */
@media screen and (max-width: 767px) {
  /* -------------------------------------------------- */
  /* メインビジュアル */
  /* -------------------------------------------------- */
  #mv {
    /* height: 250px; */
    height: calc(100vh - 160px);
  }

  #mvInner {
    padding: 27px 4%;
  }

  #mvBatch {
  top: 20px;
  right: 4%;

  /* -------------------------------------------------- */
  /* TOPメインセクション共通 */
  /* -------------------------------------------------- */
  .topSectionInner {
    padding: 50px 0 !important;
  }

  /* リンクリスト */
  .linkListWrap {
    padding-top: 30px;
  }

  /* -------------------------------------------------- */
  /* 取り組み（SDGs） */
  /* -------------------------------------------------- */
  #sdgs {
    background-position: bottom 30px center;
  }

  #sdgsInner {
    width: 90%;
    /* padding: 50px 0; */
  }

  #sdgsWrap {
    row-gap: 30px;
  }

  #sdgsContentWrap {
    column-gap: 20px;
  }

  #sdgsTxtWrap .viewMoreBtn {
    padding: 15px 0 20px;
  }

  #sdgsImgWrap {
    padding-bottom: 50px;
  }
}