@charset "UTF-8";
h1 {
  font-family: Futura, "Trebuchet MS", Arial, sans-serif;
  color: #E6E6E6;
  font-size: 115px; }

h2 {
  font-family: HiraginoSans-W6, Regular;
  font-size: 24px; }

h3 {
  font-family: HiraginoSans-W6;
  font-size: 16px; }

p, span, li, a {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  font-size: 1rem;
  font-weight: 500; }

body {
  margin: 0;
  width: 100%; }

* {
  word-break: break-all; }

a {
  text-decoration: none;
  color: white; }
  avisited {
    color: white; }

canvas.particles-js-canvas-el {
  position: absolute;
  top: 0;
  height: 622px !important; }

.sp-nav {
  display: none; }

.first-view-wrapper {
  background-image: url("../img/background@2x.png");
  background-size: cover;
  height: 622px;
  width: 100%; }

.first-view {
  width: 100%;
  height: 622px;
  position: relative;
  color: white; }
  .first-view .pc-menu {
    position: relative;
    z-index: 99;
    top: -10px;
    right: 10px; }
    .first-view .pc-menu li {
      margin: 10px; }
    .first-view .pc-menu img {
      height: 21px;
      position: relative;
      top: 5px; }
  .first-view .logo {
    height: 50px; }
  .first-view nav {
    padding: 34px 35px 0 46px;
    position: relative; }
  .first-view .mobile-menu {
    display: none; }
  .first-view .title {
    position: absolute;
    right: 0;
    bottom: 0; }
  .first-view .title-underline {
    width: 505px;
    margin-left: 5px; }
  .first-view h1 {
    color: #f9ce77;
    text-align: right;
    margin: 0;
    line-height: 100px;
    padding-top: 52px;
    letter-spacing: -5px; }
  .first-view .messages {
    padding-left: 130px;
    padding-top: 80px;
    position: relative; }
  .first-view p {
    text-align: left; }
  .first-view .msg1 {
    font-size: 24px;
    padding-top: 84px; }
  .first-view .msg2 {
    text-align: left;
    font-size: 40px;
    margin: 0;
    font-weight: bold; }
  .first-view .msg3 {
    font-size: 24px; }

ul {
  top: 34px;
  right: 50px;
  list-style: none;
  float: right; }
  ul li {
    display: inline-block;
    margin: 0 20px;
    font-size: 13px; }
    ul li a {
      position: inherit; }

.logo {
  width: 148px;
  height: 46px;
  object-fit: contain;
  top: 34px;
  left: 46px; }

.container1 {
  height: 600px;
  position: relative; }
  .container1 h1 {
    margin: 5% 0 0 0;
    position: relative;
    width: 80%;
    left: 20%; }

