ul {
  list-style: none;
}

#front-page{
  width:95vw;
  font-family: a-otf-ryumin-pr6n, serif;
  font-weight: 300;
  font-style: normal;
}@media screen and (max-width: 1024px){
 #front-page{
  width:100vw;
}}

#front-page .main_visual{
  height: 100vh;
  background-image: url(../img/top_back.jpg);
  background-size: auto;
  background-attachment: fixed;
  background-position: bottom;
}

#front-page .visual_content{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../img/gradetion.svg);
  background-repeat: no-repeat;
  background-size: 200%;
  height: 100vh;
  background-position: 40% 54%;
  opacity: 0;
  animation:animetion 1.5s 2s 1 forwards;
  -webkit-animation:animetion 1.5s 2s 1 forwards;
  -moz-animation:animetion 1.5s 2s 1 forwards;
}@media screen and (max-width: 1024px){
#front-page .visual_content{
  background-size: 600%;
}}

#front-page .visual_content > img:first-child{
  position: absolute;
  top:1vw;
  left:1vw;
  width: 20vw;
}@media screen and (max-width: 1024px){
#front-page .visual_content > img:first-child{
  width:80vw;
}}

#front-page .visual_content > img:last-child{
  width: 55vw;
  opacity: 0;
  animation:animetion 2.5s 3s 1 forwards;
  -webkit-animation:animetion 2.5s 3s 1 forwards;
  -moz-animation:animetion 2.5s 3s 1 forwards;
}@media screen and (max-width: 1024px){
#front-page .visual_content > img:last-child{
  width:95vw;
}}

@keyframes animetion{
    100% {opacity:1;}
}
@-webkit-keyframes animetion{
    100% {opacity:1;}
}
@-moz-keyframes animetion{
    100% {opacity:1;}
}

#front-page .panel {
  height: 50%; 
}

#front-page .bottom {
  overflow: hidden;
}

#front-page .main_content{
  background-image: url(../img/download.png);
  background-position: center center;
  background-size: 500px;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 400%;
  width: 100%;
  z-index: -1;
  animation: scrollGood 5s linear infinite;
}

  @keyframes scrollGood {
  0% {
    transform: translate3d(0,0,0);
  }
  100% {
    transform: translate3d(0,-280px,0);
  }
}

/* ニュース */
#front-page .news{
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2;
}

#front-page .news_content{
  color: #3c114d;
  display: flex;
  justify-content: center;
  position: absolute;
  top:-5vh;
  width:70vw;
  background-color: #fff;
}@media screen and (max-width: 1024px){
#front-page .news_content{
  width:95vw;
}}

#front-page .news_content > h1 {
  position: absolute;
  top: 2vw;
  left: 4vw;
  font-size: 1.5em;
}@media screen and (max-width: 1024px){
#front-page .news_content > h1 {
  left: 41%;
  font-size: 2em;
}}

#front-page .news_group{
  margin:2vw;
  font-size: 1.0em;
}@media screen and (max-width: 1024px){
#front-page .news_group{
  margin: 10vw 5vw;
}}

#front-page .news_item{
  display: flex;
  border-bottom: 1px solid #3c114d;
}@media screen and (max-width: 1024px){
#front-page .news_item{
  padding: 4vw 0;
}}

#front-page .news_item >li {
padding: 1.5vw 2vw;
}

/* 案内 */
#front-page .infomation{
  position: relative;
}

#front-page .infomation > img{
  padding: 25vw 10vw 0 10vw;
  width: 40vw;
}@media screen and (max-width: 1024px){
#front-page .infomation > img{
  padding: 85vw 10vw 0 0;
  width: 100vw;
}}

#front-page .infomation_text{
border: 1px solid rgb(0, 0, 255);
position: absolute;
top: 35vw;
right: 0;
width: 50vw;
background-color: #fff;
padding: 3vw 7vw;
}@media screen and (max-width: 1024px){
#front-page .infomation_text{
  position: static;
  background-color: rgba(0,0,0,0);
  border: none;
  width: auto;
}}

#front-page .infomation_text > h2{
padding: 0 2vw;
display: table;
margin: 1vw 0;
color: #fff;
background-color: #3c114d;
line-height: 2em;
font-size: 2em;
}

#front-page .infomation_text > p{
line-height: 2em;
padding: 2vw 0;
}

#front-page .service{
margin-top:25vw;
margin-bottom:10vw;
}@media screen and (max-width: 1024px){
  #front-page .service{
  margin-top:0;
  margin-bottom:0;
}}

#front-page .service > div{
display: flex;
justify-content: center;
}@media screen and (max-width: 1024px){
  .service > div{
  flex-wrap: wrap;
}}

