@charset "utf-8";

/* #mv */
#mv{
  min-height:100vh;
  clip-path: inset(0);
}
#mv:before{
  content:'';
  display:block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: url(../images/top/mv_bg.webp)no-repeat center center;
  background-size: cover;
  z-index: -1;
}
#mv nav{
  height:100svh;
  padding-bottom:2%;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  background:url(../images/top/mv_tit.png)no-repeat center center;
  background-size:100% auto;
}
#mv nav ul{
  max-width:none;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
#mv nav ul li{
  width:15.5%;
  height:fit-content;
  aspect-ratio:1 / 1;
}
#mv nav ul li a{
  display:block;
  height:100%;
  padding:9%;
  font-size:1.2vw;
  position:relative;
  background:url(../images/top/mv_arrow.png)no-repeat right 9% bottom 9%;
  background-size:0.8em auto;
  transition : bakground 0.4s;
  -webkit-transition : background 0.4s;
}
#mv nav ul li a:hover{
  opacity:1;
}
#mv nav ul li a.bg_vision{
  background-color:rgba(0,255,255,0.8);
}
#mv nav ul li a.bg_vision:hover{
  background-color:rgba(0,255,255,1);
}
#mv nav ul li a.bg_about{
  background-color:rgba(255,109,131,0.8);
}
#mv nav ul li a.bg_about:hover{
  background-color:rgba(255,109,131,1);
}
#mv nav ul li a.bg_company{
  background-color:rgba(210,91,207,0.8);
}
#mv nav ul li a.bg_company:hover{
  background-color:rgba(210,91,207,1);
}
#mv nav ul li a.bg_history{
  background-color:rgba(34,181,167,0.8);
}
#mv nav ul li a.bg_history:hover{
  background-color:rgba(34,181,167,1);
}
#mv nav ul li a.bg_activities{
  background-color:rgba(217,224,33,0.8);
}
#mv nav ul li a.bg_activities:hover{
  background-color:rgba(217,224,33,1);
}
#mv nav ul li a.bg_recruit{
  background-color:rgba(61,135,225,0.8);
}
#mv nav ul li a.bg_recruit:hover{
  background-color:rgba(61,135,225,1);
}
#mv nav ul li a dl{
  height:100%;
  text-align:left;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-direction: column;
  flex-direction: column;
}
#mv nav ul li a dl dt{
  line-height:1.2;
  white-space:nowrap;
}
#mv nav ul li a dl dt .en{
  display:block;
  font-size:2.1vw;
  font-weight:bold;
}
#mv nav ul li a dl dt .jp{
  display:block;
}
#mv nav ul li a dl dd{
  line-height:1.3;
}

@media screen and (max-width:1240px){
  #mv nav{
    background-size:1240px auto;
  }
}

@media screen and (max-width:920px){
  #mv nav ul{
    width:460px;
  }
  #mv nav ul li{
    width:32%;
    margin-top:2%;
    aspect-ratio:1 / 0.9;
  }
  #mv nav ul li a{
    padding:5%;
    font-size:12px;
  }
  #mv nav ul li a dl dt .en{
    font-size:21px;
  }
}
@media screen and (max-width:768px){
  #mv nav{
    background-size:170% auto;
    background-position:center 40%;
  }
}
@media screen and (max-width:500px){
  #mv:before{
    background: url(../images/top/mv_bg_s.webp)no-repeat center top;
    background-size:cover;
  }
  #mv nav{
    background:url(../images/top/mv_tit_s.png)no-repeat center 20%;
    background-size:300px auto;
  }
  #mv nav ul{
    width:380px;
  }
  #mv nav ul li{
    aspect-ratio:1 / 1;
  }
  #mv nav ul li a{
    padding:9%;
    font-size:10px;
  }
  #mv nav ul li a dl dt .en{
    font-size:16px;
  }
}

@media screen and (max-width:420px){
  #mv nav ul{
    width:96%;
  }
  #mv nav ul li a{
    padding-bottom:12%;
    font-size:2.8vw;
    background-size:0.6em auto;
  }
  #mv nav ul li a dl dt .en{
    font-size:4vw;
  }
}


/* #vision*/
#vision{
  padding:calc(100vh - 20%) 0 90px;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 50%);
  position:relative;
  z-index:2;
}
#vision .inner{
  width:80%;
  text-align:left;
  color:#fff;
}
#vision .inner h2{
  line-height:1;
}
#vision .inner h2 .en{
  font-size:214px;
  color:rgba(255,255,255,0.3);
  position:absolute;
  right:0;
  top:50%;
}
#vision .inner h2 .jp{
  font-size:112px;
  font-weight:normal;
  letter-spacing:0.2em;
}
#vision .inner p{
  margin-top:2em;
  line-height:2;
  font-size:28px;
  font-weight:bold;
  letter-spacing:0.1em;
}
#vision .blue_btn{
  position:absolute;
  right:9%;
  bottom:9%;
}