.content1 {
  height: 500px;
  display: grid;
  grid-template-columns: 50% 50%;
  color: #868686; }
  .content1 .messages {
    width: 80%;
    margin-left: auto;
    line-height: 30px; }
  .content1 h2 {
    position: relative;
    top: -93px;
    line-height: 50px; }
  .content1 p {
    position: relative;
    top: -65px;
    line-height: 40px; }
  .content1 .product-background-image {
    width: 80%;
    max-width: 700px; }

.container2 {
  height: 800px; }
  .container2 h1 {
    margin: 5% 0 0 0;
    width: 80%;
    left: 20%;
    position: relative;
    z-index: -1; }

.content2 {
  height: 440px;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 48% 10%;
  color: #868686; }
  .content2 .product {
    margin-left: auto;
    width: 80%; }
  .content2 .mock-pc {
    width: 100%;
    max-width: 750px; }
  .content2 .messages {
    width: 80%;
    line-height: 35px;
    position: relative;
    bottom: 73px;
    margin-left: 3%; }
  .content2 h2 {
    line-height: 46px;
    font-size: 1.3rem; }
  .content2 a {
    margin: 130px 15% 0 10%;
    width: 70%; }
  .content2 .button1 {
    width: 310px; }

.container3 {
  position: relative;
  height: 500px; }
  .container3 h1 {
    font-size: 40px;
    position: absolute;
    top: 33px;
    right: 15%;
    z-index: 10;
    writing-mode: vertical-rl; }

.content3 {
  height: 400px;
  position: relative; }
  .content3 .messages {
    background-color: #f3b701;
    height: 294px;
    margin-left: 80px;
    position: relative;
    color: white; }
    .content3 .messages h2 {
      position: absolute;
      top: 13px;
      left: 10%; }
    .content3 .messages p {
      position: absolute;
      top: 85px;
      left: 10%;
      width: 60%;
      line-height: 35px; }
    .content3 .messages .placeholder {
      top: 200px; }

.container4 {
  background-image: url("../img/community-background1.png");
  background-size: cover;
  position: relative; }
  .container4 .community-background2 {
    position: absolute;
    top: -43px;
    right: 10%; }
  .container4 .community-background3 {
    position: absolute;
    bottom: -50px;
    width: 70%; }
  .container4 h1 {
    font-size: 45px;
    position: relative;
    bottom: 67px;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    float: left;
    margin-left: 16%; }

.content4 {
  height: 500px;
  color: white; }
  .content4 a {
    text-decoration: underline; }
  .content4 .messages {
    width: 75%;
    display: block;
    top: 10%;
    line-height: 45px;
    margin: auto;
    position: relative; }
    .content4 .messages h2, .content4 .messages p {
      width: 80%;
      margin-left: auto; }
  .content4 .button2 {
    top: 100px;
    width: 70%;
    margin-left: 30%;
    position: relative; }
    .content4 .button2 span {
      position: absolute;
      left: 18%;
      top: 39%;
      font-size: 16px;
      font-weight: bold;
      color: #f3b701; }

.container5 {
  height: 1000px;
  padding-top: 200px;
  position: relative; }
  .container5 .tech-bg1 {
    position: absolute;
    top: 46%;
    left: 18%; }
  .container5 .tech-bg2 {
    position: absolute;
    left: 32%;
    top: 29%;
    height: 51%; }
  .container5 .sp-tech-bg {
    display: none; }
  .container5 h1 {
    margin: 0;
    position: relative;
    top: 12%;
    font-size: 85px;
    text-align: center;
    z-index: 10;
    width: 88%; }

.content5 {
  position: relative;
  height: 700px;
  color: white;
  display: grid;
  grid-template-columns: 40% 60%; }
  .content5 a {
    text-decoration: underline;
    color: white;
    font-size: 12px;
    position: relative;
    bottom: 31%;
    left: 43%; }
  .content5 .message-wrapper {
    background-color: #f3b701;
    height: 700px; }
    .content5 .message-wrapper .messages {
      width: 40%;
      margin-left: 28%;
      padding: 10%;
      line-height: 40px;
      top: 10%;
      position: relative; }
    .content5 .message-wrapper h2 {
      font-size: 25px; }
  .content5 .speakerdeck-embed-wrapper {
    position: absolute;
    top: 18%;
    right: 39%; }
  .content5 .speakerdeck-iframe {
    width: 600px;
    height: 340px; }

.container6 {
  position: relative; }
  .container6 .join-us-bg1 {
    position: absolute;
    z-index: -1;
    top: -7%;
    left: 30%; }
  .container6 .join-us-bg2 {
    position: absolute;
    z-index: -1;
    top: 30%;
    right: 18%; }
  .container6 .join-us-bg3 {
    position: absolute;
    z-index: -1;
    bottom: 23%;
    left: 23%; }
  .container6 .join-us-bg4 {
    position: absolute;
    z-index: -1;
    bottom: 27%;
    left: 40%; }
  .container6 .join-us-bg5 {
    position: absolute;
    z-index: -1;
    bottom: 14%;
    left: 47%; }
  .container6 h1 {
    text-align: center;
    padding-left: 10%;
    margin: 20% 0 0 0; }

.content6 {
  height: 500px;
  color: #868686;
  position: relative; }
  .content6 .messages {
    width: 60%;
    margin: auto;
    line-height: 58px; }
  .content6 .button6 {
    position: relative;
    left: 60%; }
  .content6 .button3 {
    position: absolute;
    left: 58%;
    top: 50%;
    z-index: 10;
    font-size: 16px;
    color: #f3b701; }

.container7 {
  position: relative;
  height: 800px;
  padding-top: 200px; }
  .container7 .news-bg {
    position: absolute;
    z-index: 1;
    top: 11%;
    right: 7%; }
  .container7 h1 {
    float: right;
    writing-mode: vertical-rl;
    position: relative;
    top: 14px;
    z-index: 10; }

.content7 {
  display: block;
  height: 700px;
  color: white; }
  .content7 .news {
    background-color: #f3b701;
    width: 85%; }
  .content7 .news-contents {
    display: block;
    width: 60%;
    padding: 5%;
    margin: auto; }
  .content7 .articles {
    display: grid;
    grid-template-columns: 35% 65%; }
  .content7 .border {
    border-bottom: 1px solid;
    border-top: 1px solid; }
  .content7 .news-thumbs {
    margin: auto 0; }

.footer-wrapper {
  background-image: url("../img/footer-background.png");
  background-size: cover;
  height: 246px;
  display: block;
  position: relative; }
  .footer-wrapper .logo-white {
    position: absolute;
    bottom: 25%;
    right: 5%; }
  .footer-wrapper .copyright {
    position: absolute;
    bottom: 0;
    right: 5%;
    color: white;
    margin-bottom: 20px; }
  .footer-wrapper .sns-links {
    position: absolute;
    top: 20%; }
    .footer-wrapper .sns-links li {
      margin: 5px; }
  .footer-wrapper .footer-links {
    position: absolute;
    text-align: center;
    width: 100%;
    top: 70%;
    right: 0; }
    .footer-wrapper .footer-links li {
      margin: 0;
      padding: 0 20px;
      border-right: 1px solid white; }
    .footer-wrapper .footer-links #far-right {
      border: none; }

@media screen and (min-width: 1400px) {
  p, span, li {
    font-size: 18px; }
  h2 {
    font-size: 26px; }
  .content2 {
    grid-template-columns: 56% 40%; }
    .content2 .messages {
      line-height: 60px; }
    .content2 a {
      margin: 260px 15% 0 3%; }
  .container4 h1 {
    position: relative;
    bottom: 92px; }
  .container4 h2 {
    font-size: 30px; }
  .container4 p, .container4 a {
    font-size: 22px; } }

@media screen and (max-width: 900px) and (min-width: 768px) {
  p, span, li, a {
    font-size: 13px; }
  .first-view nav {
    padding: 74px 10px 0 46px; }
  .first-view h1 {
    font-size: 100px; }
  .container1 h1 {
    font-size: 100px;
    width: unset;
    left: unset;
    text-align: center; }
  .content1 .product-background-image {
    margin-left: 40px; }
  .container2 h1 {
    font-size: 100px;
    text-align: center;
    width: unset;
    left: unset; }
  .container2 .content2 {
    grid-template-columns: 57% 40%; }
  .container2 .mock-pc {
    width: 380px; }
  .container2 .messages {
    line-height: 26px; }
  .container2 h2 {
    line-height: 36px;
    font-size: 21px; }
  .container2 .button1 {
    width: 260px; }
  .container2 a {
    margin: 90px 15% 0 3%; }
  .container5 h1 {
    font-size: 75px; }
  .content5 a {
    font-size: 10px; }
  .container7 h1 {
    margin-right: 40px; }
  .content7 .articles {
    display: grid;
    grid-template-columns: 40% 65%; } }

@media screen and (max-width: 767px) and (min-width: 441px) {
  #top-section {
    height: 900px; }
    #top-section h1 {
      padding-top: 9px;
      font-size: 64px;
      width: 60%;
      top: 249px; }
    #top-section .first-view .messages .title-underline {
      width: 288px; }
  #vision-section .product-background-image {
    margin-left: 0px;
    width: 80%;
    margin: auto; }
  #community-section .community-background3 {
    width: 85%; }
  #community-section .button2 {
    width: 85%;
    margin-left: auto;
    top: 53%; }
  #product-section .button1 {
    margin: 2% 0% 10% 30%;
    width: 40%; }
  .footer-wrapper .sns-links {
    top: 20%; }
  .footer-wrapper .logo .logo-white {
    top: 46%;
    left: 38%; }
  .speakerdeck-iframe {
    width: 420px !important; } }
