/*==============================================================
Information
==============================================================*/
.information {
  .sp-none {
    @media screen and (max-width: 560px) {
      display: none;
    }
  }
  .information-tabs-wrapper {
    .cont {
      padding: 80px 32px 0;

      @media screen and (max-width: 991px) {
        padding: 40px 16px 0;
      }

      .box {
        max-width: 1280px;

        .front-des {
          text-align: center;
          margin-bottom: 32px;
        }

        .item {
          background: rgb(146 146 146 / 15%);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          border: 1px solid rgba(255, 255, 255, 0.3);
          border-radius: 16px;
          box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
          padding: 40px;

          @media screen and (max-width: 991px) {
            padding: 16px;
          }

          @media screen and (max-width: 560px) {
            padding: 8px;
          }

          .information-tabs {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 16px;
            margin-bottom: 24px;

            @media screen and (max-width: 991px) {
              flex-direction: column;
              gap: 4px;
            }

            .information-tab {
              border-radius: 10px;
              padding: 10px 24px;
              border: 1px solid #fff;
              background: #ccc;
              color: #fff;
              font-weight: 600;
              font-size: 1rem;
              width: 200px;
              text-align: center;

              @media screen and (max-width: 991px) {
                width: 100%;
              }
            }

            .information-tab.is-active {
              border-radius: 10px;
              padding: 10px 24px;
              border: 1px solid #fff;
              background: #ffb300;
              color: #fff;
              font-weight: 600;
              font-size: 1rem;
            }
          }
        }
      }

      .information-contents {
        background: #fff;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 16px;
        padding: 0px 40px 40px 40px;

        @media screen and (max-width: 991px) {
          padding: 0px 16px 16px;
        }

        @media screen and (max-width: 560px) {
          padding: 0px 8px 8px;
        }

        .information-content {
          opacity: 0;
          visibility: hidden;
          transform: translateY(10px);
          transition:
            opacity 0.4s ease,
            transform 0.4s ease;
          height: 0;
          overflow: hidden;
        }

        .information-content.is-active {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
          height: auto;
        }

        & dl {
          .item-row {
            display: flex;
            align-items: center;
            border-bottom: 1px solid #ccc;

            @media screen and (max-width: 991px) {
              flex-direction: column;
              align-items: flex-start;
            }

            & dt {
              flex: 1;
              color: #333;
              padding: 40px;
              display: flex;
              gap: 8px;
              align-items: center;

              @media screen and (max-width: 991px) {
                padding: 16px 0px 2px;
              }

              & span {
                display: inline-block;
                width: 16px;
                height: 16px;
                background: #ffb300;
                clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
                flex-shrink: 0;
              }
            }

            & dd {
              flex: 3.3;
              padding: 40px 16px;

              @media screen and (max-width: 991px) {
                padding: 2px 8px 16px;
              }
            }
          }
        }

        .entry-btn-wrap {
          display: flex;
          justify-content: center;
          margin-top: 40px;

          @media screen and (max-width: 991px) {
            margin-top: 16px;
          }

          .entry-btn {
            background: linear-gradient(135deg, #ff9100, #ffbb00);
            padding: 10px 24px;
            border-radius: 10px;
            border: 1px solid #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            color: #fff;
            font-weight: 600;
            transition:
              opacity 0.3s ease,
              transform 0.3s ease,
              box-shadow 0.3s ease;

            &:hover {
              opacity: 0.85;
              transform: translateY(-2px);
              box-shadow: 0 6px 16px rgba(255, 145, 0, 0.4);
            }
          }
        }
      }
    }
  }
}