/* Scss Document */
html {
  width: 100%;
  margin: 0;
  padding: 0; }

html {
  font-size: 62.5%
  /* sets the base font to 10px for easier math */ }

body {
  font-size: 14px;
  font-size: 1.4rem
  /* sets the default sizing to make sure nothing is actually 10px */ }

img {
  vertical-align: bottom; }

.sp-hide {
  display: block; }

.pc-hide {
  display: none; }

body {
  color: #333;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  background: #eae8e8;
  font-weight: 100;
  font-family: 'Oswald', sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  overflow-x: hidden;
  letter-spacing: -0.01em;
  font-size: 1.5vw; }

a:hover img {
  opacity: 0.8;
  -webkit-transition: all ease-in 0.2s;
          transition: all ease-in 0.2s; }

section {
  margin: 0; }

.center {
  text-align: center;
  margin: 0 auto; }

.tRight {
  text-align: right; }

.tLeft {
  text-align: left; }

a:hover {
  color: #333; }

a {
  text-decoration: none; }

a:hover {
  text-decoration: underline; }

h1 {
  text-transform: uppercase;
  font-size: 5vw;
  font-weight: 400; }

h2 {
  font-weight: 200;
  letter-spacing: 0.08em;
  font-size: 100%;
  line-height: 1.6; }

.clear {
  clear: both; }

.pc-none {
  display: none; }

.sp-none {
  display: block; }

.inner {
  /*////////////////////////////max-width:1020px;*/
  margin: 0 auto; }

.row {
  padding: 0 10px;
  margin: 0 auto; }

section h1 {
  font-size: 5vw;
  font-weight: 400; }

.kana {
  font-size: 70% !important;
  margin-top: 2rem; }

.break {
  display: block;
  font-size: 6rem;
  border-bottom: 2px solid #442644;
  height: 1px;
  width: 10%;
  margin: 2rem 0 2rem; }

/*////////////////////////////*/
/*//////////////////////////// mainImage*/
#module-people-list {
  text-transform: uppercase;
  height: 100vh;
  min-height: 560px;
  width: 100%;
  background: #E83E53; }
  #module-people-list .row {
    padding: 0;
    height: 100vh;
    width: 100%; }
    #module-people-list .row .inner {
      position: relative;
      height: 100vh;
      width: 100%; }
      #module-people-list .row .inner p {
        width: 46.5625%; }
        #module-people-list .row .inner p img {
          width: 100%;
          height: auto; }
      #module-people-list .row .inner p#center {
        position: absolute;
        bottom: 0;
        -webkit-transform: translate(-50%, 0);
            -ms-transform: translate(-50%, 0);
                transform: translate(-50%, 0);
        left: 50%; }
      #module-people-list .row .inner p#right {
        position: absolute;
        top: 0;
        right: -10%;
        -moz-transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg); }
      #module-people-list .row .inner p#left {
        position: absolute;
        top: 0;
        -webkit-transform: translate(-10%, 0);
            -ms-transform: translate(-10%, 0);
                transform: translate(-10%, 0);
        left: -10%;
        -moz-transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg); }
      #module-people-list .row .inner #catchCopy {
        -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        /*//////////////////////////// margin-left:-25%;
         margin-top:-10%;*/
        position: absolute;
        top: 50%;
        left: 50%; }
      #module-people-list .row .inner strong {
        display: block;
        color: #fff;
        color: #fff !important;
        font-size: 1.7vw;
        font-weight: 100;
        line-height: 1.6;
        letter-spacing: 0.02em;
        text-align: center; }
      #module-people-list .row .inner h1 {
        color: #fff;
        font-size: 8.3vw !important;
        white-space: pre;
        font-weight: 400 !important;
        text-align: center;
        letter-spacing: -0.03em; }
        #module-people-list .row .inner h1 #c {
          margin-right: .3rem; }
        #module-people-list .row .inner h1 #e2 {
          margin-right: .1rem; }
        #module-people-list .row .inner h1 #g {
          margin-right: .1rem; }
        #module-people-list .row .inner h1 #i2 {
          margin-right: -0.1rem; }

/*//////////////////////////// banana */
#banana {
  background-size: 160px;
  overflow: hidden;
  padding: 10vw 0;
  position: relative;
  height: 100vh;
  background: #eae8e8; }
  #banana h1 {
    color: #442644;
    font-size: 5vw;
    text-align: center; }
  #banana .inner {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%); }
  #banana article {
    padding: 5% 4%;
    background: rgba(234, 232, 232, 0.9);
    border: 6px solid #381838;
    margin: 30px 20vw;
    text-align: justify;
    text-justify: distribute; }