@media screen and (max-width: 767px) {
  h1 {
    font-size: 56px; }
  h2 {
    font-size: 19px; }
  h3 {
    font-size: 16px; }
  p, span, li, a {
    font-size: 12px; }
  .sp-nav {
    display: block;
    position: relative;
    z-index: 99; }
    .sp-nav .logo {
      padding: 7%; }
    .sp-nav .mobile-menu {
      padding: 8%;
      float: right; }
  .pc-nav {
    display: none; }
  #nav-drawer {
    float: right;
    margin-top: 26px;
    margin-right: 23px; }
  .nav-unshown {
    display: none; }
  #nav-open {
    display: inline-block;
    width: 30px;
    height: 22px;
    vertical-align: middle; }
  #nav-open span:before {
    bottom: -8px; }
  #nav-open span:after {
    bottom: -16px; }
  #nav-close {
    display: none;
    /*はじめは隠しておく*/
    position: fixed;
    z-index: 99;
    top: 0;
    /*全体に広がるように*/
    right: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .3s ease-in-out; }
  .nav-unshown-button {
    display: none; }
  .nav-content-close-button {
    font-size: 16px;
    border: solid 3px #fff;
    width: 270px;
    display: inline;
    padding: 8px 20px;
    position: relative;
    top: 14px; }
  #nav-content {
    background: rgba(25, 25, 25, 0.5) url(../img/sp-menu-background.png) no-repeat center center;
    background-size: cover;
    overflow: auto;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999;
    /*最前面に*/
    width: 100%;
    /*右側に隙間を作る（閉じるカバーを表示）*/
    height: 100%;
    transition: .3s ease-in-out;
    /*滑らかに表示*/
    -webkit-transform: translateX(120%);
    transform: translateX(120%);
    /*右に隠しておく*/ }
  .nav-content-texts {
    text-align: right;
    margin-top: 35%;
    margin-right: 11vw;
    color: #fff; }
    .nav-content-texts h2 {
      font-family: Futura, "Trebuchet MS", Arial, sans-serif; }
    .nav-content-texts p {
      font-family: Futura-Dem, "Trebuchet MS", Arial, sans-serif; }
  .nav-content-texts__title {
    font-weight: bold; }
  .nav-content-texts__list-item {
    font-family: Futura-Dem, "Trebuchet MS", Arial, sans-serif;
    margin-top: 12px; }
  .nav-content-logo {
    bottom: 20px;
    position: absolute;
    width: 114px; }
  .nav-content-sns-links {
    position: absolute;
    bottom: 11px;
    right: 11vw;
    list-style: none; }
  .nav-content-sns-tw {
    margin-right: 14px; }
  #nav-input:checked ~ #nav-close {
    display: block;
    /*カバーを表示*/
    opacity: .5; }
  #nav-input:checked ~ .nav-unshown-button {
    display: block;
    /*CLOSEボタンを表示*/ }
  #nav-input:checked ~ #nav-content {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    /*中身を表示（右へスライド）*/
    box-shadow: 6px 0 25px rgba(0, 0, 0, 0.15); }
  .first-view-wrapper {
    height: 680px; }
    .first-view-wrapper h1 {
      padding-top: 0;
      letter-spacing: 2px;
      font-size: 75px;
      width: 80%;
      margin-left: auto;
      top: 70px;
      position: relative; }
    .first-view-wrapper .first-view {
      height: 615px; }
      .first-view-wrapper .first-view .title {
        bottom: 100px; }
      .first-view-wrapper .first-view .messages {
        position: relative;
        top: 7%;
        font-size: 20px;
        width: 80%;
        padding: 10%; }
        .first-view-wrapper .first-view .messages .msg1 {
          font-size: 22px;
          width: 94%; }
        .first-view-wrapper .first-view .messages .msg2 {
          font-size: 25px;
          letter-spacing: -2px; }
        .first-view-wrapper .first-view .messages .title-underline {
          width: 93%; }
  .container1 {
    height: 900px;
    padding-top: 90px;
    position: relative; }
    .container1 h1 {
      right: 0; }
  .content1 {
    display: flex;
    flex-direction: column; }
    .content1 .messages {
      width: 70%;
      margin: auto;
      order: 2; }
    .content1 h2 {
      top: 0; }
    .content1 p {
      top: 0px; }
    .content1 .product-background-image {
      margin-left: 0px;
      width: 100%;
      height: 219px; }
  .container2 {
    height: 1000px;
    position: relative; }
    .container2 h1 {
      width: 70%;
      margin-left: 30%;
      left: 0; }
    .container2 .product {
      width: 100%; }
    .container2 .mock-pc {
      width: 70%;
      margin: 20% 15% 0 15%; }
  .content2 {
    display: block; }
    .content2 .messages {
      width: 70%;
      margin: auto;
      position: unset; }
      .content2 .messages h2 {
        width: 70%;
        font-size: 20px;
        top: 10px;
        left: 15%;
        position: absolute; }
    .content2 a {
      margin: 0; }
    .content2 .button1 {
      margin: 10% 0% 10% 20%;
      width: 65%; }
  .container3 {
    height: 600px; }
    .container3 h1 {
      right: -6%;
      font-size: 60px;
      top: 23px; }
  .content3 {
    height: 420px; }
    .content3 .messages {
      height: 355px;
      margin-left: 0;
      margin-right: 15%;
      position: relative; }
      .content3 .messages h2 {
        top: 15px;
        left: 15%; }
      .content3 .messages p {
        top: 28%;
        left: 15%;
        width: 72%;
        line-height: 35px; }
      .content3 .messages .placeholder {
        top: 260px; }
    .content3 .partners {
      position: relative;
      top: -10%;
      left: 0;
      display: grid;
      grid-template-columns: 30% 30%;
      grid-template-rows: 60% 40%; }
      .content3 .partners li {
        margin: 10%; }
        .content3 .partners li img {
          width: 100%; }
  .container4 {
    height: 630px; }
    .container4 .community-background3 {
      width: 330px; }
    .container4 .community-background2 {
      right: 18%;
      width: 51px; }
    .container4 .messages {
      width: 90%;
      top: 11%;
      line-height: 36px; }
      .container4 .messages p {
        font-size: 11px; }
    .container4 .button2 {
      width: 85%;
      margin-left: auto;
      top: 23%; }
      .container4 .button2 span {
        left: 30%;
        top: 42%; }
  .container5 {
    display: block;
    padding-top: 40%;
    height: 1200px; }
    .container5 h1 {
      font-size: 38px;
      float: left;
      padding-left: 20px;
      top: 5%;
      position: relative;
      width: 84%; }
    .container5 .tech-bg1 {
      position: absolute;
      top: 13%;
      width: 65%;
      left: 20%; }
    .container5 .tech-bg2 {
      display: none; }
    .container5 .sp-tech-bg {
      position: absolute;
      left: 6%;
      top: 20%;
      height: 715px;
      display: block;
      width: 83%; }
  .content5 {
    width: 90%;
    margin-left: auto;
    display: flex;
    flex-direction: column; }
    .content5 .slide {
      order: 2;
      position: relative;
      bottom: 43%;
      right: 3%; }
    .content5 .speakerdeck-embed-wrapper {
      position: relative;
      top: 21%;
      right: 0; }
    .content5 .speakerdeck-iframe {
      width: 327px;
      height: 240px; }
    .content5 .message-wrapper {
      height: 770px; }
      .content5 .message-wrapper .messages {
        height: 900px;
        width: 70%;
        margin-right: 64px;
        margin-left: auto;
        padding: 0; }
        .content5 .message-wrapper .messages h2 {
          font-size: 18px; }
    .content5 a {
      color: white;
      bottom: -5%;
      position: absolute;
      left: 18%; }
  .container6 {
    height: 900px; }
    .container6 .join-us-bg1 {
      top: -15%;
      left: 35%; }
    .container6 .join-us-bg2 {
      top: 19%;
      right: 5%; }
    .container6 .join-us-bg3 {
      bottom: 23%;
      left: 12%; }
    .container6 .join-us-bg4 {
      bottom: 31%;
      left: 57%; }
    .container6 .join-us-bg5 {
      bottom: 23%;
      left: 78%; }
  .content6 .messages {
    width: 80%;
    line-height: 40px; }
    .content6 .messages h2 {
      font-size: 24px; }
  .content6 .button3 {
    top: 65%;
    left: 15%; }
  .container7 {
    height: 930px;
    padding-top: 100px; }
    .container7 .news-bg {
      top: -2%; }
    .container7 h1 {
      font-size: 40px; }
  .content7 .articles {
    display: block;
    padding-top: 30px; }
  footer {
    padding-top: 300px; }
  .footer-wrapper {
    background-image: url(../img/mb-footer-background.png);
    background-size: cover;
    height: 259px;
    display: block;
    position: relative; }
    .footer-wrapper .sns-links {
      width: 50%;
      left: -29px;
      position: relative; }
    .footer-wrapper .footer-links {
      top: 62%; }
    .footer-wrapper .logo-white {
      position: relative;
      top: 13%;
      left: 30%;
      height: 46px; }
    .footer-wrapper .copyright {
      bottom: -2%;
      right: 25%; } }

