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

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

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;
  transform: translateY(50px);
  transition: 1.5s; }
  .fadeIn.visible {
    transform: translateY(0);
    opacity: 1; }

/*--------------------------------------------*/
#future.lp_wrapper {
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0;
  letter-spacing: 0.05em;
  color: #3f161f;
  font-size: 14px;
  text-align: center;
  font-family: "hiragino-kaku-gothic-pron", sans-seri;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  top: 0;
  background: #f3f1e4; }
#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;
  width: calc((100% - 500px)/2);
  background: #f3f1e4; }
  @media screen and (max-width: 1200px) {
    #future .sidearea {
      width: calc(100% - 500px);
      top: 0; } }
  #future .sidearea.boxleft {
    left: 0;
    background: url("../images/pc_back.webp?t=20260626164400") no-repeat;
    background-size: cover;
    background-position: center;
    border-right: 0.05em solid #3f161f; }
    @media screen and (max-width: 1200px) {
      #future .sidearea.boxleft {
        width: calc(100% - 500px); } }
    #future .sidearea.boxleft .pc_box {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0; }
      #future .sidearea.boxleft .pc_box .ttl {
        position: absolute;
        width: 80%;
        top: 10%;
        left: 50%;
        transform: translateX(-50%); }
      #future .sidearea.boxleft .pc_box ul {
        position: absolute;
        text-align: left;
        bottom: 2.0em;
        left: 10%; }
        #future .sidearea.boxleft .pc_box ul li {
          margin-bottom: 0.5em;
          list-style: disc; }
          #future .sidearea.boxleft .pc_box ul li a {
            font-weight: 600;
            font-size: 1.0em; }
    @media screen and (max-width: 1200px) {
      #future .sidearea.boxleft {
        width: calc(100% - 500px); } }
    @media screen and (max-width: 800px) {
      #future .sidearea.boxleft {
        display: none; } }
  #future .sidearea.boxright {
    right: 0;
    border-left: 0.05em solid #3f161f; }
    @media screen and (max-width: 1200px) {
      #future .sidearea.boxright {
        display: none; } }
    #future .sidearea.boxright .pc_box {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 70%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      transform: translate(-50%, -50%);
      max-width: 350px; }
#future #box-content {
  position: relative;
  z-index: 1000;
  width: 500px;
  margin: 0 auto;
  background: #f3f1e4;
  /* drawer */ }
  @media screen and (max-width: 1200px) {
    #future #box-content {
      margin: 0 0 0 auto; } }
  @media screen and (max-width: 800px) {
    #future #box-content {
      width: 100%; } }
  #future #box-content #drawer {
    position: relative;
    width: 500px;
    top: 0; }
    @media screen and (max-width: 800px) {
      #future #box-content #drawer {
        max-width: none;
        width: 100%; } }

.main_txt {
  margin: 20% auto; }
  .main_txt h1 {
    font-size: min(1.2em, 3.5vw);
    line-height: 2.0;
    margin-bottom: 10%;
    font-weight: 600; }
    .main_txt h1 span {
      background: rgba(117, 175, 220, 0.7);
      background-size: 100%;
      position: relative; }
      .main_txt h1 span::before {
        content: "";
        background: url("../images/SVG/icon.svg") no-repeat;
        background-size: cover;
        top: -2.5px;
        width: 5px;
        height: calc(100% + 2.5px);
        left: -2.5px;
        position: absolute; }
      .main_txt h1 span::after {
        content: "";
        background: url("../images/SVG/icon.svg") no-repeat;
        transform: rotate(180deg);
        background-size: cover;
        bottom: -2.5px;
        width: 5px;
        height: calc(100% + 2.5px);
        right: -2.5px;
        position: absolute; }
  .main_txt p {
    font-size: min(1em, 3.2vw);
    line-height: 1.8; }

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

.sp_menu {
  display: none;
  flex-direction: column;
  align-items: center;
  width: 80%;
  margin: 20% auto;
  max-width: 400px; }
  @media screen and (max-width: 1200px) {
    .sp_menu {
      display: flex; } }
  .sp_menu a {
    display: block;
    margin-bottom: 5%; }

.block {
  padding-top: 60px; }

.dotted {
  width: 100%;
  height: 1px;
  background-image: linear-gradient(to right, #3f161f 8px, transparent 8px);
  background-size: 10px 1px;
  background-repeat: repeat-x;
  background-position: left bottom;
  margin: 10% auto 30%; }

.inner_block {
  width: 90%;
  margin: 0 auto;
  max-width: 500px; }
  .inner_block .txt {
    margin: 15% auto; }
    .inner_block .txt h2 {
      letter-spacing: 0.2em;
      font-size: min(2em, 4.5vw); }
    .inner_block .txt p {
      font-size: min(1em, 3.2vw);
      margin: 5% auto;
      line-height: 2.0; }
  .inner_block h3 {
    margin: 25% auto 15%; }
    .inner_block h3 img {
      height: 47px;
      width: auto; }
      @media screen and (max-width: 800px) {
        .inner_block h3 img {
          height: 35px; } }
  .inner_block .link {
    width: 70%;
    margin: 0 auto; }
  .inner_block .pickup_item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%; }
    .inner_block .pickup_item div {
      width: calc(100%/2 - 2%);
      margin-bottom: 15%; }
      .inner_block .pickup_item div a {
        display: block;
        position: relative; }
        .inner_block .pickup_item div a::before {
          position: absolute;
          font-weight: 600;
          font-size: min(0.9em, 3vw);
          top: 1.0em;
          left: 50%;
          transform: translateX(-50%);
          color: #3f161f;
          letter-spacing: 0; }
        .inner_block .pickup_item div a.legato::before {
          content: "Legato Largo"; }
        .inner_block .pickup_item div a.anello::before {
          content: "anello"; }
        .inner_block .pickup_item div a.grande::before {
          content: "anello GRANDE"; }
      .inner_block .pickup_item div p {
        font-size: min(0.8em, 2.9vw);
        text-align: left;
        margin: 1.0em auto;
        line-height: 1.8; }
      .inner_block .pickup_item div .btn {
        max-width: 90px;
        margin: 0 0 0 auto; }

.bnr_box {
  margin-bottom: 30%; }
  .bnr_box a {
    width: 90%;
    display: block;
    margin: 0 auto 5%; }