@charset "UTF-8";
/*--------------------
共通設定
----------------------*/
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom; }

a {
  text-decoration: none;
  transition: .4s;
  color: #ffffff; }
  a:hover {
    text-decoration: none;
    color: #ffffff; }
  a.disabled {
    pointer-events: none;
    text-decoration: none; }
  a:visited {
    color: #ffffff; }

ul, ol {
  list-style: none; }

.pc {
  display: block; }
  @media screen and (max-width: 1500px) {
    .pc {
      display: none; } }

.sp {
  display: none; }
  @media screen and (max-width: 1500px) {
    .sp {
      display: block; } }

body {
  overflow-x: visible;
  height: calc(var(--vh, 1vh) * 100); }

.fs-l-page {
  overflow: visible; }

p {
  margin: 0;
  padding: 0; }

.wrapper {
  margin: 0 auto !important; }

main {
  max-width: 100%; }

.mainBox {
  margin: 0 auto !important; }

footer {
  position: relative;
  z-index: 9999; }

/*--------------------------------------------*/
/*--------------------------------------------*/
/*--------------------------------------------*/
#future.lp_wrapper {
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0;
  letter-spacing: 0.05em;
  color: #ffffff;
  font-size: 14px;
  text-align: left;
  font-family: hiragino-kaku-gothic-pron, sans-serif;
  font-weight: 300;
  font-style: normal;
  line-height: 1.5;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  top: 0;
  background: #1d1f22; }
#future .sidearea {
  position: fixed;
  height: calc(var(--vh, 1vh) * 100);
  transition: .8s;
  width: calc((100% - 550px) / 2);
  background: #1d1f22; }
  @media screen and (max-width: 1500px) {
    #future .sidearea {
      width: calc(100% - 550px);
      top: 0; } }
  #future .sidearea.boxleft {
    left: 0;
    background-position: top; }
    @media screen and (max-width: 1500px) {
      #future .sidearea.boxleft {
        width: calc(100% - 550px); } }
    @media screen and (max-width: 900px) {
      #future .sidearea.boxleft {
        width: calc(40px + 1.0em);
        background: #639a78; } }
    #future .sidearea.boxleft .pc_box {
      display: flex;
      align-items: center;
      flex-direction: column; }
      @media screen and (max-width: 900px) {
        #future .sidearea.boxleft .pc_box {
          display: none; } }
      #future .sidearea.boxleft .pc_box div {
        width: 100%;
        height: 50vh;
        position: relative; }
        #future .sidearea.boxleft .pc_box div.animeBox {
          background: url("../images/pc_mv_1.png") no-repeat;
          background-size: cover;
          background-position: bottom;
          position: relative; }
          #future .sidearea.boxleft .pc_box div.animeBox .logo {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50%;
            max-width: 400px; }
            @media screen and (max-width: 1500px) {
              #future .sidearea.boxleft .pc_box div.animeBox .logo {
                max-width: 250px; } }
          #future .sidearea.boxleft .pc_box div.animeBox .anime_2 {
            position: absolute;
            top: 50px;
            left: 10px;
            max-width: 110px; }
            #future .sidearea.boxleft .pc_box div.animeBox .anime_2.visible {
              animation: moveTopRightToBottomLeft 3.8s ease forwards; }
        #future .sidearea.boxleft .pc_box div.txtBox {
          padding: 12px;
          position: relative; }
          #future .sidearea.boxleft .pc_box div.txtBox .anime_3 {
            position: absolute;
            top: -30px;
            right: 50px;
            max-width: 200px;
            z-index: 5;
            transform-origin: center bottom;
            animation: yurayura 2s linear infinite; }
          #future .sidearea.boxleft .pc_box div.txtBox .innerBox {
            width: 100%;
            height: 100%;
            background: #5d86a6; }
            #future .sidearea.boxleft .pc_box div.txtBox .innerBox div {
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              justify-content: center;
              width: 80%;
              margin: 0 auto; }
              @media screen and (max-width: 1500px) {
                #future .sidearea.boxleft .pc_box div.txtBox .innerBox div {
                  width: fit-content; } }
            #future .sidearea.boxleft .pc_box div.txtBox .innerBox h1 {
              font-size: 1.5em;
              font-weight: 600;
              margin-bottom: 1.0em;
              line-height: 1.8;
              letter-spacing: .1em; }
              #future .sidearea.boxleft .pc_box div.txtBox .innerBox h1 span {
                background: #e60012;
                padding: 0.2em;
                border-radius: 4px;
                margin-right: 0.2em; }
            #future .sidearea.boxleft .pc_box div.txtBox .innerBox p {
              font-size: .8em;
              line-height: 2.0;
              white-space: nowrap; }
  #future .sidearea.boxright {
    right: 0; }
    @media screen and (max-width: 1500px) {
      #future .sidearea.boxright {
        display: none; } }
    #future .sidearea.boxright .pc_box .logo {
      margin: 10% auto;
      width: 65%;
      display: block; }
    #future .sidearea.boxright .pc_box .box {
      margin: 10% auto; }
      #future .sidearea.boxright .pc_box .box h4 {
        font-size: 0.9em;
        font-weight: 400;
        text-align: center; }
      #future .sidearea.boxright .pc_box .box .flex {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        width: 80%;
        margin: 1.0em auto; }
        #future .sidearea.boxright .pc_box .box .flex div {
          width: calc(100%/2 - 2%);
          border-radius: .5em;
          overflow: hidden; }
          #future .sidearea.boxright .pc_box .box .flex div a {
            display: block;
            overflow: hidden; }
            #future .sidearea.boxright .pc_box .box .flex div a img {
              transform: scale(1.05); }
            #future .sidearea.boxright .pc_box .box .flex div a:hover img {
              transform: scale(1.1);
              transition: transform 1s; }
          #future .sidearea.boxright .pc_box .box .flex div a {
            font-size: min(1em, 3.2vw);
            font-family: "gotham", sans-serif;
            font-weight: 500;
            display: flex;
            justify-content: space-between;
            align-items: center; }
            #future .sidearea.boxright .pc_box .box .flex div a.color1 {
              background: #a9ada8;
              color: #1d1f22;
              padding: 1em; }
            #future .sidearea.boxright .pc_box .box .flex div a.color2 {
              background: #007563;
              color: #ffffff;
              padding: 1em; }
            #future .sidearea.boxright .pc_box .box .flex div a .arrow {
              position: relative;
              display: inline-block;
              width: 14px;
              height: 2px;
              margin: 6px 0;
              border-radius: 9999px;
              background-color: #1d1f22; }
              #future .sidearea.boxright .pc_box .box .flex div a .arrow::after, #future .sidearea.boxright .pc_box .box .flex div a .arrow::before {
                content: "";
                position: absolute;
                top: calc(50% - 1px);
                right: 0;
                width: 7px;
                height: 2px;
                border-radius: 9999px;
                background-color: #1d1f22;
                transform-origin: calc(100% - 1px) 50%; }
              #future .sidearea.boxright .pc_box .box .flex div a .arrow::before {
                transform: rotate(45deg); }
              #future .sidearea.boxright .pc_box .box .flex div a .arrow::after {
                transform: rotate(-45deg); }
              #future .sidearea.boxright .pc_box .box .flex div a .arrow.white {
                background-color: #ffffff; }
                #future .sidearea.boxright .pc_box .box .flex div a .arrow.white::after, #future .sidearea.boxright .pc_box .box .flex div a .arrow.white::before {
                  background-color: #ffffff; }
    #future .sidearea.boxright .pc_box .credit {
      position: absolute;
      width: 80%;
      left: 10%;
      bottom: 20px;
      z-index: 5; }
      #future .sidearea.boxright .pc_box .credit p {
        font-size: 0.8em;
        font-family: "gotham", sans-serif;
        font-weight: 300; }
    #future .sidearea.boxright .pc_box .anime_1 {
      position: absolute;
      right: -100px;
      bottom: -100px;
      z-index: 4;
      animation: dinoNeckBob 6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
      transform-origin: center bottom; }
      @media screen and (max-width: 1850px) {
        #future .sidearea.boxright .pc_box .anime_1 {
          right: -200px; }
          #future .sidearea.boxright .pc_box .anime_1 img {
            width: 70%; } }