@media screen and (max-width: 374px) {
  .first-view-wrapper .title h1 {
    font-size: 70px;
    width: 90%; }
  .first-view-wrapper .first-view .messages {
    width: 85%;
    padding: 0;
    margin: auto;
    top: 14%; }
    .first-view-wrapper .first-view .messages .msg1 {
      font-size: 20px; }
    .first-view-wrapper .first-view .messages .msg2 {
      font-size: 22px; }
  .content2 .button1 {
    width: 80%;
    margin: 10% 0 10% 15%; }
  .container3 h1 {
    right: -10%; }
  .container3 .content3 .messages .placeholder {
    top: 280px; }
  .container4 .community-background3 {
    width: 85%; }
  .container4 .messages {
    line-height: 28px; }
  .container4 .button2 {
    padding: 0;
    width: 90%; }
    .container4 .button2 img {
      width: 250px; }
  .container5 h1 {
    font-size: 30px;
    top: 4%; }
  .container5 .tech-bg1 {
    top: 11%;
    width: 65%;
    left: 20%; }
  .container5 .sp-tech-bg {
    left: 6%;
    top: 11%;
    height: 715px;
    width: 83%; }
  .content5 .slide {
    bottom: 35%; }
  .content5 .message-wrapper .messages {
    margin-left: auto;
    margin-right: 50px; }
  .container6 h1 {
    font-size: 55px;
    padding-left: 0; }
  .container6 .join-us-bg1 {
    left: 25%; }
  .content6 {
    height: 1000px; }
    .content6 .button3 {
      top: 30%;
      height: 60px; }
  .footer-wrapper .sns-links {
    left: -12%; }
  .footer-wrapper .footer-links li {
    padding: 0 10px; }
    .footer-wrapper .footer-links li a {
      left: 0; }
  .footer-wrapper .logo-white {
    left: 22%; } }