/*===============================================
 common
===============================================*/
html {
  font: 300 62.5% "Roboto", "AxisStd-Light", sans-serif;
  letter-spacing: 1px;
  -webkit-font-smoothing: antialiased; }

a {
  text-decoration: none; }

img {
  max-width: 100%;
  height: auto; }

* {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box; }

.cf {
  zoom: 1; }
  .cf:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    overflow: hidden; }

header {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  background: #fff; }

#menu_btn {
  display: block;
  position: fixed;
  z-index: 11;
  top: 8px;
  right: 5px;
  width: 42px;
  height: 42px;
  cursor: pointer; }

#menu_btn span {
  display: block;
  background: #5856d5;
  width: 24px;
  height: 2px;
  position: absolute;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s; }

#menu_btn span:first-child {
  top: 12px; }

#menu_btn span:nth-child(2) {
  margin-top: -1px;
  top: 50%; }

#menu_btn span:last-child {
  bottom: 12px; }

#menu_btn.active span:first-child {
  -webkit-transform: translateY(8px) rotate(45deg);
  -moz-transform: translateY(8px) rotate(45deg);
  -ms-transform: translateY(8px) rotate(45deg);
  transform: translateY(8px) rotate(45deg); }

#menu_btn.active span:nth-child(2) {
  opacity: 0; }

#menu_btn.active span:last-child {
  -webkit-transform: translateY(-8px) rotate(-45deg);
  -moz-transform: translateY(-8px) rotate(-45deg);
  -ms-transform: translateY(-8px) rotate(-45deg);
  transform: translateY(-8px) rotate(-45deg); }

h1 {
  line-height: 0; }

#menu {
  display: none;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  font-size: 15px;
  font-size: 1.5rem;
  text-align: center; }
  #menu ul {
    display: none;
    position: absolute;
    top: 50%;
    width: 100%;
    list-style: none; }
    #menu ul li {
      padding: 20px 0;
      line-height: 0; }
      #menu ul li a {
        color: #5856d5; }
      #menu ul li:first-child {
        padding-bottom: 40px; }
      #menu ul li:last-child {
        padding-top: 40px;
        color: #5856d5;
        font-weight: 700; }

#cover {
  background: url(../../img/hero.jpg) no-repeat -600px;
  background-size: cover; }

#secA {
  position: relative; }
  #secA .title {
    position: absolute;
    top: 50%;
    width: 100%; }
    #secA .title h2 {
      text-align: center;
      color: #fff;
      line-height: 1.5;
      font-family: "Roboto", "AxisStd-Regular", sans-serif;
      font-size: 18px;
      font-size: 1.8rem;
      font-weight: 500; }
      #secA .title h2 span {
        display: inline-block;
        padding-top: 10px; }
    #secA .title p {
      padding: 40px 6% 0;
      font-size: 11px;
      font-size: 1.1rem;
      line-height: 1.6;
      color: #fff;
      text-align: center; }
  #secA .scroll {
    position: absolute;
    bottom: 40px;
    left: 50%;
    margin-left: -15px;
    color: #fff; }
    #secA .scroll a {
      display: block;
      padding-bottom: 35px;
      color: #fff;
      background: url(../../img/arrow1.png) no-repeat bottom;
      background-size: 20px; }

#secB {
  position: relative;
  padding-top: 80px; }
  #secB .btnArea {
    width: 350px;
    margin: 0 auto;
    padding-bottom: 80px;
    text-align: center; }
    #secB .btnArea h3 {
      margin-bottom: 50px; }
      #secB .btnArea h3 img {
        width: 100px; }
    #secB .btnArea .here {
      margin-bottom: 30px;
      font-size: 14px;
      font-size: 1.4rem;
      color: #fff; }
    #secB .btnArea ul {
      list-style: none; }
      #secB .btnArea ul li {
        width: 40%;
        display: inline-block;
        padding: 0 10px; }
  #secB .mock {
    width: 200px;
    margin: 0 auto;
    line-height: 0; }