#future #box-content {
  position: relative;
  z-index: 1000;
  width: 550px;
  background: #ffffff;
  min-height: 100vh;
  /* drawer */ }
  @media screen and (max-width: 1500px) {
    #future #box-content {
      margin: 0 0 0 auto;
      overflow: visible; } }
  @media screen and (max-width: 900px) {
    #future #box-content {
      width: calc(100% - 40px - 1em); } }
  #future #box-content #drawer {
    position: relative;
    margin: 0 auto; }
    #future #box-content #drawer .btnBox {
      position: fixed;
      display: flex;
      flex-direction: column;
      z-index: 10001;
      top: 0;
      left: calc((100% - 550px) / 2 - 40px); }
      @media screen and (max-width: 1500px) {
        #future #box-content #drawer .btnBox {
          left: calc((100% - 550px) - 40px); } }
      @media screen and (max-width: 900px) {
        #future #box-content #drawer .btnBox {
          left: 1.0em; } }
      #future #box-content #drawer .btnBox button {
        position: absolute;
        -ms-writing-mode: sideways-lr;
        writing-mode: sideways-lr;
        border-top-left-radius: 16px;
        border-bottom-left-radius: 16px;
        transition: .3s; }
        #future #box-content #drawer .btnBox button:hover {
          left: -0.5em;
          width: calc(40px + 0.5em);
          z-index: +1; }
        #future #box-content #drawer .btnBox button.is-active {
          left: -0.5em;
          width: calc(40px + 0.5em);
          z-index: +1; }
        #future #box-content #drawer .btnBox button p {
          font-family: "gotham", sans-serif;
          text-align: center;
          font-size: 1.5em;
          -webkit-text-orientation: mixed;
          text-orientation: mixed;
          line-height: 50px;
          width: 40px;
          font-size: min(0.9em, 3vw);
          min-height: 130px; }
        #future #box-content #drawer .btnBox button#btn1 {
          background: #1d1f22;
          display: none; }
          @media screen and (max-width: 900px) {
            #future #box-content #drawer .btnBox button#btn1 {
              display: block; } }
          #future #box-content #drawer .btnBox button#btn1 p {
            font-size: min(0.8em, 2.8vw); }
        #future #box-content #drawer .btnBox button#btn2 {
          background: #a9ada8;
          top: 0; }
          @media screen and (max-width: 900px) {
            #future #box-content #drawer .btnBox button#btn2 {
              top: 125px; } }
        #future #box-content #drawer .btnBox button#btn3 {
          background: #007563;
          top: 125px; }
          @media screen and (max-width: 900px) {
            #future #box-content #drawer .btnBox button#btn3 {
              top: calc(125px * 2); } }
        #future #box-content #drawer .btnBox button#btn4 {
          background: #004066;
          top: calc(125px * 2); }
          @media screen and (max-width: 900px) {
            #future #box-content #drawer .btnBox button#btn4 {
              top: calc(125px * 3); } }
    #future #box-content #drawer .innerBox section {
      display: none; }
      #future #box-content #drawer .innerBox section.is-active {
        display: block; }
    #future #box-content #drawer .innerBox .kv {
      position: relative; }
      #future #box-content #drawer .innerBox .kv .logo {
        position: absolute;
        top: 15%;
        left: 50%;
        width: max(300px, 60%);
        transform: translateX(-50%); }

