/*! Writen  by SCSS */
.ttl_wrap {
  padding: 200px 0 80px;
  text-align: center; }
  @media screen and (max-width: 860px) {
    .ttl_wrap {
      padding: calc(200vw / 8.6) 0 calc(80vw / 8.6); } }
  @media screen and (max-width: 480px) {
    .ttl_wrap {
      padding: 80px 0 40px; } }
  .ttl_wrap img {
    margin: 0 auto; }
  .ttl_wrap .ttl {
    margin-bottom: 110px; }
    @media screen and (max-width: 480px) {
      .ttl_wrap .ttl {
        margin-bottom: 50px; } }
  .ttl_wrap .main_copy {
    color: #eee;
    font-size: clamp(23px, calc(33vw / 12), 33px);
    letter-spacing: 0.28em;
    line-height: 1.8;
    margin-bottom: 25px; }
    @media screen and (max-width: 480px) {
      .ttl_wrap .main_copy {
        font-size: clamp(15px, calc(23vw / 4.8), 23px);
        letter-spacing: 0.2em;
        line-height: 1.6;
        margin-bottom: 25px;
        margin-right: -20px;
        margin-left: -20px; } }
  .ttl_wrap .main_read {
    color: #fff;
    font-size: clamp(13px, calc(18vw / 12), 18px);
    letter-spacing: 0.05em;
    line-height: 2.3; }
    @media screen and (max-width: 480px) {
      .ttl_wrap .main_read {
        margin-right: -20px;
        margin-left: -20px; } }

.ttl_wrap {
  padding: 200px 0 80px;
  text-align: center; }
  @media screen and (max-width: 860px) {
    .ttl_wrap {
      padding: calc(200vw / 8.6) 0 calc(80vw / 8.6); } }
  @media screen and (max-width: 480px) {
    .ttl_wrap {
      padding: 80px 0 40px; } }

.ttl_wrap,
.sec1,
.sec2,
.sec3 {
  background: #141514;
  background: url("../images/penthouse/bg.jpg") center center/100% auto repeat-y;
  color: #fff; }

.sec1 .inner {
  max-width: 1000px;
  padding: 80px 20px 120px; }
  @media screen and (max-width: 1270px) {
    .sec1 .inner {
      max-width: 1230px; } }
  @media screen and (max-width: 480px) {
    .sec1 .inner {
      padding: 50px 20px 50px; } }
  .sec1 .inner .box01 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; }
    @media screen and (max-width: 767px) {
      .sec1 .inner .box01 {
        flex-direction: column; } }
    .sec1 .inner .box01 .l_cnt {
      width: calc(330% / 10);
      margin-top: calc(65% / 10); }
      @media screen and (max-width: 1270px) {
        .sec1 .inner .box01 .l_cnt {
          width: calc(330% / 12.3);
          margin-left: calc(115% / 12.3); } }
      @media screen and (max-width: 767px) {
        .sec1 .inner .box01 .l_cnt {
          width: 100%;
          margin: 0 auto 25px;
          display: flex;
          align-items: flex-end;
          justify-content: space-between; } }
      @media screen and (max-width: 480px) {
        .sec1 .inner .box01 .l_cnt {
          display: block; } }
    .sec1 .inner .box01 .r_cnt {
      width: calc(703% / 10);
      margin-right: calc(-115% / 10);
      /*@include mq($br_sp){
      	width: calc(100% + 20px);
      	margin: 0 -10px;
      }*/ }
      @media screen and (max-width: 1270px) {
        .sec1 .inner .box01 .r_cnt {
          width: calc(703% / 12.3);
          margin-right: 0; } }
      @media screen and (max-width: 767px) {
        .sec1 .inner .box01 .r_cnt {
          width: calc(100% + 40px);
          margin: 0 -20px; } }
      .sec1 .inner .box01 .r_cnt img {
        max-width: 100%;
        width: 100%; }
      .sec1 .inner .box01 .r_cnt .t_cap {
        color: #9a9791;
        bottom: calc(65% / 8.29);
        right: calc(80% / 7.04); }
        @media screen and (max-width: 480px) {
          .sec1 .inner .box01 .r_cnt .t_cap {
            font-size: 8px;
            bottom: calc(50% / 8.29);
            right: calc(75% / 7.04); } }
    .sec1 .inner .box01 .f1 {
      font-size: clamp(17px, calc(21vw / 12), 21px);
      letter-spacing: 0.2em;
      font-feature-settings: "palt";
      line-height: 1.8;
      color: #fff;
      margin-bottom: calc(35%/3.53); }
      @media screen and (max-width: 375px) {
        .sec1 .inner .box01 .f1 {
          letter-spacing: 0.8; } }
      @media screen and (max-width: 480px) {
        .sec1 .inner .box01 .f1 {
          margin-bottom: 25px; } }
    @media screen and (min-width: 767px) {
      .sec1 .inner .box01 .f2 {
        margin-bottom: calc(57%/3.53); } }
    @media screen and (max-width: 767px) {
      .sec1 .inner .box01 .txts {
        width: calc(330%/7.27); } }
    @media screen and (max-width: 480px) {
      .sec1 .inner .box01 .txts {
        width: 100%;
        margin-bottom: 20px; } }
    .sec1 .inner .box01 .txts img {
      max-width: 100%;
      width: 100%; }
    @media screen and (max-width: 767px) {
      .sec1 .inner .box01 .img_list {
        display: flex;
        flex-wrap: wrap;
        grid-gap: 2%;
        justify-content: space-between;
        width: calc(380%/7.27);
        height: fit-content; } }
    @media screen and (max-width: 480px) {
      .sec1 .inner .box01 .img_list {
        width: 90%;
        margin: 0 auto; } }
    .sec1 .inner .box01 .img_list li:not(:last-child) {
      margin-bottom: calc(35%/3.53); }
      @media screen and (max-width: 767px) {
        .sec1 .inner .box01 .img_list li:not(:last-child) {
          margin-bottom: 0; } }
    @media screen and (max-width: 767px) {
      .sec1 .inner .box01 .img_list li {
        width: 48%;
        height: fit-content;
        /* &:first-child {
             width: 100%;
             margin: 0 auto 4%;
             img {
                 width: 48%;
                 margin: 0 auto;
             }
         }*/ } }
    .sec1 .inner .box01 .img_list img {
      max-width: 100%;
      width: 100%; }
