@charset "utf-8";


/* ==========================
mv
============================= */
main{
  margin-top: 9rem;
}
.mv{
	position: relative;
  height: 95px;
	h1{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
.mv_title{
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}


.mv_image{
  width: 145px;
  height: 251px;
  position: absolute;
  top: 1rem;
  left: 0;

  span{
    position: absolute;

    &:nth-child(1){
      left: 2.7rem;
      top: 9rem;
    }
    &:nth-child(2){
      left: 0;
      top: 13.8rem;
    }
    &:nth-child(3){
      left: 3rem;
      top: 17rem;
    }
    &:nth-child(4){
      left: 0;
      top: 26rem;
    }
  }
}


@media screen and (max-width: 767px){

  .mv_image{
    width: 55px;
    height: 86px;
    position: absolute;
    top: 0;
    left: 0;

    span{
      &:nth-child(5){
        left: 0;
        top: -1rem;
      }
    }
  }
	.mv_title{
		width: 70%;
		margin: auto;
	}
}

.bg{
	background: #222;
	height: 222px;
}

.container{
  background: #f8f7f5;
	padding: 7rem 12.8rem;
}

.info_inner{
	max-width: 1024px;
	width: 100%;
	margin: auto;

	.img{
		text-align: center;
		padding-bottom: 3rem;
	}
}

.news_status{
	display: flex;
	flex-direction: column;
	gap: 2rem;

	h2{
		font-size: 3.2rem;
		font-weight: 700;
	}

	.border{
		display: flex;
		width: 100%;
		margin-bottom: 6rem;

		span{
			width: calc(100% / 8);
			height: 3px;
			display: block;

			&:nth-of-type(1){background: #ed1c2a;}
			&:nth-of-type(2){background: #f79428;}
			&:nth-of-type(3){background: #e7c915;}
			&:nth-of-type(4){background: #8fb607;}
			&:nth-of-type(5){background: #77aad3;}
			&:nth-of-type(6){background: #6864ae;}
			&:nth-of-type(7){background: #bc6fae;}
			&:nth-of-type(8){background: #fc3b39;}

			&:nth-of-type(1){border-radius: 1rem 0 0 1rem;}
			&:nth-last-of-type{border-radius: 0 1rem 1rem 0;}
		}
	}
}


.top_return{
	border: 2px solid #404040;
	border-radius: 10rem;
	max-width: 328px;
	width: 100%;
	margin: auto;
	margin-top: 6rem;
	height: 38px;

	a{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

@media screen and (max-width: 767px){
	.container {
    background: #f8f7f5;
    padding: 4rem 5% 7rem;
	}
	.news_status{
		gap: 1rem;

		h2{
			font-size: 2.4rem;
			line-height: 1.6;
		}
		.border{
			margin-bottom: 3rem;
		}
	}


	.news_main{
		.img{
			padding-bottom: 3rem;
		}
	}

	.top_return{
		margin-top: 3rem;
	}
}