@charset "utf-8";

.inview {
  opacity: 0;
  transform: translate(0, 60px);
  transition: 1s;
}
.fade {
  opacity: 1;
  transform: translate(0, 0);
}

/* header */
header {
  background: transparent;
  border-bottom: none;
}
/* header-scrolled */
header.scrolled {
  background: #fff;
  border-bottom: 1px solid #e3e3e4;
}
header.scrolled nav > #gnav {
}
header.scrolled nav > #gnav p a {
  color: #4f86c5;
}
header.scrolled nav > #gnav .nav-category a {
  color: #000;
}

/* mainvisual */
#mainvisual {
  width: 100%;
  height: 100vh;
  position: relative;
  top: 0;
  left: 0;
  z-index: 0;
}
#mainvisual .slide {
  width: 100%;
  height: 100%;
}
#mainvisual .slide > img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
}
#mainvisual .catchcopy {
  width: 100%;
  position: absolute;
  left: 0;
  top: 40%;
  margin: auto;
  z-index: 10;
}
#mainvisual .catchcopy h2 {
  color: #fff;
  text-align: center;
  letter-spacing: .1em;
}
#mainvisual .catchcopy h2 > span {
  display: block;
  letter-spacing: .04em;
}
#mainvisual .catchcopy a.arrow_down {
  text-indent: -9999px;
  text-decoration: none;
  display: block;
  margin: 5em auto 0;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

/* investors */
#investors {
  position: relative;
}
#investors #particles-js {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
#investors > .container {
  position: relative;
  z-index: 1;
}
#investors .flexbox .photobox {
  text-shadow: 0 0 5px #bccbdd,
               1px 1px 5px #bccbdd,
               -1px 1px 5px #bccbdd,
               1px -1px 5px #bccbdd;
}
#investors .flexbox .photobox h3 {
  line-height: 1.1;
  margin-bottom: .5em;
}
#investors .flexbox .photobox .btn {
  border-color: #000;
  color: #000;
  margin-top: 1em;
}
#investors .flexbox .photobox .btn::before {
  border-color: #000;
}
#investors .flexbox .navbox {
  background: rgba(3,81,167,.7);
  color: #fff;
}
#investors .flexbox .navbox .nav {
  border-bottom: 1px solid #fff;
}
#investors .flexbox .navbox h2 {
  margin-bottom: .5em;
}
#investors .flexbox .navbox h2 a {
  color: #fff;
  text-decoration: none;
}
#investors .flexbox .navbox .nav > li {
  border-top: 1px solid #fff;
}
#investors .flexbox .navbox .nav > li a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: .7em 0 .7em 1.2em;
  position: relative;
}
#investors .flexbox .navbox .nav > li a::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: rotate(-45deg);
  position: absolute;
  left: 0;
  top: 1.2em;
}

/* aboutus */
#aboutus {
  background: url("/e/images/bg_aboutus.jpg") no-repeat center center / cover;
  color: #fff;
  text-align: center;
}
#aboutus .btn {
  border-color: #fff;
  color: #fff;
}
#aboutus .btn::before {
  border-color: #fff;
}


/*-----------------------------------------------
  for Smartphone
-----------------------------------------------*/
@media only screen and (max-width: 640px) {
  article > section {
    padding: 30px 0;
  }
  article > section > .container > * + * {
    margin-top: 15px;
  }
  
  /* header */
  header {
    background: url("/e/common/images/logo_w.png") no-repeat 4% 13px / auto 40px;
  }
  header nav > h1 img:nth-of-type(1) {
    display: none;
  }
  header .spmenu > span {
    border-color: #fff;
  }
  /* header-scrolled */
  header.scrolled {
    background: #fff url("../common/images/logo.png") no-repeat 4% 13px / auto 40px;
  }
  header.scrolled .spmenu > span {
    border-color: #000;
  }
  
  /* mainvisual */
  #mainvisual .catchcopy h2 {
    font-size: 6.0rem;
  }
  #mainvisual .catchcopy h2 > span {
    font-size: 1.6rem;
  }
  #mainvisual .catchcopy a.arrow_down {
    width: 30px;
    height: 30px;
  }
  
  /* investors */
  #investors .flexbox .photobox {
    background: #bccbdd url("../images/investors_img_sp.jpg") no-repeat center top / cover;
    text-align: center;
    padding: calc(18.75rem + ((1vw - 4.8px) * 6.9444)) 4% 20px;
  }
  #investors .flexbox .photobox h3 {
    font-size: 2.7rem;
  }
  #investors .flexbox .navbox {
    padding: 20px 4%;
  }
  #investors .flexbox .navbox h2 {
    font-size: 1.8rem;
  }
  
  /* aboutus */
  #aboutus h2 {
    font-size: 2.7rem;
  }
  
	/* morecontents */
	#morecontents .flexbox.iconlist > a {
		margin-bottom: 1em;
	}
	#morecontents .flexbox.iconlist > a + a {
		margin-top: 0;
	}
	#morecontents .flexbox.iconlist a h4 {
		height: 2em;
	}
	#morecontents .flexbox.iconlist a:nth-of-type(n+3) h4 {
		height: 4.3em;
	}
	#morecontents .flexbox.iconlist a:nth-of-type(4) h4 {
		padding-top: 1.2em;
	}
	
}