.sec1 .img06 {
  position: relative; }
  .sec1 .img06 .f3 {
    position: absolute;
    top: calc(80%/8.62);
    left: 0;
    right: 0;
    margin: auto;
    width: calc(29%/16);
    max-width: 36px; }
    .sec1 .img06 .f3 img {
      width: 100%; }
    @media screen and (max-width: 767px) {
      .sec1 .img06 .f3 {
        inset: 0;
        width: 100%;
        max-width: 100%; } }
  .sec1 .img06 .t_cap {
    bottom: -18px; }

.sec2 .inner {
  max-width: 1500px;
  padding: 160px 20px 200px; }
  @media screen and (max-width: 1540px) {
    .sec2 .inner {
      padding: calc(160%/15.4) 20px calc(200%/15.4); } }
  @media screen and (max-width: 480px) {
    .sec2 .inner {
      padding: 80px 20px 140px; } }
  .sec2 .inner.ex1 {
    padding-bottom: 0; }
  .sec2 .inner.ex2 {
    padding-top: 0; }
  .sec2 .inner .p_ttl {
    margin-bottom: 70px; }
    @media screen and (max-width: 480px) {
      .sec2 .inner .p_ttl {
        margin-bottom: 30px; } }
  .sec2 .inner .plan_features {
    padding: 30px 0;
    border-top: solid 1px #fff;
    border-bottom: solid 1px #fff;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 60px calc(60% / 11); }
    @media screen and (max-width: 480px) {
      .sec2 .inner .plan_features {
        flex-direction: column;
        gap: 0;
        padding: 20px 0; } }
    .sec2 .inner .plan_features li {
      position: relative;
      width: calc(285% / 11);
      padding: 0 15px;
      display: flex;
      justify-content: center;
      align-items: center; }
      @media screen and (max-width: 480px) {
        .sec2 .inner .plan_features li {
          width: 100%;
          padding: 0; } }
      .sec2 .inner .plan_features li > div {
        position: relative; }
        .sec2 .inner .plan_features li > div .cap_c {
          position: absolute;
          left: 0;
          width: 100%;
          bottom: -1.9em;
          color: #fff; }
          @media screen and (max-width: 480px) {
            .sec2 .inner .plan_features li > div .cap_c {
              position: static; } }
      .sec2 .inner .plan_features li:nth-child(2), .sec2 .inner .plan_features li:nth-child(5) {
        width: calc(400% / 11); }
        .sec2 .inner .plan_features li:nth-child(2) .txt, .sec2 .inner .plan_features li:nth-child(5) .txt {
          width: calc(200% / 4); }
        .sec2 .inner .plan_features li:nth-child(2) .img, .sec2 .inner .plan_features li:nth-child(5) .img {
          width: calc(175% / 4);
          position: relative; }
        .sec2 .inner .plan_features li:nth-child(2)::after, .sec2 .inner .plan_features li:nth-child(5)::after {
          right: calc(-30% / 4); }
          @media screen and (max-width: 480px) {
            .sec2 .inner .plan_features li:nth-child(2)::after, .sec2 .inner .plan_features li:nth-child(5)::after {
              display: none; } }
        @media screen and (max-width: 480px) {
          .sec2 .inner .plan_features li:nth-child(2), .sec2 .inner .plan_features li:nth-child(5) {
            width: 100%; } }
      .sec2 .inner .plan_features li .t201 {
        font-size: clamp(13px, calc(15vw / 11), 15px);
        color: #fff;
        line-height: 1;
        margin-bottom: 0.5em;
        text-align: center;
        letter-spacing: 0.1em; }
      .sec2 .inner .plan_features li .t202 {
        font-size: clamp(18px, calc(25vw / 11), 25px);
        color: #c7b38d;
        line-height: 1.3;
        text-align: center;
        letter-spacing: 0.15em; }
        .sec2 .inner .plan_features li .t202 .l {
          font-size: 140%; }
      .sec2 .inner .plan_features li:not(:last-child):not(:nth-child(3n))::after {
        content: "";
        position: absolute;
        top: 0;
        height: 100%;
        width: 1px;
        background: #fff; }
        @media screen and (max-width: 480px) {
          .sec2 .inner .plan_features li:not(:last-child):not(:nth-child(3n))::after {
            display: none; } }
      .sec2 .inner .plan_features li:nth-child(1)::after, .sec2 .inner .plan_features li:nth-child(4)::after {
        right: calc(-30% / 2.85); }
        @media screen and (max-width: 480px) {
          .sec2 .inner .plan_features li:nth-child(1)::after, .sec2 .inner .plan_features li:nth-child(4)::after {
            display: none; } }
      .sec2 .inner .plan_features li:nth-child(1)::before, .sec2 .inner .plan_features li:nth-child(2)::before, .sec2 .inner .plan_features li:nth-child(3)::before {
        content: "";
        position: absolute;
        bottom: -30px;
        left: 0;
        height: 1px;
        width: 100%;
        background: #fff; }
        @media screen and (max-width: 480px) {
          .sec2 .inner .plan_features li:nth-child(1)::before, .sec2 .inner .plan_features li:nth-child(2)::before, .sec2 .inner .plan_features li:nth-child(3)::before {
            display: none; } }
      @media screen and (max-width: 480px) {
        .sec2 .inner .plan_features li:not(:last-child) {
          margin-bottom: 20px;
          padding-bottom: 20px;
          border-bottom: solid 1px #fff; } }
      @media screen and (max-width: 480px) {
        .sec2 .inner .plan_features li:nth-child(1) {
          order: 1; }
        .sec2 .inner .plan_features li:nth-child(2) {
          order: 1; }
        .sec2 .inner .plan_features li:nth-child(3) {
          order: 5; }
        .sec2 .inner .plan_features li:nth-child(4) {
          order: 3; }
        .sec2 .inner .plan_features li:nth-child(5) {
          order: 4; }
        .sec2 .inner .plan_features li:nth-child(6) {
          order: 6; } }
  .sec2 .inner .features_wrap {
    max-width: 1100px;
    margin: 0 auto;
    position: relative; }
    .sec2 .inner .features_wrap .sur {
      position: absolute;
      bottom: calc(85% / 4);
      right: calc(-64% / 11);
      width: calc(93% / 11); }
      @media screen and (max-width: 480px) {
        .sec2 .inner .features_wrap .sur {
          bottom: 50%;
          right: 50%;
          transform: translate(50%, -50%); } }
@media screen and (max-width: 480px) {
  .sec2 .fig {
    display: none; } }
.sec2 .fig .inn {
  margin-bottom: 80px;
  margin-bottom: 60px;
  width: calc(100% - 20px);
  max-width: 1320px;
  display: inline-block;
  position: relative; }
  @media screen and (max-width: 480px) {
    .sec2 .fig .inn {
      margin-bottom: 80px; } }
  .sec2 .fig .inn .svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    pointer-events: none; }
@media screen and (max-width: 480px) {
  .sec2 .sp_slide_img_wrap {
    margin-bottom: 60px;
    margin-bottom: 40px; } }
.sec2 .sp_slide_img_wrap .svg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  pointer-events: none;
  			/*
              width: 600px !important;
              max-width: 600px !important;
  			*/ }
@media screen and (max-width: 480px) {
  .sec2 .sp_slide_img_wrap .sp_slide_img {
    position: relative; } }
@media screen and (max-width: 480px) {
  .sec2 .sp_slide_img_wrap .sp_slide_img img {
    width: 600px !important;
    max-width: 600px !important; } }
@media screen and (max-width: 480px) {
  .sec2 .sp_slide_img_wrap .hanrei {
    padding: 0 10px; } }

.sec3 .inner {
  max-width: 1506px;
  padding: 0 20px 0; }
  @media screen and (max-width: 1540px) {
    .sec3 .inner {
      padding: 0 20px 0; } }
  @media screen and (max-width: 480px) {
    .sec3 .inner {
      padding: 0 20px 0; } }
  .sec3 .inner .sec3_ttl {
    margin-bottom: 90px; }
    @media screen and (max-width: 480px) {
      .sec3 .inner .sec3_ttl {
        margin-bottom: 50px; } }
.sec3 .sp_slide_img2_wrap {
  padding-bottom: 200px; }
  @media screen and (max-width: 1540px) {
    .sec3 .sp_slide_img2_wrap {
      padding-bottom: calc(200%/15.4); } }
  @media screen and (max-width: 480px) {
    .sec3 .sp_slide_img2_wrap {
      padding-bottom: 140px; } }
.sec3 .sp_slide_img2 {
  padding: 0 20px; }
  @media screen and (max-width: 480px) {
    .sec3 .sp_slide_img2 {
      padding: 0; } }
  @media screen and (max-width: 480px) {
    .sec3 .sp_slide_img2 .slide_img2 {
      width: 600px !important;
      max-width: 600px !important; } }

.ta_r img {
  margin: 0 0 0 auto; }

.colum {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  max-width: 920px;
  margin: 0 auto 90px;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative; }
  .colum .d {
    position: absolute;
    top: 40%;
    left: -120px;
    width: 100px; }
  @media screen and (max-width: 480px) {
    .colum {
      margin: 0 auto 40px;
      padding: 15px 15px 30px;
      display: block; } }
  .colum .txt {
    width: calc(480% / 8.4); }
    @media screen and (max-width: 480px) {
      .colum .txt {
        width: 100%;
        margin-bottom: 15px; } }
    .colum .txt .c_ttl {
      color: #c7b38d;
      line-height: 1.6;
      letter-spacing: 0.1em;
      margin-bottom: 0.4em;
      padding-bottom: 0.4em;
      border-bottom: solid 1px #fff; }
      @media screen and (max-width: 480px) {
        .colum .txt .c_ttl {
          text-align: center; } }
      .colum .txt .c_ttl .s {
        font-size: 80%; }
      .colum .txt .c_ttl .l {
        font-size: 130%; }
    @media screen and (max-width: 480px) {
      .colum .txt .sp_center {
        text-align: center; } }
  .colum .img {
    width: calc(319% / 8.4); }
    @media screen and (max-width: 480px) {
      .colum .img {
        width: 100%; } }
    .colum .img figure {
      position: relative; }
      .colum .img figure .t_cap {
        bottom: -2.1em; }
    @media screen and (max-width: 480px) {
      .colum .img.img201 {
        width: 80%;
        margin-left: auto;
        margin-right: auto; } }

sup {
  font-size: 50%; }

@keyframes blinking {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.tab {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 40px; }
  @media screen and (max-width: 767px) {
    .tab {
      max-width: 390px;
      margin: 0 auto 30px; } }
  @media screen and (max-width: 480px) {
    .tab {
      max-width: 100%;
      margin: 0 auto 20px;
      padding: 0 10px;
      gap: 10px; } }
  .tab li {
    cursor: pointer;
    position: relative; }
    .tab li img {
      opacity: 0.4;
      transition: all 0.3s ease-in-out; }
    .tab li.active img, body:not(.mobile) .tab li:hover img {
      opacity: 1; }
    .tab li .icon {
      position: absolute;
      top: calc(50% - 0.7em);
      right: 0.4em;
      z-index: 5;
      height: 1.4em;
      width: 3.7em;
      font-size: clamp(6px, calc(12vw / 11.6), 12px); }
      @media screen and (max-width: 480px) {
        .tab li .icon {
          font-size: calc(7.5vw / 3.9);
          height: 1.4em;
          width: 3.3em;
          right: 3px;
          top: calc(50% - 0.7em); } }
      .tab li .icon p {
        background: #a5040d;
        animation: blinking 1s ease-in-out infinite alternate;
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-family: "EB Garamond",serif;
        letter-spacing: -0.02em;
        line-height: 1; }
        @media screen and (max-width: 480px) {
          .tab li .icon p {
            letter-spacing: -0.06em; } }
    .tab li.active .icon {
      opacity: 0; }
  @media screen and (max-width: 767px) {
    .tab li {
      width: 48%;
      text-align: center; }
      .tab li img {
        width: 100%; } }

.tab_cont {
  position: relative; }
  .tab_cont li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    pointer-events: none; }
    .tab_cont li.active {
      opacity: 1;
      position: relative;
      pointer-events: all; }

.tab_cap {
  position: relative; }
  .tab_cap li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: all 0.3s ease-in-out; }
    .tab_cap li.active {
      opacity: 1;
      position: relative; }

.vbox {
  position: relative;
  margin-inline: auto;
  width: calc(1000% / 13.2); }
  @media screen and (max-width: 767px) {
    .vbox {
      width: 100%; } }
  .vbox .vpoint {
    position: absolute;
    cursor: pointer; }
    .vbox .vpoint p {
      text-align: center;
      position: absolute;
      font-size: clamp(12px, calc(15vw / 12.6), 15px);
      letter-spacing: 0.1em;
      line-height: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: #fffabb;
      color: #a5040d;
      animation: blinking 0.8s ease-in-out infinite alternate; }
      .vbox .vpoint p .click {
        font-size: 80%;
        display: inline-block;
        background: #a5040d;
        color: #fff;
        padding: 0.15em 0.8em;
        margin-top: 5px; }
      @media screen and (max-width: 480px) {
        .vbox .vpoint p {
          font-size: calc(9vw / 3.9); } }
      .vbox .vpoint p .m {
        font-size: 80%;
        display: inline-block;
        transition: all 0.3s ease-in-out 0s;
        opacity: 0; }
        @media screen and (max-width: 767px) {
          .vbox .vpoint p .m {
            opacity: 1; } }
      .vbox .vpoint p::after {
        display: block;
        position: absolute;
        transition: all 0.3s ease-in-out 0s;
        background: #fff;
        z-index: 10; }
    .vbox .vpoint.a p {
      width: 10.2em;
      padding: 0.4em 0;
      top: 58%;
      left: 50%;
      transform: translateX(-50%); }
      .vbox .vpoint.a p::after {
        left: 30%;
        width: 40%;
        bottom: -0.4em;
        height: 1px; }
        @media screen and (max-width: 767px) {
          .vbox .vpoint.a p::after {
            left: 0;
            width: 100%; } }
      .vbox .vpoint.a p .m {
        margin-right: 0.2em; }
    .vbox .vpoint.b p {
      width: 10.2em;
      padding: 0.4em 0;
      top: 58%;
      left: 50%;
      transform: translateX(-50%); }
      .vbox .vpoint.b p::after {
        left: 30%;
        width: 40%;
        bottom: -0.4em;
        height: 1px; }
        @media screen and (max-width: 767px) {
          .vbox .vpoint.b p::after {
            left: 0;
            width: 100%; } }
      .vbox .vpoint.b p .m {
        margin-right: 0.2em; }
    .vbox .vpoint.r p {
      height: 10.2em;
      padding: 0 0.4em;
      writing-mode: vertical-rl;
      text-orientation: upright;
      left: 50%;
      top: 50%;
      transform: translateY(-50%); }
      .vbox .vpoint.r p .click {
        padding: 0.8em 0.15em;
        margin-top: 0;
        margin-left: 5px; }
      @media screen and (max-width: 767px) {
        .vbox .vpoint.r p {
          left: 28%;
          height: 10.2em; } }
      .vbox .vpoint.r p::after {
        top: 30%;
        height: 40%;
        left: -0.4em;
        width: 1px;
        background: #333; }
        @media screen and (max-width: 767px) {
          .vbox .vpoint.r p::after {
            top: 0;
            height: 100%; } }
      .vbox .vpoint.r p .m {
        margin-bottom: 0.2em; }
    .vbox .vpoint.l p {
      height: 10.2em;
      writing-mode: vertical-rl;
      right: 50%;
      top: 50%;
      transform: translateY(-50%); }
      @media screen and (max-width: 767px) {
        .vbox .vpoint.l p {
          height: 10.2em; } }
      .vbox .vpoint.l p::after {
        top: 30%;
        height: 40%;
        left: -0.4em;
        width: 1px; }
        @media screen and (max-width: 767px) {
          .vbox .vpoint.l p::after {
            top: 0;
            height: 100%; } }
      .vbox .vpoint.l p .m {
        margin-bottom: 0.2em; }
    .vbox .vpoint.c p {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      padding: 0;
      transform: none;
      background: none; }
      .vbox .vpoint.c p::after {
        content: none; }
    body:not(.mobile) .vbox .vpoint:hover p .m {
      opacity: 1; }
    body:not(.mobile) .vbox .vpoint:hover.b p::after {
      left: 0;
      width: 100%; }
    body:not(.mobile) .vbox .vpoint:hover.r p::after {
      top: 0;
      height: 100%; }
    body:not(.mobile) .vbox .vpoint:hover.l p::after {
      top: 0;
      height: 100%; }
    .vbox .vpoint.vpoint_c1 {
      width: calc(211% / 10);
      top: calc(530% / 6);
      left: calc(315% /10); }
    .vbox .vpoint.vpoint_c2 {
      width: calc(211% / 10);
      top: calc(530% / 6);
      left: calc(616% / 10); }
    .vbox .vpoint.vpoint_c3 {
      width: calc(129% / 10);
      top: calc(307% / 6);
      left: calc(875% / 10); }
    .vbox .vpoint.vpoint_c7 {
      width: calc(160% / 10);
      top: calc(430% / 6);
      left: calc(345% / 10); }
    .vbox .vpoint.vpoint_c4 {
      width: calc(160% / 10);
      top: calc(430% / 6);
      left: calc(648% / 10); }
    .vbox .vpoint.vpoint_c5 {
      width: calc(160% / 10);
      top: calc(330% / 6);
      left: calc(1010% / 10); }
      @media screen and (max-width: 767px) {
        .vbox .vpoint.vpoint_c5 {
          left: calc(1015% / 10); } }
    .vbox .vpoint.vpoint_c6 {
      width: calc(160% / 10);
      top: calc(420% / 6);
      left: calc(1010% / 10); }
      @media screen and (max-width: 767px) {
        .vbox .vpoint.vpoint_c6 {
          left: calc(1015% / 10); } }

.vmdl {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  opacity: 0;
  pointer-events: none;
  z-index: 999999;
  transition: opacity 0.4s ease-in-out 0s;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center; }
  .vmdl * {
    pointer-events: none; }
  .vmdl.active {
    z-index: 999999;
    opacity: 1; }
    .vmdl.active * {
      pointer-events: all; }
  .vmdl .vmdl_bg {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1; }
  .vmdl .inn {
    z-index: 5;
    position: relative; }
    @media (max-height: 755px) {
      .vmdl .inn {
        max-width: 800px; } }
    @media (max-height: 620px) {
      .vmdl .inn {
        max-width: 600px; } }
    @media screen and (max-width: 480px) {
      .vmdl .inn {
        margin-bottom: 20px; } }
    .vmdl .inn .vmdl_close {
      cursor: pointer;
      position: absolute;
      right: 0;
      top: -25px; }
    .vmdl .inn .slide_thum {
      display: flex;
      justify-content: space-between;
      background: rgba(0, 0, 0, 0.6); }
      .vmdl .inn .slide_thum li {
        flex: 1;
        cursor: pointer;
        text-align: center;
        font-size: clamp(12px, calc(18vw / 10), 18px);
        color: #fff;
        text-align: center;
        padding: 0.45em 2px;
        opacity: 0.4;
        transition: all 0.3s ease-in-out 0s; }
        .vmdl .inn .slide_thum li.active, body:not(.mobile) .vmdl .inn .slide_thum li:hover {
          opacity: 1; }
    .vmdl .inn .slide_main {
      position: relative;
      background: #fff; }
      .vmdl .inn .slide_main li {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: all 0.4s ease-in-out 0s; }
        .vmdl .inn .slide_main li:nth-child(1) {
          position: relative; }
        .vmdl .inn .slide_main li.active {
          opacity: 1; }

/*# sourceMappingURL=penthouse.css.map */