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

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

ul, ol {
  list-style: none; }

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

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

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

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; }

.fadeIn {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity .8s,transform 0.8s; }
  .fadeIn.visible {
    opacity: 1;
    transform: translateY(0); }

/*--------------------------------------------*/
/*--------------------------------------------*/
#future {
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
  height: -webkit-fill-available;
  min-height: -webkit-fill-available; }
  #future.lp_wrapper {
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0;
    letter-spacing: 0;
    color: #e74271;
    font-size: 16px;
    text-align: center;
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 300;
    font-style: normal;
    line-height: 1.5; }
  #future .sidearea {
    position: fixed;
    height: 100vh;
    width: calc((100% - 500px)/2);
    background: #00a3c6;
    z-index: 1002;
    /*boxright*/ }
    @media screen and (max-width: 1500px) {
      #future .sidearea {
        width: calc((100% - 450px)/2); } }
    @media screen and (max-width: 1080px) {
      #future .sidearea {
        width: calc((100% - 600px)/2); } }
    @media screen and (max-width: 600px) {
      #future .sidearea {
        display: none; } }
    #future .sidearea.boxleft {
      left: 0;
      background: rgba(230, 220, 222, 0.5); }
      #future .sidearea.boxleft .pcBox {
        display: flex;
        align-items: center;
        flex-direction: column;
        height: calc(90vh - 60px);
        width: auto;
        position: absolute;
        top: 47%;
        left: 50%;
        transform: translate(-50%, -50%); }
        #future .sidearea.boxleft .pcBox div {
          height: 50%;
          width: auto; }
          #future .sidearea.boxleft .pcBox div img {
            max-width: none;
            width: auto;
            height: 100%; }
        @media screen and (max-width: 1080px) {
          #future .sidearea.boxleft .pcBox {
            display: none; } }
    #future .sidearea.boxright {
      right: 0;
      background: rgba(185, 167, 204, 0.5); }
      #future .sidearea.boxright .pcBox {
        width: 100%;
        height: 90vh;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /*anchorlink*/ }
        #future .sidearea.boxright .pcBox .rigt_img {
          height: 70vh;
          width: 100%; }
          #future .sidearea.boxright .pcBox .rigt_img .main {
            height: 100%;
            width: auto;
            max-width: none; }
        #future .sidearea.boxright .pcBox .anchorlink {
          width: 70%;
          margin-left: 15%; }
          #future .sidearea.boxright .pcBox .anchorlink a {
            font-size: 0.9em;
            display: block;
            font-family: "cooper-black-std", serif;
            text-align: left;
            width: fit-content;
            border-bottom: 1px solid #e74271;
            line-height: 1.2;
            margin-bottom: 1.0em;
            position: relative;
            letter-spacing: .5px; }
            #future .sidearea.boxright .pcBox .anchorlink a.view::before {
              position: absolute;
              content: "";
              background-image: url("../images/SVG/heart_2.svg");
              width: 1.0em;
              height: 1.0em;
              background-size: contain;
              left: -1.5em;
              top: 50%;
              transform: translateY(-50%);
              background-repeat: no-repeat; }
        #future .sidearea.boxright .pcBox .absolute {
          position: absolute; }
          #future .sidearea.boxright .pcBox .absolute.star1 {
            top: 0;
            left: 5%;
            animation: fuwafuwa 3s ease-in-out infinite alternate;
            transition: 1.5s ease-in-out; }
          #future .sidearea.boxright .pcBox .absolute.heart1 {
            top: 50%;
            right: 7%;
            transform: translateY(-50%);
            animation: fuwafuwa 2s ease-in-out infinite alternate;
            transition: 1.0s ease-in-out; }
          #future .sidearea.boxright .pcBox .absolute.heart2 {
            bottom: 5%;
            right: 15%;
            animation: fuwafuwa 3s ease-in-out infinite alternate;
            transition: 1.5s ease-in-out; }
        @media screen and (max-width: 1080px) {
          #future .sidearea.boxright .pcBox {
            display: none; } }
  #future #box-content {
    position: relative;
    z-index: 1000;
    /* drawer */ }
    #future #box-content #drawer {
      position: relative;
      max-width: 500px;
      top: 0;
      min-height: 100vh;
      margin: 0 auto;
      background: #ffffff; }
      @media screen and (max-width: 1500px) {
        #future #box-content #drawer {
          max-width: 450px; } }
      @media screen and (max-width: 1080px) {
        #future #box-content #drawer {
          margin: 0 auto;
          padding-top: 0;
          max-width: 600px; } }
      @media screen and (max-width: 600px) {
        #future #box-content #drawer {
          max-width: none;
          overflow-x: hidden; } }
      #future #box-content #drawer .swiper_kv {
        width: 90%;
        margin: 0 auto; }
        @media screen and (max-width: 600px) {
          #future #box-content #drawer .swiper_kv {
            width: 100%; } }
      #future #box-content #drawer .innerBox {
        margin: 0 auto;
        width: 90%;
        background: rgba(172, 200, 219, 0.5);
        padding: 15% 0; }
        @media screen and (max-width: 600px) {
          #future #box-content #drawer .innerBox {
            width: 100%; } }
      #future #box-content #drawer .intro {
        margin: 15% auto; }
        #future #box-content #drawer .intro .ttl {
          width: 70%; }
        #future #box-content #drawer .intro p {
          font-size: 0.9em;
          margin: 10% auto;
          line-height: 2.0; }
          @media screen and (max-width: 600px) {
            #future #box-content #drawer .intro p {
              font-size: 3.2vw; } }
        #future #box-content #drawer .intro .linkBtn {
          margin: 15% auto;
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 80%; }
          #future #box-content #drawer .intro .linkBtn a {
            display: block;
            width: calc(100%/2 - 2%);
            box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.3); }
        #future #box-content #drawer .intro .photo_1 {
          margin: 200px auto;
          width: 90%; }
          @media screen and (max-width: 600px) {
            #future #box-content #drawer .intro .photo_1 {
              margin: 130px auto 100px; } }
          #future #box-content #drawer .intro .photo_1 img {
            box-shadow: 3px 2px 0px 0px rgba(0, 0, 0, 0.3); }
      #future #box-content #drawer #lineup {
        position: relative;
        width: 90%;
        margin: 20% auto;
        padding-top: 60px; }
        #future #box-content #drawer #lineup .ttl {
          position: absolute;
          top: 2.5em;
          left: 50%;
          transform: translateX(-50%);
          width: 70%;
          margin: 0 auto; }
        #future #box-content #drawer #lineup .itemList {
          background-image: url("../images/SVG/lineup_back.svg");
          background-size: contain;
          padding-top: 50px; }
          #future #box-content #drawer #lineup .itemList ul {
            display: flex;
            align-items: flex-end;
            justify-content: space-evenly;
            padding: 0; }
            #future #box-content #drawer #lineup .itemList ul li {
              width: calc(100%/3);
              margin-bottom: 5%; }
              #future #box-content #drawer #lineup .itemList ul li p {
                font-size: 0.7em;
                font-weight: 600;
                letter-spacing: 1px;
                color: #b982cd;
                margin: 1.0em auto;
                position: relative;
                padding-bottom: 1.2em; }
                @media screen and (max-width: 600px) {
                  #future #box-content #drawer #lineup .itemList ul li p {
                    font-size: 2.9vw; } }
                #future #box-content #drawer #lineup .itemList ul li p::after {
                  position: absolute;
                  content: "▼";
                  bottom: 0;
                  left: 50%;
                  transform: translateX(-50%);
                  font-size: 75%; }
      #future #box-content #drawer .itemBox {
        display: block;
        margin: 200px auto;
        padding-top: 60px; }
        @media screen and (max-width: 600px) {
          #future #box-content #drawer .itemBox {
            margin: 80px auto; } }
        #future #box-content #drawer .itemBox .itemttl {
          margin-bottom: 10%; }
        #future #box-content #drawer .itemBox .backBox .swiper_item {
          width: 95%;
          margin: 10% auto; }
        #future #box-content #drawer .itemBox .backBox .detail {
          position: relative;
          width: 95%;
          margin: 0 auto; }
          #future #box-content #drawer .itemBox .backBox .detail a {
            display: block;
            text-align: left; }
            #future #box-content #drawer .itemBox .backBox .detail a img {
              width: 75%;
              max-width: 320px;
              margin-left: 0; }
          #future #box-content #drawer .itemBox .backBox .detail .coordinate {
            position: absolute;
            top: 0;
            right: 0;
            max-width: 170px;
            width: 45%; }
            #future #box-content #drawer .itemBox .backBox .detail .coordinate.bottom {
              top: auto;
              bottom: 0;
              max-width: 200px;
              width: 48%; }
          #future #box-content #drawer .itemBox .backBox .detail.right a {
            text-align: right; }
          #future #box-content #drawer .itemBox .backBox .detail.right .coordinate {
            right: auto;
            left: 0;
            max-width: 140px;
            width: 35%; }
            #future #box-content #drawer .itemBox .backBox .detail.right .coordinate.item4 {
              max-width: 155px;
              width: 40%;
              top: 20px; }
        #future #box-content #drawer .itemBox#item1 .backBox, #future #box-content #drawer .itemBox#item3 .backBox, #future #box-content #drawer .itemBox#item5 .backBox {
          background-image: url("../images/SVG/motte1_5.svg");
          background-repeat: no-repeat;
          background-size: 90%;
          background-position: 100% 60%; }
        #future #box-content #drawer .itemBox#item2 .backBox, #future #box-content #drawer .itemBox#item4 .backBox {
          background-image: url("../images/motte2_9.webp");
          background-repeat: no-repeat;
          background-size: 90%;
          background-position: 0% 60%; }
        #future #box-content #drawer .itemBox .buyimg {
          margin: 7vh auto;
          width: 85%; }
      #future #box-content #drawer #shop {
        padding-top: 60px; }
        #future #box-content #drawer #shop .shopttl {
          width: 45%;
          margin: 0 auto 15%; }
        #future #box-content #drawer #shop a {
          font-size: 1.0em;
          font-family: "cooper-black-std", serif;
          border-bottom: 1px solid #e74271; }
          @media screen and (max-width: 600px) {
            #future #box-content #drawer #shop a {
              font-size: 3.7vw; } }
        #future #box-content #drawer #shop .map {
          width: 90%;
          height: 250px;
          margin: 10% auto; }
      #future #box-content #drawer .credit {
        margin: 200px auto; }
        @media screen and (max-width: 600px) {
          #future #box-content #drawer .credit {
            margin: 100px auto; } }
        #future #box-content #drawer .credit p {
          font-size: 0.8em;
          font-weight: 600;
          line-height: 2.0;
          letter-spacing: 1px;
          color: #e74271; }
          @media screen and (max-width: 600px) {
            #future #box-content #drawer .credit p {
              font-size: 3.0vw; } }

@keyframes fuwafuwa {
  0% {
    transform: translate(0, 0) rotate(-7deg); }
  50% {
    transform: translate(0, -7px) rotate(0deg); }
  100% {
    transform: translate(0, 0) rotate(7deg); } }