#front-page .service > h2{
font-size: 1.5em;
color: #fff;
width:20vw;
background-color: #3c114d;
padding: 3vw 8vw;
}@media screen and (max-width: 1024px){
  #front-page .service > h2{
width:auto;
}}

#front-page .service > h2 > span{
font-size: 0.6em;
padding-left:2vw;
}

#front-page .service_box{
display: flex;
align-items: center;
text-align: center;
width: 15vw;
height: 15vw;
background-size: cover;
margin: 2vw;
transition: .5s;
overflow: hidden;
}@media screen and (max-width: 1024px){
 #front-page .service_box{
  width: 50vw;
  margin: 0;
  height: 25vw;
}}

#front-page .service_box:hover > h2{
padding: 8vw 0;
transition: .5s;
}

#front-page .service_box > h2{
color:#fff;
width: 100%;
background-color: #3c114d;
padding: 1vw 0;
transition: .5s;
}@media screen and (max-width: 1024px){
  #front-page .service_box > h2{
  padding: 12vw 0;
  background-color: #3c114d;
}}

#front-page .service_box > h2 > span{
opacity: 0;
transition: 1s;
}

#front-page .service_box:hover > h2 > span{
opacity: 1;    
}

#front-page .service1{
background-image: url(../img/AdobeStock_195565548.jpeg);
margin-top: -2vw;
}@media screen and (max-width: 1024px){
  #front-page .service1{
margin-top: 0;
}}

#front-page .service2{
background-image: url(../img/AdobeStock_171567392.jpeg);
}@media screen and (max-width: 1024px){
  #front-page .service2{
margin-top: 0;
}}

#front-page .service3{
background-image: url(../img/download.jpg);
margin-top: 4vw;
}@media screen and (max-width: 1024px){
  #front-page .service3{
margin-top: 0;
}}

#front-page .service4{
background-image: url(../img/AdobeStock_317300863_Editorial_Use_Only.jpeg);
margin-top: 6vw;
}@media screen and (max-width: 1024px){
  #front-page .service4{
margin-top: 0;
}}

#front-page .service5{
background-image: url(../img/AdobeStock_242237503.jpeg);
margin-top: -2vw;
}@media screen and (max-width: 1024px){
  #front-page .service5{
margin-top: 0;
}}

#front-page .service6{
background-image: url(../img/infra.jpg);
}@media screen and (max-width: 1024px){
  #front-page .service6{
margin-top: 0;
}}

#front-page .service7{
background-image: url(../img/3box-1_develop.jpg);
margin-top: 4vw;
}@media screen and (max-width: 1024px){
  #front-page .service7{
margin-top: 0;
    width: 100vw;
}}

#front-page .message{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-image: url(../img/AdobeStock_266297288.jpeg);
background-size: cover;
position: relative;
height: 40vh;
}@media screen and (max-width: 1024px){
  #front-page .message{
    height: 25vh;
}}

#front-page .message:before{
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: ' ';
}

#front-page .message > img {
    width: 50vw;
    position: absolute;
    text-align: center;
    padding: 0 20vw;
    border: 1px solid #fff;
    height: 30vh;
}@media screen and (max-width: 1024px){
  #front-page .message > img {
    width: 90vw;
    height: 20vh;
    padding: 0;
}}

#front-page .company{
color:#fff;
background-color: #555;
}

#front-page .company > div > a{
text-decoration:none;
transition: .5s;
}@media screen and (max-width: 1024px){
  #front-page .company > div > a{
  display: table;
  margin: 7vw auto;
  margin-bottom:2vw;
}}

#front-page .company > div > a:hover{
background-color: rgba(255,255,255,.3);
}

#front-page .company > div{
display: flex;
align-items: center;
padding:5vw;
}@media screen and (max-width: 1024px){
  #front-page .company > div{
  display: block;
}}

#front-page .company > h2{
  font-size: 1.8em;
  padding: 3vw;
  padding-bottom: 0;
}

#front-page .company > h2 > span{
font-size: 0.8em;
padding:0 2vw;
}


#front-page .company > h2 > span{
font-size: 0.5em;
padding:0 2vw;
}

#front-page .company_group > ul{
display: flex;
margin-right: 10vw;
}@media screen and (max-width: 1024px){
#front-page .company_group > ul{
  margin-right: 0;
}}

#front-page .company_group > ul > li:first-child{
width: 10vw;
border-right: 1px solid #fff;
padding:1vw;
margin-left: 5vw;
}@media screen and (max-width: 1024px){
  #front-page .company_group > ul > li:first-child{
  width: 25vw;
}}

#front-page .company_group > ul > li:last-child{
width: 30vw;
padding:1vw 5vw;
}@media screen and (max-width: 1024px){
#front-page .company_group > ul > li:last-child{
  width: 50vw;
}}

#front-page .contact_btn{
border: 1px solid #fff;
padding: 1vw 4vw;
}