#page1 {
  background: #1d1f22;
  display: none; }
  @media screen and (max-width: 1500px) {
    #page1 {
      display: block; } }
  #page1 .mv {
    position: relative;
    overflow: hidden; }
    #page1 .mv .logo {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 60%; }
    #page1 .mv .anime_4 {
      position: absolute;
      top: 100px;
      right: 100px;
      max-width: 110px; }
      @media screen and (max-width: 900px) {
        #page1 .mv .anime_4 {
          width: 24%;
          top: 20%;
          right: 17%; } }
      #page1 .mv .anime_4.visible {
        animation: moveTopRightToBottomLeft 3.8s ease forwards; }
  #page1 .txt_box {
    padding: 8px;
    position: relative; }
    #page1 .txt_box div {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      width: 100%;
      height: 100%;
      background: url("../images/SVG/background.svg") no-repeat;
      background-position: bottom;
      background-size: cover;
      margin: 0 auto;
      padding: 15% 10% 220px; }
      @media screen and (max-width: 900px) {
        #page1 .txt_box div {
          padding-top: 25%; } }
    #page1 .txt_box h1 {
      font-size: 1.5em;
      font-weight: 600;
      margin-bottom: 1.0em;
      line-height: 1.8;
      letter-spacing: .1em; }
      #page1 .txt_box h1 span {
        background: #e60012;
        padding: 0.2em;
        border-radius: 4px;
        margin-right: 0.2em; }
    #page1 .txt_box p {
      font-size: min(1em, 3vw);
      line-height: 2.0; }
    #page1 .txt_box .anime_3 {
      position: absolute;
      top: -50px;
      right: 50px;
      max-width: 300px;
      z-index: 5;
      transform-origin: center bottom;
      animation: yurayura 2s linear infinite; }
      @media screen and (max-width: 900px) {
        #page1 .txt_box .anime_3 {
          max-width: 200px; } }
  #page1 .box {
    margin: 10% auto; }
    @media screen and (max-width: 900px) {
      #page1 .box {
        margin: 20% auto; } }
    #page1 .box h4 {
      font-size: min(1em, 3.5vw);
      font-weight: 300;
      text-align: center;
      letter-spacing: 1px;
      font-family: "gotham", sans-serif; }
      @media screen and (max-width: 900px) {
        #page1 .box h4 {
          margin-bottom: 2.0em; } }
    #page1 .box .flex {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      width: 80%;
      margin: 1.0em auto; }
      @media screen and (max-width: 900px) {
        #page1 .box .flex {
          width: 90%; } }
      #page1 .box .flex div {
        width: calc(100%/2 - 2%);
        border-radius: .5em;
        overflow: hidden; }
        @media screen and (max-width: 900px) {
          #page1 .box .flex div {
            width: calc(100%/2 - 1%); } }
        #page1 .box .flex div a {
          display: block;
          overflow: hidden; }
          #page1 .box .flex div a img {
            transform: scale(1.05); }
          #page1 .box .flex div a:hover img {
            transform: scale(1.1);
            transition: transform 1s; }
        #page1 .box .flex div p {
          font-size: min(1.1em, 3.4vw);
          font-family: "gotham", sans-serif;
          font-weight: 500;
          padding: 0.7em 1em;
          display: flex;
          justify-content: space-between;
          align-items: center; }
          #page1 .box .flex div p.color1 {
            background: #dce66e;
            color: #1d1f22; }
          #page1 .box .flex div p.color2 {
            background: #e60012;
            color: #ffffff; }
          #page1 .box .flex div p .arrow {
            position: relative;
            display: inline-block;
            width: 14px;
            height: 2px;
            margin: 6px 0;
            border-radius: 9999px;
            background-color: #1d1f22; }
            #page1 .box .flex div p .arrow::after, #page1 .box .flex div p .arrow::before {
              content: "";
              position: absolute;
              top: calc(50% - 1px);
              right: 0;
              width: 7px;
              height: 2px;
              border-radius: 9999px;
              background-color: #1d1f22;
              transform-origin: calc(100% - 1px) 50%; }
            #page1 .box .flex div p .arrow::before {
              transform: rotate(45deg); }
            #page1 .box .flex div p .arrow::after {
              transform: rotate(-45deg); }
            #page1 .box .flex div p .arrow.white {
              background-color: #ffffff; }
              #page1 .box .flex div p .arrow.white::after, #page1 .box .flex div p .arrow.white::before {
                background-color: #ffffff; }
  #page1 .creditBox {
    padding: 300px 8px 0;
    position: relative;
    overflow: hidden; }
    @media screen and (max-width: 900px) {
      #page1 .creditBox {
        padding: 300px 4px 0; } }
    #page1 .creditBox .anime_1 {
      position: absolute;
      right: -25px;
      top: 70px;
      z-index: 4;
      animation: dinoNeckBob 6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
      transform-origin: center bottom; }
      @media screen and (max-width: 900px) {
        #page1 .creditBox .anime_1 {
          top: 135px; } }
      #page1 .creditBox .anime_1 img {
        max-width: 400px; }
        @media screen and (max-width: 900px) {
          #page1 .creditBox .anime_1 img {
            max-width: 320px; } }
  #page1 .credit {
    position: relative;
    background: #007563;
    padding: 15% 10%; }
    @media screen and (max-width: 900px) {
      #page1 .credit {
        padding: 20% 7% 30%; } }
    #page1 .credit::before {
      content: "";
      width: 100%;
      height: 24px;
      background: url("../images/SVG/background_1.svg");
      background-size: cover;
      position: absolute;
      top: -24px;
      left: -1px; }
    #page1 .credit p {
      font-size: min(0.9em, 3vw);
      font-family: "gotham", sans-serif;
      font-weight: 300; }
    #page1 .credit .logo {
      margin: 25% auto 0;
      display: block; }
      @media screen and (max-width: 900px) {
        #page1 .credit .logo {
          width: 90%; } }

