/****************************************************
 * MODULE
 */
/****************************************************
 * COMPONENT
 */
/****************************************************
 * STATE
 */
/****************************************************
 * STRUCTURE
 */
/****************************************************
 * STYLE
 */
.intro {
  padding-bottom: 300px; }
  @media screen and (max-width: 768px) {
    .intro {
      padding-bottom: 147px; } }

.scene {
  color: #fff; }
  .scene-nav {
    position: fixed;
    top: 50%;
    right: 30px;
    z-index: 100;
    -webkit-transform: translate(100px, -50%);
    -moz-transform: translate(100px, -50%);
    -ms-transform: translate(100px, -50%);
    -o-transform: translate(100px, -50%);
    transform: translate(100px, -50%);
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;
    -o-transition-duration: 0.6s;
    transition-duration: 0.6s;
    -webkit-transition-timing-function: cubic-bezier(0.28, 0.11, 0.32, 1);
    -moz-transition-timing-function: cubic-bezier(0.28, 0.11, 0.32, 1);
    -o-transition-timing-function: cubic-bezier(0.28, 0.11, 0.32, 1);
    transition-timing-function: cubic-bezier(0.28, 0.11, 0.32, 1); }
    @media screen and (max-width: 768px) {
      .scene-nav {
        display: none; } }
    .is-navs .scene-nav {
      -webkit-transform: translate(0, -50%);
      -moz-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
      -o-transform: translate(0, -50%);
      transform: translate(0, -50%); }
    .scene-nav ul {
      line-height: 1;
      font-size: 0.75em;
      font-size: 0.75rem;
      text-align: right; }
    .scene-nav li {
      padding: 25px 0;
      position: relative; }
      .scene-nav li:not(:last-child):after {
        display: block;
        background-color: #e6e7e8;
        width: 1px;
        height: 50px;
        position: absolute;
        right: 4px;
        bottom: -25px;
        content: ''; }
    .scene-nav a {
      display: block;
      height: 22px;
      color: #e6e7e8;
      font-size: 0.75em;
      font-size: 0.75rem;
      letter-spacing: 0.1em;
      position: relative; }
      .scene-nav a:after {
        display: block;
        background-color: #e6e7e8;
        width: 8px;
        height: 8px;
        position: absolute;
        top: 50%;
        right: 0;
        content: '';
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%; }
      .scene-nav a span {
        position: absolute;
        top: 50%;
        right: 20px;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%); }
      .scene-nav a.is-current {
        background-color: #c18259;
        color: #c18259;
        font-size: 0.875em;
        font-size: 0.875rem; }
        .scene-nav a.is-current:after {
          background-color: #c18259; }
  .scene__unit {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-attachment: fixed;
    height: 100vh;
    position: relative; }
    @media screen and (max-width: 768px) {
      .scene__unit {
        height: auto;
        padding: 76vw 40px 145px 50px; }
        .scene__unit:before {
          display: block;
          background-repeat: no-repeat;
          background-position: 50% 0;
          background-size: cover;
          height: 76vw;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          content: ''; } }
    .ipad .scene__unit {
      background-attachment: initial; }
    .scene__unit--1800 {
      background-image: url("../img/concept/img_scene-1800.jpg"); }
      @media screen and (max-width: 768px) {
        .scene__unit--1800 {
          background-image: none; }
          .scene__unit--1800:before {
            background-image: url("../img/concept/img_scene-1800@2x.jpg"); } }
    .scene__unit--2100 {
      background-image: url("../img/concept/img_scene-2100.jpg"); }
      @media screen and (max-width: 768px) {
        .scene__unit--2100 {
          background-image: none; }
          .scene__unit--2100:before {
            background-image: url("../img/concept/img_scene-2100@2x.jpg"); } }
    .scene__unit--0000 {
      background-image: url("../img/concept/img_scene-0000.jpg"); }
      @media screen and (max-width: 768px) {
        .scene__unit--0000 {
          background-image: none; }
          .scene__unit--0000:before {
            background-image: url("../img/concept/img_scene-0000@2x.jpg"); } }
    .scene__unit--0900 {
      background-image: url("../img/concept/img_scene-0900.jpg"); }
      @media screen and (max-width: 768px) {
        .scene__unit--0900 {
          background-image: none; }
          .scene__unit--0900:before {
            background-image: url("../img/concept/img_scene-0900@2x.jpg"); } }
    .scene__unit--1030 {
      background-image: url("../img/concept/img_scene-1030.jpg"); }
      @media screen and (max-width: 768px) {
        .scene__unit--1030 {
          background-image: none; }
          .scene__unit--1030:before {
            background-image: url("../img/concept/img_scene-1030@2x.jpg"); } }
    .scene__unit--1400 {
      background-image: url("../img/concept/img_scene-1400.jpg"); }
      @media screen and (max-width: 768px) {
        .scene__unit--1400 {
          background-image: none; }
          .scene__unit--1400:before {
            background-image: url("../img/concept/img_scene-1400@2x.jpg"); } }
    .scene__unit .time {
      font-size: 2.5em;
      font-size: 2.5rem;
      letter-spacing: 0.1em;
      line-height: 1;
      position: absolute;
      top: 73px;
      left: 80px;
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      -webkit-transform: translateY(50px);
      -moz-transform: translateY(50px);
      -ms-transform: translateY(50px);
      -o-transform: translateY(50px);
      transform: translateY(50px);
      -webkit-transition: all 0.9s cubic-bezier(0.28, 0.11, 0.32, 1);
      -webkit-transition-delay: 0.3s;
      -moz-transition: all 0.9s cubic-bezier(0.28, 0.11, 0.32, 1) 0.3s;
      -o-transition: all 0.9s cubic-bezier(0.28, 0.11, 0.32, 1) 0.3s;
      transition: all 0.9s cubic-bezier(0.28, 0.11, 0.32, 1) 0.3s; }
      @media screen and (max-width: 768px) {
        .scene__unit .time {
          padding-top: 62px;
          margin-bottom: 43px;
          font-size: 1.875em;
          font-size: 1.875rem;
          color: #c18259;
          position: static;
          -webkit-transition-delay: 0s;
          -moz-transition-delay: 0s;
          -o-transition-delay: 0s;
          transition-delay: 0s; } }
      .scene__unit .time.is-show {
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0); }
  .scene__txt {
    position: absolute;
    left: 80px;
    bottom: 66px;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -ms-transform: translateY(50px);
    -o-transform: translateY(50px);
    transform: translateY(50px);
    -webkit-transition: all 0.9s cubic-bezier(0.28, 0.11, 0.32, 1);
    -webkit-transition-delay: 0.6s;
    -moz-transition: all 0.9s cubic-bezier(0.28, 0.11, 0.32, 1) 0.6s;
    -o-transition: all 0.9s cubic-bezier(0.28, 0.11, 0.32, 1) 0.6s;
    transition: all 0.9s cubic-bezier(0.28, 0.11, 0.32, 1) 0.6s;
    text-align: justify;
    text-justify: inter-ideograph; }
    .ie .scene__txt, .edge .scene__txt {
      font-feature-settings: initial; }
    @media screen and (max-width: 768px) {
      .scene__txt {
        color: #c18259;
        position: static;
        -webkit-transition-delay: 0s;
        -moz-transition-delay: 0s;
        -o-transition-delay: 0s;
        transition-delay: 0s; } }
    .scene__txt.is-show {
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
      opacity: 1;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0); }
    .scene__txt .ttl {
      margin-bottom: 17px;
      font-size: 1.5em;
      font-size: 1.5rem;
      line-height: 1.58333;
      letter-spacing: 0.2em; }
      @media screen and (max-width: 768px) {
        .scene__txt .ttl {
          margin-bottom: 16px;
          font-size: 1.4375em;
          font-size: 1.4375rem;
          line-height: 1.43478; } }
    .scene__txt p {
      letter-spacing: 0.1em; }
      @media screen and (max-width: 768px) {
        .scene__txt p br {
          display: none; } }
    .scene__txt .ja {
      margin-bottom: 32px;
      font-size: 0.875em;
      font-size: 0.875rem;
      line-height: 1.71429; }
      @media screen and (max-width: 768px) {
        .scene__txt .ja {
          margin-bottom: 24px;
          font-size: 0.8125em;
          font-size: 0.8125rem;
          line-height: 1.61538; } }
    .scene__txt .en {
      letter-spacing: 0.1em; }
      .scene__txt .en dt {
        margin-bottom: 14px;
        font-size: 0.875em;
        font-size: 0.875rem;
        line-height: 1.42857; }
        @media screen and (max-width: 768px) {
          .scene__txt .en dt {
            margin-bottom: 11px;
            font-size: 0.75em;
            font-size: 0.75rem;
            line-height: 1.33333; } }
      .scene__txt .en dd {
        font-size: 0.75em;
        font-size: 0.75rem;
        line-height: 1.33333; }
        @media screen and (max-width: 768px) {
          .scene__txt .en dd {
            font-size: 0.6875em;
            font-size: 0.6875rem;
            line-height: 1.31818; } }
    .scene__txt .m-btn {
      margin-top: 54px; }
      @media screen and (max-width: 768px) {
        .scene__txt .m-btn {
          margin-top: 50px; } }