@charset "UTF-8";
/*
header {
  background-color: #4285F4;
  background-image: url(../images/bg-blue.png);
  color: #fff;
  height: 180px;
  line-height: 180px;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  padding-top: 60px;
  font-weight: 200; }
  @media screen and (max-width: 480px) {
    header.double {
      line-height: 45px;
      font-size: 30px;
      font-weight: 500;
      padding: 15px 0px;
      margin-top: 60px;
      height: auto; } }
  @media screen and (max-width: 480px) {
    header {
      height: 90px;
      line-height: 90px;
      font-size: 30px;
      font-weight: 500; } }
*/
/* navigation */
/*
nav {
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 60px;
  background: rgba(255, 255, 255, 0.98);
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid #ddd;
  z-index: 1; }
  @media screen and (max-width: 850px) {
    nav.pc {
      display: none; } }
  @media screen and (max-width: 1480px) {
    nav {
      height: 50px; } }
  nav a {
    text-decoration: none; }
    nav a.link {
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      color: #09215D;
      line-height: 60px;
      height: 60px;
      padding: 0px 15px;
      font-size: 14px;
      font-weight: 600; }
      @media screen and (max-width: 1480px) {
        nav a.link {
          padding: 0px 10px;
          line-height: 50px;
          height: 50px; } }
      nav a.link:hover {
        background: #eee;
        font-weight: 600; }
  nav .logo {
    width: 190px;
    height: 60px;
    margin: 0px 0px 0px 10px;
    background-image: url(../images/logo-header.png);
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat; }
    @media screen and (max-width: 1480px) {
      nav .logo {
        width: 130px;
        height: 50px;
        margin-left: 0px;
        margin-right: 0px; } }
    @media screen and (max-width: 1000px) {
      nav .logo {
        width: 100px; } }
    nav .logo:hover {
      opacity: 0.8; }
  nav .menu {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1; }
    @media screen and (max-width: 1000px) {
      nav .menu a {
        font-size: 12px;
        padding: 0px 5px; } }
  nav .headerButton {
    background: #4573FE;
    width: 180px;
    padding-left: 10px;
    margin: 8px 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    line-height: 44px;
    text-align: center;
    color: #fff; }
    @media screen and (max-width: 1480px) {
      nav .headerButton {
        font-size: 14px;
        width: 130px;
        line-height: 35px;
        padding-left: 0px; } }
  @media screen and (max-width: 1480px) and (max-width: 1100px) {
    nav .headerButton {
      width: 95px;
      font-size: 12px;
      padding: 0px; } }
    nav .headerButton:hover {
      opacity: 0.8; }
    nav .headerButton.pink {
      background: #FE277D; }
  @media screen and (max-width: 1000px) {
    nav .side a {
      font-size: 12px;
      padding: 0px 5px; } }
  @media screen and (max-width: 800px) {
    nav .side {
      display: none; } }
*/
.sub-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 1px solid #ddd;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-bottom: 60px;
  background-color: #fff; }
  .sub-nav a.link.icon {
    padding: 0px 15px 0px 55px; }
    .sub-nav a.link.icon.no1:after, .sub-nav a.link.icon.no1.active:after {
      background-position: 0px 0px; }
    .sub-nav a.link.icon.no2:after, .sub-nav a.link.icon.no2.active:after {
      background-position: -34px 0px; }
    .sub-nav a.link.icon.no3:after, .sub-nav a.link.icon.no3.active:after {
      background-position: -68px 0px; }
    .sub-nav a.link.icon.no4:after, .sub-nav a.link.icon.no4.active:after {
      background-position: -102px 0px; }
    .sub-nav a.link.icon.whitepaper:after {
      background-position: 0px 0px; }
    .sub-nav a.link.icon.whitepaper.active:after {
      background-position: -34px 0px; }
    .sub-nav a.link.icon.template:after {
      background-position: -68px 0px; }
    .sub-nav a.link.icon.template.active:after {
      background-position: -102px 0px; }
    .sub-nav a.link.icon.knowledge:after {
      background-position: -136px 0px; }
    .sub-nav a.link.icon.knowledge.active:after {
      background-position: -170px 0px; }
    .sub-nav a.link.icon.whitepaper:after, .sub-nav a.link.icon.template:after, .sub-nav a.link.icon.knowledge:after {
      background-image: url(../images/icon-knowledge.svg); }
    .sub-nav a.link.icon.no1:after, .sub-nav a.link.icon.no2:after, .sub-nav a.link.icon.no3:after, .sub-nav a.link.icon.no4:after {
      background-image: url(../images/icon-numeric.svg); }
    .sub-nav a.link.icon.active.no1:after, .sub-nav a.link.icon.active.no2:after, .sub-nav a.link.icon.active.no3:after, .sub-nav a.link.icon.active.no4:after {
      background-image: url(../images/icon-numeric-colored.svg); }
    .sub-nav a.link.icon:after {
      position: absolute;
      width: 34px;
      height: 34px;
      top: 12.5px;
      left: 10px;
      background-size: auto 100%;
      content: ''; }
    .sub-nav a.link.icon.active:after {
      background-size: auto 100%; }
  .sub-nav a {
    text-decoration: none;
    margin: 0px 5px; }
    .sub-nav a.link {
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      color: #09215D;
      line-height: 60px;
      height: 60px;
      padding: 0px 15px 0px;
      font-size: 16px;
      font-weight: 300;
      border-bottom: 3px solid #fff;
      cursor: pointer;
      position: relative; }
      .sub-nav a.link.active {
        color: #4573FE;
        border-bottom: 3px solid #4573FE;
        font-weight: 600;
        cursor: normal; }
        .sub-nav a.link.active:hover {
          border-bottom: 3px solid #4573FE; }
      .sub-nav a.link:hover {
        background: #eee;
        border-bottom: 3px solid #eee; }
/*
nav.sp {
  display: none;
  height: 60px; }
  @media screen and (max-width: 850px) {
    nav.sp {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      top: 0px;
      left: 0px; } }
  @media screen and (max-width: 320px) {
    nav.sp {
      height: 50px; } }
  nav.sp .logo {
    width: 130px;
    height: 60px;
    background-size: 130px;
    background-position: left center; }
    @media screen and (max-width: 320px) {
      nav.sp .logo {
        width: 100px;
        height: 50px;
        background-size: 100px; } }
  nav.sp .side {
    font-size: 12px; }
    @media screen and (max-width: 700px) {
      nav.sp .side {
        display: none; } }
  nav.sp .headerButton {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 0px 5px;
    font-size: 14px;
    line-height: 45px;
    font-weight: bold; }
    @media screen and (max-width: 320px) {
      nav.sp .headerButton {
        font-size: 12px;
        line-height: 35px; } }
  nav.sp .header_menu_button {
    width: 60px;
    height: 60px;
    background-image: url(../images/menu.png);
    background-size: 60px 60px;
    position: relative; }
    @media screen and (max-width: 320px) {
      nav.sp .header_menu_button {
        width: 50px;
        height: 50px;
        background-size: 50px 50px; } }
    nav.sp .header_menu_button.active {
      background-image: url(../images/menu_close.png); }
    nav.sp .header_menu_button .header_menu_bg.active {
      position: fixed;
      top: 60px;
      left: 0px;
      width: 100%;
      height: calc(100vh - 50px);
      background-color: rgba(0, 0, 0, 0.3); }
      @media screen and (max-width: 320px) {
        nav.sp .header_menu_button .header_menu_bg.active {
          top: 50px; } }
  nav.sp .menu_area {
    position: fixed;
    top: 60px;
    left: 0;
    display: none;
    width: 100%; }
    @media screen and (max-width: 320px) {
      nav.sp .menu_area {
        top: 50px; } }
    nav.sp .menu_area.active {
      display: block; }
    nav.sp .menu_area .menu {
      background: #fff;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
      box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; }
      nav.sp .menu_area .menu .line {
        content: '';
        display: block;
        height: 5px;
        width: 100%;
        background-color: #ddd;
        -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1) inset;
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1) inset; }
      nav.sp .menu_area .menu .link {
        border-bottom: 1px solid #ddd;
        position: relative;
        padding-left: 20px;
        font-size: 16px; }
        nav.sp .menu_area .menu .link:after {
          position: absolute;
          content: '>';
          top: 0;
          right: 0;
          width: 30px;
          height: 40px;
          color: #888; }
*/
.sub-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 1px solid #ddd;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-bottom: 60px;
  background-color: #fff; }
  .sub-nav.sp {
    margin-bottom: 30px; }
    @media screen and (max-width: 480px) {
      .sub-nav.sp {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; } }
  .sub-nav a.link.icon {
    padding: 0px 15px 0px 55px; }
    .sub-nav a.link.icon.no1:after, .sub-nav a.link.icon.no1.active:after {
      background-position: 0px 0px; }
    .sub-nav a.link.icon.no2:after, .sub-nav a.link.icon.no2.active:after {
      background-position: -34px 0px; }
    .sub-nav a.link.icon.no3:after, .sub-nav a.link.icon.no3.active:after {
      background-position: -68px 0px; }
    .sub-nav a.link.icon.no4:after, .sub-nav a.link.icon.no4.active:after {
      background-position: -102px 0px; }
    .sub-nav a.link.icon.whitepaper:after {
      background-position: 0px 0px; }
    .sub-nav a.link.icon.whitepaper.active:after {
      background-position: -34px 0px; }
    .sub-nav a.link.icon.template:after {
      background-position: -68px 0px; }
    .sub-nav a.link.icon.template.active:after {
      background-position: -102px 0px; }
    .sub-nav a.link.icon.knowledge:after {
      background-position: -136px 0px; }
    .sub-nav a.link.icon.knowledge.active:after {
      background-position: -170px 0px; }
    .sub-nav a.link.icon.whitepaper:after, .sub-nav a.link.icon.template:after, .sub-nav a.link.icon.knowledge:after {
      background-image: url(../images/icon-knowledge.svg); }
    .sub-nav a.link.icon.no1:after, .sub-nav a.link.icon.no2:after, .sub-nav a.link.icon.no3:after, .sub-nav a.link.icon.no4:after {
      background-image: url(../images/icon-numeric.svg); }
    .sub-nav a.link.icon.active.no1:after, .sub-nav a.link.icon.active.no2:after, .sub-nav a.link.icon.active.no3:after, .sub-nav a.link.icon.active.no4:after {
      background-image: url(../images/icon-numeric-colored.svg); }
    .sub-nav a.link.icon.function:after, .sub-nav a.link.icon.function.active:after {
      background-image: url(../images/icon-function.svg); }
    .sub-nav a.link.icon.function.normal:after {
      background-position: 0px 0px; }
    .sub-nav a.link.icon.function.normal.active:after {
      background-position: -34px 0px; }
    .sub-nav a.link.icon.function.hop:after {
      background-position: -68px 0px; }
    .sub-nav a.link.icon.function.hop.active:after {
      background-position: -102px 0px; }
    .sub-nav a.link.icon.function.qlogic:after {
      background-position: -136px 0px; }
    .sub-nav a.link.icon.function.qlogic.active:after {
      background-position: -170px 0px; }
    .sub-nav a.link.icon.function.member:after {
      background-position: -204px 0px; }
    .sub-nav a.link.icon.function.member.active:after {
      background-position: -238px 0px; }
    .sub-nav a.link.icon:after {
      position: absolute;
      width: 34px;
      height: 34px;
      top: 12.5px;
      left: 10px;
      background-size: auto 100%;
      content: ''; }
    .sub-nav a.link.icon.active:after {
      background-size: auto 100%; }
  .sub-nav a {
    text-decoration: none;
    margin: 0px 5px; }
    .sub-nav a.link {
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      color: #09215D;
      line-height: 60px;
      height: 60px;
      padding: 0px 15px 0px;
      font-size: 16px;
      font-weight: 300;
      cursor: pointer;
      position: relative;
      border-bottom: 3px solid #fff; }
      @media screen and (max-width: 480px) {
        .sub-nav a.link {
          line-height: 50px;
          height: 50px;
          font-size: 14px;
          padding: 0px 5px; } }
      .sub-nav a.link.active {
        color: #4573FE;
        border-bottom: 3px solid #4573FE;
        font-weight: 600;
        cursor: normal; }
        .sub-nav a.link.active:hover {
          border-bottom: 3px solid #4573FE; }
      .sub-nav a.link:hover {
        background: #eee;
        border-bottom: 3px solid #eee; }

footer {
  display: block;
  border-top: 1px solid #ddd;
  font-size: 12px;
  color: #aaa;
  text-align: center;
  margin-top: 0px; }
  footer .logo-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 10px 0px; }
    footer .logo-area .twitter {
      display: none;
      width: 60px;
      height: 60px;
      background-size: 60px;
      background-image: url(../images/footer-twitter.png); }
    footer .logo-area .privacymark {
      display: none;
      width: 60px;
      height: 60px;
      background-size: 60px;
      background-image: url(../images/footer-pmark.png); }
  footer .link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
    @media screen and (max-width: 480px) {
      footer .link {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding: 0px 5px; } }
    footer .link a {
      color: #aaa;
      text-decoration: none; }
      footer .link a:hover {
        text-decoration: underline; }
    footer .link a + a {
      margin-left: 15px; }
  footer .copyright {
    font-family: Helvetica;
    margin-top: 10px;
    line-height: 30px;
    margin-bottom: 20px; }

    section#trial {
      padding: 20px auto; }
      @media screen and (max-width: 480px) {
        section#trial h3 {
          font-size: 20px; } }
      @media screen and (max-width: 480px) {
        section#trial a.button.large.round {
          width: 250px;
          height: 60px;
          padding: 0px;
          line-height: 60px;
          font-size: 20px; } }

          body.about.index section#trial.thin {
            background-color: #ecf2fd; }
            body.about.index section#trial.thin h3 {
              color: #09215D; }
          
          body.researcher {
            background-color: #F1FFEC;
            background-image: url(../images/bg-green.png); }
            body.researcher h1, body.researcher h2, body.researcher h3, body.researcher li {
              color: #113F00; }
            body.researcher p {
              color: #000; }
            body.researcher section#trial.thin {
              background-color: #deffd3; }
              body.researcher section#trial.thin h3 {
                color: #113F00; }
          
          body.monitor {
            background-color: #FFF7F2;
            background-image: url(../images/bg-orange.png); }
            body.monitor h1, body.monitor h3, body.monitor li {
              color: #842500; }
            body.monitor h2 {
              color: #000; }
            body.monitor section#trial.thin {
              background-color: #ffe7d9; }
              body.monitor section#trial.thin h3 {
                color: #842500; }
          
          body.costspeed, body.charge {
            background-color: #FFFDDE;
            background-image: url(../images/bg-yellow.png); }
            body.costspeed h1, body.costspeed h3, body.charge h1, body.charge h3 {
              color: #564200;
              text-shadow: 0px 1px 3px rgba(255, 255, 255, 0.4); }
            body.costspeed h2, body.charge h2 {
              color: #000; }
            body.costspeed section#trial.thin, body.charge section#trial.thin {
              background-color: #fffbc5; }
              body.costspeed section#trial.thin h3, body.charge section#trial.thin h3 {
                color: #564200; }

                section#trial {
                  width: 100%;
                  color: #fff;
                  background-color: #4285F4;
                  padding: 60px 0px; }
                  section#trial.thin {
                    background-color: rgba(0, 0, 0, 0.1);
                    -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1) inset;
                    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1) inset;
                    padding: 10px 0px 30px;
                    color: #555; }
                    @media screen and (max-width: 480px) {
                      section#trial.thin {
                        padding: 5px 0px 20px; } }
                    section#trial.thin h3 {
                      color: #555;
                      font-size: 24px;
                      margin: 10px 0px 20px; }
                      @media screen and (max-width: 480px) {
                        section#trial.thin h3 {
                          font-size: 20px;
                          margin: 10px 0px 10px; } }
                    section#trial.thin a.button.large.round {
                      line-height: 60px;
                      height: 60px;
                      font-size: 22px; }
                      @media screen and (max-width: 480px) {
                        section#trial.thin a.button.large.round {
                          line-height: 40px;
                          height: 40px;
                          font-size: 18px;
                          font-weight: bold; } }
                  

                    section#trial h3 {
                      color: #4285F4;
                      text-align: center;
                      font-weight: normal;
                      font-size: 30px;
                      line-height: 1.6;
                      margin-top: 60px; }
                      @media screen and (max-width: 1600px) {
                        section#trial h3 {
                          font-size: 26px; } }
                      @media screen and (max-width: 480px) {
                        section#trial h3 {
                          font-weight: 500;
                          font-size: 20px;
                          margin-top: 30px; } }

                          section#trial h3 {
                            color: #fff;
                            line-height: 40px;
                            margin: 0 0px 30px; }

                            section#trial a.button {
                              display: block;
                              background: #FE277D;
                              color: #fff;
                              font-size: 20px;
                              border-radius: 5px;
                              -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
                              box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
                              text-align: center;
                              cursor: pointer;
                              text-decoration: none; }
                              @media screen and (max-width: 480px) {
                                section#trial a.button {
                                  font-size: 16px; } }

                            section#trial a.button.large {
                              font-size: 24px;
                              width: 400px;
                              height: 90px;
                              line-height: 90px;
                              margin: 0 auto;
                              border-radius: 45px; }
                              @media screen and (max-width: 480px) {
                                section#trial a.button.large {
                                  width: 90%;
                                  font-size: 20px;
                                  height: 60px;
                                  line-height: 60px; } }
                              section#trial a.button:hover {
                              opacity: 0.8; }