@charset "utf-8";
.container {
  opacity: 0;
}
#top_hero {
  position: relative;
}
#top_hero .box_inner {
  position: relative;
  margin: 0 0 0 auto;
  width: calc(100% - 23vw);
}
.hero_content {
  height: calc(100vh - 130px);
  /* background: url(../img/top/top_bg1@2x.jpg) no-repeat;
    background-size: cover; */
  position: relative;
  overflow: hidden;
}
.hero_content img {
  object-fit: cover;
  transform: scale(1.2);
}
.hero_img {
  position: relative;
}
/* .hero_img:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.3;
    z-index: 1;
    width: 100%;
    height: 100vh;
    background:linear-gradient(45deg, #000000,#E1E1E3,#FFFFFF);
    background-size: 200% 200%;
    animation: bggradient 20s ease infinite;
} */
.each_txt_anime {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translate(0, -50%);
  font-size: calc(4.375rem + ((1vw - 8.35px) * 2.8758));
  font-weight: 600;
  z-index: 2;
}
/*スクロールダウン全体の場所*/
.scroll {
  /*描画位置※位置は適宜調整してください*/
  position: absolute;
  bottom: 20px;
  left: 4.08163vw;
  margin-bottom: 80px;
  display: block;
}

/*Scrollテキストの描写*/
.scroll span {
  /*描画位置*/
  position: absolute;
  left: 0;
  bottom: 10px;
  /*テキストの形状*/
  color: #000;
  font-size: 1.8rem;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

/* 丸の描写 */
.scroll:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0.2em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #000;
  animation: circlemove 2s ease-in-out infinite, cirlemovehide 2s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove {
  0% {
    bottom: -5px;
  }
  100% {
    bottom: -85px;
  }
}

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}

/* 線の描写 */
.scroll:after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: 0.5em;
  width: 1px;
  height: 80px;
  background: #000;
}

/* top_about */
#top_about {
  /* padding-top: 300px;
    height: calc(100vh - 300px); */
}
#top_about .box_inner {
  display: flex;
  height: 100%;
  align-items: center;
}
#top_about .about_img {
  width: 50%;
  height: 500px;
  background: url(../img/top/top_bg2@2x.jpg);
  background-size: cover;
}
#top_about .about_content {
  width: 50%;
  padding: 0 4vw;
}
#top_about h3 {
  font-size: 3.5vw;
  position: relative;
  z-index: 2;
  font-weight: 600;
  padding-top: 70px;
}
#top_about h3 #about_us {
  max-width: 100%;
  max-height: 97px;
  position: absolute;
  top: 0;
  left: 0.5em;
  z-index: -1;
  fill: transparent;
  stroke: transparent;
}
#top_about h3 span {
  display: block;
}
#top_about .about_txt {
  margin-top: 8vh;
  line-height: 2.5;
  letter-spacing: 0.1em;
}

/* top_service */
#top_service .box_inner {
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0 0 0 auto;
  width: calc(100% - 23vw);
}
.service_content {
  width: 50%;
}
#top_service .service_img {
  width: 50%;
  height: 100%;
  background: url(../img/top/top_bg3@2x.jpg) no-repeat;
  background-size: cover;
  position: relative;
  margin-left: calc(100vh * 125 / 1062);
}
#top_service .service_img #our_service {
  height: 98vh;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  left: calc((-1 * 98vh * 125 / 1062) + 2%);
  opacity: 0.5;
  fill: transparent;
  stroke: transparent;
}
.service_content h2 {
  font-size: 2.4rem;
  font-weight: 600;
  margin-bottom: 20px;
}
.service_content .service_txt {
  line-height: 2.5;
  font-size: 1.4rem;
  margin-bottom: 8vh;
}
.service_content .mincho li {
  margin-bottom: 5vh;
}
.service_content .mincho li:last-child {
  margin-bottom: 0;
}
.service_content .mincho li a {
  font-size: 2.4rem;
  display: block;
  text-align: left;
  padding: 15px 0 15px 20px;
}
.service_content .common_btn_small {
  font-size: 1.6rem;
  font-weight: 600;
  display: block;
  margin-top: 10px;
}
/* top_case */
#top_case {
  /* background: url(../img/top/top_bg4@2x.jpg) no-repeat;
    background-size: cover; */
}
#top_case img {
  object-fit: cover;
  transform: scale(1.2);
}
#top_case .box_inner {
  height: 100%;
  position: relative;
  overflow: hidden;
}
#top_case .case_content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.case_content {
  width: 100%;
  display: block;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.case_content h2 {
  position: relative;
  padding-top: 120px;
  color: #fff;
  font-size: 2.4rem;
  letter-spacing: 0.1em;
  font-weight: 600;
  z-index: 2;
}
.case_content h2 #case_study {
  max-width: calc(100% - 40px);
  max-height: 183px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: -1;
  opacity: 0.2;
  fill: transparent;
  stroke: transparent;
}
.case_content .common_btn {
  display: inline-block;
}
.case_content .common_btn a {
  color: #fff;
}
#top_case .common_btn .line_anime span {
  background: #fff;
}
#top_case .common_btn_anime::before {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* top_contact */
#top_contact .box_inner {
  height: 100%;
  position: relative;
}
#top_contact .contact_content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.contact_content {
  width: 100%;
  display: block;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.contact_content h2 {
  position: relative;
  padding-top: 120px;
  font-size: 2.4rem;
  letter-spacing: 0.1em;
  font-weight: 600;
  z-index: 2;
}
.contact_content h2 #contact_us {
  max-width: calc(100% - 40px);
  max-height: 137px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: -1;
  fill: transparent;
  stroke: transparent;
}
.contact_content .contact_txt {
  margin-top: 8vh;
  line-height: 2;
}
.contact_content .common_btn {
  display: inline-block;
  font-size: 1.8rem;
  font-weight: normal;
  margin-top: 10vh;
}