#banana .people-element {
  letter-spacing: normal;
  display: inline-block;
  margin: 0;
  width: 100vw;
  -webkit-transition: opacity 2000ms ease 0s;
          transition: opacity 2000ms ease 0s; }

#banana img {
  margin-bottom: 0%; }

/*//////////////////////////// train */
#train {
  background: url(../img/ph_train.jpg) no-repeat;
  background-size: 100%;
  width: 100%;
  height: 0;
  padding-bottom: 65.20833%;
  background-position: center;
  position: relative; }
  #train h1 {
    color: #e6e3e3;
    margin-bottom: 50px; }
  #train article {
    position: absolute;
    top: 12%;
    left: 12%;
    left: 12vw;
    color: #eae8e8; }
    #train article p {
      width: 42.1875%;
      line-height: 1.6;
      font-size: 1.5vw;
      text-align: justify;
      text-justify: distribute; }

/*//////////////////////////// time */
#time {
  background: #eae8e8;
  padding-top: 5rem; }
  #time h1 {
    color: #442644;
    line-height: 1.4; }
  #time article {
    margin: 0 auto;
    text-align: justify;
    text-justify: distribute; }

#watch {
  width: 50%;
  height: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 63.33333%; }
  #watch img {
    width: 100%;
    height: auto;
    z-index: 100; }

#time .book-image-container {
  box-shadow: none;
  width: 100%;
  left: 0;
  bottom: 0; }

#perpleBox {
  width: 70.83333%;
  height: 73.95833%;
  background: #381838;
  display: block;
  position: absolute;
  bottom: 0;
  opacity: 0.9;
  left: 0%;
  z-index: 0;
  -webkit-transform: translate(0%, 100%);
      -ms-transform: translate(0%, 100%);
          transform: translate(0%, 100%);
  background-blend-mode: multiply; }

#greyBox {
  width: 62.5vw;
  /*////////////////////////////height: (1380px/ 1920px)*100%;*/
  background: #e6e3e3;
  display: block;
  position: absolute;
  bottom: 0;
  opacity: 1;
  left: 0%;
  z-index: -1;
  -webkit-transform: translate(0%, 100%);
      -ms-transform: translate(0%, 100%);
          transform: translate(0%, 100%);
  background-blend-mode: multiply;
  overflow: hidden;
  /*////////////////////////////border-top:6px solid #381838;
  border-bottom:6px solid #381838;
  border-right:6px solid #381838;*/
  box-sizing: content-box; }
  #greyBox span {
    font-size: 5vw;
    font-weight: 400;
    white-space: pre;
    line-height: 1;
    position: absolute;
    bottom: 0;
    left: 12vw; }

#time .col.col-feature-content {
  /*////////////////////////////    background-image: url(../img/bg_perple.png);*/
  background-repeat: repeat-x;
  background-position: bottom; }

.skillBox {
  background: #381838;
  color: #e6e3e3;
  padding: 4.16667rem 0 4.16667rem 4.16667rem;
  margin-top: 5.41667rem; }
  .skillBox h3 {
    font-size: 144%;
    margin-bottom: 2.5rem; }
  .skillBox a {
    font-size: 10px !important;
    color: #fff;
    text-decoration: underline; }
  .skillBox .gallery {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    margin-bottom: 5.41667rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; }
    .skillBox .gallery dl {
      width: 40%;
      text-align: right; }
      .skillBox .gallery dl dt {
        letter-spacing: 0.02em; }
    .skillBox .gallery figure {
      width: 55%;
      padding-left: 5%; }
      .skillBox .gallery figure img {
        width: 100%;
        height: auto; }
  .skillBox .jaTtl {
    font-size: 60% !important; }
  .skillBox .slash {
    /*//////////////////////////// padding:0 1rem;*/ }
  .skillBox .links {
    font-size: 12px !important;
    margin-bottom: 2em; }
  .skillBox .area {
    margin-top: 1rem; }
  .skillBox .area span {
    display: inline-block;
    color: #e6e3e3;
    padding: 0 .5rem;
    /*////////////////////////////font-size: 14px;*/
    font-size: 70%; }