/*#page1 */
.Box {
  margin: 30% auto 0; }
  .Box.sliderBox {
    background: url("../images/SVG/background_2.svg");
    padding: 10% 0; }
    .Box.sliderBox .swiper-wrapper {
      transition-timing-function: linear; }
      .Box.sliderBox .swiper-wrapper .swiper-slide {
        border-radius: 0.5em;
        overflow: hidden; }

.click {
  position: relative;
  cursor: pointer; }
  .click::before, .click::after {
    content: "";
    background: url("../images/SVG/plus.svg");
    width: 25px;
    height: 25px;
    background-size: cover;
    bottom: 15px;
    right: 15px;
    position: absolute;
    transition: 0.4s; }
    @media screen and (max-width: 900px) {
      .click::before, .click::after {
        width: 15px;
        height: 15px;
        bottom: 10px;
        right: 10px; } }
  .click.black::before, .click.black::after {
    filter: brightness(0); }
  .click .clickBox {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s;
    width: 100% !important; }
  .click.active .clickBox {
    opacity: 1;
    visibility: visible; }
  .click.active::before, .click.active::after {
    transform: rotate(45deg); }

#page2 {
  background: #a9ada8;
  padding-bottom: 30%; }
  #page2 .anime_4 {
    padding: 15% 0; }
    #page2 .anime_4 img {
      width: 60%;
      margin: 0 auto;
      display: block; }
      #page2 .anime_4 img.visible {
        animation: caution 1.5s forwards; }
  #page2 .cut_1 {
    width: 90%;
    margin: 0 auto 0 7%;
    position: relative; }
  #page2 .animeBox1 {
    overflow: hidden;
    position: absolute;
    top: 20%;
    right: -3%; }
    #page2 .animeBox1 .swiper1 {
      max-width: 350px;
      margin: 0 -80px 0 auto; }
      @media screen and (max-width: 900px) {
        #page2 .animeBox1 .swiper1 {
          max-width: 250px;
          margin-right: -45px; } }
  #page2 .cut_1 {
    width: 90%;
    margin: 0 auto 5% 7%; }
  #page2 .flexBox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 95%;
    margin: 10% auto; }
    #page2 .flexBox div {
      width: 50%; }
  #page2 .cut_2 {
    width: 70%;
    margin: 20% auto 5% 6%; }
  #page2 .flexBox2 {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: 90%;
    margin: 25% auto 15%; }
    #page2 .flexBox2 div.animeBox {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      width: 45%; }
      #page2 .flexBox2 div.animeBox img {
        display: block;
        max-width: 61px;
        width: 20%;
        visibility: hidden; }
        #page2 .flexBox2 div.animeBox img:nth-child(1) {
          margin: 0 auto 2% 10%;
          animation-delay: 0s; }
        #page2 .flexBox2 div.animeBox img:nth-child(2) {
          margin: 0 auto 5% 40%;
          animation-delay: 0.5s; }
        #page2 .flexBox2 div.animeBox img:nth-child(3) {
          margin: 0 auto 7% 15%;
          animation-delay: 1.0s; }
        #page2 .flexBox2 div.animeBox img:nth-child(4) {
          margin: 0 auto 0 50%;
          animation-delay: 1.5s; }
        #page2 .flexBox2 div.animeBox img.visible {
          animation: step-appear 1.2s forwards; }
          #page2 .flexBox2 div.animeBox img.visible:nth-child(1) {
            animation-delay: 1.2s; }
          #page2 .flexBox2 div.animeBox img.visible:nth-child(2) {
            animation-delay: 0.8s; }
          #page2 .flexBox2 div.animeBox img.visible:nth-child(3) {
            animation-delay: 0.4s; }
          #page2 .flexBox2 div.animeBox img.visible:nth-child(4) {
            animation-delay: 0s; }
    #page2 .flexBox2 div:nth-child(2) {
      width: 55%; }
  #page2 .cut_3 {
    width: 86%;
    margin: 0 auto 1%; }
  #page2 .animeBox2 {
    position: relative;
    margin: 10% auto; }
    #page2 .animeBox2 .anime_5 {
      display: block;
      max-width: 350px;
      --direction: 1;
      margin: 0 auto; }
      @media screen and (max-width: 900px) {
        #page2 .animeBox2 .anime_5 {
          width: 75%; } }
      #page2 .animeBox2 .anime_5.visible {
        animation: walk 1.2s step-end both; }