/* top_topics */

#top_topics .box_inner {
  display: flex;
  height: 100%;
  position: relative;
  align-items: center;
  margin: 0 0 0 auto;
  width: calc(100% - 23vw);
}
#top_topics .box_topics_list {
  height: 100%;
  margin: 0 auto;
  max-width: 54em;
}
#top_topics .topics_content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.topics_content {
  width: 100%;
  display: block;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.topics_content h2 {
  position: relative;
  padding-top: 120px;
  font-size: 2.4rem;
  letter-spacing: 0.1em;
  font-weight: 600;
  z-index: 2;
}
.topics_content h2 #topics {
  max-width: calc(100% - 40px);
  max-height: 137px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: -1;
  fill: transparent;
  stroke: transparent;
}
.topics_content .topics_txt {
  margin-top: 8vh;
  line-height: 2;
  text-align: left;
  width: 100%;
}
ul.topics_txt li {
  display: flex;
  font: 1.5rem;
  margin-bottom: 0.5em;
  padding-left: 0.5em;
  padding-bottom: 0.5em;
  border-bottom: solid 1px #f2f2f2;
}
ul.topics_txt li a {
  align-self: center;
  font-size: 0.95em;
  display: inline-block;
  color: #fff;
  background: #231815;
  padding: 0.4em 0.75em;
  border-radius: 0.2em;
  margin-left: 3em;
  line-height: 0.95em;
  cursor: pointer;
  letter-spacing: 0.05em;
}
ul.topics_txt li a:hover {
  background: #6f6f6f;
}
.topics_content span.date {
  width: 8em;
  display: inline-block;
}

.anime {
  animation: animationZoom1 5s ease-in-out forwards;
}
@keyframes animationZoom1 {
  100% {
    transform: scale(1.1);
  }
}

@keyframes bggradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* loading */
#loading {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background: #fff;
  width: 100%;
  height: 100vh;
  z-index: 100000;
  display: none;
}
#loadingLogo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 36;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  transition: 0.3s ease;
}
#loadingLogo img {
  width: 300px;
}
.percent {
  display: block;
  text-align: center;
  font-size: 1.8rem;
  color: #000;
  margin-top: 0;
  font-weight: 600;
}
/* #loadingAfterText {
    display: none;
    color: #fff;
    text-align: center;
    width: 100%;
    font-size: 5rem;
    line-height: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 36;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
} */
#percent {
  margin-bottom: 5px;
  text-align: center;
  font-size: 16px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 36;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}
