@charset "utf-8";

html{
  font-weight: 400;
  font-size: 14px;
  color: #000;
}
body{
  font-family:  "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a{
  text-decoration: none;
  transition: opacity .3s ease-in-out;
  color: #000;
}
a:hover, a:visited{ color: #000; opacity: 0.6;}
a:visited{ color: #000;}
img{ max-width: 100%;}

.flexbox{ display: flex;}
.showSP{ display: none;}

header{
  width: 100%;
  position: fixed;
  z-index: 1;
}
header > div{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  max-width: 1324px;
  margin: 0 auto;
  padding: 28px;
}

header > div > h1{
  font-family: Roboto;
  font-weight: 500;
  font-size: 1.714rem;
  line-height: 1.16em;
  letter-spacing: 0.05em;
  color: #050505;
}

header > div > nav > ul{
  width: 460px;
  justify-content: space-between;
}

header.is-fixed{
  background: rgba(243,243,243, 0.8);
}


/*-- main --*/
.bg_t{ background-color: #F3F3F3;}
.fv{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #F3F3F3;
  height: 810px;
  width: 100%;
  position: relative;
}

.fv h2{
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 4.57rem;
  line-height: 1.17em;
  letter-spacing: 0.1em;
  color: #050505;
}
.fv h2 + p{
  display: block;
  margin-top: 53px;
  font-family: 'Roboto', sans-serif;
  font-size: 1.285rem;
  line-height: 1.166em;
  letter-spacing: 0.4em;
  color: #050505;
  text-align: center;
}

.fv::before{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: #b0b0b0;
  position: absolute;
  top: 0;
  left: 0;
  animation: show02 1.5s ease-out 0.5s forwards;
  transform: scale(1,1);
  transform-origin: right top;
  z-index: 2;
}
.fv::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: #c6c6c6;
  position: absolute;
  top: 0;
  left: 0;
  animation: show 1.5s ease-in-out 0.5s forwards;
  transform: scale(0,1);
  transform-origin: left top;
  z-index: 2;
}

.anime01{
  overflow: hidden;
}
.anime01 > h2{
  opacity: 0;
  transform: matrix(1, 0, 0, 1, 0, 50);
  animation: show_fv_t02 0.6s ease-in-out 2s forwards;
}
.anime01 > h2 + p{
  opacity: 0;
  transform: matrix(1, 0, 0, 1, 0, 20);
  animation: show_fv_t02 0.6s ease-in-out 2s forwards;
}

section h2{
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  font-size: 2.85rem;
  line-height: 1.175em;
  text-align: center;
  letter-spacing: 0.4em;
}
section#service{
  padding: 200px 0;
  width: 740px;
  margin: 0 auto;
}
section#service h2{ margin-bottom: 164px;}
section#service .flexbox{
  flex-flow: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
section#service .flexbox > div:nth-child(odd){ width: 340px;}
section#service .flexbox > div:nth-child(even){ width: 240px;}
section#service .flexbox > div{ margin-top: 103px;}
section#service .flexbox > div:first-child,
section#service .flexbox > div:nth-child(2){ margin-top: 0;}
section#service .flexbox h3{
  font-weight: bold;
  font-size: 1.14rem;
  line-height: 150%;
}
section#service .flexbox h3 + ul{ margin-top: 22px;}
section#service .flexbox h3 + ul > li{ line-height: 170%;}
section#service .flexbox h3 + ul > li::before{
  content: '・';
  display: inline-block;
}
section#service .s_original{
  margin-top: 200px;
}
section#service .s_original > h3{
  text-align: center;
  font-weight: bold;
  font-size: 1.14rem;
  line-height: 150%;
  letter-spacing: 0.3em;
}
section#service .s_original > ul{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 90px;
}
section#service .s_original > ul > li{ margin-left: 90px;}
section#service .s_original > ul > li:first-child{ margin-left: 0;}