#page3 {
  background: #007563;
  padding: 15% 0 40%; }
  #page3 .flexBox3 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto; }
    #page3 .flexBox3.base {
      align-items: center; }
  #page3 .font-animeBox {
    width: 50%;
    position: relative; }
    #page3 .font-animeBox h2 {
      color: #ff81c5;
      font-size: min(2em, 5vw);
      font-family: "gotham", sans-serif;
      text-align: center;
      font-weight: 500; }
      #page3 .font-animeBox h2.lime {
        color: #dce66e; }
    #page3 .font-animeBox #svg1 {
      position: absolute;
      top: -50px;
      left: 50%;
      transform: translateX(-50%);
      width: 80%; }
      @media screen and (max-width: 900px) {
        #page3 .font-animeBox #svg1 {
          top: -28px;
          width: 92%; } }
    #page3 .font-animeBox .line_1 {
      fill: none;
      stroke: #699f7e;
      stroke-miterlimit: 10;
      stroke-width: 2px;
      stroke-dasharray: 1484;
      stroke-dashoffset: 1484; }
      #page3 .font-animeBox .line_1.visible {
        animation: draw 1.0s ease-in-out forwards; }
    #page3 .font-animeBox #svg2 {
      position: absolute;
      bottom: -30px;
      left: 50%;
      transform: translateX(-50%);
      width: 80%; }
    #page3 .font-animeBox .line_2 {
      fill: none;
      stroke: #699f7e;
      stroke-miterlimit: 10;
      stroke-width: 2px;
      stroke-dasharray: 708;
      stroke-dashoffset: 708; }
      #page3 .font-animeBox .line_2.visible {
        animation: draw 1.5s ease-in-out forwards; }
  #page3 .animeBox1 {
    width: 50%;
    text-align: right; }
    #page3 .animeBox1 .anime_6 {
      animation: yurayura 2s linear infinite;
      max-width: 200px;
      margin-right: 40px; }
      @media screen and (max-width: 900px) {
        #page3 .animeBox1 .anime_6 {
          width: 92%;
          margin-right: 10px;
          margin-top: 35px; } }
    #page3 .animeBox1 .anime_7 {
      display: block;
      --direction: -1;
      margin: 0 auto;
      max-width: 160px; }
      @media screen and (max-width: 900px) {
        #page3 .animeBox1 .anime_7 {
          width: 60%; } }
      #page3 .animeBox1 .anime_7.visible {
        animation: walk 1.2s step-end both; }
  #page3 .cut_1 {
    width: 95%;
    margin: -50px 0 15% auto;
    position: relative;
    z-index: +1; }
    @media screen and (max-width: 900px) {
      #page3 .cut_1 {
        margin-top: -40px; } }
    #page3 .cut_1 img {
      border-top-left-radius: 1.5em;
      border-top-right-radius: 1.5em; }
  #page3 .flexBox4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto 10%; }
    @media screen and (max-width: 900px) {
      #page3 .flexBox4 {
        margin-top: 5%; } }
    #page3 .flexBox4 .click {
      width: calc(100%/2 - 1%);
      border: 5px solid #dce66e;
      background: #dce66e;
      border-radius: 20px;
      box-sizing: border-box;
      padding: 5px; }
      @media screen and (max-width: 900px) {
        #page3 .flexBox4 .click {
          border: 3px solid #dce66e;
          border-radius: 10px;
          box-sizing: border-box;
          padding: 2px; } }
      #page3 .flexBox4 .click img {
        border-radius: 15px; }
        @media screen and (max-width: 900px) {
          #page3 .flexBox4 .click img {
            border-radius: 7px; } }
      #page3 .flexBox4 .click .clickBox {
        padding: 5px; }
        @media screen and (max-width: 900px) {
          #page3 .flexBox4 .click .clickBox {
            padding: 2px; } }
        #page3 .flexBox4 .click .clickBox img {
          border-radius: 15px; }
          @media screen and (max-width: 900px) {
            #page3 .flexBox4 .click .clickBox img {
              border-radius: 7px; } }
  #page3 .cardimg {
    margin: 25% auto;
    position: relative; }
    #page3 .cardimg div {
      width: 85%;
      margin: 0 auto;
      position: sticky;
      position: -webkit-sticky;
      top: 60px; }
  #page3 .animeBox3 {
    width: 100%;
    overflow: hidden;
    position: relative;
    text-align: center; }
    #page3 .animeBox3 .anime_8 {
      max-width: 200px;
      --direction: 1;
      display: block;
      margin-left: 40px; }
      #page3 .animeBox3 .anime_8.visible {
        animation: walk2 3.5s step-end 0.5s both; }
    #page3 .animeBox3 #svg3 {
      width: 90%;
      margin: 0 auto; }
    #page3 .animeBox3 .line_3 {
      fill: none;
      stroke: #dce66e;
      stroke-miterlimit: 10;
      stroke-width: 2px;
      stroke-dasharray: 618;
      stroke-dashoffset: 618; }
      #page3 .animeBox3 .line_3.visible {
        animation: draw 2.5s ease-in-out forwards; }

