@charset "UTF-8";
/*////////////////////////*/
/*ファーストビュー*/
/*////////////////////////*/

/*トップスライダー*/
.top-slider {
	position: relative;
	width: 100%;
	height: calc(100vh - 80px) ;
  max-height: 550px;
  background: #808080;
}
.top-catch {
	position: absolute;
	z-index: 1;
	top: 15%;
	left: 5%;
}
.top-catch02 {
	position: absolute;
	z-index: 1;
	bottom: 10%;
	right: 5%;
}
.slider1 .swiper-slide {
	height: unset;
}
.swiper-custom-parent {
  position: relative;
}
.slider1 {
  position: unset;
  width: 100%;
  height: 100%;
}
.swiper-pagination-bullet {
	width: 8%;
    height: 3px;
    border-radius: unset;
    background: #808080;
}

/* 文字を囲むspanの初期状態 */
.fade-char {
  opacity: 0;
  display: inline-block;
  transition: opacity 0.5s ease; /* 0.5秒かけて表示 */
}

/* 表示された時の状態 */
.fade-char.is-visible {
  opacity: 1;
}
#typB span:nth-child(3) {
  padding-right: 25px;
}



/*////////////////////////*/
/*セカンドビュー*/
/*////////////////////////*/

.bg01 {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
}
.bg02 {
  position: absolute;
  top: 10%;
  right: 5%;
  width: 200px;
}
.bg03 {
  position: absolute;
  bottom: 10%;
  left: 5%;
  width: 200px;
}
.acute-triangle {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 500px;
  width: 50%;
  background: #F7F7F7;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.top_logo {
  width: 300px;
}
.bar-red {
    width: 40px;
    height: 2px;
    background: #e51611;
    margin: 20px 0;
}
.index-btn a {
  position: absolute;
  bottom: -30px;
  right: 0;
  width: 190px;
  height: 170px;
  padding: 15px;
  background: #e95513;
  transition: all 0.6s ease 0s;
}
.index-btn a:hover {
  background: #000;
  transition: all 0.6s ease 0s;
}
.arrow {
  position: absolute;
  bottom: -65px;
  right: 0px;
  width: 30px;
}






/*PCのみ*/
@media (min-width: 768px) {

    .pt-md-200 {
      padding-top: 200px;
    }
    .pb-md-200 {
      padding-bottom: 200px;
    }



}

@media (max-width: 768px) {

		.top-slider {
			height: calc(100vh - 60px);
      max-height: unset;
			z-index: unset;
		}
		.top-catch {
      top: 20%;
		}
    .bg01 {
      width: 75%;
    }
    .bg02 {
        top: 100px;
        width: 140px;
    }
    .bg03 {
      bottom: 50px;
      width: 140px;
    }
    .index-btn {
      margin-bottom: 50px;
    }
    .pt-sp-300 {
      padding-top: 300px;
    }
    .pb-sp-300 {
      padding-bottom: 300px;
    }

}