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

/*================================
MV
================================*/
#mv{
	position: relative;
	padding: 3rem 0;
	z-index: 0;
}
#mv::before{
	content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
	background-image: url("../img/top/mv/bg.jpg");
	background-repeat: no-repeat;
}
#mv_anime{
  width: 98%;
  margin: 0 auto;
}
#mv_ttl{
  position: absolute;
  z-index: 1;
}
#mv_icon{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 0;
}
#mv_icon li{
  position: absolute;
  opacity: 0;
}
@media (min-width: 768px){
  #mv{
    height: 740px;
  }
  #mv::before{
    background-size: cover;
    background-position: center;
    height: 740px;
  }
  #mv_ttl{
    top: -8%;
    left: -1%;
    width: 56.546%;
  }
  #mv_anime{
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translateX(-50%) translateY(-75%);
    max-width: 1100px;
    aspect-ratio: 110/43;
  }
  #mv_icon li:nth-child(1){
    width: 37.728%;
    bottom: 2%;
    right: 3%;
  }
  #mv_icon li:nth-child(2){
    width: 24.728%;
    top: 29%;
    right: 32%;
  }
  #mv_icon li:nth-child(3){
    width: 13.274%;
    bottom: 8%;
    right: 1.25%;
  }
  #mv_icon li:nth-child(4){
    width: 19.455%;
    bottom: 0;
    right: 53%;
  }
  #mv_icon li:nth-child(5){
    width: 11.728%;
    top: 0;
    right: 0;
  }
  #mv_icon li:nth-child(6){
    width: 16%;
    bottom: 16%;
    left: 12.75%;
  }
  #mv_icon li:nth-child(7){
    width: 11%;
    bottom: 8%;
    left: 3%;
  }
}
@media (max-width: 767px){
  #mv{
    aspect-ratio: 40/57;
  }
  #mv::before{
    background-size: auto 110%;
    background-position: top right 30%;
    aspect-ratio: 40/57;
    height: 100%;
  }
  #mv_ttl{
    top: 22%;
    left: 1%;
    width: 98%;
  }
  #mv_anime{
    height: 100%;
  }
  #mv_icon li:nth-child(1){
    width: 60%;
    bottom: 15%;
    right: 8%;
  }
  #mv_icon li:nth-child(2){
    width: 37%;
    bottom: 22%;
    left: 6%;
  }
  #mv_icon li:nth-child(3){
    width: 22%;
    bottom: 16.5%;
    right: 6%;
  }
  #mv_icon li:nth-child(4){
    width: 20%;
    bottom: 9%;
    left: 24%;
    z-index: 1;
  }
  #mv_icon li:nth-child(5){
    width: 20%;
    top: 43%;
    right: 1.5%;
  }
  #mv_icon li:nth-child(6){
    width: 16%;
    bottom: 8.5%;
    left: 13%;
    z-index: 0;
  }
  #mv_icon li:nth-child(7){
    width: 11%;
    bottom: 4.5%;
    left: 5%;
  }
}


/*MV アニメーション
================================*/
/*タイトル*/
#mv_ttl{
  animation: mvttl-anim 2s;
}
@keyframes mvttl-anim {
	0% {
    transform: translateX(-120px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  50%,100% {
    opacity: 1;
  }
}
/*アイコン*/
#mv_icon li:nth-child(1) {
  animation: mvicon-anim 0.5s ease 0.3s 1 forwards;
}
#mv_icon li:nth-child(2) {
  animation: mvicon-anim 0.5s ease 0.4s 1 forwards;
}
#mv_icon li:nth-child(3) {
  animation: mvicon-anim 0.5s ease 0.6s 1 forwards;
}
#mv_icon li:nth-child(4) {
  animation: mvicon-anim 0.5s ease 1s 1 forwards;
}
#mv_icon li:nth-child(5) {
  animation: mvicon-anim 0.5s ease 1.3s 1 forwards;
}
#mv_icon li:nth-child(6) {
  animation: mvicon-anim 0.5s ease 1.2s 1 forwards;
}
#mv_icon li:nth-child(7) {
  animation: mvicon-anim 0.5s ease 1.4s 1 forwards;
}
@keyframes mvicon-anim {
  100% {
    opacity: 1;
  }
}