#page4 {
  background: #004066;
  padding: 15% 0 40%; }
  #page4 h4 {
    font-family: "gotham", sans-serif;
    font-size: min(1.4em, 3.7vw);
    font-weight: 300;
    letter-spacing: 1px;
    text-align: center; }
    #page4 h4 span {
      font-size: 100%;
      padding: 0 10px; }
  #page4 .itemBox .swiper2 {
    width: 80%;
    margin: 10% auto;
    border-radius: 1.0em;
    overflow: hidden; }
    @media screen and (max-width: 900px) {
      #page4 .itemBox .swiper2 {
        width: 90%; } }
    #page4 .itemBox .swiper2 .swiper-slide div p {
      color: #004066;
      font-size: min(1em, 3.2vw);
      font-weight: 500; }
      #page4 .itemBox .swiper2 .swiper-slide div p span {
        font-size: 70%;
        margin-left: 0.5em; }
    #page4 .itemBox .swiper2 .swiper-slide div a {
      display: block; }
    #page4 .itemBox .swiper2 .swiper-slide div img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
    #page4 .itemBox .swiper2 .swiper-slide div:last-child {
      background: #ffffff;
      border-top: 1px solid #004066;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px; }
      @media screen and (max-width: 900px) {
        #page4 .itemBox .swiper2 .swiper-slide div:last-child {
          border-bottom-left-radius: 1em;
          border-bottom-right-radius: 1em; } }
      #page4 .itemBox .swiper2 .swiper-slide div:last-child a {
        width: fit-content;
        background: #ffffff;
        border: 1px solid #004066;
        padding: .5em 1.7em 0.4em;
        font-size: min(1em, 2.8vw);
        border-radius: 50vh;
        color: #004066; }
        @media screen and (max-width: 900px) {
          #page4 .itemBox .swiper2 .swiper-slide div:last-child a {
            padding: .4em 1.7em 0.3em; } }
        #page4 .itemBox .swiper2 .swiper-slide div:last-child a:hover {
          background: #004066;
          color: #ffffff; }
  #page4 .itemBox .swiper-button-prev, #page4 .itemBox .swiper-button-next {
    height: 50px;
    width: 50px; }
    @media screen and (max-width: 900px) {
      #page4 .itemBox .swiper-button-prev, #page4 .itemBox .swiper-button-next {
        width: 30px;
        height: 30px; } }
    #page4 .itemBox .swiper-button-prev::after, #page4 .itemBox .swiper-button-next::after {
      background-repeat: no-repeat;
      background-size: contain;
      content: "";
      height: 40px;
      margin: auto;
      width: 40px; }
      @media screen and (max-width: 900px) {
        #page4 .itemBox .swiper-button-prev::after, #page4 .itemBox .swiper-button-next::after {
          width: 30px;
          height: 30px; } }
  #page4 .itemBox .swiper-button-prev::after {
    background-image: url("../images/SVG/back.svg"); }
  #page4 .itemBox .swiper-button-next::after {
    background-image: url("../images/SVG/next.svg"); }
  #page4 .video {
    width: 80%;
    margin: 10% auto; }
    @media screen and (max-width: 900px) {
      #page4 .video {
        width: 90%; } }
    #page4 .video iframe {
      width: 100%;
      aspect-ratio: 16 / 9;
      border-radius: 1em; }
  #page4 .logo {
    max-width: 400px;
    width: 80%;
    margin: 50% auto 10%;
    display: block; }
  #page4 .Box {
    margin: 30% auto; }