#work {
  background: url(../img/mogmania.jpg) no-repeat;
  right: 10%;
  padding-bottom: 65.20833%;
  top: 8.33333%;
  background-position: 90%; }
  #work .inner {
    /*//////////////////////////// background: #E6394A;*/ }
    #work .inner .row {
      width: 83.33333%;
      margin: 0 auto;
      padding-top: 8.33333%;
      padding-bottom: 8.33333%; }
    #work .inner h1 {
      color: #e6e3e3; }
    #work .inner p {
      color: #eae8e8; }

#people-list {
  letter-spacing: -.40em;
  font-size: 0; }

/*//////////////////////////// future*/
#future {
  width: 100%;
  height: 0;
  padding-bottom: 41.66667%;
  margin-top: 15vh;
  background-position: center;
  position: relative;
  background: #eae8e8; }
  #future h1 {
    color: #442644;
    z-index: 100; }
  #future article {
    background: #eae8e8;
    color: #333;
    position: absolute;
    top: 12%;
    left: 9vw;
    color: #442644;
    z-index: 11; }
    #future article div {
      padding: 2vw 0 2vw 3vw; }
    #future article p {
      color: #333;
      width: 42.1875%;
      line-height: 1.6;
      font-size: 1.5vw;
      text-align: justify;
      text-justify: distribute; }

/*//////////////////////////// mogmania */
#mogmania {
  color: #e6e3e3;
  position: relative; }
  #mogmania .module {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #e83e53 url(../img/ph_mogmania.png) no-repeat;
    background-size: 44%;
    background-position: 100% bottom;
    padding-bottom: 2%;
    padding-top: 6%;
    background-blend-mode: multiply;
    -webkit-background-blend-mode: multiply;
    -moz-background-blend-mode: multiply; }
    #mogmania .module .kana {
      margin-bottom: 2rem; }
    #mogmania .module .inner {
      padding-left: 12%;
      padding-left: 12vw; }

#mogmania .image {
  margin-top: 15vh;
  text-align: right; }
  #mogmania .image img {
    width: 44%; }

/*////////////////////////////button*/
#mogmania .buttons {
  /*////////////////////////////  position: absolute;
  bottom:10%;
  left:0;*/
  display: table;
  height: 100%;
  width: 100%; }
  #mogmania .buttons * {
    box-sizing: inherit;
    -webkit-transition-property: all;
            transition-property: all;
    -webkit-transition-duration: .6s;
            transition-duration: .6s;
    -webkit-transition-timing-function: ease;
            transition-timing-function: ease; }
#mogmania .buttons .container {
  display: table-cell;
  vertical-align: middle;
  padding-left: 12%; }
#mogmania .buttons .btn {
  text-align: center;
  color: #e83e53;
  cursor: pointer;
  display: block;
  font-size: 75%;
  font-weight: 400;
  line-height: 45px;
  margin: 0 auto 2em;
  max-width: 160px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: middle;
  width: 100%; }
  @media (min-width: 400px) {
    #mogmania .buttons .btn {
      display: inline-block; }
      #mogmania .buttons .btn:nth-of-type(even) {
        margin-right: 0; } }
  #mogmania .buttons .btn:hover {
    text-decoration: none; }
#mogmania .buttons .btn-1 {
  background: #e6e3e3;
  font-weight: 100; }
  #mogmania .buttons .btn-1 svg {
    height: 45px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%; }
  #mogmania .buttons .btn-1 rect {
    fill: none;
    stroke: #e6e3e3;
    stroke-width: 2;
    stroke-dasharray: 422, 0; }
#mogmania .btn-1:hover {
  background: rgba(230, 227, 227, 0);
  letter-spacing: 1px;
  color: #e6e3e3; }
  #mogmania .btn-1:hover rect {
    stroke-width: 5;
    stroke-dasharray: 15, 310;
    stroke-dashoffset: 48;
    -webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
            transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); }

#shareWrap {
  position: relative; }

canvas {
  display: block;
  position: absolute;
  width: 79%;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%); }