/*-----------------------------------------------
  for Tablet & PC
-----------------------------------------------*/
@media only screen and (min-width: 641px), print {
  article > section {
    padding: 60px 0;
  }
  article > section > .container > * + * {
    margin-top: calc(1.5625rem + ((1vw - 4.8px) * 1.0417));
  }
  
  /* header */
  header nav > h1 img:nth-of-type(1) {
    display: block;
  }
  header nav > h1 img:nth-of-type(2) {
    display: none;
  }
  header nav > #gnav p a {
    color: #fff;
  }
  header nav > #gnav .nav-category li a {
    color: #fff;
  }
  header nav > #gnav .nav-category li a::after {
    background: #fff;
  }
  header nav > .nav-tools li a {
    background: transparent;
    border: 1px solid #fff;
  }
  header nav > .nav-tools li a:hover {
    background: rgba(0,0,0,.3);
  }
  header nav .nav-tools li a img:nth-of-type(1) {
    display: block;
  }
  header nav .nav-tools li a img:nth-of-type(2) {
    display: none;
  }
  /* header-scrolled */
  header.scrolled nav > h1 img:nth-of-type(1) {
    display: none;
  }
  header.scrolled nav > h1 img:nth-of-type(2) {
    display: block;
  }
  header.scrolled nav > #gnav .nav-category li a:hover::after {
    background: #4f86c5;
  }
  header.scrolled nav > .nav-tools li a {
    background: #f1f1f2;
    border: none;
  }
  header.scrolled nav > .nav-tools li a:hover {
    background: #E0E1E3;
  }
  header.scrolled nav .nav-tools li a img:nth-of-type(1) {
    display: none;
  }
  header.scrolled nav .nav-tools li a img:nth-of-type(2) {
    display: block;
  }
  
  /* mainvisual */
  #mainvisual .catchcopy h2 {
    font-size: 10.0rem;
  }
  #mainvisual .catchcopy h2 > span {
    font-size: 2.6rem;
  }
  #mainvisual .catchcopy a.arrow_down {
    width: 40px;
    height: 40px;
    transition: .5s;
  }
  #mainvisual .catchcopy a.arrow_down:hover {
    opacity: .5;
    transform: translate(0, 10px) rotate(45deg);
  }
  
  /* investors */
  #investors .flexbox .photobox {
    background: url("/e/images/investors_img.jpg") no-repeat center top / cover;
    -webkit-box-flex: 1;
	  -ms-flex: 1 1 65%;
    flex: 1 1 65%;
    -ms-flex-item-align: baseline;
	  align-self: baseline;
    padding: 400px 30% 30px 30px;
  }
  #investors .flexbox .photobox h3 {
    font-size: 3.2rem;
  }
  #investors .flexbox .navbox {
    -webkit-box-flex: 1;
	  -ms-flex: 1 1 35%;
    flex: 1 1 35%;
    padding: 30px;
  }
  #investors .flexbox .navbox h2 {
    font-size: 3.0rem;
  }
  #investors .flexbox .photobox .btn {
    width: 200px;
    line-height: 38px;
    font-size: 1.6rem;
    padding: 0 20px 0 35px;
  }
  #investors .flexbox .photobox .btn::before {
    width: 8px;
    height: 8px;
    top: calc(50% - 4px);
    left: 20px;
  }
  #investors .flexbox .photobox .btn:hover {
    text-shadow: none;
    background: rgba(0,0,0,.2);
  }
  #investors .flexbox .navbox .nav > li a {
    transition: .5s;
  }
  #investors .flexbox .navbox .nav > li a:hover {
    background: rgba(255,255,255,.15);
    padding-left: 1.6em;
  }
  #investors .flexbox .navbox .nav > li a::before {
    transition: .5s;
  }
  #investors .flexbox .navbox .nav > li a:hover::before {
    left: 10px;
  }
  
  /* aboutus */
  #aboutus h2 {
    font-size: 3.8rem;
  }
  #aboutus .btn:hover {
    background: rgba(0,0,0,.3);
  }
  
  
  
}