.bnr_list.sp {
  display: none;
}
@media (min-width: 1600px) {
  .each_txt_anime {
    font-size: 9.2rem;
  }
  #top_about h3 {
    font-size: 5.6rem;
  }
}
@media screen and (max-width: 1140px) {
  /* #top_about h3 {
        font-size: 3.2rem;
    } */
}
@media screen and (max-width: 835px) {
  .header_logo {
    opacity: 0;
    transition: 0.3s ease;
  }
  .header_logo.show {
    opacity: 1;
  }
  .header_contact_sp .mail_icon_yellow {
    display: none;
  }
  .header_contact_sp .mail_icon_yellow.show {
    display: block;
  }
  .header_contact_sp .mail_icon_white.none {
    display: none;
  }
  #top_hero .box_inner {
    width: 100%;
    margin: 0 auto;
  }
  .each_txt_anime {
    font-size: 4.4rem;
    line-height: 1.4;
    text-align: center;
    padding: 0 20px;
    width: calc(100% - 40px);
    top: 50%;
    left: calc(50% + 1rem);
    transform: translate(-50%, -50%);
    margin-top: 20px;
  }
  .scroll {
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 10;
  }
  .hero_content .logo_white {
    width: 100px;
    height: 98px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: -100px;
    z-index: 1;
  }
  /*Scrollテキストの描写*/
  .scroll span {
    color: #fff;
  }
  /* 丸の描写 */
  .scroll:before,
  .scroll:after {
    background: #fff;
  }
  #top_about .box_inner {
    flex-direction: column-reverse;
    padding: 60px 0;
  }
  #top_about .about_img {
    width: 100%;
    height: 190px;
    background: url(../img/top/top_bg2_sp@2x.jpg) no-repeat;
    background-size: cover;
  }
  #top_about .about_content {
    width: calc(100% - 40px);
    padding: 0 0 40px;
    margin: 0 20px;
  }
  #top_about h3 {
    font-size: 3.6rem;
    text-align: center;
    line-height: 1.4;
    padding-top: 36px;
  }
  #top_about h3 span {
    margin-left: 1rem;
  }
  #top_about .about_txt {
    font-size: 1.3rem;
    margin-top: 20px;
  }
  #top_about h3 #about_us {
    max-width: inherit;
    height: 52px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: -1;
    fill: transparent;
    stroke: transparent;
  }
  #top_service .box_inner {
    margin: 0 20px;
    width: calc(100% - 40px);
    flex-direction: column;
    padding-bottom: 60px;
  }
  .service_content {
    width: 100%;
  }
  #top_service .service_img {
    display: none;
  }
  .service_content h2 {
    font-size: 3.6rem;
    text-align: center;
    position: relative;
    padding-top: 100px;
  }
  .service_content h2 #our_service2 {
    fill: transparent;
    stroke: transparent;
    height: 113px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: -1;
  }
  .service_content .service_txt {
    margin-bottom: 20px;
  }
  #top_service .common_btn .line_anime {
    display: none;
  }
  .service_content .mincho li a {
    border: 1px solid #000;
    line-height: 1.2;
    border-radius: 5px;
    text-align: center;
    padding: 15px 2rem;
  }
  .service_content .common_btn_small {
    margin-top: 0;
  }
  #top_case .box_inner {
    height: auto;
  }
  #top_case .case_content {
    padding: 60px 0;
    /* position: static;
        top: inherit;
        left: inherit;
        transform: translate(0, 0); */
  }
  .case_content h2 {
    padding-top: 40px;
    font-size: 3.6rem;
  }
  .case_content h2 #case_study {
    max-width: inherit;
    height: 62px;
  }
  #top_contact .contact_content {
    position: static;
    top: inherit;
    left: inherit;
    transform: translate(0, 0);
    padding: 60px 0;
  }
  .contact_content h2 #contact_us {
    max-width: inherit;
    height: 62px;
  }
  .contact_content h2 {
    padding-top: 50px;
    font-size: 3.6rem;
  }
  .contact_content .contact_txt {
    margin-top: 20px;
  }
  .contact_content .common_btn {
    margin-top: 20px;
  }

  #top_topics .topics_content {
    position: static;
    top: inherit;
    left: inherit;
    transform: translate(0, 0);
    padding: 60px 0 0;
  }

  #top_topics .box_topics_list {
    max-width: 100%;
  }
  #top_topics .box_inner {
    margin: 0 20px;
    width: calc(100% - 40px);
    flex-direction: column;
    padding-bottom: 0;
   	padding-top: 2em;
  }
  .topics_content h2 #topics {
    max-width: inherit;
    height: 62px;
  }
  ul.topics_txt li {
    flex-direction: column;
    margin-bottom: 0.8em;
    padding-bottom: 0.8em;
    font-size: 1.3rem;
    line-height: 1.5em;
  }
  .topics_content span.date {
    margin-bottom: 0.3em;
  }
  ul.topics_txt li a {
    margin-top: 0.5em;
    margin-left: 0;
    align-self: flex-start;
  }
  .topics_content h2 {
    padding-top: 50px;
    font-size: 3.6rem;
  }
  .topics_content .topics_txt {
    margin-top: 20px;
  }
  .topics_content .common_btn {
    margin-top: 20px;
  }

  .bnr_list.sp {
    display: block;
  }
}