/*/////////////////////////////////////////////////////////sp-style */
@media screen and (min-width: 320px) and (max-width: 768px) {
  .module-feature .col-feature-content {
    padding-bottom: 0; }

  #watch {
    width: 50%;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 63.33333%; }
    #watch img {
      width: 100%;
      height: auto;
      z-index: 100;
      max-width: 400px; }

  .sp-hide {
    display: none; }

  .pc-hide {
    display: block; }

  body {
    font-size: 4.8vw; }

  #train {
    height: auto;
    background-position: 74% 0;
    background-size: auto 100%;
    padding-bottom: 11Vh; }
    #train .row {
      padding: 0; }
    #train article {
      padding: 0 1.66667rem; }

  #train article p {
    font-size: 4.8vw;
    width: 100%;
    padding: 0; }

  #train article {
    position: static;
    padding-top: 10vh; }

  #banana article {
    font-size: 4.8vw;
    margin: 15px 5vw; }

  #time h1,
  #train h1,
  .firstView h1,
  #banana h1,
  #future h1,
  #mogmania h1 {
    font-size: 3rem !important;
    margin-bottom: 1rem; }

  #train h1,
  #banana h1 {
    line-height: 1.4; }

  #future {
    padding-top: 0;
    height: auto;
    background-size: auto 100%;
    padding-bottom: 7Vh; }

  #future article p {
    font-size: 4.8vw;
    width: 100%;
    padding: 0; }

  #future article {
    position: static;
    padding-top: 10vh; }

  #watch {
    width: 50%;
    height: 100%;
    position: relative !important;
    z-index: 10; }

  #perpleBox {
    height: 0;
    width: 81.25%;
    padding-bottom: 53.125%;
    display: block;
    position: absolute;
    z-index: 0;
    -webkit-transform: translate(10%, -30%);
        -ms-transform: translate(10%, -30%);
            transform: translate(10%, -30%); }

  #time .col-feature-bookimage {
    height: inherit !important; }
  #time article {
    margin: 0 auto;
    text-align: justify;
    text-justify: distribute; }
  #time .wrapper {
    /*////////////////////////////			padding:0 1.66667rem;
    */ }

  #module-people-list {
    margin-top: 5.45rem; }

  #identity {
    line-height: 5.5rem;
    font-size: 1.2rem; }

  #module-people-list .row .inner h1 {
    font-size: 4rem !important; }
    #module-people-list .row .inner h1 strong {
      font-size: 2vw !important; }

  #module-people-list .row .inner strong {
    font-size: 3vw !important; }

  #perpleBox {
    width: 70%;
    display: block;
    position: absolute;
    bottom: 0;
    padding-bottom: 45%;
    right: 0%;
    z-index: 0;
    -webkit-transform: translate(10%, -30%);
        -ms-transform: translate(10%, -30%);
            transform: translate(10%, -30%); }

  canvas {
    width: 80%;
    margin: 30px auto; }

  .skillBox {
    background: #381838;
    color: #e6e3e3;
    padding: 5.16667rem 0 2.16667rem 1.66667rem; }

  #future {
    margin-top: 0vh;
    margin-bottom: 5vh;
    padding-top: 5.41667rem; }
    #future .row {
      padding: 0; }
    #future article {
      padding: 0 1.66667rem; }
      #future article div {
        padding: 0; }

  #greyBox {
    display: none; }

  #mogmania inner {
    padding: 0 1.66667rem !important;
    position: relative;
    top: 0;
    left: 0; }

  #mogmania .module {
    background: #e83e53 url(../img/ph_mogmania.png) no-repeat;
    background-size: 68%;
    background-position: 150% 90%; }

  #mogmania .module .inner {
    padding: 0 1.66667rem !important; }

  #mogmania {
    padding-top: 0;
    background: #e83e53;
    background-size: 85%;
    background-position: bottom right;
    position: relative; }
    #mogmania .module {
      width: 100%;
      position: static;
      padding-top: 5.41667rem;
      padding-bottom: 3.5rem; }

  #mogmania .image {
    display: none; }

  #sp-mog-txt {
    padding: 0 1.66667rem !important; }

  #mogmania .buttons {
    position: static;
    margin: 0 auto;
    padding-left: 0; }

  #mogmania .buttons .container {
    padding-left: 0;
    text-align: center; } }
@media screen and (min-width: 601px) and (max-width: 768px) {
  body {
    font-size: 2vw; }

  #train {
    background-size: cover; }

  #train article {
    margin: 0 10%; }

  #train article p {
    font-size: 2vw;
    word-break: break-all; }

  #banana article {
    font-size: 2vw;
    margin: 15px 5vw; }

  #future article p {
    color: #333;
    font-size: 1.5vw;
    line-height: 1.6;
    text-align: justify;
    width: 100%; }

  #perpleBox {
    height: 0;
    width: 81.25%;
    padding-bottom: 53.125%;
    display: block;
    position: absolute;
    z-index: 0;
    -webkit-transform: translate(10%, -30%);
        -ms-transform: translate(10%, -30%);
            transform: translate(10%, -30%); } }
.clockWrap {
  margin-top: -80px; }