@keyframes draw {
  to {
    stroke-dashoffset: 0; } }
@keyframes walk {
  0% {
    transform: translate3d(calc(-60px * var(--direction, 1)), 0, 0) rotate(calc(3deg * var(--direction, 1))); }
  15% {
    transform: translate3d(calc(-50px * var(--direction, 1)), -4px, 0) rotate(calc(-3deg * var(--direction, 1))); }
  30% {
    transform: translate3d(calc(-40px * var(--direction, 1)), 0, 0) rotate(calc(3deg * var(--direction, 1))); }
  45% {
    transform: translate3d(calc(-30px * var(--direction, 1)), -4px, 0) rotate(calc(-3deg * var(--direction, 1))); }
  60% {
    transform: translate3d(calc(-20px * var(--direction, 1)), 0, 0) rotate(calc(3deg * var(--direction, 1))); }
  75% {
    transform: translate3d(calc(-10px * var(--direction, 1)), -4px, 0) rotate(calc(-3deg * var(--direction, 1))); }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg); } }
@keyframes walk2 {
  0% {
    transform: translate3d(calc(   0% * var(--direction, 1)), 0px, 0) rotate(calc( 3deg * var(--direction, 1))); }
  7.1% {
    transform: translate3d(calc( 8.5% * var(--direction, 1)), -4px, 0) rotate(calc(-3deg * var(--direction, 1))); }
  14.2% {
    transform: translate3d(calc(17.1% * var(--direction, 1)), 0px, 0) rotate(calc( 3deg * var(--direction, 1))); }
  21.4% {
    transform: translate3d(calc(25.7% * var(--direction, 1)), -4px, 0) rotate(calc(-3deg * var(--direction, 1))); }
  28.5% {
    transform: translate3d(calc(34.2% * var(--direction, 1)), 0px, 0) rotate(calc( 3deg * var(--direction, 1))); }
  35.7% {
    transform: translate3d(calc(42.8% * var(--direction, 1)), -4px, 0) rotate(calc(-3deg * var(--direction, 1))); }
  42.8% {
    transform: translate3d(calc(51.4% * var(--direction, 1)), 0px, 0) rotate(calc( 3deg * var(--direction, 1))); }
  50% {
    transform: translate3d(calc( 60%  * var(--direction, 1)), -4px, 0) rotate(calc(-3deg * var(--direction, 1))); }
  57.1% {
    transform: translate3d(calc(68.5% * var(--direction, 1)), 0px, 0) rotate(calc( 3deg * var(--direction, 1))); }
  64.2% {
    transform: translate3d(calc(77.1% * var(--direction, 1)), -4px, 0) rotate(calc(-3deg * var(--direction, 1))); }
  71.4% {
    transform: translate3d(calc(85.7% * var(--direction, 1)), 0px, 0) rotate(calc( 3deg * var(--direction, 1))); }
  78.5% {
    transform: translate3d(calc(94.2% * var(--direction, 1)), -4px, 0) rotate(calc(-3deg * var(--direction, 1))); }
  85.7% {
    transform: translate3d(calc(102.8%* var(--direction, 1)), 0px, 0) rotate(calc( 3deg * var(--direction, 1))); }
  92.8% {
    transform: translate3d(calc(111.4%* var(--direction, 1)), -4px, 0) rotate(calc(-3deg * var(--direction, 1))); }
  100% {
    transform: translate3d(calc(120%  * var(--direction, 1)), 0px, 0) rotate(0deg); } }
