/*! Writen  by SCSS */
.plan_detail_wrap {
  padding-top: 50px;
  padding-bottom: clamp(50px, 8.334vw, 100px); }
  @media screen and (max-width: 480px) {
    .plan_detail_wrap {
      padding-top: 40px; } }
  .plan_detail_wrap .plan_detail_in {
    margin-bottom: clamp(40px, 4.616vw, 60px);
    padding-bottom: clamp(40px, 4.616vw, 60px);
    position: relative;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("../images/roomplan/detail/bg_plan_detail.jpg"); }
    .plan_detail_wrap .plan_detail_in:after {
      content: "";
      position: absolute;
      inset: 0;
      border: 1px solid #c9bc9c;
      pointer-events: none; }
    .plan_detail_wrap .plan_detail_in .type_wrap {
      justify-content: flex-start;
      background: #0f3352;
      padding: 15px clamp(20px, 2.308vw, 30px);
      column-gap: 3%; }
      @media screen and (max-width: 480px) {
        .plan_detail_wrap .plan_detail_in .type_wrap {
          flex-wrap: wrap;
          justify-content: center;
          column-gap: 20px;
          align-items: center;
          padding: 15px; } }
      .plan_detail_wrap .plan_detail_in .type_wrap .type_name_group {
        justify-content: flex-start;
        align-items: center;
        column-gap: 10%; }
        @media screen and (max-width: 820px) {
          .plan_detail_wrap .plan_detail_in .type_wrap .type_name_group {
            column-gap: 6%; } }
        @media screen and (max-width: 480px) {
          .plan_detail_wrap .plan_detail_in .type_wrap .type_name_group {
            column-gap: 5%;
            justify-content: center; } }
        .plan_detail_wrap .plan_detail_in .type_wrap .type_name_group .type_name_in {
          flex-shrink: 0; }
          .plan_detail_wrap .plan_detail_in .type_wrap .type_name_group .type_name_in .type_name {
            padding: 0 20px;
            position: relative;
            background: #c9bc9c; }
            .plan_detail_wrap .plan_detail_in .type_wrap .type_name_group .type_name_in .type_name:before {
              content: "";
              position: absolute;
              inset: 0;
              background: #e8dbba;
              clip-path: polygon(0 0, 0% 100%, 100% 0); }
            .plan_detail_wrap .plan_detail_in .type_wrap .type_name_group .type_name_in .type_name p {
              font-size: clamp(16px, 2.143vw, 30px);
              position: relative; }
              @media screen and (max-width: 480px) {
                .plan_detail_wrap .plan_detail_in .type_wrap .type_name_group .type_name_in .type_name p {
                  font-size: 5.6vw; } }
              .plan_detail_wrap .plan_detail_in .type_wrap .type_name_group .type_name_in .type_name p .big {
                font-size: 200%;
                display: inline-block;
                line-height: 1; }
        .plan_detail_wrap .plan_detail_in .type_wrap .type_name_group .type_name02 {
          border: 1px solid #c9bc9c;
          font-size: clamp(12px, 1.429vw, 20px);
          color: #e8dcb2;
          text-align: center;
          background: #00052b; }
          @media screen and (max-width: 480px) {
            .plan_detail_wrap .plan_detail_in .type_wrap .type_name_group .type_name02 {
              font-size: 3.8vw; } }
      .plan_detail_wrap .plan_detail_in .type_wrap .ldk_name {
        align-self: center;
        font-size: clamp(25px, 3.572vw, 50px);
        color: #fff1be;
        line-height: 1; }
        @media screen and (max-width: 820px) {
          .plan_detail_wrap .plan_detail_in .type_wrap .ldk_name {
            font-size: 4vw; } }
        @media screen and (max-width: 480px) {
          .plan_detail_wrap .plan_detail_in .type_wrap .ldk_name {
            font-size: 9vw; } }
        .plan_detail_wrap .plan_detail_in .type_wrap .ldk_name .small {
          display: block;
          font-size: 36%;
          white-space: nowrap;
          color: #fff8e0;
          line-height: 1.2; }
          .plan_detail_wrap .plan_detail_in .type_wrap .ldk_name .small:first-child {
            margin-top: 5px; }
      .plan_detail_wrap .plan_detail_in .type_wrap .meter_group {
        padding-left: 4%;
        margin-left: 5%;
        border-left: 1px solid rgba(255, 255, 255, 0.6);
        flex-grow: 1;
        align-items: center; }
        @media screen and (max-width: 820px) {
          .plan_detail_wrap .plan_detail_in .type_wrap .meter_group {
            padding-left: 4%;
            margin-left: 4%; } }
        @media screen and (max-width: 480px) {
          .plan_detail_wrap .plan_detail_in .type_wrap .meter_group {
            margin-left: 0;
            flex-direction: column;
            align-items: center;
            row-gap: 10px;
            width: 100%;
            padding-left: 0;
            border-left: none;
            padding-top: 15px;
            margin-top: 15px;
            border-top: 1px solid rgba(255, 255, 255, 0.6); } }
        .plan_detail_wrap .plan_detail_in .type_wrap .meter_group .meter01 {
          font-size: clamp(28px, 4.154vw, 54px);
          color: #FFF;
          line-height: 1.2; }
          @media screen and (max-width: 820px) {
            .plan_detail_wrap .plan_detail_in .type_wrap .meter_group .meter01 {
              font-size: 4vw; } }
          @media screen and (max-width: 480px) {
            .plan_detail_wrap .plan_detail_in .type_wrap .meter_group .meter01 {
              font-size: 11vw; } }
          .plan_detail_wrap .plan_detail_in .type_wrap .meter_group .meter01 .sub {
            display: block;
            font-size: 37%; }
          .plan_detail_wrap .plan_detail_in .type_wrap .meter_group .meter01 .small {
            font-size: 50%; }
          .plan_detail_wrap .plan_detail_in .type_wrap .meter_group .meter01 .small02 {
            font-size: 30%; }
        .plan_detail_wrap .plan_detail_in .type_wrap .meter_group .meter02 {
          flex-direction: column; }
          .plan_detail_wrap .plan_detail_in .type_wrap .meter_group .meter02 .meter02_in {
            column-gap: clamp(10px, 1.429vw, 20px); }
            .plan_detail_wrap .plan_detail_in .type_wrap .meter_group .meter02 .meter02_in.overline {
              padding-top: 5px;
              margin-top: 5px;
              border-top: 1px solid #FFF; }
            .plan_detail_wrap .plan_detail_in .type_wrap .meter_group .meter02 .meter02_in p {
              font-size: clamp(10px, 1.143vw, 16px);
              color: #FFF;
              line-height: 1.6; }
              @media screen and (max-width: 480px) {
                .plan_detail_wrap .plan_detail_in .type_wrap .meter_group .meter02 .meter02_in p {
                  font-size: 3.4vw; } }
    .plan_detail_wrap .plan_detail_in .draw_wrap {
      max-width: 1120px;
      margin: 0 auto clamp(40px, 4.616vw, 60px);
      width: calc(100% - 40px);
      padding-top: 50px;
      flex-direction: row-reverse; }
      @media screen and (max-width: 480px) {
        .plan_detail_wrap .plan_detail_in .draw_wrap {
          flex-direction: column;
          row-gap: 30px;
          padding-top: 30px; } }
      .plan_detail_wrap .plan_detail_in .draw_wrap .draw_group {
        width: 62.5%;
        text-align: center;
        position: relative; }
        @media screen and (max-width: 480px) {
          .plan_detail_wrap .plan_detail_in .draw_wrap .draw_group {
            width: 100%; } }
        .plan_detail_wrap .plan_detail_in .draw_wrap .draw_group .draw {
          position: relative; }
          .plan_detail_wrap .plan_detail_in .draw_wrap .draw_group .draw .hanrei {
            margin-top: 10px;
            /*
            position: absolute;
            inset:0;
            top:auto;
            */
            justify-content: center;
            column-gap: 10px; }
            .plan_detail_wrap .plan_detail_in .draw_wrap .draw_group .draw .hanrei .hanrei_txt {
              display: flex;
              align-items: center;
              column-gap: 7px; }
              @media screen and (max-width: 480px) {
                .plan_detail_wrap .plan_detail_in .draw_wrap .draw_group .draw .hanrei .hanrei_txt {
                  column-gap: 7px; } }
              @media screen and (max-width: 480px) {
                .plan_detail_wrap .plan_detail_in .draw_wrap .draw_group .draw .hanrei .hanrei_txt .icon img {
                  height: 9px; } }
              .plan_detail_wrap .plan_detail_in .draw_wrap .draw_group .draw .hanrei .hanrei_txt .text {
                font-size: clamp(10px, 0.924vw, 12px); }
      .plan_detail_wrap .plan_detail_in .draw_wrap .item_group {
        width: 28.58%; }
        @media screen and (max-width: 480px) {
          .plan_detail_wrap .plan_detail_in .draw_wrap .item_group {
            width: 100%; } }
        .plan_detail_wrap .plan_detail_in .draw_wrap .item_group .torikago {
          position: relative; }
          .plan_detail_wrap .plan_detail_in .draw_wrap .item_group .torikago:after {
            content: "";
            position: absolute;
            background: #b3f8ff;
            mix-blend-mode: multiply; }
          .plan_detail_wrap .plan_detail_in .draw_wrap .item_group .torikago.type_a:after {
            width: 15.32%;
            height: 83.14%;
            left: 9.7%;
            top: 8.3%; }
          .plan_detail_wrap .plan_detail_in .draw_wrap .item_group .torikago.type_b:after {
            width: 15%;
            height: 83.14%;
            left: 25.1%;
            top: 8.3%; }
          .plan_detail_wrap .plan_detail_in .draw_wrap .item_group .torikago.type_c:after {
            width: 15.32%;
            height: 83.14%;
            left: 39.7%;
            top: 8.3%; }
          .plan_detail_wrap .plan_detail_in .draw_wrap .item_group .torikago.type_d:after {
            width: 15.32%;
            height: 91.34%;
            left: 54.5%;
            top: 0%; }
          .plan_detail_wrap .plan_detail_in .draw_wrap .item_group .torikago.type_e:after {
            width: 15.32%;
            height: 91.34%;
            left: 69.7%;
            top: 0; }
          .plan_detail_wrap .plan_detail_in .draw_wrap .item_group .torikago.type_f:after {
            width: 15.32%;
            height: 91.34%;
            left: 84.5%;
            top: 0%; }
          .plan_detail_wrap .plan_detail_in .draw_wrap .item_group .torikago.type_g:after {
            width: 20.32%;
            height: 8.34%;
            left: 34.5%;
            top: 0%; }
        .plan_detail_wrap .plan_detail_in .draw_wrap .item_group .plan_movie_box {
          padding-top: clamp(25px, 2.917vw, 35px);
          margin-top: clamp(25px, 3.75vw, 45px);
          border-top: 1px solid #666; }
          @media screen and (max-width: 480px) {
            .plan_detail_wrap .plan_detail_in .draw_wrap .item_group .plan_movie_box {
              padding-top: 30px;
              margin-top: 30px; } }
          .plan_detail_wrap .plan_detail_in .draw_wrap .item_group .plan_movie_box .movie_ttl {
            text-align: center;
            letter-spacing: 0.1em;
            font-size: clamp(16px, 2.308vw, 30px);
            background: linear-gradient(90deg, #02909b 0%, #6a81fd 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            line-height: 1.33;
            margin-bottom: 20px; }
            @media screen and (max-width: 480px) {
              .plan_detail_wrap .plan_detail_in .draw_wrap .item_group .plan_movie_box .movie_ttl {
                font-size: 6vw; } }
          .plan_detail_wrap .plan_detail_in .draw_wrap .item_group .plan_movie_box .movie_image {
            margin-bottom: 20px; }
            .plan_detail_wrap .plan_detail_in .draw_wrap .item_group .plan_movie_box .movie_image button {
              background-color: transparent;
              border: none;
              cursor: pointer;
              outline: none;
              padding: 0;
              appearance: none; }
          .plan_detail_wrap .plan_detail_in .draw_wrap .item_group .plan_movie_box .text_box {
            display: flex;
            flex-direction: column;
            row-gap: 10px; }
            .plan_detail_wrap .plan_detail_in .draw_wrap .item_group .plan_movie_box .text_box .movie_head {
              font-size: clamp(13px, 1.385vw, 18px);
              color: #0f3352; }
              @media screen and (max-width: 480px) {
                .plan_detail_wrap .plan_detail_in .draw_wrap .item_group .plan_movie_box .text_box .movie_head {
                  font-size: 4.6vw; } }
            .plan_detail_wrap .plan_detail_in .draw_wrap .item_group .plan_movie_box .text_box .movie_read {
              font-size: clamp(10px, 1.231vw, 16px); }
              @media screen and (max-width: 480px) {
                .plan_detail_wrap .plan_detail_in .draw_wrap .item_group .plan_movie_box .text_box .movie_read {
                  font-size: 3.6vw; } }
    .plan_detail_wrap .plan_detail_in .btn_wrap {
      max-width: 640px;
      margin: 0 auto;
      width: calc(100% - 40px); }
      @media screen and (max-width: 480px) {
        .plan_detail_wrap .plan_detail_in .btn_wrap {
          flex-direction: column;
          row-gap: 10px; } }
      .plan_detail_wrap .plan_detail_in .btn_wrap a {
        width: 46.88%;
        border: 1px solid #000;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap: 10px;
        padding: 10px;
        transition: 0.3s all ease-in-out 0s; }
        @media screen and (max-width: 480px) {
          .plan_detail_wrap .plan_detail_in .btn_wrap a {
            width: 100%; } }
        body:not(.mobile) .plan_detail_wrap .plan_detail_in .btn_wrap a:hover {
          background: #E0E0E0; }
        .plan_detail_wrap .plan_detail_in .btn_wrap a .text {
          font-size: clamp(14px, 1.231vw, 16px); }
          @media screen and (max-width: 480px) {
            .plan_detail_wrap .plan_detail_in .btn_wrap a .text {
              font-size: 13px; } }
  .plan_detail_wrap .thumb_group {
    justify-content: flex-start;
    gap: 20px 3.33%;
    flex-wrap: wrap; }
    @media screen and (max-width: 480px) {
      .plan_detail_wrap .thumb_group {
        gap: 15px 4%; } }
    .plan_detail_wrap .thumb_group a {
      position: relative;
      display: block;
      width: 22.5%;
      transition: 0.3s opacity ease-in-out; }
      @media screen and (max-width: 480px) {
        .plan_detail_wrap .thumb_group a {
          width: 48%; } }
      .plan_detail_wrap .thumb_group a.cr, body:not(.mobile) .plan_detail_wrap .thumb_group a:hover {
        opacity: 0.4; }

.modal_box {
  position: fixed;
  z-index: 99999999;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease-in-out 0s; }
  .modal_box.opened {
    opacity: 1;
    pointer-events: all;
    cursor: pointer; }
    .modal_box.opened .modal_in {
      transform: scale(1);
      opacity: 1; }
  .modal_box .modal_bg {
    background: rgba(0, 0, 0, 0.5);
    inset: 0;
    position: absolute;
    z-index: -1; }
  .modal_box .modal_in {
    position: absolute;
    inset: 0;
    margin: auto;
    width: calc(100vw - 40px);
    max-width: calc((100vh - 300px)/0.5625);
    height: calc((100vw - 40px) * 0.5625);
    max-height: calc(100vh - 300px);
    transform: scale(0.95);
    opacity: 0;
    transition: all 0.3s ease-in-out 0s, opacity 0.3s ease-in-out 0.3s; }
    .modal_box .modal_in .video {
      position: relative;
      width: 100%;
      padding-top: 56.25%; }
      .modal_box .modal_in .video iframe {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%; }
  .modal_box .close_button {
    width: 60px;
    height: 60px;
    cursor: pointer;
    top: 0;
    right: 0px;
    background: #fff;
    position: fixed;
    transition: all 0.3s ease-in-out 0s; }
    .modal_box .close_button::before, .modal_box .close_button::after {
      content: "";
      display: block;
      position: absolute;
      width: 40px;
      height: 2px;
      background: #000;
      top: 29px;
      left: 10px; }
    .modal_box .close_button::before {
      transform: rotate(45deg); }
    .modal_box .close_button::after {
      transform: rotate(-45deg); }
    @media (hover: hover) {
      .modal_box .close_button:hover {
        opacity: 0.7; } }

.loaded .modal_box {
  transition: all 0.3s ease-in-out 0s; }

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