section#member{ padding: 0 0 103px;}
section#member > h2{
  padding: 164px 0 156px;
}
section#member ul{
  max-width: 992px;
  padding: 156px 20px 0;
  margin: 0 auto;
}
section#member ul.flexbox{
  justify-content: space-between;
  align-items: flex-start;
}
section#member ul.flexbox > li{ width: 444px;}
section#member ul.flexbox > li:first-child{ margin-right: 10px;}
section#member ul.flexbox > li > p.name{ 
  font-size: 1.14rem;
  line-height: 170%;
  font-weight: bold;
  margin-top: 36px;
}
section#member ul.flexbox > li > p.name > span{
  display: block;
  font-size: 0.7rem;
  line-height: 150%;
  margin-top: 1px;
}
section#member ul.flexbox > li > p.self-intro{
  margin-top: 37px;
  line-height: 140%;
  letter-spacing: 0.1em;
  text-align: justify;
}


section#company{ padding: 103px 0 200px;}
section#company > dl{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-flow: wrap;
  margin: 80px auto 0;
  width: 570px;
}
section#company > dl > dt{ width: 24%;}
section#company > dl > dd{ width: 76%;}
section#company > dl > dt,
section#company > dl > dd{
  line-height: 216.23%;
  letter-spacing: 0.1em;
}

footer{
  background-color: #000;
  padding: 64px 0 22px;
}
footer p.logo{
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 2.28rem;
  line-height: 1.18em;
  letter-spacing: 0.05em;
  text-align: center;
  color: #FFFFFF;
}
footer ul.flexbox{
  justify-content: center;
  align-items: center;
  margin: 73px 0 82px;
}
footer ul > li{ margin-right: 27px;}
footer ul > li:last-child{ margin-right: 0;}
footer ul > li > a{ color: #fff;}
footer ul > li > a:hover,
footer ul > li > a:active,
footer ul > li > a:visited{ color: #fff; }
footer p.copyright{
  font-size: 10px;
  line-height: 216.23%;
  letter-spacing: 0.1em;
  color: #FFFFFF;
  text-align: center;
}

.s_target{ position: relative;}
.s_target img{
  opacity: 0;
  transition: opacity .3s ease-in;
}
.slidein_start.s_target img{ opacity: 1;}
.s_target::after{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: #c6c6c6;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(1,1);
  transform-origin: right top;
  z-index: 2;
}
.slidein_start{ position: relative;}

.s_target.slidein_start::after {
  animation: show02 .5s ease-in-out 0s forwards;
}

nav ul li a {
  position: relative;
  display: block;
  text-align: center;
  font-size: 12px;
  letter-spacing:0.3em;
}

nav ul li a:after {
  content: '';
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  box-shadow: none;
  border-radius: 50%;
}
/*
nav ul li a:hover:after { animation: ripple 1.5s ease;}
footer nav ul li a:hover:after {
  animation: ripple_f 1.5s ease;
}
*/

.slideOrder li{
  opacity: 0;
  transform: translateY(30px);
  transition: all 800ms ease 0s;
}
.slideOrder.start-slide li{
  opacity: 1;
  transform: translateY(0px);
}
.slideOrder.start-slide li:nth-child(2){ transition-delay: 0.3s;}

@keyframes ripple {
  0%{
    opacity:1;
    transform:scale(0.5);
    box-shadow: 0 0 0 1px rgba(0,0,0,0);
  }
  100%{
    opacity:0;
    transform:scale(4);
    box-shadow: 0 0 0 0.5px rgba(0,0,0,1);
  }
}

@keyframes ripple_f {
  0%{
    opacity:1;
    transform:scale(1);
    box-shadow: 0 0 0 1px rgba(255,255,255,0);
  }
  100%{
    opacity:0;
    transform:scale(4);
    box-shadow: 0 0 0 0.5px rgba(255,255,255,1);
  }
}

@keyframes show {
	0%{ transform: scale(0,1);}
	50%{ transform: scale(1,1);transform-origin: left top;}
	53%{ transform-origin: right top;}
	100%{ transform: scale(0,1);transform-origin: right top;}
}
@keyframes show02 {
  0%{ transform: scale(1,1);}
  30%{ transform: scale(1,1);}
	100%{ transform: scale(0,1);transform-origin: right top;}
}
@keyframes show_fv_t {
  0%{opacity: 0;}
	100%{ opacity: 1;}
}

@keyframes show_fv_t02 {
  0%{
    opacity: 0;
    transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  }
  100%{
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
}