@charset "UTF-8";
/* import */
/* view */
/*-- breakpoint --*/
/* color */
/* font */
/* easgin */
/* mixin */
*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  list-style: none;
  background-repeat: no-repeat;
  box-sizing: inherit;
  vertical-align: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  outline: none; }

body {
  font-family: noto-sans-cjk-jp, sans-serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: .01em;
  font-size: 20px;
  line-height: 1.75;
  color: #000;
  -webkit-text-size-adjust: 100%;
  vertical-align: baseline;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
  @media all and (max-width: 768px) {
    body {
      font-size: 18px; } }
  @media all and (max-width: 500px) {
    body {
      font-size: 14px; } }

a, a img, button {
  outline: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; }

button {
  background-color: transparent;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }

input, textarea {
  padding: 0;
  border: none;
  border-radius: 0;
  outline: none;
  background: none; }

input[type="text"]:focus, textarea:focus {
  outline: 0; }

input[type="submit"], input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer; }

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-weight: inherit; }

img, svg, video {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

a {
  text-decoration: none;
  -webkit-tap-highlight-color: transparent; }

a:hover, button:hover {
  outline: none; }

em, i {
  font-style: normal; }

a:disabled, button:disabled, input:disabled {
  pointer-events: none; }

hr {
  border: 0;
  display: block;
  margin: auto;
  height: 1px;
  max-width: 1000px; }

.header {
  position: relative;
  z-index: 1; }
  .header__logo {
    position: fixed;
    left: 2.92826%;
    top: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 168px;
    height: 152px;
    padding: 20px 25px 25px;
    background-color: #0050b9;
    background: -webkit-linear-gradient(45deg, transparent 15px, #0050b9 15px), -webkit-linear-gradient(135deg, transparent 15px, #0050b9 15px);
    background: linear-gradient(45deg, transparent 15px, #0050b9 15px), linear-gradient(315deg, transparent 15px, #0050b9 15px);
    background-position: bottom left, bottom right;
    background-size: 50% 100%;
    background-repeat: no-repeat;
    -webkit-transform: translateY(-101%);
    -ms-transform: translateY(-101%);
    transform: translateY(-101%);
    -webkit-transition: 200ms ease-out 0;
    transition: 200ms ease-out 0; }
    @media all and (max-width: 768px) {
      .header__logo {
        left: 5.33333%;
        width: 140px;
        height: 126px;
        padding: 15px 20px 20px; } }
    @media all and (max-width: 500px) {
      .header__logo {
        width: 122px;
        height: 110px;
        background: -webkit-linear-gradient(45deg, transparent 12px, #0050b9 12px), -webkit-linear-gradient(135deg, transparent 12px, #0050b9 12px);
        background: linear-gradient(45deg, transparent 12px, #0050b9 12px), linear-gradient(315deg, transparent 12px, #0050b9 12px);
        background-position: bottom left, bottom right;
        background-size: 50% 100%;
        background-repeat: no-repeat; } }
    .header__logo .hamaken {
      position: relative;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1; }
      .header__logo .hamaken img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
      .header__logo .hamaken:after {
        content: "";
        display: block;
        padding-top: 91.5%; }
    .wf-active body:not(.scene_000):not(.scene_001) .header__logo {
      -webkit-transition: 200ms ease-out 400ms;
      transition: 200ms ease-out 400ms;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
  .header__contact {
    font-family: 'Josefin Sans', noto-sans-cjk-jp, sans-serif;
    font-weight: 700;
    font-style: normal;
    position: fixed;
    top: 0;
    right: 0;
    width: 159px;
    height: 56px;
    padding-left: 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 20px;
    letter-spacing: 0.1em;
    line-height: 1;
    color: #ff6e00;
    background: -webkit-linear-gradient(45deg, transparent 15px, #fff 15px);
    background: linear-gradient(45deg, transparent 15px, #fff 15px);
    background-position: bottom left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-transform-origin: right top;
    -ms-transform-origin: right top;
    transform-origin: right top;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: 200ms ease-out;
    transition: 200ms ease-out; }
    .header__contact:hover {
      background: -webkit-linear-gradient(45deg, transparent 15px, #0050b9 15px);
      background: linear-gradient(45deg, transparent 15px, #0050b9 15px); }
    @media all and (max-width: 768px) {
      .header__contact {
        width: 136px;
        height: 46px;
        font-size: 18px; } }
    @media all and (max-width: 500px) {
      .header__contact {
        width: 124px;
        height: 42px;
        font-size: 16px;
        background: -webkit-linear-gradient(45deg, transparent 12px, #fff 12px);
        background: linear-gradient(45deg, transparent 12px, #fff 12px);
        background-position: bottom left;
        background-size: 100% 100%;
        background-repeat: no-repeat; } }
    .wf-active body:not(.scene_000) .header__contact {
      -webkit-transition: 200ms cubic-bezier(0.31, 0.005, 0.415, 1.6);
      transition: 200ms cubic-bezier(0.31, 0.005, 0.415, 1.6);
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1); }

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 0 30px 25px;
  color: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start; }
  @media all and (max-width: 768px) {
    .footer {
      padding: 0 20px 15px; } }
  @media all and (max-width: 500px) {
    .footer {
      padding: 0 15px 10px; } }
  .footer .counter {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    font-family: 'Josefin Sans', noto-sans-cjk-jp, sans-serif;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0.1em;
    vertical-align: middle;
    width: 170px;
    -webkit-transform: translateX(-150%);
    -ms-transform: translateX(-150%);
    transform: translateX(-150%);
    -webkit-transition: 400ms ease-out;
    transition: 400ms ease-out; }
    @media all and (max-width: 768px) {
      .footer .counter {
        width: 135px; } }
    @media all and (max-width: 500px) {
      .footer .counter {
        width: 120px; } }
    .footer .counter .max {
      font-size: 28px;
      margin-right: 10px;
      position: relative;
      width: 50px; }
      .footer .counter .max:after {
        content: "";
        display: block;
        width: 2px;
        height: 20px;
        border-radius: 2px;
        background-color: #fff;
        position: absolute;
        top: 2px;
        right: 0;
        -webkit-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
        transform: rotate(20deg);
        -webkit-transform-origin: top;
        -ms-transform-origin: top;
        transform-origin: top; }
      @media all and (max-width: 768px) {
        .footer .counter .max {
          font-size: 23px;
          width: 43px;
          margin-right: 7px; }
          .footer .counter .max:after {
            top: 0; } }
      @media all and (max-width: 500px) {
        .footer .counter .max {
          font-size: 19px;
          width: 35px;
          margin-right: 5px; }
          .footer .counter .max:after {
            height: 16px;
            top: 0; } }
    .footer .counter .current {
      line-height: 0.9;
      font-size: 70px; }
      @media all and (max-width: 768px) {
        .footer .counter .current {
          font-size: 55px; } }
      @media all and (max-width: 500px) {
        .footer .counter .current {
          font-size: 48px; } }
    .wf-active body:not(.scene_000) .footer .counter {
      -webkit-transition: 400ms cubic-bezier(0.31, 0.005, 0.415, 1.6) 400ms;
      transition: 400ms cubic-bezier(0.31, 0.005, 0.415, 1.6) 400ms;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0); }
  .footer__copyright {
    font-family: 'Josefin Sans', noto-sans-cjk-jp, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 12px;
    letter-spacing: 0.1em;
    line-height: 1.5;
    -webkit-transform: translateY(200%);
    -ms-transform: translateY(200%);
    transform: translateY(200%);
    -webkit-transition: 400ms ease-out;
    transition: 400ms ease-out; }
    @media all and (max-width: 768px) {
      .footer__copyright {
        font-size: 10px; } }
    @media all and (max-width: 500px) {
      .footer__copyright {
        display: none; } }
    .wf-active body:not(.scene_000) .footer__copyright {
      -webkit-transition: 400ms cubic-bezier(0.31, 0.005, 0.415, 1.6) 600ms;
      transition: 400ms cubic-bezier(0.31, 0.005, 0.415, 1.6) 600ms;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
  .footer__next {
    position: absolute;
    right: 0;
    bottom: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 62px;
    height: 62px;
    padding: 5px 0 0 5px;
    background: -webkit-linear-gradient(315deg, transparent 15px, #FFF 15px);
    background: linear-gradient(135deg, transparent 15px, #FFF 15px);
    background-position: top left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: 200ms ease-out;
    transition: 200ms ease-out; }
    .footer__next:hover {
      background: -webkit-linear-gradient(315deg, transparent 15px, #0050b9 15px);
      background: linear-gradient(135deg, transparent 15px, #0050b9 15px); }
    .footer__next img::-moz-selection {
      background-color: transparent; }
    .footer__next img::selection {
      background-color: transparent; }
    @media all and (max-width: 768px) {
      .footer__next {
        width: 54px;
        height: 54px;
        background: -webkit-linear-gradient(315deg, transparent 12px, #FFF 12px);
        background: linear-gradient(135deg, transparent 12px, #FFF 12px);
        background-position: top left;
        background-size: 100% 100%;
        background-repeat: no-repeat; }
        .footer__next:hover {
          background: -webkit-linear-gradient(315deg, transparent 12px, #0050b9 12px);
          background: linear-gradient(135deg, transparent 12px, #0050b9 12px); } }
    @media all and (max-width: 500px) {
      .footer__next {
        width: 50px;
        height: 50px; } }
    .footer__next .arrow {
      position: relative;
      width: 24px; }
      @media all and (max-width: 768px) {
        .footer__next .arrow {
          width: 20px; } }
      @media all and (max-width: 500px) {
        .footer__next .arrow {
          width: 18px; } }
      .footer__next .arrow img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
      .footer__next .arrow:after {
        content: "";
        display: block;
        padding-top: 140%; }
    .wf-active .footer__next {
      -webkit-transition: 200ms cubic-bezier(0.31, 0.005, 0.415, 1.6) 500ms;
      transition: 200ms cubic-bezier(0.31, 0.005, 0.415, 1.6) 500ms;
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1); }

.background {
  display: none; }

html {
  background-color: #ff6600;
  background-repeat: repeat;
  background-position: center top; }
  @media (max-width: 800px) {
    html {
      background-size: 40%;
      background-image: url(../img/background_min.png); } }
  @media (min-width: 801px) {
    html {
      background-size: 285px;
      background-image: url(../img/background.png); } }
  @media (min-width: 1101px) {
    html {
      background-size: 350px; } }

.stage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  /* --- screen切り替え --- */
  /* --- profile切り替え --- */ }
  .stage .debug {
    position: absolute;
    top: 10px;
    left: 50%;
    font-size: 16px;
    line-height: 1;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    color: #fff;
    background-color: #000;
    padding: 0.1em 0.3em 0.3em; }
  .stage__inner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 13.02083vh 7.32064vw 26.04167vh; }
    @media all and (max-width: 768px) {
      .stage__inner {
        padding: 8.9955vh 8vw 25.03748vh; } }
  .stage .screen {
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(45deg, transparent 30px, #FFF 30px), -webkit-linear-gradient(315deg, transparent 30px, #FFF 30px), -webkit-linear-gradient(225deg, transparent 30px, #FFF 30px), -webkit-linear-gradient(135deg, transparent 30px, #FFF 30px);
    background: linear-gradient(45deg, transparent 30px, #FFF 30px), linear-gradient(135deg, transparent 30px, #FFF 30px), linear-gradient(225deg, transparent 30px, #FFF 30px), linear-gradient(315deg, transparent 30px, #FFF 30px);
    background-position: bottom left, top left, top right, bottom right;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    -webkit-transition: -webkit-transform 250ms cubic-bezier(0.8, 0, 0.2, 1.2);
    transition: -webkit-transform 250ms cubic-bezier(0.8, 0, 0.2, 1.2);
    transition: transform 250ms cubic-bezier(0.8, 0, 0.2, 1.2);
    transition: transform 250ms cubic-bezier(0.8, 0, 0.2, 1.2), -webkit-transform 250ms cubic-bezier(0.8, 0, 0.2, 1.2);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateY(-100vh);
    -ms-transform: translateY(-100vh);
    transform: translateY(-100vh); }
    .stage .screen__width__js-target {
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      height: 1px;
      width: 90%;
      z-index: 99999;
      pointer-events: none; }
      @media (orientation: portrait) {
        .stage .screen__width__js-target {
          width: 50%; } }
    @media all and (max-width: 768px) {
      .stage .screen {
        background: -webkit-linear-gradient(45deg, transparent 15px, #FFF 15px), -webkit-linear-gradient(315deg, transparent 15px, #FFF 15px), -webkit-linear-gradient(225deg, transparent 15px, #FFF 15px), -webkit-linear-gradient(135deg, transparent 15px, #FFF 15px);
        background: linear-gradient(45deg, transparent 15px, #FFF 15px), linear-gradient(135deg, transparent 15px, #FFF 15px), linear-gradient(225deg, transparent 15px, #FFF 15px), linear-gradient(315deg, transparent 15px, #FFF 15px);
        background-position: bottom left, top left, top right, bottom right;
        background-size: 50% 50%;
        background-repeat: no-repeat; } }
    .scene_002 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_003 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_004 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_005 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_006 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_007 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_008 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_009 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_010 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_011 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_012 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_013 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_014 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_015 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_016 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_017 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_018 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_019 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_020 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_021 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_022 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_023 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_024 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_025 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_026 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_027 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_028 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_029 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_030 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_031 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_032 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_033 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_034 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_035 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_036 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_037 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_038 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_039 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_040 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_041 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_042 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_043 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_044 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .scene_045 .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
  .scene_profile .stage {
    z-index: 1; }
    .scene_profile .stage .screen {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }

.scene {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100vh;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  padding: 13.02083vh 7.32064vw 26.04167vh;
  visibility: hidden;
  /* --- 各scene演出 --- */
  /* --- scenes切り替え --- */ }
  @media all and (max-width: 768px) {
    .scene {
      padding: 8.9955vh 8vw 25.03748vh; } }
  .scene[data-scene="000"], .scene[data-scene="001"] {
    padding: 0;
    z-index: -1; }
  .scene_profile .stage .scene {
    visibility: hidden !important; }
  .scene img {
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    transform: scale(1, 0);
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transition: -webkit-transform 150ms cubic-bezier(0.8, 0, 0.2, 1.2) 100ms;
    transition: -webkit-transform 150ms cubic-bezier(0.8, 0, 0.2, 1.2) 100ms;
    transition: transform 150ms cubic-bezier(0.8, 0, 0.2, 1.2) 100ms;
    transition: transform 150ms cubic-bezier(0.8, 0, 0.2, 1.2) 100ms, -webkit-transform 150ms cubic-bezier(0.8, 0, 0.2, 1.2) 100ms; }
  .scene__title {
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    text-align: center; }
    @media all and (max-width: 768px) {
      .scene__title {
        margin-top: -8.9955vh; } }
    .scene__title .title {
      width: calc((1300 / 800 * 100vh) * 800 / 768);
      max-width: 100vw;
      margin-right: 5.12445vw; }
      @media all and (-ms-high-contrast: none) {
        .scene__title .title {
          height: 100vh; } }
      @media (orientation: portrait) {
        .scene__title .title {
          width: calc((375 / 580 * 100vh) * 580 / 667);
          margin-right: 0; } }
  .scene__inner {
    padding-bottom: 9.74513vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    height: 100%; }
  .scene__heading {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    text-align: center;
    margin: auto;
    height: 100%;
    padding-bottom: 9.74513vh; }
    @media all and (-ms-high-contrast: none) {
      .scene__heading {
        width: 100%;
        margin: 0; } }
    .scene__heading img {
      max-height: 50vh; }
      @media (orientation: portrait) {
        .scene__heading img {
          max-height: 55vh; } }
      @media (orientation: portrait) and (max-width: 500px) {
        .scene__heading img {
          max-height: 60vh; } }
    .scene__heading .heading {
      width: 100%;
      height: 100%; }
    @media (orientation: portrait) {
      .scene__heading {
        max-width: 100%; } }
  .scene__case {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    text-align: center;
    margin: auto;
    height: 100%;
    max-width: 38.7931%; }
    @media all and (-ms-high-contrast: none) {
      .scene__case {
        width: 100%;
        margin: 0; } }
    .scene__case img {
      max-height: 50vh; }
      @media (orientation: portrait) {
        .scene__case img {
          max-height: 55vh; } }
      @media (orientation: portrait) and (max-width: 500px) {
        .scene__case img {
          max-height: 60vh; } }
    @media all and (max-width: 1160px) {
      .scene__case {
        max-width: 58.18966%; } }
    .scene__case .fig {
      position: relative;
      margin: auto; }
      @media all and (-ms-high-contrast: none) {
        .scene__case .fig {
          margin: 0; } }
      .scene__case .fig .text {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 88.88889%;
        height: 100%; }
    @media (orientation: portrait) {
      .scene__case {
        max-width: 95.2381%; }
        .scene__case .fig .text {
          bottom: auto;
          top: 0;
          width: 100%;
          height: auto; } }
  .scene__about {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    text-align: center;
    margin: auto;
    height: 100%;
    height: auto;
    max-width: 22.41379%; }
    @media all and (-ms-high-contrast: none) {
      .scene__about {
        width: 100%;
        margin: 0; } }
    .scene__about img {
      max-height: 50vh; }
      @media (orientation: portrait) {
        .scene__about img {
          max-height: 55vh; } }
      @media (orientation: portrait) and (max-width: 500px) {
        .scene__about img {
          max-height: 60vh; } }
    @media all and (max-width: 1160px) {
      .scene__about {
        max-width: 33.62069%; } }
    @media (orientation: portrait) {
      .scene__about {
        max-width: 57.14286%; } }
  .scene__cause {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    text-align: center;
    margin: auto;
    height: 100%;
    max-width: 50.43103%; }
    @media all and (-ms-high-contrast: none) {
      .scene__cause {
        width: 100%;
        margin: 0; } }
    .scene__cause img {
      max-height: 50vh; }
      @media (orientation: portrait) {
        .scene__cause img {
          max-height: 55vh; } }
      @media (orientation: portrait) and (max-width: 500px) {
        .scene__cause img {
          max-height: 60vh; } }
    @media all and (max-width: 1160px) {
      .scene__cause {
        max-width: 75.64655%; } }
    .scene__cause .fig {
      position: relative;
      margin: auto; }
      @media all and (-ms-high-contrast: none) {
        .scene__cause .fig {
          margin: 0; } }
      .scene__cause .fig .text {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 68.37607%;
        height: 100%; }
    @media (orientation: portrait) {
      .scene__cause {
        max-width: 95.2381%; }
        .scene__cause .fig .text {
          bottom: auto;
          top: 0;
          width: 100%;
          height: auto; } }
  .scene__miss {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    text-align: center;
    margin: auto;
    height: 100%;
    padding-bottom: 9.74513vh; }
    @media all and (-ms-high-contrast: none) {
      .scene__miss {
        width: 100%;
        margin: 0; } }
    .scene__miss img {
      max-height: 50vh; }
      @media (orientation: portrait) {
        .scene__miss img {
          max-height: 55vh; } }
      @media (orientation: portrait) and (max-width: 500px) {
        .scene__miss img {
          max-height: 60vh; } }
    .scene__miss .miss {
      width: 100%;
      height: 100%; }
  .scene__supply {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    text-align: center;
    margin: auto;
    height: 100%;
    max-width: 68.96552%; }
    @media all and (-ms-high-contrast: none) {
      .scene__supply {
        width: 100%;
        margin: 0; } }
    .scene__supply img {
      max-height: 50vh; }
      @media (orientation: portrait) {
        .scene__supply img {
          max-height: 55vh; } }
      @media (orientation: portrait) and (max-width: 500px) {
        .scene__supply img {
          max-height: 60vh; } }
    @media all and (max-width: 1160px) {
      .scene__supply {
        max-width: none; } }
    .scene__supply .supply {
      width: 100%;
      height: 100%; }
  .scene__voice {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    text-align: center;
    margin: auto;
    height: 100%;
    height: auto; }
    @media all and (-ms-high-contrast: none) {
      .scene__voice {
        width: 100%;
        margin: 0; } }
    .scene__voice img {
      max-height: 50vh; }
      @media (orientation: portrait) {
        .scene__voice img {
          max-height: 55vh; } }
      @media (orientation: portrait) and (max-width: 500px) {
        .scene__voice img {
          max-height: 60vh; } }
    .scene__voice img {
      max-height: 40vh; }
    @media (orientation: portrait) {
      .scene__voice {
        max-width: 76.19048%; } }
  .scene__voice--content {
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    padding: 10.41667vh 3.87931% 0; }
    @media (orientation: portrait) {
      .scene__voice--content {
        padding: 9.74513vh 9.52381% 0; } }
    @media all and (max-width: 768px) {
      .scene__voice--content {
        padding: 80px 25px 0 30px; } }
    @media all and (max-width: 500px) {
      .scene__voice--content {
        padding: 65px 15px 0 20px; } }
    .scene__voice--content .scroll_inner p {
      color: #ff6e00; }
  .scene__btn {
    width: 340px;
    margin: auto; }
    @media all and (-ms-high-contrast: none) {
      .scene__btn {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        margin: 0; } }
    @media all and (max-width: 768px) {
      .scene__btn {
        width: 250px; } }
    @media all and (max-width: 500px) {
      .scene__btn {
        width: 172px; } }
  .scene__prefix {
    font-family: 'Josefin Sans', noto-sans-cjk-jp, sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #0050b9;
    font-size: 24px;
    line-height: 1;
    margin-bottom: 0.15em; }
  .scene__num {
    font-family: 'Josefin Sans', noto-sans-cjk-jp, sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #0050b9;
    font-size: 64px;
    line-height: 1;
    letter-spacing: 0.075em;
    margin-bottom: 0.15em; }
    .scene__num.num--about {
      font-size: 37px;
      margin-bottom: 0.25em; }
  .scene_000 .stage .scene[data-scene="000"] {
    visibility: visible; }
    .scene_000 .stage .scene[data-scene="000"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_001 .stage .scene[data-scene="001"] {
    visibility: visible; }
    .scene_001 .stage .scene[data-scene="001"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_002 .stage .scene[data-scene="002"] {
    visibility: visible; }
    .scene_002 .stage .scene[data-scene="002"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_003 .stage .scene[data-scene="003"] {
    visibility: visible; }
    .scene_003 .stage .scene[data-scene="003"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_004 .stage .scene[data-scene="004"] {
    visibility: visible; }
    .scene_004 .stage .scene[data-scene="004"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_005 .stage .scene[data-scene="005"] {
    visibility: visible; }
    .scene_005 .stage .scene[data-scene="005"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_006 .stage .scene[data-scene="006"] {
    visibility: visible; }
    .scene_006 .stage .scene[data-scene="006"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_007 .stage .scene[data-scene="007"] {
    visibility: visible; }
    .scene_007 .stage .scene[data-scene="007"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_008 .stage .scene[data-scene="008"] {
    visibility: visible; }
    .scene_008 .stage .scene[data-scene="008"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_009 .stage .scene[data-scene="009"] {
    visibility: visible; }
    .scene_009 .stage .scene[data-scene="009"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_010 .stage .scene[data-scene="010"] {
    visibility: visible; }
    .scene_010 .stage .scene[data-scene="010"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_011 .stage .scene[data-scene="011"] {
    visibility: visible; }
    .scene_011 .stage .scene[data-scene="011"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_012 .stage .scene[data-scene="012"] {
    visibility: visible; }
    .scene_012 .stage .scene[data-scene="012"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_013 .stage .scene[data-scene="013"] {
    visibility: visible; }
    .scene_013 .stage .scene[data-scene="013"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_014 .stage .scene[data-scene="014"] {
    visibility: visible; }
    .scene_014 .stage .scene[data-scene="014"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_015 .stage .scene[data-scene="015"] {
    visibility: visible; }
    .scene_015 .stage .scene[data-scene="015"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_016 .stage .scene[data-scene="016"] {
    visibility: visible; }
    .scene_016 .stage .scene[data-scene="016"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_017 .stage .scene[data-scene="017"] {
    visibility: visible; }
    .scene_017 .stage .scene[data-scene="017"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_018 .stage .scene[data-scene="018"] {
    visibility: visible; }
    .scene_018 .stage .scene[data-scene="018"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_019 .stage .scene[data-scene="019"] {
    visibility: visible; }
    .scene_019 .stage .scene[data-scene="019"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_020 .stage .scene[data-scene="020"] {
    visibility: visible; }
    .scene_020 .stage .scene[data-scene="020"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_021 .stage .scene[data-scene="021"] {
    visibility: visible; }
    .scene_021 .stage .scene[data-scene="021"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_022 .stage .scene[data-scene="022"] {
    visibility: visible; }
    .scene_022 .stage .scene[data-scene="022"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_023 .stage .scene[data-scene="023"] {
    visibility: visible; }
    .scene_023 .stage .scene[data-scene="023"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_024 .stage .scene[data-scene="024"] {
    visibility: visible; }
    .scene_024 .stage .scene[data-scene="024"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_025 .stage .scene[data-scene="025"] {
    visibility: visible; }
    .scene_025 .stage .scene[data-scene="025"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_026 .stage .scene[data-scene="026"] {
    visibility: visible; }
    .scene_026 .stage .scene[data-scene="026"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_027 .stage .scene[data-scene="027"] {
    visibility: visible; }
    .scene_027 .stage .scene[data-scene="027"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_028 .stage .scene[data-scene="028"] {
    visibility: visible; }
    .scene_028 .stage .scene[data-scene="028"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_029 .stage .scene[data-scene="029"] {
    visibility: visible; }
    .scene_029 .stage .scene[data-scene="029"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_030 .stage .scene[data-scene="030"] {
    visibility: visible; }
    .scene_030 .stage .scene[data-scene="030"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_031 .stage .scene[data-scene="031"] {
    visibility: visible; }
    .scene_031 .stage .scene[data-scene="031"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_032 .stage .scene[data-scene="032"] {
    visibility: visible; }
    .scene_032 .stage .scene[data-scene="032"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_033 .stage .scene[data-scene="033"] {
    visibility: visible; }
    .scene_033 .stage .scene[data-scene="033"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_034 .stage .scene[data-scene="034"] {
    visibility: visible; }
    .scene_034 .stage .scene[data-scene="034"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_035 .stage .scene[data-scene="035"] {
    visibility: visible; }
    .scene_035 .stage .scene[data-scene="035"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_036 .stage .scene[data-scene="036"] {
    visibility: visible; }
    .scene_036 .stage .scene[data-scene="036"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_037 .stage .scene[data-scene="037"] {
    visibility: visible; }
    .scene_037 .stage .scene[data-scene="037"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_038 .stage .scene[data-scene="038"] {
    visibility: visible; }
    .scene_038 .stage .scene[data-scene="038"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_039 .stage .scene[data-scene="039"] {
    visibility: visible; }
    .scene_039 .stage .scene[data-scene="039"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_040 .stage .scene[data-scene="040"] {
    visibility: visible; }
    .scene_040 .stage .scene[data-scene="040"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_041 .stage .scene[data-scene="041"] {
    visibility: visible; }
    .scene_041 .stage .scene[data-scene="041"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_042 .stage .scene[data-scene="042"] {
    visibility: visible; }
    .scene_042 .stage .scene[data-scene="042"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_043 .stage .scene[data-scene="043"] {
    visibility: visible; }
    .scene_043 .stage .scene[data-scene="043"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_044 .stage .scene[data-scene="044"] {
    visibility: visible; }
    .scene_044 .stage .scene[data-scene="044"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .stage .scene[data-scene="profile"]:before {
    content: "";
    display: block;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0;
    top: 0;
    z-index: -1;
    opacity: 0;
    -webkit-transition: opacity 750ms ease 50ms;
    transition: opacity 750ms ease 50ms; }
  .scene_profile .stage .scene[data-scene="profile"] {
    visibility: visible !important; }
    .scene_profile .stage .scene[data-scene="profile"]:before {
      opacity: 1; }
  .scene_001 .stage .scene[data-scene="000"] {
    visibility: visible; }
    .scene_001 .stage .scene[data-scene="000"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_006 .stage .scene[data-scene="005"] {
    visibility: visible; }
    .scene_006 .stage .scene[data-scene="005"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_011 .stage .scene[data-scene="010"] {
    visibility: visible; }
    .scene_011 .stage .scene[data-scene="010"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_013 .stage .scene[data-scene="012"] {
    visibility: visible; }
    .scene_013 .stage .scene[data-scene="012"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_015 .stage .scene[data-scene="014"] {
    visibility: visible; }
    .scene_015 .stage .scene[data-scene="014"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_017 .stage .scene[data-scene="016"] {
    visibility: visible; }
    .scene_017 .stage .scene[data-scene="016"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_019 .stage .scene[data-scene="018"] {
    visibility: visible; }
    .scene_019 .stage .scene[data-scene="018"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_021 .stage .scene[data-scene="020"] {
    visibility: visible; }
    .scene_021 .stage .scene[data-scene="020"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_023 .stage .scene[data-scene="022"] {
    visibility: visible; }
    .scene_023 .stage .scene[data-scene="022"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_025 .stage .scene[data-scene="024"] {
    visibility: visible; }
    .scene_025 .stage .scene[data-scene="024"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_027 .stage .scene[data-scene="026"] {
    visibility: visible; }
    .scene_027 .stage .scene[data-scene="026"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_029 .stage .scene[data-scene="028"] {
    visibility: visible; }
    .scene_029 .stage .scene[data-scene="028"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_031 .stage .scene[data-scene="030"] {
    visibility: visible; }
    .scene_031 .stage .scene[data-scene="030"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_033 .stage .scene[data-scene="032"] {
    visibility: visible; }
    .scene_033 .stage .scene[data-scene="032"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_035 .stage .scene[data-scene="034"] {
    visibility: visible; }
    .scene_035 .stage .scene[data-scene="034"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene_043 .stage .scene[data-scene="042"] {
    visibility: visible; }
    .scene_043 .stage .scene[data-scene="042"] img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
  .scene[data-scene="043"] {
    pointer-events: none; }

.scroll_area {
  -webkit-box-flex: 1;
  -webkit-flex: auto;
  -ms-flex: auto;
  flex: auto;
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translateZ(0px);
  transform: translateZ(0px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  margin-right: 50px; }
  @media all and (-ms-high-contrast: none) {
    .scroll_area {
      height: 40vh; } }
  @media all and (max-width: 768px) {
    .scroll_area {
      margin-right: 0; } }
  @media (orientation: portrait) {
    .scroll_area {
      margin-right: 0; } }
  .scroll_area::-webkit-scrollbar {
    background-color: #ebebeb;
    width: 10px; }
    @media all and (max-width: 768px) {
      .scroll_area::-webkit-scrollbar {
        width: 8px; } }
    @media all and (max-width: 500px) {
      .scroll_area::-webkit-scrollbar {
        width: 6px; } }
  .scroll_area::-webkit-scrollbar-track {
    background-color: #ebebeb; }
  .scroll_area::-webkit-scrollbar-thumb {
    background-color: #0050b9; }
  .scroll_area .scroll_inner {
    width: 710px;
    margin: auto;
    padding-left: 50px;
    color: #0050b9;
    font-weight: 700;
    text-align: justify;
    -webkit-font-feature-settings: 'palt';
    font-feature-settings: 'palt'; }
    .scroll_area .scroll_inner p {
      font-size: 20px;
      line-height: 2;
      letter-spacing: 0.075em; }
      @media all and (max-width: 500px) {
        .scroll_area .scroll_inner p {
          line-height: 1.8;
          letter-spacing: 0.05em; } }
    @media (orientation: portrait) {
      .scroll_area .scroll_inner {
        padding-left: 0; } }
    @media all and (max-width: 1160px) {
      .scroll_area .scroll_inner {
        width: calc(100% - 100px); } }
    @media all and (max-width: 1000px) {
      .scroll_area .scroll_inner p {
        font-size: 18px; } }
    @media all and (max-width: 768px) {
      .scroll_area .scroll_inner {
        width: calc(100% - 30px);
        padding-left: 20px;
        padding-right: 20px; }
        .scroll_area .scroll_inner p {
          font-size: 16px; } }
    @media all and (max-width: 500px) {
      .scroll_area .scroll_inner {
        width: calc(100% - 10px);
        padding-left: 5px;
        padding-right: 15px; }
        .scroll_area .scroll_inner p {
          font-size: 14px; } }
  .scroll_area.js-hamahashi .scroll_inner {
    position: relative; }
    .scroll_area.js-hamahashi .scroll_inner__first, .scroll_area.js-hamahashi .scroll_inner__last {
      position: absolute;
      left: 0;
      width: 100%;
      height: 300px;
      display: none;
      pointer-events: none; }
      .scene_profile .scroll_area.js-hamahashi .scroll_inner__first, .scene_profile .scroll_area.js-hamahashi .scroll_inner__last {
        display: block; }
    .scroll_area.js-hamahashi .scroll_inner__first {
      top: 0; }
    .scroll_area.js-hamahashi .scroll_inner__last {
      bottom: 0; }

.profile {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  max-height: 100%;
  padding: 10.41667vh 3.87931% 9.74513vh;
  position: relative; }
  @media (orientation: portrait) {
    .profile {
      padding: 9.74513vh 9.52381%; } }
  @media all and (max-width: 768px) {
    .profile {
      padding: 80px 25px 9.74513vh 30px; } }
  @media all and (max-width: 500px) {
    .profile {
      padding: 65px 15px 9.74513vh 20px; } }
  .profile__inner {
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    position: relative;
    display: none; }
    .scene_profile .profile__inner {
      display: block; }
  .profile__heading {
    text-align: center;
    max-width: 160px;
    line-height: 1;
    margin: 0 auto 1em; }
    @media all and (max-width: 768px) {
      .profile__heading {
        max-width: 130px; } }
    @media all and (max-width: 500px) {
      .profile__heading {
        max-width: 88px; } }
    .profile__heading img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
      @media all and (-ms-high-contrast: none) {
        .profile__heading img {
          width: auto;
          height: 100%; } }
  .profile__subheading {
    text-align: center;
    max-width: 405px;
    line-height: 1;
    margin: 1.5em auto; }
    @media all and (max-width: 768px) {
      .profile__subheading {
        max-width: 300px; } }
    @media all and (max-width: 500px) {
      .profile__subheading {
        max-width: 200px;
        margin: 3em auto; } }
    .profile__subheading img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1); }
      @media all and (-ms-high-contrast: none) {
        .profile__subheading img {
          width: auto;
          height: 100%; } }
    .profile__subheading.intro {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      height: 32.55208vh; }
      @media (orientation: portrait) {
        .profile__subheading.intro {
          height: 41.22939vh; } }
  .profile__item {
    text-align: center; }
    .profile__item + .profile__item {
      margin-top: 1.5em; }
      @media all and (max-width: 500px) {
        .profile__item + .profile__item {
          margin-top: 2em; } }
    .profile__item dt {
      max-width: 130px;
      margin: 0.25em auto;
      line-height: 1; }
      .profile__item dt:first-child {
        margin-top: 0; }
      .profile__item dt:last-child {
        margin-bottom: 0; }
      @media all and (max-width: 768px) {
        .profile__item dt {
          max-width: 115px; } }
      @media all and (max-width: 500px) {
        .profile__item dt {
          max-width: 100px; } }
      .profile__item dt img {
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        transform: scale(1, 1); }
        @media all and (-ms-high-contrast: none) {
          .profile__item dt img {
            width: auto;
            height: 100%; } }
    .profile__item dd p > span {
      display: inline-block; }
    .profile__item .min-md {
      display: none; }
      @media all and (min-width: 769px) {
        .profile__item .min-md {
          display: inline; } }
  .profile__ph {
    text-align: center;
    margin: 12.21889vh auto; }
    @media (orientation: portrait) {
      .profile__ph {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        height: 48.87556vh;
        margin: 12.21889vh 0 0; } }
    .profile__ph img {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1);
      max-height: 32.8125vh; }
  .profile__btn {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    height: 41.01562vh; }
    @media (orientation: portrait) {
      .profile__btn {
        height: 48.87556vh; } }
    .profile__btn .btn {
      -webkit-box-flex: 1;
      -webkit-flex: auto;
      -ms-flex: auto;
      flex: auto;
      width: 340px;
      margin: auto; }
      @media all and (max-width: 768px) {
        .profile__btn .btn {
          width: 250px; } }
      @media all and (max-width: 500px) {
        .profile__btn .btn {
          width: 172px; } }
  .profile--close {
    width: 4.6875vh;
    height: 4.6875vh;
    max-width: 36px;
    max-height: 36px;
    background-image: url(../img/close.png);
    background-size: contain;
    position: absolute;
    top: 3.90625vh;
    right: calc(50px + (45 / 1160 * 100%) - ((11.5 / 768) * 100vh));
    cursor: pointer;
    -webkit-tap-highlight-color: transparent; }
    @media all and (max-width: 768px) {
      .profile--close {
        width: 30px;
        height: 30px;
        top: 2.60417vh;
        right: 25px; } }
    @media all and (max-width: 500px) {
      .profile--close {
        width: 24px;
        height: 24px;
        top: 20px;
        right: 15px; } }

.hamahashi {
  position: absolute;
  position: fixed;
  right: 0;
  bottom: 0;
  width: 43.61979vh;
  height: 43.61979vh;
  /* --- profile切り替え --- */ }
  @media (orientation: portrait) {
    .hamahashi {
      width: 33.73313vh;
      height: 33.73313vh; } }
  .hamahashi svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  .hamahashi:after {
    content: "";
    display: block;
    padding-top: 100%; }
  .scene_profile .hamahashi {
    z-index: 1; }
    .scene_profile .hamahashi .talk {
      visibility: hidden !important; }
  .hamahashi__walking {
    visibility: hidden;
    position: absolute;
    top: 9%;
    left: 0;
    width: 100%;
    height: 90%;
    -webkit-transform: translateX(-10%) rotateY(0);
    transform: translateX(-10%) rotateY(0); }
    .go .hamahashi__walking {
      visibility: visible; }
    .turn-right .hamahashi__walking {
      -webkit-transform: translateX(-10%) rotateY(180deg);
      transform: translateX(-10%) rotateY(180deg); }
  .turn-right .hamahashi-svg {
    -webkit-transform: translateX(-20%) rotateY(180deg);
    transform: translateX(-20%) rotateY(180deg);
    -webkit-backface-visibility: visible;
    backface-visibility: visible; }
  .hamahashi-svg__walking {
    visibility: hidden; }
  .hamahashi-svg__greeting1 {
    visibility: hidden; }
    .thanks .hamahashi-svg__greeting1,
    .hello .hamahashi-svg__greeting1 {
      visibility: visible; }
    .thanks .hamahashi-svg__greeting1 {
      -webkit-animation: takeoff2 1s steps(2, end) forwards;
      animation: takeoff2 1s steps(2, end) forwards; }
    .hello .hamahashi-svg__greeting1 {
      -webkit-animation: takeoff2 1s steps(2, end) forwards;
      animation: takeoff2 1s steps(2, end) forwards; }
  .hamahashi-svg__greeting2 {
    visibility: hidden; }
    .takeoff .hamahashi-svg__greeting2,
    .thanks .hamahashi-svg__greeting2,
    .hello .hamahashi-svg__greeting2 {
      visibility: visible; }
    .thanks .hamahashi-svg__greeting2 {
      -webkit-animation: takeoff3 1s steps(2, end) forwards;
      animation: takeoff3 1s steps(2, end) forwards; }
    .hello .hamahashi-svg__greeting2 {
      -webkit-animation: takeoff1 1s steps(2, end) forwards;
      animation: takeoff1 1s steps(2, end) forwards; }
  .hamahashi-svg__pause {
    visibility: hidden; }
    .pause .hamahashi-svg__pause,
    .thanks .hamahashi-svg__pause,
    .hello .hamahashi-svg__pause,
    .handsup .hamahashi-svg__pause {
      visibility: visible; }
    .thanks .hamahashi-svg__pause {
      -webkit-animation: takeoff1 1s steps(2, end) forwards;
      animation: takeoff1 1s steps(2, end) forwards; }
    .hello .hamahashi-svg__pause {
      -webkit-animation: takeoff3 1s steps(2, end) forwards;
      animation: takeoff3 1s steps(2, end) forwards; }
    .handsup .hamahashi-svg__pause {
      -webkit-animation: walk2 2s steps(1, end) forwards;
      animation: walk2 2s steps(1, end) forwards; }
  .hamahashi-svg__handsup {
    visibility: hidden; }
    .handsup .hamahashi-svg__handsup {
      visibility: visible;
      -webkit-animation: walk1 2s steps(1, end) forwards;
      animation: walk1 2s steps(1, end) forwards; }
  .hamahashi__talk {
    position: fixed;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    pointer-events: none; }
    .hamahashi__talk:after {
      content: "";
      display: block;
      padding-top: 66.19718%; }
    @media (orientation: landscape) {
      .hamahashi__talk {
        bottom: 36%;
        width: 62.40234vh;
        height: 41.30859vh; } }
    @media (orientation: portrait) {
      .hamahashi__talk {
        bottom: 27.5%;
        width: 94.66667vw;
        height: 62.66667vw;
        max-width: 600px;
        max-height: 397.1831px; } }
    @media (orientation: portrait) and (max-width: 1000px) {
      .hamahashi__talk {
        max-width: 500px;
        max-height: 330.98592px; } }
    @media (orientation: portrait) and (max-width: 768px) {
      .hamahashi__talk {
        max-width: 450px;
        max-height: 297.88732px; } }
    @media (orientation: portrait) and (max-width: 500px) {
      .hamahashi__talk {
        max-width: none;
        max-height: none; } }
    .hamahashi__talk .talk {
      -webkit-animation: talk 4s ease-in-out infinite alternate;
      animation: talk 4s ease-in-out infinite alternate;
      -webkit-transform-origin: 125% 50%;
      -ms-transform-origin: 125% 50%;
      transform-origin: 125% 50%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      visibility: hidden; }
      .hamahashi__talk .talk img {
        max-height: 100%;
        -webkit-transform: scale(0, 0);
        -ms-transform: scale(0, 0);
        transform: scale(0, 0);
        -webkit-transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        -webkit-transition: -webkit-transform 300ms cubic-bezier(0.8, 0, 0.2, 1.2) 100ms;
        transition: -webkit-transform 300ms cubic-bezier(0.8, 0, 0.2, 1.2) 100ms;
        transition: transform 300ms cubic-bezier(0.8, 0, 0.2, 1.2) 100ms;
        transition: transform 300ms cubic-bezier(0.8, 0, 0.2, 1.2) 100ms, -webkit-transform 300ms cubic-bezier(0.8, 0, 0.2, 1.2) 100ms; }
  .hamahashi > .hamahashi__talk {
    position: absolute;
    left: 39%;
    bottom: 82%; }
  .hamahashi .switch--profile {
    position: absolute;
    top: 13%;
    left: 10%;
    width: 55%;
    height: 87%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent; }

/* --- talk切り替え --- */
.scene_006 [data-talk="001"] {
  visibility: visible; }
  .scene_006 [data-talk="001"] img {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1); }

.scene_011 [data-talk="002"] {
  visibility: visible; }
  .scene_011 [data-talk="002"] img {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1); }

.scene_013 [data-talk="003"] {
  visibility: visible; }
  .scene_013 [data-talk="003"] img {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1); }

.scene_015 [data-talk="004"] {
  visibility: visible; }
  .scene_015 [data-talk="004"] img {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1); }

.scene_017 [data-talk="005"] {
  visibility: visible; }
  .scene_017 [data-talk="005"] img {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1); }

.scene_019 [data-talk="006"] {
  visibility: visible; }
  .scene_019 [data-talk="006"] img {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1); }

.scene_021 [data-talk="007"] {
  visibility: visible; }
  .scene_021 [data-talk="007"] img {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1); }

.scene_023 [data-talk="008"] {
  visibility: visible; }
  .scene_023 [data-talk="008"] img {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1); }

.scene_025 [data-talk="009"] {
  visibility: visible; }
  .scene_025 [data-talk="009"] img {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1); }

.scene_027 [data-talk="010"] {
  visibility: visible; }
  .scene_027 [data-talk="010"] img {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1); }

.scene_029 [data-talk="011"] {
  visibility: visible; }
  .scene_029 [data-talk="011"] img {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1); }

.scene_031 [data-talk="012"] {
  visibility: visible; }
  .scene_031 [data-talk="012"] img {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1); }

.scene_033 [data-talk="013"] {
  visibility: visible; }
  .scene_033 [data-talk="013"] img {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1); }

.scene_035 [data-talk="014"] {
  visibility: visible; }
  .scene_035 [data-talk="014"] img {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1); }

.scene_043 [data-talk="015"] {
  visibility: visible; }
  .scene_043 [data-talk="015"] img {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1); }

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

@keyframes walk1 {
  0% {
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    opacity: 1; } }

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

@keyframes walk2 {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@-webkit-keyframes takeoff1 {
  0% {
    opacity: 1; }
  33% {
    opacity: 1; }
  33.1% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@keyframes takeoff1 {
  0% {
    opacity: 1; }
  33% {
    opacity: 1; }
  33.1% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@-webkit-keyframes takeoff2 {
  0% {
    opacity: 0; }
  33% {
    opacity: 0; }
  33.1% {
    opacity: 1; }
  66% {
    opacity: 1; }
  66.1% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@keyframes takeoff2 {
  0% {
    opacity: 0; }
  33% {
    opacity: 0; }
  33.1% {
    opacity: 1; }
  66% {
    opacity: 1; }
  66.1% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@-webkit-keyframes takeoff3 {
  0% {
    opacity: 0; }
  66% {
    opacity: 0; }
  66.1% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@keyframes takeoff3 {
  0% {
    opacity: 0; }
  66% {
    opacity: 0; }
  66.1% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@-webkit-keyframes talk {
  0% {
    -webkit-transform: translate3d(0, -2%, 0) rotate(-1deg);
    transform: translate3d(0, -2%, 0) rotate(-1deg); }
  25% {
    -webkit-transform: translate3d(0, 2%, 0) rotate(1deg);
    transform: translate3d(0, 2%, 0) rotate(1deg); }
  50% {
    -webkit-transform: translate3d(0, -2%, 0) rotate(-1deg);
    transform: translate3d(0, -2%, 0) rotate(-1deg); }
  75% {
    -webkit-transform: translate3d(0, 2%, 0) rotate(1deg);
    transform: translate3d(0, 2%, 0) rotate(1deg); }
  100% {
    -webkit-transform: translate3d(0, -2%, 0) rotate(-1deg);
    transform: translate3d(0, -2%, 0) rotate(-1deg); } }

@keyframes talk {
  0% {
    -webkit-transform: translate3d(0, -2%, 0) rotate(-1deg);
    transform: translate3d(0, -2%, 0) rotate(-1deg); }
  25% {
    -webkit-transform: translate3d(0, 2%, 0) rotate(1deg);
    transform: translate3d(0, 2%, 0) rotate(1deg); }
  50% {
    -webkit-transform: translate3d(0, -2%, 0) rotate(-1deg);
    transform: translate3d(0, -2%, 0) rotate(-1deg); }
  75% {
    -webkit-transform: translate3d(0, 2%, 0) rotate(1deg);
    transform: translate3d(0, 2%, 0) rotate(1deg); }
  100% {
    -webkit-transform: translate3d(0, -2%, 0) rotate(-1deg);
    transform: translate3d(0, -2%, 0) rotate(-1deg); } }

.scroller {
  position: relative;
  pointer-events: none;
  scroll-snap-type: mandatory;
  -webkit-scroll-snap-points-y: repeat(100px);
  scroll-snap-points-y: repeat(100px);
  -ms-scroll-snap-type: mandatory;
  -ms-scroll-snap-points-y: repeat(100px);
  -webkit-scroll-snap-type: mandatory;
  -webkit-scroll-snap-points-y: repeat(100vh);
  -webkit-scroll-snap-type: y mandatory;
  -ms-scroll-snap-type: y mandatory;
  scroll-snap-type: y mandatory; }
  .scroller__item {
    height: 100vh;
    scroll-snap-align: center;
    scroll-snap-stop: always; }
    @media (orientation: portrait) {
      .scroller__item {
        height: 50vh; } }
    .scroller__item--last {
      position: absolute;
      width: 100%;
      height: 1px;
      bottom: 0;
      left: 0; }

.btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0.45em 1em 0.25em 1em;
  -webkit-transition: color 300ms ease, background-color 300ms ease;
  transition: color 300ms ease, background-color 300ms ease;
  font-family: 'Josefin Sans', noto-sans-cjk-jp, sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0.1em;
  font-size: 32px;
  height: 100px; }
  @media all and (max-width: 768px) {
    .btn {
      font-size: 24px;
      height: 75px; } }
  @media all and (max-width: 500px) {
    .btn {
      font-size: 16px;
      height: 52px; } }
  .btn.orange {
    color: #fff;
    background: -webkit-linear-gradient(45deg, transparent 15px, #ff6e00 15px), -webkit-linear-gradient(315deg, transparent 15px, #ff6e00 15px), -webkit-linear-gradient(225deg, transparent 15px, #ff6e00 15px), -webkit-linear-gradient(135deg, transparent 15px, #ff6e00 15px);
    background: linear-gradient(45deg, transparent 15px, #ff6e00 15px), linear-gradient(135deg, transparent 15px, #ff6e00 15px), linear-gradient(225deg, transparent 15px, #ff6e00 15px), linear-gradient(315deg, transparent 15px, #ff6e00 15px);
    background-position: bottom left, top left, top right, bottom right;
    background-size: 50% 50%;
    background-repeat: no-repeat; }
    .btn.orange:hover {
      background: -webkit-linear-gradient(45deg, transparent 15px, #0050b9 15px), -webkit-linear-gradient(315deg, transparent 15px, #0050b9 15px), -webkit-linear-gradient(225deg, transparent 15px, #0050b9 15px), -webkit-linear-gradient(135deg, transparent 15px, #0050b9 15px);
      background: linear-gradient(45deg, transparent 15px, #0050b9 15px), linear-gradient(135deg, transparent 15px, #0050b9 15px), linear-gradient(225deg, transparent 15px, #0050b9 15px), linear-gradient(315deg, transparent 15px, #0050b9 15px);
      background-position: bottom left, top left, top right, bottom right;
      background-size: 50% 50%;
      background-repeat: no-repeat; }
    @media all and (max-width: 768px) {
      .btn.orange {
        background: -webkit-linear-gradient(45deg, transparent 12px, #ff6e00 12px), -webkit-linear-gradient(315deg, transparent 12px, #ff6e00 12px), -webkit-linear-gradient(225deg, transparent 12px, #ff6e00 12px), -webkit-linear-gradient(135deg, transparent 12px, #ff6e00 12px);
        background: linear-gradient(45deg, transparent 12px, #ff6e00 12px), linear-gradient(135deg, transparent 12px, #ff6e00 12px), linear-gradient(225deg, transparent 12px, #ff6e00 12px), linear-gradient(315deg, transparent 12px, #ff6e00 12px);
        background-position: bottom left, top left, top right, bottom right;
        background-size: 50% 50%;
        background-repeat: no-repeat; }
        .btn.orange:hover {
          background: -webkit-linear-gradient(45deg, transparent 12px, #0050b9 12px), -webkit-linear-gradient(315deg, transparent 12px, #0050b9 12px), -webkit-linear-gradient(225deg, transparent 12px, #0050b9 12px), -webkit-linear-gradient(135deg, transparent 12px, #0050b9 12px);
          background: linear-gradient(45deg, transparent 12px, #0050b9 12px), linear-gradient(135deg, transparent 12px, #0050b9 12px), linear-gradient(225deg, transparent 12px, #0050b9 12px), linear-gradient(315deg, transparent 12px, #0050b9 12px);
          background-position: bottom left, top left, top right, bottom right;
          background-size: 50% 50%;
          background-repeat: no-repeat; } }
    @media all and (max-width: 500px) {
      .btn.orange {
        background: -webkit-linear-gradient(45deg, transparent 7px, #ff6e00 7px), -webkit-linear-gradient(315deg, transparent 7px, #ff6e00 7px), -webkit-linear-gradient(225deg, transparent 7px, #ff6e00 7px), -webkit-linear-gradient(135deg, transparent 7px, #ff6e00 7px);
        background: linear-gradient(45deg, transparent 7px, #ff6e00 7px), linear-gradient(135deg, transparent 7px, #ff6e00 7px), linear-gradient(225deg, transparent 7px, #ff6e00 7px), linear-gradient(315deg, transparent 7px, #ff6e00 7px);
        background-position: bottom left, top left, top right, bottom right;
        background-size: 50% 50%;
        background-repeat: no-repeat; }
        .btn.orange:hover {
          background: -webkit-linear-gradient(45deg, transparent 7px, #0050b9 7px), -webkit-linear-gradient(315deg, transparent 7px, #0050b9 7px), -webkit-linear-gradient(225deg, transparent 7px, #0050b9 7px), -webkit-linear-gradient(135deg, transparent 7px, #0050b9 7px);
          background: linear-gradient(45deg, transparent 7px, #0050b9 7px), linear-gradient(135deg, transparent 7px, #0050b9 7px), linear-gradient(225deg, transparent 7px, #0050b9 7px), linear-gradient(315deg, transparent 7px, #0050b9 7px);
          background-position: bottom left, top left, top right, bottom right;
          background-size: 50% 50%;
          background-repeat: no-repeat; } }

@media (orientation: landscape) {
  .display--hor {
    display: inline-block; }
    .display--hor.inline {
      display: inline; } }

@media (orientation: portrait) {
  .display--hor {
    display: none; } }

@media (orientation: landscape) {
  .display--vrt {
    display: none; } }

@media (orientation: portrait) {
  .display--vrt {
    display: inline-block; }
    .display--vrt.inline {
      display: inline; } }

/*# sourceMappingURL=main_style.css.map */