@media screen and (max-width:1024px){
  #vision{
    padding-bottom:9%;
  }
  #vision .inner h2 .en{
    font-size:21.4vw;
  }
  #vision .inner h2 .jp{
    font-size:11.2vw;
    font-weight:normal;
  }
  #vision .inner p{
    font-size:2.8vw;
  }
}

@media screen and (max-width:768px){
  #vision{
    padding-top:calc(100vh - 80%);
  }
  #vision .inner{
    width:90%;
  }
  #vision .inner h2 .en{
    font-size:23.4vw;
    transform:translateY(50%);
  }
  #vision .inner h2 .jp{
    font-size:16.8vw;
    font-weight:normal;
  }
  #vision .inner p{
    font-size:4.5vw;
  }
  #vision .blue_btn{
    position:static;
    right:auto;
    bottom:auto;
    margin:3em auto 0;
  }
}


/* #history */
#history{
  padding:0;
  color:#fff;
  position:relative;
}
#history section{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -110%);
}
#history section h2{
  line-height:0.8;
  font-size:214px;
  color:rgba(255,255,255,0.2);
}
#history section .lead{
  margin-top:-3em;
  font-size:24px;
  text-shadow:0 0 3px rgba(0,0,0,0.5);
  letter-spacing:0.1em;
  text-indent:0.1em;
}
#history section .arrow_link{
  margin-top:2em;
  color:#fff;
  text-shadow:0 0 3px rgba(0,0,0,0.5);
}
#history > figure img{
  width:100%;
}

@media screen and (max-width:1024px){
  #history section h2{
    font-size:18vw;
  }
}

@media screen and (max-width:768px){
  #history section {
    transform:translate(-50%, -105%);
  }
  #history section h2{
    font-size:22vw;
    text-indent:-0.1em;
  }
  #history section .lead{
    margin-top:-2.2em;
    font-size:3.7vw;
  }
  #history section .arrow_link{
    margin-top:1em;
  }
}


/* #news */
#news{
  padding:150px 0 120px;
}
#news .flex{
  max-width:1024px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
#news .flex .tit_wrapper{
  width:120px;
  padding:0 0 15px;
  text-align:left;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-direction: column;
  flex-direction: column;
}
#news .flex .tit_wrapper h2 .en{
  line-height:0.8;
  display:block;
  font-size:48px;
}
#news .flex .tit_wrapper h2 .jp{
  display:block;
  font-size:22px;
  font-weight:normal;
  letter-spacing:0.1em;
}
#news .flex .entry_wrapper{
  width:840px;
  padding-bottom:20px;
}
#news .flex .entry_list{
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
#news .flex .entry_list li{
  width:31%;
}
#news .flex .entry_list li figure{
  aspect-ratio:127 / 76;
}
#news .flex .entry_list li figure img{
  width:100%;
  height:100%;
  object-fit: cover;
}
#news .flex .entry_list li dl{
  margin-top:0.5em;
  text-align:left;
}
#news .flex .entry_list li dl dt{
  font-size:10px;
  letter-spacing:0.05em;
}
#news .flex .entry_list li dl dd{
  margin-top:1em;
  letter-spacing:0.03em;
}

@media screen and (max-width:1080px){
  #news{
    padding:12% 0 9%;
  }
  #news .flex{
    max-width:1024px;
    width:90%;
  }
  #news .flex .tit_wrapper{
    width:12%;
    padding:0 0 1.5%;
  }
  #news .flex .tit_wrapper h2 .en{
    font-size:4vw;
  }
  #news .flex .tit_wrapper h2 .jp{
    font-size:1.8vw;
  }
  #news .flex .entry_wrapper{
    width:82%;
  }
}

@media screen and (max-width:768px){
  #news{
    padding:20% 0 15%;
  }
  #news .flex{
    width:100%;
    display: block;
  }
  #news .flex .tit_wrapper{
    width:auto;
    padding:0 5% 0 9%;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-direction: row;
    flex-direction: row;
  }
  #news .flex .tit_wrapper h2 .en{
    font-size:8.8vw;
  }
  #news .flex .tit_wrapper h2 .jp{
    font-size:3.2vw;
  }
  #news .flex .entry_wrapper{
    width:100%;
    padding-left:9%;
    padding-bottom:3%;
    overflow:auto;
  }
  #news .flex .entry_list{
    width:230%;
    margin-top:5%;
  }
  #news .flex .entry_list li dl dt{
    font-size:2.8vw;
  }
}