@keyframes step-appear {
  0% {
    visibility: hidden;
    transform: scale(0.8); }
  100% {
    visibility: visible;
    transform: scale(1); } }
@keyframes dinoNeckBob {
  0% {
    transform: rotate(-8deg);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
    /* ゆっくり動き出す(重さの表現) */ }
  35% {
    transform: rotate(12deg);
    /* 首を持ち上げる(行き過ぎ気味) */
    animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1);
    /* 慣性で少しオーバーシュート */ }
  45% {
    transform: rotate(8deg);
    /* 重みで少し戻る */
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  60% {
    transform: rotate(10deg);
    /* 微振動しながら安定 */
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  100% {
    transform: rotate(-8deg);
    /* ゆっくり下ろす */ } }
@keyframes moveTopRightToBottomLeft {
  0% {
    transform: translate(500px, -110px) rotate(0deg) scale(1); }
  60% {
    transform: translate(70px, -20px) rotate(-3deg) scale(1);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1); } }
@keyframes yurayura {
  0% , 100% {
    transform: rotate(3deg); }
  50% {
    transform: rotate(-3deg); } }
@keyframes caution {
  2.6% {
    transform: translate(-0.3%, 0.6%); }
  8.6% {
    transform: translate(0.6%, -0.6%); }
  17.1% {
    transform: translate(-0.05%, 0.1%); }
  19.7% {
    transform: translate(0.06%, -0.1%); }
  22.3% {
    transform: translate(-0.08%, 0.1%); }
  25.7% {
    transform: translate(0.1%, -0.1%); }
  30% {
    transform: translate(-0.15%, 0.1%); }
  34.3% {
    transform: translate(0.25%, -0.1%); }
  38.6% {
    transform: translate(-0.35%, 0.1%); }
  42.9% {
    transform: translate(0.5%, -0.1%); }
  47.1% {
    transform: translate(-0.6%, 0.1%); }
  51.4% {
    transform: translate(0.9%, -0.1%) rotate(-1deg); }
  55.7% {
    transform: translate(-1.2%, 0.15%) rotate(1.5deg); }
  60% {
    transform: translate(0, 0) rotate(0deg);
    animation-timing-function: ease-in; }
  62.6% {
    transform: translate(0.5%, -0.3%) rotate(4deg); }
  66%, 100% {
    transform: translate(-3%, 3%) rotate(-12deg); } }