/*================================
選ばれる理由
================================*/
#reason .sect_ttl{
  position: relative;
  z-index: 0;
  margin-top: 2rem;
}
#reason .sect_ttl::before{
  content: '';
  display: inline-block;
  position: absolute;
  top: -60px;
  right: 32%;
  width: 173px;
  height: 151px;
  background-image: url("../img/top/reason_ttl.png");
  z-index: -1;
}
.reason_maintxt{
  position: relative;
  z-index: 0;
  margin-bottom: 2rem;
}
.reason_maintxt p:last-child{
  margin-bottom: 0;
}
.reason_frame{
  position: relative;
  color: #fff;
  border-radius: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}
.reason_frame::before,
.reason_frame::after{
  content: '';
  display: inline-block;
  position: absolute;
}
.reason_frame::before{
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
}
.reason_frame::after{
  right: 2%;
  bottom: 0;
  aspect-ratio: 270 / 418;
  background-image: url("../img/top/reason_bg_man.png");
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: contain;
  mix-blend-mode: multiply;
}
.reasonbox{
  position: relative;
  z-index: 1;
}
.reason_txt{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: 100%;
  text-align: center;
}
.reason_txt img{
  max-width: 110px;
}
.reason_txt h3{
  font-weight: bold;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.reason_txt p{
  font-weight: bold;
  margin-bottom: 0;
}
@media (min-width: 1200px){
  .reason_txt h3{
    font-size: 1.5rem;
  }
  .reason_txt p{
    font-size: 1.1rem;
  }
}
@media (min-width: 992px) and (max-width: 1199px){
  .reason_txt p{
    font-size: 1rem;
  }
}
@media (min-width: 768px) and (max-width: 1199px){
  #reason .container{
    max-width: 1140px;
  }
  .reason_txt h3{
    font-size: 1.4rem;
  }
}
@media (min-width: 768px){
  .reason_maintxt{
    text-align: center;
  }
  .reason_frame{
    padding: 4% 2%;
  }
  .reason_frame::before{
    background-image: url("../img/top/reason_bg.jpg");
  }
  .reason_frame::after{
    width: 95%;
    height: 95%;
  }
  .reason01,
  .reason03{
    margin-top: 50px;
  }
  .reason_txt img{
    width: 30%;
  }
}
@media (max-width: 991px){
  .reason_txt p{
    font-size: .85rem;
  }
}
@media (max-width: 767px){
  .reason_frame{
    padding: 15px;
  }
  .reason_frame::before{
    background-image: url("../img/top/reason_bg_sp.jpg");
  }
  .reason_frame::after{
    width: 45%;
    height: 45%;
  }
  .reasonbox{
    max-width: 350px;
    margin: 10px auto;
  }
  .reasonbox > img{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  .reason_txt img{
    width: 20%;
  }
  .reason_txt h3{
    font-size: 1.2rem;
  }
}

/*選ばれる理由 アニメーション
================================*/
/*man*/
.reason_frame::after{
  animation: reason-man-anim 1.5s;
}
@keyframes reason-man-anim {
	0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  50%,100% {
    opacity: 1;
  }
}
/*reason*/
.reasonbox.fadein{
  opacity: 0;
  transform : translate(0, 50px);
}
.reasonbox.fadein.active{
  opacity: 1;
  transform : translate(0, 0);
  transition : all 1s;
}
.reasonbox.fadein.reason01.active > img{
  animation: reason-anim 1s ease 1s 1 forwards;
}
.reasonbox.fadein.reason02.active > img{
  animation: reason-anim 1s ease 2s 1 forwards;
}
.reasonbox.fadein.reason03.active > img{
  animation: reason-anim 1s ease 3s 1 forwards;
}
@keyframes reason-anim {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}

/*================================
事業内容
================================*/
.bizbox{
  position: relative;
}
.bizbox::before{
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  height: 100%;
}
.bizbox:nth-child(odd)::before{
  left: 0;
  background: linear-gradient(to right, rgba(0, 184, 71, .3), rgba(0, 185, 204, .3));
}
.bizbox:nth-child(even)::before{
  right: 0;
  background: linear-gradient(to left, rgba(0, 184, 71, .3), rgba(0, 185, 204, .3));
}
.bizbox .biz_photo{
	position: relative;
  z-index: 2;
  max-width: 590px;
}
.bizbox .biz_txt{
  position: relative;
  z-index: 1;
	flex: 1;
}
.bizbox::after{
  content: '';
  display: inline-block;
  position: absolute;
  z-index: -1;
  mix-blend-mode: multiply;
}
.bizbox.biz01::after{
  width: 349px;
  height: 311px;
  background-image: url("../img/top/biz01_bg.png");
  animation: frame_bef 2.5s infinite;
}
.bizbox.biz02::after{
  width: 231px;
  height: 181px;
  background-image: url("../img/top/biz02_bg.png");
}
.bizbox.biz03::after{
  width: 184px;
  height: 204px;
  background-image: url("../img/top/biz03_bg.png");
}
.bizbox .biz_txt h3{
	font-weight: bold;
  border-bottom: #fff 1px solid;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}
.bizbox .biz_txt p{
	margin-bottom: 2.5rem;
}
@media (min-width: 992px){
  .bizbox{
    margin-top: 10rem;
  }
}
@media (min-width: 768px) and (max-width: 991px){
  .bizbox{
    margin-top: 8rem;
  }
}
@media (min-width: 768px){
	.bizbox{
		display: flex;
	}
  .bizbox::before{
    width: 86%;
    border-radius: 30px;
  }
  .bizbox .biz_photo{
    top: -3rem;
    width: 43%;
  }
  .bizbox .biz_txt{
    padding: 5rem 2.5rem;
  }
  .bizbox.biz01::after{
    top: -270px;
    right: 30px;
  }
  .bizbox.biz02::after{
    top: -120px;
    left: 40px;
  }
  .bizbox.biz03::after{
    top: -90px;
    right: 40px;
  }
	.bizbox:nth-child(odd) .biz_txt{
    order: 1;
  }
	.bizbox:nth-child(odd) .biz_photo{
    order: 2;
  }
	.bizbox:nth-child(even) .biz_txt{
    order: 2;
  }
	.bizbox:nth-child(even) .biz_photo{
    order: 1;
  }
  .bizbox .biz_txt h3{
    font-size: 1.4rem;
  }
}
@media (max-width: 767px){
	.bizbox{
    margin-top: 5rem;
		padding: 1rem 1rem 2rem;
	}
  .bizbox .biz_txt{
    text-align: center;
  }
  .bizbox::before{
    width: 100%;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
  }
	.bizbox .biz_photo{
		margin: -4rem auto 1rem;
    width: 80%;
		display: block;
	}
  .bizbox.biz01::after{
    bottom: -70px;
    right: -100px;
  }
  .bizbox.biz02::after{
    bottom: -40px;
    left: -40px;
  }
  .bizbox.biz03::after{
    bottom: -95px;
    right: -40px;
  }
  .bizbox .biz_txt h3{
    font-size: 1.2rem;
  }
	.bizbox .biz_txt p{ text-align: left;}
}

/*事業内容 アニメーション
================================*/
.bizbox .fadein{
  opacity : 0;
  transform : translate(0, 50px);
  transition : all 1.2s;
}
.bizbox .fadein.active{
  opacity : 1;
  transform : translate(0, 0);
}

/*================================
実績紹介
================================*/
#performance{
	overflow: hidden;
}
.performance_frame{
  position: relative;
  z-index: 1;
}
.performance_frame::before,
.performance_frame::after{
  content: '';
  display: inline-block;
  position: absolute;
}
.performance_frame::before{
  top: 0;
  left: 0;
  width: 94%;
  height: 100%;
  z-index: 0;
  background-image: url("../img/top/performance_bg.jpg");
  background-size: cover;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}
.performance_frame::after{
  right: 10%;
  width: 70%;
  max-width: 840px;
  aspect-ratio: 840 / 100;
  background-image: url("../img/top/performance_en.png");
  background-size: contain;
  background-repeat: no-repeat;
  mix-blend-mode: overlay;
}
.performance_txt,
.performance_photo{
  position: relative;
  z-index: 1;
}
.performance_txt,
.performance_txt .sect_ttl,
.performance_txt .sect_ttl span,
.performance_txt .btn_rotate{
  color: #fff !important;
}
.performance_txt .sect_ttl,
.performance_txt p{
  text-align: left;
}
.performance_txt p{
  margin-bottom: 2.5rem;
}
.performance_txt{
  position: relative;
}
.performance_txt::before{
  content: '';
  display: inline-block;
  position: absolute;
  width: 173px;
  height: 150px;
  background-image: url("../img/top/performance_bg.png");
  mix-blend-mode: multiply;
}
.performance_txt .btn_rotate .arrow{
  color: #1d2b6c;
  background-color: #fff;
}
.photo_grad{
  position: relative;
}
.photo_grad::before{
  content: '';
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .7));
}