#secC {
  position: relative;
  background: #fff;
  padding: 80px 5%; }
  #secC .text h3 {
    margin-bottom: 30px;
    font-family: "Roboto", "AxisStd-Regular", sans-serif;
    font-size: 26px;
    font-size: 2.6rem;
    font-weight: 500;
    line-height: 1.5; }
  #secC .text p {
    font-size: 13px;
    font-size: 1.3rem;
    line-height: 1.8; }
  #secC #circle {
    position: relative;
    width: 319px;
    height: 319px;
    margin: 0 auto 80px;
    cursor: pointer;
    zoom: 0.85; }
    #secC #circle .base {
      position: absolute;
      left: 2px;
      top: 1px;
      width: 315px;
      height: 315px; }
    #secC #circle .icons {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: url(../../img/circle1.png) no-repeat;
      background-size: 319px;
      list-style: none; }
      #secC #circle .icons li {
        position: absolute;
        width: 36px;
        height: 36px;
        margin-left: -18px;
        margin-top: -18px;
        -webkit-transition: opacity 0.4s linear;
        transition: opacity 0.4s linear;
        opacity: 0; }
        #secC #circle .icons li.on {
          opacity: 1; }
        #secC #circle .icons li:nth-of-type(1) {
          left: 50%;
          top: 0; }
        #secC #circle .icons li:nth-of-type(2) {
          left: 235px;
          top: 24px; }
        #secC #circle .icons li:nth-of-type(3) {
          left: 288px;
          top: 78px; }
        #secC #circle .icons li:nth-of-type(4) {
          left: 100%;
          top: 50%; }
        #secC #circle .icons li:nth-of-type(5) {
          left: 288px;
          top: 235px; }
        #secC #circle .icons li:nth-of-type(6) {
          left: 235px;
          top: 288px; }
        #secC #circle .icons li:nth-of-type(7) {
          left: 50%;
          top: 100%; }
        #secC #circle .icons li:nth-of-type(8) {
          left: 78px;
          top: 288px; }
        #secC #circle .icons li:nth-of-type(9) {
          left: 24px;
          top: 235px; }
        #secC #circle .icons li:nth-of-type(10) {
          left: 0;
          top: 50%; }
        #secC #circle .icons li:nth-of-type(11) {
          left: 24px;
          top: 78px; }
        #secC #circle .icons li:nth-of-type(12) {
          left: 78px;
          top: 24px; }
    #secC #circle #slide {
      width: 215px;
      height: 215px;
      margin: 0 50px;
      padding-top: 80px;
      text-align: center; }
      #secC #circle #slide ul {
        position: relative;
        width: 100%;
        height: 100%;
        list-style: none; }
        #secC #circle #slide ul li {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%; }
          #secC #circle #slide ul li p {
            margin-bottom: 15px;
            font-size: 10px;
            font-size: 1.0rem; }
          #secC #circle #slide ul li img {
            margin-bottom: 20px; }
          #secC #circle #slide ul li h4 {
            font-size: 16px;
            font-size: 1.6rem;
            font-weight: 100;
            line-height: 1.5; }
    #secC #circle.played .icons li {
      -webkit-transition: -webkit-transform 0.2s ease-out;
      transition: transform 0.2s ease-out;
      -webkit-transform: scale(1);
      transform: scale(1);
      cursor: pointer; }
      #secC #circle.played .icons li.active {
        -webkit-transform: scale(1.3);
        transform: scale(1.3); }

.function .cover {
  position: relative; }
  .function .cover .text {
    position: absolute;
    top: 50%;
    width: 100%;
    padding: 0 5%;
    text-align: center; }
    .function .cover .text h3 {
      margin-bottom: 20px;
      font-family: "Roboto", "AxisStd-Regular", sans-serif;
      font-size: 26px;
      font-size: 2.6rem;
      font-weight: 500;
      line-height: 1.5; }
    .function .cover .text p {
      font-size: 13px;
      font-size: 1.3rem;
      line-height: 1.8; }

.function .in {
  position: relative;
  padding: 80px 5%;
  background: #fff; }
  .function .in dl {
    margin-bottom: 60px; }
    .function .in dl dt {
      margin-bottom: 20px;
      padding: 15px 0 15px 70px;
      font-family: "Roboto", "AxisStd-Regular", sans-serif;
      font-size: 26px;
      font-size: 2.6rem;
      font-weight: 500; }
    .function .in dl dd {
      font-size: 13px;
      font-size: 1.3rem;
      line-height: 1.8; }
      .function .in dl dd span {
        font-size: 10px;
        font-size: 1.0rem; }
      .function .in dl dd:nth-of-type(1) {
        margin-bottom: 50px; }
  .function .in .mock {
    text-align: center; }
    .function .in .mock li {
      display: inline-block;
      width: 45%;
      padding: 0 5%; }

#secD .cover {
  background: url(../../img/pic_function1.jpg) no-repeat top;
  background-size: cover; }
  #secD .cover .text h3 {
    color: #A897C8; }
  #secD .cover .text p {
    color: #fff; }

#secD .in dl dt {
  color: #A897C8; }
  #secD .in dl dt:nth-of-type(1) {
    background: url(../../img/ico_secD1.png) no-repeat left;
    background-size: 51px; }
  #secD .in dl dt:nth-of-type(2) {
    background: url(../../img/ico_secD2.png) no-repeat left;
    background-size: 51px; }

#secE {
  background: #fff; }
  #secE .cover {
    background: url(../../img/pic_function2.jpg) no-repeat center;
    background-size: cover; }
    #secE .cover .text h3 {
      color: #DF8992; }
  #secE .in dl dt {
    color: #DF8992; }
    #secE .in dl dt:nth-of-type(1) {
      background: url(../../img/ico_secE1.png) no-repeat left;
      background-size: 51px; }
    #secE .in dl dt:nth-of-type(2) {
      background: url(../../img/ico_secE2.png) no-repeat left;
      background-size: 51px; }
  #secE .in dl dd .negoro {
    color: #666;
    padding-top: 10px;
    font-size: 11x;
    font-size: 1.1rem; }
    #secE .in dl dd .negoro h4 {
      font-weight: 100; }

