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

a {
  text-decoration: none;
  color: #000000; }
  a.disabled {
    pointer-events: none;
    text-decoration: none; }

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

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

p {
  margin: 0;
  padding: 0; }

.eng {
  font-family: "futura-pt", sans-serif;
  font-weight: 700; }

.wrapper {
  margin: 0 auto !important; }

main {
  max-width: 100%; }

.mainBox {
  margin: 0 auto !important; }

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

.fadeIn {
  opacity: 0;
  transition: all .8s; }
  .fadeIn.is_active {
    opacity: 1 !important; }

/*--------------------------------------------*/
#future {
  /* lp_mainBox */ }
  #future.lp_wrapper {
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0;
    letter-spacing: 1px;
    color: #000000;
    font-size: 16px;
    text-align: center;
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 300;
    font-style: normal;
    overflow-x: visible;
    line-height: 1.5; }
    #future.lp_wrapper section {
      margin: 0 auto; }
  #future .lp_mainBox {
    width: 100%;
    height: 100%;
    position: relative;
    /* box-content */ }
    #future .lp_mainBox .sidearea {
      position: fixed;
      top: 60px;
      height: 100%;
      overflow: hidden;
      background: #c6c0b8; }
      #future .lp_mainBox .sidearea.boxleft {
        width: calc(100% - 600px);
        left: 0; }
        @media screen and (max-width: 1080px) {
          #future .lp_mainBox .sidearea.boxleft {
            width: calc((100% - 600px)/2); } }
        @media screen and (max-width: 600px) {
          #future .lp_mainBox .sidearea.boxleft {
            display: none; } }
        #future .lp_mainBox .sidearea.boxleft .ttl {
          margin-bottom: 7%; }
        #future .lp_mainBox .sidearea.boxleft .pc_navi {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-bottom: 1px solid #ffffff;
          padding-bottom: 2%;
          max-height: 80%; }
          @media screen and (max-width: 1080px) {
            #future .lp_mainBox .sidearea.boxleft .pc_navi {
              display: none; } }
          #future .lp_mainBox .sidearea.boxleft .pc_navi ul {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap; }
            #future .lp_mainBox .sidearea.boxleft .pc_navi ul li {
              width: 48%;
              margin-bottom: 4%; }
              #future .lp_mainBox .sidearea.boxleft .pc_navi ul li a {
                display: block;
                position: relative; }
                #future .lp_mainBox .sidearea.boxleft .pc_navi ul li a::after {
                  content: "";
                  background: rgba(165, 103, 92, 0.5);
                  opacity: 0;
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  top: 0;
                  left: 0; }
                #future .lp_mainBox .sidearea.boxleft .pc_navi ul li a:hover::after {
                  opacity: 1;
                  transition: .4s; }
      #future .lp_mainBox .sidearea.boxright {
        right: 0;
        width: 0; }
        @media screen and (max-width: 1080px) {
          #future .lp_mainBox .sidearea.boxright {
            width: calc((100% - 600px)/2); } }
        @media screen and (max-width: 600px) {
          #future .lp_mainBox .sidearea.boxright {
            width: 0; } }
    #future .lp_mainBox #box-content {
      position: relative;
      overflow: visible;
      -ms-overflow-style: none;
      top: 0;
      max-width: 600px;
      background: #f7f8f8;
      left: calc(100% - 600px);
      /* drawer */ }
      @media screen and (max-width: 1080px) {
        #future .lp_mainBox #box-content {
          left: calc((100% - 600px)/2); } }
      @media screen and (max-width: 600px) {
        #future .lp_mainBox #box-content {
          max-width: none;
          left: 0;
          width: 100%; } }
      #future .lp_mainBox #box-content #drawer {
        padding: 0;
        position: relative;
        top: 0;
        overflow: visible;
        top: 0;
        left: 0;
        z-index: 1000;
        background: #f7f8f8; }
        @media screen and (max-width: 1500px) {
          #future .lp_mainBox #box-content #drawer {
            left: 0;
            margin: 0 auto; } }
        @media screen and (max-width: 600px) {
          #future .lp_mainBox #box-content #drawer {
            width: 100%; } }
        #future .lp_mainBox #box-content #drawer .line {
          width: 100%; }
        #future .lp_mainBox #box-content #drawer .func {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          width: 75%;
          margin: 10% auto; }
          #future .lp_mainBox #box-content #drawer .func div {
            width: calc(100%/2 - 5%); }
          #future .lp_mainBox #box-content #drawer .func p {
            font-weight: 600;
            font-size: 1.2em;
            letter-spacing: 0.2em;
            margin-top: 1.0em; }
            @media screen and (max-width: 600px) {
              #future .lp_mainBox #box-content #drawer .func p {
                font-size: 4.0vw; } }
        #future .lp_mainBox #box-content #drawer .mainTxt {
          margin: 10% auto; }
          #future .lp_mainBox #box-content #drawer .mainTxt p {
            line-height: 2.2;
            font-size: 0.9em;
            font-weight: 300; }
            @media screen and (max-width: 600px) {
              #future .lp_mainBox #box-content #drawer .mainTxt p {
                font-size: 3.2vw; } }
        #future .lp_mainBox #box-content #drawer div.link {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          flex-wrap: wrap;
          width: 70%;
          margin: 10% auto -30px; }
          @media screen and (max-width: 600px) {
            #future .lp_mainBox #box-content #drawer div.link {
              width: 85%; } }
          #future .lp_mainBox #box-content #drawer div.link div {
            width: calc(100%/2 - 10%); }
            @media screen and (max-width: 600px) {
              #future .lp_mainBox #box-content #drawer div.link div {
                width: calc(100%/2 - 5%); } }
            #future .lp_mainBox #box-content #drawer div.link div img {
              max-height: 190px;
              width: auto; }
              @media screen and (max-width: 600px) {
                #future .lp_mainBox #box-content #drawer div.link div img {
                  max-height: 170px; } }
            #future .lp_mainBox #box-content #drawer div.link div p {
              font-weight: 600;
              font-size: 1.0em;
              line-height: 2.5; }
              @media screen and (max-width: 600px) {
                #future .lp_mainBox #box-content #drawer div.link div p {
                  font-size: 3.8vw; } }
            #future .lp_mainBox #box-content #drawer div.link div a {
              display: block;
              margin-bottom: 2.0em; }
              #future .lp_mainBox #box-content #drawer div.link div a img {
                width: 60%;
                margin: 0 auto; }
                @media screen and (max-width: 600px) {
                  #future .lp_mainBox #box-content #drawer div.link div a img {
                    width: 70%; } }
        #future .lp_mainBox #box-content #drawer .itemBox {
          padding-top: 60px;
          margin-bottom: 20%; }
          #future .lp_mainBox #box-content #drawer .itemBox.last {
            padding-bottom: 20%;
            margin-bottom: 0; }
        #future .lp_mainBox #box-content #drawer .slide {
          position: relative;
          margin: 10% auto 3%; }
          @media screen and (max-width: 600px) {
            #future .lp_mainBox #box-content #drawer .slide {
              margin-top: 15%; } }
          #future .lp_mainBox #box-content #drawer .slide .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, #future .lp_mainBox #box-content #drawer .slide .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
            margin: 0 6px 6px; }
          #future .lp_mainBox #box-content #drawer .slide .swiper-pagination {
            position: relative !important;
            bottom: -40px !important; }
          #future .lp_mainBox #box-content #drawer .slide .swiper-pagination-bullet {
            height: 8px;
            width: 8px; }
          #future .lp_mainBox #box-content #drawer .slide .swiper-slide img {
            height: auto;
            width: 100%; }
          #future .lp_mainBox #box-content #drawer .slide .swiper {
            padding: 20px 0 30px;
            position: relative; }
            #future .lp_mainBox #box-content #drawer .slide .swiper::before {
              position: absolute;
              content: "";
              top: -20px;
              left: 0;
              width: 100%;
              height: calc(100% - 10px);
              background: #8e8f6d; }
          #future .lp_mainBox #box-content #drawer .slide.green .swiper-pagination-bullet {
            background-color: #8e8f6d; }
          #future .lp_mainBox #box-content #drawer .slide.red .swiper-pagination-bullet {
            background-color: #a5675c; }
          #future .lp_mainBox #box-content #drawer .slide.red .swiper::before {
            background: #a5675c; }
        #future .lp_mainBox #box-content #drawer .item_detail {
          margin: 10% auto;
          width: 90%; }
          #future .lp_mainBox #box-content #drawer .item_detail h3 {
            font-weight: 600;
            font-size: 1.2em; }
            @media screen and (max-width: 600px) {
              #future .lp_mainBox #box-content #drawer .item_detail h3 {
                font-size: 3.8vw; } }
          #future .lp_mainBox #box-content #drawer .item_detail p {
            margin: 5% auto 10%;
            font-size: 0.9em;
            line-height: 2.0; }
            @media screen and (max-width: 600px) {
              #future .lp_mainBox #box-content #drawer .item_detail p {
                font-size: 3.2vw; } }
          #future .lp_mainBox #box-content #drawer .item_detail .spec {
            margin: 10% auto;
            width: 90%; }
            @media screen and (max-width: 600px) {
              #future .lp_mainBox #box-content #drawer .item_detail .spec {
                width: 92%; } }
            #future .lp_mainBox #box-content #drawer .item_detail .spec ul {
              margin-top: 10%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              flex-wrap: wrap; }
              #future .lp_mainBox #box-content #drawer .item_detail .spec ul li {
                width: calc(100%/2 - 2%);
                background: #a5675c;
                color: #ffffff;
                line-height: 1.0;
                font-size: 0.8em;
                margin-bottom: 2%;
                padding: 1.0em 0;
                border-radius: 50vh; }
                @media screen and (max-width: 600px) {
                  #future .lp_mainBox #box-content #drawer .item_detail .spec ul li {
                    font-size: 2.8vw;
                    width: calc(100%/2 - 1%); } }
              #future .lp_mainBox #box-content #drawer .item_detail .spec ul.green li {
                background: #8e8f6d; }
          #future .lp_mainBox #box-content #drawer .item_detail .price {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 80%;
            font-size: 1.2em;
            margin-bottom: 5%; }
            @media screen and (max-width: 600px) {
              #future .lp_mainBox #box-content #drawer .item_detail .price {
                font-size: 3.8vw; } }
            #future .lp_mainBox #box-content #drawer .item_detail .price span {
              font-family: "din-2014-narrow", sans-serif;
              font-weight: 600;
              letter-spacing: 0;
              font-size: 100%; }
          #future .lp_mainBox #box-content #drawer .item_detail .btn {
            border-top: 1px solid #000000;
            padding-top: 10%; }
            #future .lp_mainBox #box-content #drawer .item_detail .btn a {
              margin: 0 auto 10%; }