@media (min-width: 992px){
  .performance_frame{
    display: flex;
    align-items: center;
    padding: 6% 0;
  }
  .performance_txt{
    order: 1;
    padding: 3rem;
  }
  .performance_photo{
    order: 2;
    flex: 1;
  }
  .performance_frame::after{
    bottom: -3px;
  }
  .performance_txt::before{
    top: -40px;
    right: 80px;
  }
}
@media (min-width: 768px){
  .performance_frame::before{
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
  }
}
@media (max-width: 991px){
  .performance_frame{
    padding: 10% 0 1rem;
  }
  .performance_txt{
    padding: 1rem;
  }
  .performance_frame::after{
    top: 3%;
    z-index: 1;
  }
  .performance_txt::before{
    top: 20px;
    right: 0;
  }
}
@media (max-width: 767px){
  .performance_frame{
    text-align: center;
  }
  #performance .container{
    padding-left: 0;
  }
}

/*================================
実績紹介　アニメーション
================================*/
.photo_grad.fadein{
  opacity: 0;
  transform: translateX(-100px);
}
.photo_grad.fadein.active{
  transition : all 1.5s;
  opacity: 1;
  transform: translateX(0);
}


/*================================
TOPICS
================================*/
#topics{
  background: linear-gradient(-64deg, #0553dd, #41aeec);
}
.topics_frame{
	background-color: #fff;
	border-radius: 10px;
}
.topics_list ul{
	list-style: none;
	padding-left: 0;
}
.topics_list ul li{ margin-top: 1rem;}
.topics_list ul li a:hover{ text-decoration: underline;}
.topics_list ul li span{
	color: #1d2b6c;
	font-weight: bold;
}
@media (min-width: 991px){
	.topics_list ul li{ display: flex;}
	.topics_list ul li span{ margin-right: 2rem;}
	.topics_list ul li a{ flex: 1;}
}
@media (min-width: 768px){
	.topics_frame{ padding: 2rem 3rem;}
	.topics_frame h2{ text-align: left;}
	.topics_list{
		position: relative;
		padding-right: 180px;
	}
	.topics_list .btn_rotate{
		position: absolute;
		right: 0;
		bottom: 0;
	}
}
@media (max-width: 991px){
	.topics_list ul li span{ display: block;}
}
@media (max-width: 767px){
	.topics_frame{
		text-align: center;
		padding: 1.5rem 1rem 2rem;
	}
	.topics_list ul{
		text-align: left;
		margin-bottom: 2rem;
	}
}