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

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

ul, ol {
  list-style: none; }

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

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

body {
  overflow-x: visible; }

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

.fadeIn {
  opacity: 0;
  transition: opacity 1s; }
  .fadeIn.visible {
    opacity: 1; }

/*--------------------------------------------*/
#future.lp_wrapper {
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0;
  letter-spacing: 0.05em;
  color: #000000;
  font-size: 14px;
  text-align: center;
  font-family: courier-new, sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  top: 0; }
#future .sidearea {
  position: fixed;
  top: 0;
  transition: .8s;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  min-height: calc(var(--vh, 1vh) * 100);
  height: -webkit-fill-available;
  min-height: -webkit-fill-available; }
  @media screen and (max-width: 1200px) {
    #future .sidearea {
      width: calc(100% - 500px);
      top: 0; } }
  #future .sidearea.boxleft {
    left: 0;
    background: url("../images/pc.webp") no-repeat;
    background-size: cover;
    background-position: center;
    width: calc((100% - 500px) - 20%); }
    #future .sidearea.boxleft .pc_box .logo {
      max-width: 500px;
      position: absolute;
      top: calc(10% + 60px);
      left: 50%;
      transform: translateX(-50%);
      width: 70%; }
    @media screen and (max-width: 1200px) {
      #future .sidearea.boxleft {
        width: calc(100% - 500px); } }
    @media screen and (max-width: 600px) {
      #future .sidearea.boxleft {
        display: none; } }
  #future .sidearea.boxright {
    right: 0;
    width: 20%;
    background: #ffffff; }
    #future .sidearea.boxright .pc_box {
      width: auto;
      width: 80%;
      position: absolute;
      bottom: 5%;
      right: 5%; }
      #future .sidearea.boxright .pc_box .menu {
        width: 80%; }
        #future .sidearea.boxright .pc_box .menu a {
          display: block;
          line-height: 2.0;
          text-align: right;
          text-decoration: underline;
          text-decoration-color: currentColor;
          text-decoration-thickness: 1px;
          transition: text-decoration-color 0.5s ease;
          font-size: min(1.3em, 3.5vw); }
          #future .sidearea.boxright .pc_box .menu a:hover {
            text-decoration-color: transparent; }
    @media screen and (max-width: 1200px) {
      #future .sidearea.boxright {
        display: none; } }
#future #box-content {
  position: relative;
  z-index: 1000;
  width: 500px;
  margin: 0 20% 0 auto;
  /* drawer */ }
  @media screen and (max-width: 1200px) {
    #future #box-content {
      margin: 0 0 0 auto; } }
  @media screen and (max-width: 600px) {
    #future #box-content {
      width: 100%;
      margin: 0 auto; } }
  #future #box-content #drawer {
    position: relative;
    width: 500px;
    margin: 0 15% 0 auto;
    top: 0;
    background: #ffffff; }
    @media screen and (max-width: 600px) {
      #future #box-content #drawer {
        max-width: none;
        width: 100%; } }

.sp_mv {
  position: relative;
  display: none; }
  @media screen and (max-width: 600px) {
    .sp_mv {
      display: block; } }
  .sp_mv .mv__box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .sp_mv .mv__box img {
      position: absolute;
      top: 10%;
      left: 50%;
      transform: translateX(-50%);
      width: 60%; }
    .sp_mv .mv__box .menu {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      bottom: 5%;
      left: 50%;
      transform: translateX(-50%); }
      .sp_mv .mv__box .menu a {
        display: block;
        color: #ffffff;
        line-height: 2.0;
        text-align: right;
        text-decoration: underline !important;
        text-decoration-color: currentColor;
        text-decoration-thickness: 1px;
        transition: text-decoration-color 0.5s ease;
        font-size: min(1em, 3.2vw);
        margin: 0 1.0em; }
        .sp_mv .mv__box .menu a:hover {
          text-decoration-color: transparent; }

.item__list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap; }
  .item__list div {
    display: block;
    width: 50%; }

section {
  margin: calc(15% - 65px) auto 15%;
  padding-top: 65px; }
  section h2 {
    font-weight: 400;
    font-size: min(1.2em, 3.2vw);
    text-align: left;
    text-decoration: underline;
    margin-bottom: 2.0em;
    margin-left: 5%; }
  section#point {
    width: 90%; }
    section#point h2 {
      margin-left: 0; }

.point__box {
  position: relative;
  cursor: pointer;
  margin-bottom: 5%;
  overflow: hidden; }
  .point__box img {
    transition: .8s; }
    .point__box img:hover {
      transform: scale(1.05); }
  .point__box .point_txt {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%; }
    .point__box .point_txt p {
      position: absolute;
      color: #ffffff;
      top: 50%;
      left: 50%;
      width: 100%;
      transform: translate(-50%, -50%);
      font-size: min(0.9em, 3vw);
      line-height: 2.0; }
  .point__box .open__btn {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 20px;
    right: 20px; }
    @media screen and (max-width: 600px) {
      .point__box .open__btn {
        top: 15px;
        right: 15px; } }
    .point__box .open__btn::before, .point__box .open__btn::after {
      content: "";
      display: block;
      background: #ffffff;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto; }
    .point__box .open__btn::before {
      width: 24px;
      height: 1px; }
    .point__box .open__btn::after {
      width: 1px;
      height: 24px; }
    .point__box .open__btn.is-open::before, .point__box .open__btn.is-open::after {
      transform: rotate(45deg); }

#list {
  margin-bottom: 0; }
  #list ul {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap; }
    #list ul li {
      width: 50%;
      margin-bottom: 10%; }
      #list ul li div {
        overflow: hidden; }
        #list ul li div a {
          display: block;
          position: relative; }
          #list ul li div a img {
            transition: .8s; }
            #list ul li div a img:hover {
              transform: scale(1.05); }
          #list ul li div a p {
            position: absolute;
            bottom: .7em;
            line-height: 1.0;
            right: 1.0em;
            color: #ffffff;
            font-size: min(0.9em, 3vw);
            width: fit-content;
            border-bottom: 0.05em solid #ffffff; }
      #list ul li .credit {
        width: 90%;
        display: block;
        margin: 1.0em auto;
        text-align: left;
        font-size: min(0.8em, 2.9vw);
        line-height: 2.0; }
        @media screen and (max-width: 600px) {
          #list ul li .credit {
            line-height: 1.7; } }

.map {
  overflow: hidden; }
  .map img {
    transform-origin: 0 0; }

.map_txt {
  font-size: min(0.8em, 2.9vw);
  width: 95%;
  text-align: left;
  margin: 2.5% auto; }

.ass_img {
  width: 100%;
  margin-bottom: 30%; }
  .ass_img img {
    width: 90%;
    display: block; }
    .ass_img img:nth-child(1) {
      margin: 0 auto 0 0; }
    .ass_img img:nth-child(2) {
      margin: -10% 0 0 auto; }

#feature {
  padding: 10%;
  border: solid #000000;
  border-width: 0.05em 0 0.05em; }
  #feature h3 {
    font-weight: 400;
    margin-bottom: 10%;
    font-size: min(1em, 3.2vw); }
  #feature div {
    margin-bottom: 10%; }
    #feature div p {
      font-size: min(0.8em, 2.9vw);
      text-align: left;
      margin: 1.0em auto;
      line-height: 1.8; }

.lp_footer {
  padding: 10% 10% 10%; }
  .lp_footer p {
    text-align: left;
    font-size: min(0.9em, 3vw);
    margin-bottom: 15vh; }
  .lp_footer a {
    text-align: right;
    display: block; }
    .lp_footer a img {
      max-width: 100px; }