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

/*--------------------------------------------*/
#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: 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; }
  @media screen and (max-width: 1200px) {
    #future.lp_wrapper {
      flex-direction: column; } }
#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?t=20260501112300") no-repeat;
    background-size: cover;
    background-position: center;
    width: calc((100% - 500px) - 20%); }
    #future .sidearea.boxleft .pc_box .logo {
      max-width: 120px;
      position: absolute;
      top: 32px;
      left: 32px; }
    #future .sidearea.boxleft .pc_box .txt {
      color: #ffffff;
      position: absolute;
      left: 32px;
      bottom: 32px; }
      #future .sidearea.boxleft .pc_box .txt h2 {
        font-size: min(1.1em, 3.5vw);
        font-weight: 400;
        margin-bottom: 1.0em;
        font-weight: 700; }
      #future .sidearea.boxleft .pc_box .txt p {
        font-weight: 300;
        font-size: min(0.9em, 3vw); }
    @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: #efefef; }
    #future .sidearea.boxright .pc_box {
      width: auto;
      width: 80%;
      position: absolute;
      bottom: 10%;
      left: 50%;
      transform: translateX(-50%); }
      #future .sidearea.boxright .pc_box ul {
        width: 100%;
        border-top: 1px solid #000000; }
        #future .sidearea.boxright .pc_box ul li {
          border-bottom: 1px solid #000000; }
          #future .sidearea.boxright .pc_box ul li a {
            display: block;
            padding: 1.2em 1.0em;
            text-align: left;
            font-weight: 600;
            font-size: min(1em, 3.2vw);
            letter-spacing: 1px;
            position: relative; }
            #future .sidearea.boxright .pc_box ul li a::after {
              position: absolute;
              content: "";
              width: 8px;
              height: 8px;
              border: solid #000000;
              border-width: 1px 1px 0 0;
              top: 50%;
              right: 1.0em;
              transform: translateY(-50%) rotate(45deg); }
            #future .sidearea.boxright .pc_box ul li a:hover {
              color: #507373; }
              #future .sidearea.boxright .pc_box ul li a:hover::after {
                border-color: #507373; }
    @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;
    /* innerBox */ }
    @media screen and (max-width: 600px) {
      #future #box-content #drawer {
        max-width: none;
        width: 100%; } }
    #future #box-content #drawer .innerBox {
      overflow-x: hidden; }
      #future #box-content #drawer .innerBox .mv {
        position: relative;
        padding-bottom: 140px;
        display: none; }
        @media screen and (max-width: 600px) {
          #future #box-content #drawer .innerBox .mv {
            display: block; } }
        #future #box-content #drawer .innerBox .mv .scroll_down {
          position: absolute;
          bottom: 0;
          left: 50%; }
          #future #box-content #drawer .innerBox .mv .scroll_down a {
            position: absolute;
            font-size: min(1.1em, 3.4vw);
            bottom: 166px;
            left: 50%;
            transform: translateX(-50%);
            color: #807672; }
          #future #box-content #drawer .innerBox .mv .scroll_down::before {
            content: "";
            position: absolute;
            bottom: 7px;
            left: -2px;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #807672;
            animation: circlemove 2.6s ease-in-out infinite, cirlemovehide 2.6s ease-out infinite; }
          #future #box-content #drawer .innerBox .mv .scroll_down::after {
            content: "";
            position: absolute;
            bottom: 7px;
            left: 0;
            width: 1px;
            height: 150px;
            background: #807672; }
      #future #box-content #drawer .innerBox .txt {
        margin: min(20vh, 15%) auto; }
        #future #box-content #drawer .innerBox .txt h1 {
          font-size: min(1.2em, 3.5vw);
          font-weight: 600;
          margin-bottom: 1.0em; }
        #future #box-content #drawer .innerBox .txt p {
          font-size: min(1em, 3.2vw);
          margin-bottom: 1.0em;
          line-height: 2.0; }
      #future #box-content #drawer .innerBox .sp_menu {
        width: 80%;
        margin: 15vh auto;
        display: none; }
        @media screen and (max-width: 1200px) {
          #future #box-content #drawer .innerBox .sp_menu {
            display: block; } }
        #future #box-content #drawer .innerBox .sp_menu ul {
          width: 100%;
          border-top: 1px solid #000000; }
          #future #box-content #drawer .innerBox .sp_menu ul li {
            border-bottom: 1px solid #000000; }
            #future #box-content #drawer .innerBox .sp_menu ul li a {
              display: block;
              padding: 1.2em 1.0em;
              text-align: left;
              font-weight: 600;
              font-size: min(1em, 3.2vw);
              letter-spacing: 1px;
              position: relative; }
              #future #box-content #drawer .innerBox .sp_menu ul li a::after {
                position: absolute;
                content: "";
                width: 8px;
                height: 8px;
                border: solid #000000;
                border-width: 1px 1px 0 0;
                top: 50%;
                right: 1.0em;
                transform: translateY(-50%) rotate(45deg); }
              #future #box-content #drawer .innerBox .sp_menu ul li a:hover {
                color: #507373; }
                #future #box-content #drawer .innerBox .sp_menu ul li a:hover::after {
                  border-color: #507373; }
      #future #box-content #drawer .innerBox section {
        background: #507373;
        padding: 80px 0 0; }
        #future #box-content #drawer .innerBox section.back {
          background: #807672; }
        #future #box-content #drawer .innerBox section .txtbox {
          color: #ffffff;
          width: 80%;
          margin: 0 auto;
          padding-bottom: 80px; }
          #future #box-content #drawer .innerBox section .txtbox h2 {
            font-size: min(1.2em, 3.8vw);
            font-weight: 400;
            letter-spacing: .1em;
            padding: 0.7em 0;
            border: solid #ffffff;
            border-width: 1px 0 1px;
            margin-bottom: 3.0em; }
          #future #box-content #drawer .innerBox section .txtbox p {
            font-size: min(1em, 3.2vw);
            line-height: 1.8; }
            @media screen and (max-width: 600px) {
              #future #box-content #drawer .innerBox section .txtbox p {
                text-align: left; }
                #future #box-content #drawer .innerBox section .txtbox p br {
                  display: none; } }
        #future #box-content #drawer .innerBox section .itemBox {
          background: #ffffff;
          border-top-left-radius: 4.0em;
          border-top-right-radius: 4.0em;
          padding: 100px 0; }
          #future #box-content #drawer .innerBox section .itemBox ul {
            width: 80%;
            margin: 0 auto;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            flex-wrap: wrap; }
            @media screen and (max-width: 600px) {
              #future #box-content #drawer .innerBox section .itemBox ul {
                width: 85%; } }
            #future #box-content #drawer .innerBox section .itemBox ul li {
              width: calc(100%/2 - 2%);
              position: relative;
              margin-bottom: 15%; }
              @media screen and (max-width: 600px) {
                #future #box-content #drawer .innerBox section .itemBox ul li {
                  padding-top: 20px; } }
              #future #box-content #drawer .innerBox section .itemBox ul li .size {
                position: absolute;
                top: 0;
                left: 0;
                font-size: 1.2em;
                border: 1px solid #000000;
                border-radius: 50%;
                padding: 3px 3px 3px 2px;
                width: 43px;
                height: 43px;
                line-height: calc(43px - 7px); }
                #future #box-content #drawer .innerBox section .itemBox ul li .size.small {
                  font-size: .9em;
                  line-height: 1.2;
                  padding: 5px 2px 1px; }
              #future #box-content #drawer .innerBox section .itemBox ul li dl {
                font-size: min(0.9em, 3.2vw);
                line-height: 2.0; }
                #future #box-content #drawer .innerBox section .itemBox ul li dl dd, #future #box-content #drawer .innerBox section .itemBox ul li dl dt {
                  font-size: 100%; }
              #future #box-content #drawer .innerBox section .itemBox ul li a {
                display: block; }
                #future #box-content #drawer .innerBox section .itemBox ul li a.btn {
                  color: #ffffff;
                  background: #507373;
                  font-size: min(1em, 3.2vw);
                  padding: 0.5em 2.0em;
                  line-height: 1.0;
                  border-radius: 50vh;
                  width: fit-content;
                  margin: 1.0em auto;
                  border: 1px solid #507373; }
                  #future #box-content #drawer .innerBox section .itemBox ul li a.btn:hover {
                    background: #ffffff;
                    color: #507373; }
                  #future #box-content #drawer .innerBox section .itemBox ul li a.btn.disabled {
                    color: #507373;
                    background: #ffffff;
                    border: none;
                    font-weight: bold; }
                  #future #box-content #drawer .innerBox section .itemBox ul li a.btn.back {
                    background: #807672;
                    border-color: #807672; }
                    #future #box-content #drawer .innerBox section .itemBox ul li a.btn.back:hover {
                      color: #807672;
                      background: #ffffff; }
          #future #box-content #drawer .innerBox section .itemBox .more {
            margin: 10% auto 15%;
            width: 60%; }
            #future #box-content #drawer .innerBox section .itemBox .more a {
              display: block;
              font-size: min(1em, 3.2vw);
              padding: 1.0em;
              border: 1px solid #000000;
              border-radius: 50vh; }
              #future #box-content #drawer .innerBox section .itemBox .more a:hover {
                color: #ffffff;
                background: #507373;
                border-color: #507373; }
              #future #box-content #drawer .innerBox section .itemBox .more a.back:hover {
                background: #807672;
                border-color: #807672; }
        #future #box-content #drawer .innerBox section.feature {
          padding: 80px 10%; }
          #future #box-content #drawer .innerBox section.feature h2 {
            color: #ffffff;
            font-size: min(1.2em, 3.8vw);
            font-weight: 600;
            letter-spacing: .1em;
            margin-bottom: 80px; }
          #future #box-content #drawer .innerBox section.feature div {
            margin-bottom: 10%; }
            #future #box-content #drawer .innerBox section.feature div p {
              font-size: min(0.9em, 3vw);
              line-height: 1.8;
              margin: 2.0em auto;
              color: #ffffff;
              text-align: left; }

@keyframes circlemove {
  0% {
    bottom: 150px; }
  100% {
    bottom: 0px; } }
@keyframes cirlemovehide {
  0% {
    opacity: 0; }
  50% {
    opacity: 1; }
  80% {
    opacity: 0.9; }
  100% {
    opacity: 0; } }