/*! Writen  by SCSS */
@media screen and (max-width: 480px) {
  .sec_ttl_wrap.midashi {
    margin-bottom: 40px; } }

.sec01 {
  padding-bottom: clamp(60px, 10.834vw, 130px); }
  .sec01 .sec_ttl_wrap .sec_ttl {
    color: #FFF; }
  .sec01 .title {
    padding: 5px;
    border: double 3px #fff1be;
    color: #fff1be;
    text-align: center;
    font-size: clamp(16px, 1.693vw, 22px);
    display: block;
    margin: 0 auto 40px;
    width: 60%; }
    @media screen and (max-width: 480px) {
      .sec01 .title {
        display: none; } }
  .sec01 .thumbnail {
    display: grid;
    justify-content: space-between;
    gap: clamp(20px, 3.334vw, 40px) 3.33%;
    grid-template-columns: repeat(4, 1fr); }
    @media screen and (max-width: 480px) {
      .sec01 .thumbnail {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px 4%; } }
    .sec01 .thumbnail .plan_thumb_box {
      position: relative; }
      @media screen and (max-width: 820px) {
        .sec01 .thumbnail .plan_thumb_box.on_click .plan_thumb {
          pointer-events: all; } }
      .sec01 .thumbnail .plan_thumb_box .plan_thumb {
        position: relative;
        display: block;
        line-height: 0;
        transition: 0.3s all ease-in-out 0s; }
        @media (hover: hover) {
          .sec01 .thumbnail .plan_thumb_box .plan_thumb:hover {
            opacity: 0.5; } }
        @media screen and (max-width: 820px) {
          .sec01 .thumbnail .plan_thumb_box .plan_thumb {
            pointer-events: none; } }
        .sec01 .thumbnail .plan_thumb_box .plan_thumb.active {
          opacity: 0.5; }
          @media screen and (max-width: 480px) {
            .sec01 .thumbnail .plan_thumb_box .plan_thumb.active:after {
              pointer-events: none; } }
    .sec01 .thumbnail .parse_group {
      grid-column: span 3;
      grid-row: span 3;
      position: relative; }
      @media screen and (max-width: 480px) {
        .sec01 .thumbnail .parse_group {
          grid-column: span 2;
          grid-row: auto; } }
      .sec01 .thumbnail .parse_group .parse_img {
        position: relative; }
        .sec01 .thumbnail .parse_group .parse_img:after {
          content: "";
          position: absolute;
          inset: 0;
          display: block;
          pointer-events: none;
          border: 1px solid #666; }
        .sec01 .thumbnail .parse_group .parse_img .parse_link {
          position: absolute;
          inset: 0;
          z-index: 1; }
          .sec01 .thumbnail .parse_group .parse_img .parse_link li {
            position: absolute; }
            .sec01 .thumbnail .parse_group .parse_img .parse_link li.item_a {
              max-width: 102px;
              width: 11.47%;
              left: 20.57%;
              top: 16.8%; }
            .sec01 .thumbnail .parse_group .parse_img .parse_link li.item_b {
              max-width: 85px;
              width: 9.56%;
              left: 32.07%;
              top: 16.8%; }
            .sec01 .thumbnail .parse_group .parse_img .parse_link li.item_c {
              max-width: 79px;
              width: 8.88%;
              left: 41.67%;
              top: 16.8%; }
            .sec01 .thumbnail .parse_group .parse_img .parse_link li.item_d {
              max-width: 74px;
              width: 8.32%;
              left: 50.47%;
              top: 8%; }
            .sec01 .thumbnail .parse_group .parse_img .parse_link li.item_e {
              max-width: 82px;
              width: 9.22%;
              left: 58.87%;
              top: 8%; }
            .sec01 .thumbnail .parse_group .parse_img .parse_link li.item_f {
              max-width: 78px;
              width: 8.77%;
              left: 68%;
              top: 8%; }
            .sec01 .thumbnail .parse_group .parse_img .parse_link li.item_g {
              max-width: 164px;
              width: 18.43%;
              left: 32.07%;
              top: 8%; }
            .sec01 .thumbnail .parse_group .parse_img .parse_link li a {
              display: block;
              line-height: 0;
              opacity: 0; }
              @media (hover: hover) {
                .sec01 .thumbnail .parse_group .parse_img .parse_link li a:hover {
                  animation: flashing 2s ease-in-out 0s infinite; } }
              .sec01 .thumbnail .parse_group .parse_img .parse_link li a.active {
                animation: flashing 2s ease-in-out 0s infinite; }
      .sec01 .thumbnail .parse_group .parse_txt {
        display: none; }
        @media screen and (max-width: 480px) {
          .sec01 .thumbnail .parse_group .parse_txt {
            padding: 5px;
            border: double 3px #fff1be;
            color: #fff1be;
            text-align: center;
            font-size: clamp(16px, 1.693vw, 22px);
            display: block;
            margin: 20px auto 5px;
            width: 100%;
            line-height: 1.2;
            grid-column: span 2;
            grid-row: auto; } }

@keyframes flashing {
  0% {
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    opacity: 0; } }

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