@charset "UTF-8";

@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);


* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
outline: 0;
text-decoration: none;
font-weight: normal;
}
body {
font-family: 'Noto Sans JP', sans-serif;
overflow-x: hidden;
font-feature-settings: "palt";
-webkit-font-feature-settings: "palt";
position: relative;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
direction: ltr;
}

::selection {
background: #1fdaff;
color: #000;
}

::-moz-selection {
background: #1fdaff;
color: #000;
}
br.sp {
display: none;
}

/* start */
header.header {
width: 100%;
display: block;
position: fixed;
background-color: rgba(0,0,0,0.6);
padding: 0 4%;
top: 0;
left: 0;
z-index: 999;
backdrop-filter: blur(32px);
-webkit-backdrop-filter: blur(32px);
}
.head-inner {
width: 100%;
margin: 0 auto;
padding: 32px 0;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
position: relative;
}
h1.logo {
max-width: 120px;
width: 100%;
display: block;
}
nav.nav {
display: inline-block;
position: relative;
}
nav.nav ul {
display: flex;
justify-content: flex-end;
align-items: center;
}
nav.nav ul li {
display: inline-block;
padding-left: 48px;
}
nav.nav ul li:first-child {
padding-left: 0;
}
nav.nav ul li a {
font-size: 1rem;
font-weight: 900;
}
nav.nav ul li a.active {
background: -webkit-linear-gradient(45deg, #ff279c 20%,#ff981f 80%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}

.menu {
height: 20px;
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
width: 30px;
z-index: 998;
cursor: pointer;
display: none;
}
.menu__line{
background: #fff;
display: block;
height: 2px;
position: absolute;
transition:transform .3s;
width: 100%;
}
.menu__line--center{
top: 9px;
}
.menu__line--bottom{
bottom: 0;
}
.menu__line--top.active{
top: 8px;
transform: rotate(45deg);
}
.menu__line--center.active{
transform:scaleX(0);
}
.menu__line--bottom.active{
bottom: 10px;
transform: rotate(135deg);
}

.main-vs {
width: 100%;
height: calc(100vh - 121.98px);
margin-top: 121.98px;
display: flex;
justify-content: center;
align-items: flex-start;
flex-flow: column;
position: relative;
overflow: hidden;
padding: 0 4%;
background-image: url(../img/main_vs.jpg);
background-size: cover;
background-position: center;
}
.main-vs:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
display: none;
z-index: 1;
}

.main-vs h2 {
z-index: 3;
/*background: -webkit-linear-gradient(0deg,#be22ff 20%,#ff279c 50%,#ff981f 80%);*/
background-color: #fff;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 4.6rem;
line-height: 1.36;
font-weight: 900;
padding-bottom: 48px;
display: block;
}
.main-vs p {
z-index: 3;
color: #fff;
font-size: 1.36rem;
line-height: 1.96;
font-weight: 600;
display: block;
}

main {
width: 100%;
display: block;
position: relative;
}
section {
width: 100%;
display: block;
position: relative;
}
section .inner {
max-width: 1280px;
width: 100%;
display: block;
position: relative;
padding: 0 4% 96px 4% ;
margin: 0 auto;
z-index: 1;
}
.title_area {
width: 100%;
display: block;
text-align: center;
margin-bottom: 96px;
}
.title_area h2 {
display: inline-block;
padding: 16px 4%;
font-size: 1.6rem;
letter-spacing: .2em;
font-weight: 900;
border-radius: 0 0 5px 5px;
color: #fff;
background: -webkit-linear-gradient(45deg, #be22ff 10%, #ff279c 30%, #ff981f 50%, #1fdaff 70%);
}
.sub_title_area {
width: 100%;
display: block;
position: relative;
text-align: center;
padding-bottom: 72px;
}
h3.sub_title {
font-size: 2.76rem;
font-weight: 900;
color: #fff;
display: inline-block;
text-align: center;
position: relative;
}
h3.sub_title:before {
content: "";
display: block;
width: 60px;
height: 2px;
background-color: #fff;
position: absolute;
top: 50%;
bottom: 50%;
left: -96px;
transform: translate(0%,-50%);
}
h3.sub_title:after {
content: "";
display: block;
width: 60px;
height: 2px;
background-color: #fff;
position: absolute;
top: 50%;
bottom: 50%;
right: -96px;
transform: translate(0%,-50%);
}

.business_info {
background-color: #19191a;
}

.business-bloc {
width: 100%;
display: block;
position: relative;
}
.business-bloc ul {
width: 100%;
display: flex;
justify-content: space-around;
align-items: stretch;
flex-wrap: wrap;
position: relative;
}
.business-bloc ul li:first-child {
width: 58%;
display: flex;
flex-flow: column;
align-items: flex-start;
justify-content: center;
}
.business-bloc ul li:nth-child(2) {
width: 38%;
display: block;
}
.business-bloc ul li:first-child figure {
width: 100%;
display: block;
margin-bottom: 48px;
}
.business-bloc h4 {
font-size: 2.76rem;
font-weight: 600;
background: -webkit-linear-gradient(45deg,#be22ff 10%, #ff279c 30%,#ff981f 50%,#1fdaff 70%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
display: block;
margin-bottom: 32px;
text-align: center;
}
.business-bloc p.sub-title {
font-size: 1.36rem;
font-weight: 600;
line-height: 2em;
padding-bottom: 32px;
display: block;
text-align: center;
}
.business-bloc p {
font-size: 1.16rem;
line-height: 2em;
}
.business-bloc ul.info {
width: 100%;
display: flex;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
position: relative;
padding-top: 64px;
}
.business-bloc ul.info li {
width: calc(100% / 3.2);
display: block;
}
.business-bloc ul.info li figure {
width: 100%;
display: block;
margin-bottom: 24px;
}
.business-bloc ul.info li figure img {
border-radius: 25px;
}
.business-bloc ul.info li h3 {
font-size: 1.36rem;
line-height: 1.36;
font-weight: 600;
display: block;
padding-bottom: 16px;
}
.business-bloc ul.info li p {
font-size: .9rem;
line-height: 1.76!important;
display: block;
}
.business-bloc ul.info li p span {
font-size: 1rem;
font-weight: 600;
line-height: 1.6!important;
display: inline-block;
color: #1fdaff;
padding-top: 8px;
}

/* project */
.project_info .inner {
max-width: 1280px;
width: 100%;
display: block;
position: relative;
padding: 96px 4% ;
margin: 0 auto;
z-index: 1;
}
.project_bloc {
width: 100%;
display: block;
position: relative;
}
.project_bloc h4 {
font-size: 2.76rem;
font-weight: 600;
background: -webkit-linear-gradient(-45deg,#be22ff 10%, #ff279c 30%,#ff981f 50%,#1fdaff 70%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
display: block;
text-align: center;
margin-bottom: 32px;
}
.project_bloc p.sub-title {
font-size: 1.36rem;
font-weight: 600;
line-height: 2em;
display: block;
text-align: center;
}
.project_bloc p {
font-size: 1.16rem;
line-height: 2em;
}
.project_bloc ul.info {
width: 100%;
display: flex;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
position: relative;
padding-top: 64px;
}
.project_bloc ul.info li {
width: calc(100% / 3.2);
display: block;
}
.project_bloc ul.info li figure {
width: 100%;
display: block;
margin-bottom: 24px;
}
.project_bloc ul.info li figure img {
border-radius: 25px;
}
.project_bloc ul.info li h5 {
font-size: 1.36rem;
line-height: 1.36;
font-weight: 600;
display: block;
padding-bottom: 16px;
}
.project_bloc ul.info li h6 {
font-size: 1rem;
font-weight: 600;
line-height: 1.6!important;
padding-bottom: 8px;
color: #ff279c;
display: block;
}
.project_bloc ul.info li p {
font-size: .9rem;
line-height: 1.76!important;
display: block;
}

.company {
width: 100%;
display: block;
position: relative;
background-color: #19191a;
}
.company ul {
width: 100%;
display: flex;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
position: relative;
padding-bottom: 96px;
}
.company ul li {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.company ul li h3 {
font-size: 1.6rem;
font-weight: 900;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 2;
display: inline-block;
padding: 12px 32px;
line-height: 1.16;
border: 1px solid #fff;
}
.company ul li figure {
width: 100%;
height: 320px;
display: block;
position: relative;
overflow: hidden;
}
.company ul li a:hover figure img,
.company ul li h3:hover figure img {
transform: scale(1.2,1.2);
}
.company ul li figure img {
transform: scale(1,1);
transition: all .5s ease;
}
.company ul li figure:after {
content: "";
width: 100%;
height: 100%;
display: block;
background-color: rgba(0,0,0,0.6);
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

.top_news {
width: 100%;
display: block;
position: relative;
background-color: #000;
}

.top_news .inner {
max-width: 1000px;
width: 100%;
display: block;
padding: 0 4% 96px;
margin: 0 auto;
}

.top_news dl {
width: 100%;
padding-bottom: 16px;
margin-bottom: 24px;
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
position: relative;
border-bottom: 1px solid #fff;
}
.top_news dl:last-child {
margin-bottom: 48px;
}
.top_news dl dt {
width: 30%;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
position: relative;
font-size: 14px;
}
.top_news dl dt span.cate {
display: inline-block;
border: 1px solid#1fdaff;
border-radius: 5px;
text-align: center;
padding: 4px 8px;
font-weight: 600;
font-size: 13px;
color: #1fdaff;
}
.top_news dl dd {
width: 66%;
display: block;
padding-left: 4%;
font-size: 14px;
}
.news_btn_area {
width: 100%;
display: block;
position: relative;
text-align: center;
padding-top: 32px;
}
.news_btn_area a {
font-size: 1.06rem;
font-weight: 600;
padding: 12px 48px;
text-align: center;
background-color: #15bcdd;
color: #fff;
border-radius: 50px;
display: inline-block;
}

.recruit {
width: 100%;
display: block;
position: relative;
background-color: #19191a;
}
.recruit ul {
width: 100%;
display: flex;
justify-content: space-between;
align-items: start;
flex-wrap: wrap;
position: relative;
}
.recruit ul li {
width: 48%;
display: block;
position: relative;
}
.recruit ul li figure {
width: 100%;
height: 320px;
display: block;
overflow: hidden;
border-radius: 25px;
}
.recruit ul li figure img {
width: 100%;
display: block;
transform: scale(1.3,1.3);
transition: all .5s ease;
}
.recruit ul li a:hover figure img {
transform: scale(1,1);
}
.recruit ul li span.bloc {
width: 100%;
height: 100%;
display: block;
background-color: rgba(0,0,0,0.8);
position: absolute;
top: 0;
left: 0;
z-index: 1;
border-radius: 25px;
}
.recruit ul li h3 {
font-size: 1.6rem;
font-weight: 600;
display: inline-block;
background-color: #15bcdd;
color: #fff;
padding: 12px 32px;
text-align: center;
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
z-index: 2;
}
.recruit ul li p.notice {
font-size: .9rem;
font-weight: 600;
color: #fff;
position: absolute;
bottom: 4%;
right: 4%;
z-index: 2;
}

.contact {
width: 100%;
display: block;
position: relative;
background: -webkit-linear-gradient(45deg,#be22ff 20%, #ff279c 40%,#ff981f 60%,#1fdaff 80%);
}
.contact .inner {
width: 100%;
display: block;
position: relative;
padding: 96px 4%;
}
.contact_bloc {
max-width: 900px;
width: 100%;
padding: 48px;
border-radius: 25px;
margin: 0 auto;
background-color: #000;
}
.contact_bloc ul {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.contact_bloc ul li {
width: 48%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-flow: column;
}
.contact_bloc ul li h3 {
font-size: 1.96rem;
font-weight: 900;
color: #fff;
padding-bottom: 24px;
}
.contact_bloc ul li p {
font-size: .86rem;
text-align: center;
line-height: 1.96;
color: #fff;
}
.contact_bloc ul li a {
font-size: 1.96rem;
letter-spacing: .25em;
font-weight: 900;
color: #fff;
background: -webkit-linear-gradient(45deg,#be22ff 20%, #ff279c 40%,#ff981f 60%,#1fdaff 80%);
padding: 16px 48px;
border-radius: 50px;
}

.footer {
width: 100%;
display: block;
background-color: #101010;
padding: 96px 0%;
}
.footer .inner {
width: 100%;
padding: 0 4%;
display: block;
}
.foot-logo {
max-width: 120px;
width: 100%;
display: block;
margin: 0 auto 24px;
}
p.foot-info {
font-size: .8rem;
line-height: 1.96;
font-weight: 600;
display: block;
text-align: center;
}
.copy-area {
width: 100%;
display: block;
text-align: center;
padding-top: 48px;
}
.copy-area p.copy {
font-size: .8rem;
font-weight: 600;
text-align: center;
display: block;
}

/* sub contents */
.sub-inner {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 200px 4% 96px;
}
h2.sub_title {
display: inline-block;
font-size: 2.76rem;
font-weight: 600;
border-radius: 5px;
color: #fff;
background: -webkit-linear-gradient(-45deg, #be22ff 10%, #ff279c 30%, #ff981f 50%, #1fdaff 70%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}

.company_info p {
font-size: 1rem;
line-height: 1.96em;
padding-bottom: 48px;
display: block;
}
.company_info dl {
width: 100%;
padding-bottom: 16px;
margin-bottom: 24px;
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
position: relative;
border-bottom: 1px solid #fff;
}
.company_info dl dt {
width: 20%;
display: block;
position: relative;
font-size: 15px;
line-height: 1.6;
padding: 0 2%;
font-weight: 600;
color: #1fdaff;
}
.company_info dl dd {
width: 80%;
display: block;
padding: 0 2%;
font-size: 15px;
line-height: 1.6;
}

.map {
width: 100%;
height: 480px;
display: block;
position: relative;
padding-top: 48px;
margin-bottom: 96px;
}
.map iframe {
width: 100%;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}

.office-mv {
width: 100%;
height: calc(60vh - 121.98px);
background-image: url(../img/fvl.webp);
background-size: cover;
background-position: top center;
display: block;
position: relative;
margin-bottom: -128px;
margin-top: 121.98px;
}
.office-mv:before {
content: "";
background-color: rgba(0,0,0,0.2);
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: 1;
}
.office-mv h2 {
display: inline-block;
padding: 16px 8%;
font-size: 1.6rem;
letter-spacing: .2em;
font-weight: 900;
border-radius: 5px;
color: #fff;
background-color: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 2;
}

ul.photo {
width: 100%;
display: flex;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
position: relative;
}
ul.photo li {
width: 48%;
display: block;
position: relative;
margin-bottom: 48px;
}
ul.photo li figure {
display: block;
margin-bottom: 24px;
}
ul.photo li p {
font-size: 1.16rem;
font-weight: 500;
color: #fff;
display: block;
text-align: center;
}

h2.news_title {
font-size: 1.6rem;
font-weight: 600;
display: block;
padding-bottom: 24px;
margin-bottom: 48px;
border-bottom: 1px solid #fff;
line-height: 1.4;
}
span.date02 {
font-size: .9rem;
color: #15bcdd;
display: block;
margin-bottom: 16px;
}
p.news_info {
display: block;
line-height: 1.96;
margin-bottom: 64px;
}

.recruit_inner {
width: 100%;
max-width: 1000px;
background-color: #19191a;
margin: -96px auto 0 auto;
padding: 64px 4% 96px;
position: relative;
z-index: 2;
}
.recruit-mv {
width: 100%;
height: calc(60vh - 121.98px);
background-image: url(../img/recruit-mv.webp);
background-size: cover;
background-position: top center;
display: block;
position: relative;
margin-top: 121.98px;
}
.recruit-mv:before {
content: "";
background-color: rgba(0,0,0,0.2);
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: 1;
}

.recruit_inner h3 {
  font-size: 1.6rem;
  font-weight: 600;
  color: #15bcdd;
  display: block;
  margin-bottom: 24px;
  text-align: center;
}
.recruit_inner p {
  line-height: 1.6;
  display: block;
  margin-bottom: 64px;
  text-align: center;
}
.recruit_inner .accordion {
  width: 100%;
  display: block;
  margin: 0 auto 48px;
  padding: 32px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  border: 1px solid #fff;
  }
  .recruit_inner .accordion .works_title {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  font-weight: 400;
  cursor: pointer;
  position: relative;
  line-height: 1.6em;
  font-size: 1.16rem;
  }
  .recruit_inner .accordion .works_title h3 {
    font-size: 1.36rem;
    font-weight: 400;
    color: #fff;
    margin: 0;
  }
  .recruit_inner .accordion .works_title:before {
  content: "";
  display: block;
  width: 16px;
  height: 1px;
  position: absolute;
  top: 0;
  right: 16px;
  bottom: 0;
  margin: auto;
  background-color: #fff;
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  }
  .recruit_inner .accordion .works_title:after {
  content: "";
  display: block;
  width: 16px;
  height: 1px;
  position: absolute;
  top: 0;
  right: 16px;
  bottom: 0;
  margin: auto;
  background-color: #fff;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  }
  .recruit_inner .accordion .works_title.open:before {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  }
  .recruit_inner .accordion .works_title.open:after {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  }
  .accordion .works_info {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    font-size: .96rem;
    line-height: 2.2em;
    color: #fff;
    }
.works_info dl {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  position: relative;
  padding: 24px 0 0;
  margin-top: 24px;
  border-top: 1px solid #fff;
}
.works_info dl dt {
  width: 30%;
  display: flex;
  align-items: center;
  line-height: 1.6;
  padding: 0 2%;
  color: #15bcdd;
}
.works_info dl dd {
  width: 70%;
  display: flex;
  align-items: center;
  line-height: 1.6;
  padding: 0 2%;
}

@media screen and (max-width:480px) {
br.sp {
display: inline-block;
}
h1.logo {
max-width: 96px;
}
.head-inner {
padding: 24px 0;
}
nav.nav {
display: none;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.8);
width: 100%;
height: calc(100vh - 94.39px);
margin-top: 94.39px;
}
nav.nav ul {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
}
nav.nav ul li,nav.nav ul li:first-child {
padding: 0 0 48px 0;
}
nav.nav ul li:last-child {
padding: 0;
}
nav.nav ul li a {
font-size: 1.6rem;
font-weight: 900;
}
.menu {
display: block;
}
.main-vs {
height: calc(100vh - 94.39px);
margin-top: 94.39px;
}
.main-vs:after {
display: block;
}
.main-vs h2 {
font-size: 2.86rem;
padding-bottom: 24px;
}
.main-vs p {
font-size: 1.16rem;
line-height: 1.96;
}
.business-bloc h2 {
font-size: 2.26rem;
line-height: 1.36;
}
.business-bloc ul.info li {
width: 100%;
margin-bottom: 48px;
}
.business-bloc ul.info li:last-child {
margin: 0;
}
.project_bloc h2 {
font-size: 2.26rem;
}
.project_bloc ul.info li {
width: 100%;
margin-bottom: 48px;
}
.project_bloc ul.info li:last-child {
margin: 0;
}
.contact_bloc ul {
flex-flow: column;
}
.contact_bloc ul li {
width: 100%;
margin-bottom: 48px;
}
.contact_bloc ul li:last-child {
margin: 0;
}
.foot-logo {
max-width: 110px;
margin: 0 auto 24px;
}
p.foot-info {
line-height: 1.96;
text-align: center;
}

.sub_title {
  font-size: 2rem;
}
h3.sub_title:before {
  width: 40px;
  left: -60px;
}
h3.sub_title:after {
  width: 40px;
  right: -60px;
}
.business-bloc h4 {
  font-size: 2.2rem;
  line-height: 1.4;
}
.project_bloc h4 {
  font-size: 2.2rem;
  line-height: 1.4;
}
.company ul li {
  width: 100%;
}
.company ul li h3 {
  width: max-content;
}
.company ul li figure {
  width: 100%;
  height: 240px;
}
.top_news dl dt {
  width: 100%;
  margin-bottom: 16px;
}
.top_news dl dd {
  width: 100%;
  padding-left: 0;
}
.recruit ul li {
  width: 100%;
  margin-bottom: 32px;
}
.recruit ul li:last-child {
  margin-bottom: 0;
}
.recruit ul li figure {
  height: 240px;
}
.company_info dl dt {
  width: 100%;
  padding: 0 0 16px;
}
.company_info dl dd {
  width: 100%;
  padding: 0;
}
h2.sub_title {
  font-size: 2.2rem;
  line-height: 1.4;
}
ul.photo li p {
  font-size: .9rem;
  padding-bottom: 0px;
}
.office-mv {
  height: calc(60vh - 94.39px);
  margin-top: 94.39px;
}
.recruit_inner .accordion .works_title h3 {
  font-size: 1.16rem;
}
.recruit_inner .accordion {
  padding: 24px;
}
.recruit_inner .accordion .works_title:before {
  right: 0;
}
.recruit_inner .accordion .works_title:after {
  right: 0;
}
.recruit-mv {
  height: calc(60vh - 94.39px);
  margin-top: 94.39px;
}
.works_info dl dt {
  width: 100%;
  padding: 0 0 16px;
}
.works_info dl dd {
  width: 100%;
  line-height: 1.96;
  padding: 0;
}
}