#secF .cover {
  background: url(../../img/pic_function3.jpg) no-repeat center;
  background-size: cover; }
  #secF .cover .text h3 {
    color: #D7C49F; }
  #secF .cover .text p {
    color: #fff; }

#secF .in dl dt {
  color: #D7C49F; }
  #secF .in dl dt:nth-of-type(1) {
    background: url(../../img/ico_secF1.png) no-repeat left;
    background-size: 51px; }
  #secF .in dl dt:nth-of-type(2) {
    background: url(../../img/ico_secF2.png) no-repeat left;
    background-size: 51px; }

#secG {
  padding: 70px 0 80px;
  background: #ddd;
  text-align: center; }
  #secG h3 {
    padding-bottom: 60px;
    font-family: "Roboto", "AxisStd-Regular", sans-serif;
    font-size: 26px;
    font-size: 2.6rem;
    font-weight: 500; }
  #secG ul li {
    display: inline-block;
    width: 40%;
    padding: 0 3% 30px;
    vertical-align: top; }
    #secG ul li p {
      padding-top: 20px;
      font-size: 11px;
      font-size: 1.1rem;
      line-height: 1.6; }

#secH {
  position: relative;
  background: url(../../img/pic_download.jpg) no-repeat center;
  background-size: cover; }
  #secH .text {
    position: absolute;
    top: 50%;
    width: 100%;
    padding: 0 5%;
    text-align: center; }
    #secH .text h3 {
      margin-bottom: 20px;
      font-size: 26px;
      font-size: 2.6rem;
      font-weight: 100;
      line-height: 1.6;
      color: #D7C49F; }
    #secH .text p {
      font-size: 13px;
      font-size: 1.3rem;
      line-height: 1.8;
      color: #fff; }

#secI {
  position: relative;
  background: #fff;
  padding-top: 80px; }
  #secI .mock {
    width: 230px;
    margin: 0 auto;
    padding-bottom: 80px; }
  #secI .btnArea {
    width: 350px;
    margin: 0 auto;
    padding-bottom: 80px;
    text-align: center; }
    #secI .btnArea h3 {
      margin-bottom: 80px; }
    #secI .btnArea ul {
      list-style: none; }
      #secI .btnArea ul li {
        width: 40%;
        display: inline-block;
        padding: 0 10px; }
    #secI .btnArea p {
      padding-top: 40px;
      font-size: 13px;
      font-size: 1.3rem; }

#footer {
  background: #333; }
  #footer ul {
    text-align: center;
    list-style: none;
    padding: 10px 0; }
    #footer ul li {
      display: inline-block;
      font-size: 11px;
      font-size: 1.1rem;
      border-right: 1px solid #fff; }
      #footer ul li a {
        display: block;
        padding: 3px 10px;
        color: #fff; }
      #footer ul li:last-child {
        border: inherit; }

.fadeIn1 {
  -webkit-animation: fadeIn1 2.5s ease-out forwards;
  -moz-animation: fadeIn1 2.5s ease-out forwards;
  animation: fadeIn1 2.5s ease-out forwards; }

.fadeIn2 {
  -webkit-animation: fadeIn1 3.5s ease-out forwards;
  -moz-animation: fadeIn1 3.5s ease-out forwards;
  animation: fadeIn1 3.5s ease-out forwards; }

.fadeOut1 {
  -webkit-animation: fadeOut1 1.5s ease-out forwards;
  -moz-animation: fadeOut1 1.5s ease-out forwards;
  animation: fadeOut1 1.5s ease-out forwards; }

.fadeInUp1 {
  -webkit-animation: fadeInUp1 1s ease-out forwards;
  -moz-animation: fadeInUp1 1s ease-out forwards;
  animation: fadeInUp1 1s ease-out forwards; }

@keyframes fadeIn1 {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes fadeIn1 {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-moz-keyframes fadeIn1 {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeOut1 {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-webkit-keyframes fadeOut1 {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-moz-keyframes fadeOut1 {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes fadeInUp1 {
  0% {
    opacity: 0;
    transform: translate(0px, 30px); }
  100% {
    opacity: 1;
    transform: translate(0px, 0px); } }

@-webkit-keyframes fadeInUp1 {
  0% {
    opacity: 0;
    -webkit-transform: translate(0px, 30px); }
  100% {
    opacity: 1;
    -webkit-transform: translate(0px, 0px); } }

@-moz-keyframes fadeInUp1 {
  0% {
    opacity: 0;
    transform: translate(0px, 30px); }
  100% {
    opacity: 1;
    transform: translate(0px, 0px); } }