/* 
   Project Kintone CSS
*/

/* ========================
   Index
   ======================== */
.p-index__kv.p-kintone__kv {
  height: 100vh;

  @media (max-width: 640px) {
    padding: 80px 0 24px 0;
  }

  @media (max-width: 375px) {
    height: auto;
  }
}

.p-kintone__kv-main {
  width: 100%;
  max-width: calc(100vw - 80px);

  @media (max-width: 640px) {
    max-width: calc(100vw - 48px);
  }
}

.p-kintone__kv-text {
  width: 640px;
}

.p-index__kv-title {
  margin: 0;
}

.p-kintone__kv-logo {
  width: 480px;
}

.p-kintone__kv-solution {
  padding: 24px 40px;
  width: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 5%,
    #fff 50%,
    rgba(255, 255, 255, 0.8) 95%,
    rgba(255, 255, 255, 0) 100%
  );

  @media (max-width: 640px) {
    padding: 16px;
  }
}

.p-kintone__kv-solution-list {
  list-style: none;
  max-width: 940px;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

  @media (max-width: 640px) {
    grid-template-columns: repeat(2, 1fr);
  }

  & .c-tag {
    position: relative;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-extra-bold);
    border-radius: 4px;
    height: 40px;
    background: linear-gradient(
      105deg,
      #ffce4c -0.7%,
      #fff 16.02%,
      #ffc945 32.74%,
      #e3a131 66.18%,
      #c87a1c 82.9%
    );
    z-index: 1;

    &::after {
      content: '';
      width: calc(100% - 4px);
      height: calc(100% - 4px);
      position: absolute;
      top: 2px;
      left: 2px;
      right: 2px;
      bottom: 2px;
      border-radius: 3px;
      background: linear-gradient(146deg, #fff2bb 0%, #ffe294 100%);
      z-index: -1;
    }

    @media (max-width: 640px) {
      font-size: var(--font-size-2xs);
    }
  }
}

@media (max-width: 640px) {
  .p-kintone__kv-buttons {
    flex-direction: column;
  }
}

.p-kintone__kv-buttons .o-button {
  width: 200px;

  &:first-child {
    background-color: #ffbf00;
    color: var(--color-text-primary);
    transition:
      opacity 0.2s,
      color 0.2s;
    &:hover {
      opacity: 0.6;
    }
  }
}

/* ソリューションセクション */
.p-kintone__solution {
  max-width: 100vw;
}

.p-kintone__solution-heading,
.p-kintone__solution-title {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.p-kintone__solution-item {
  background-color: var(--color-common-white);
  border: 3px solid #bbbbbb;
  border-radius: 8px;

  &:hover {
    background-color: var(--color-common-white);
  }
}

.p-kintone__solution-image {
  width: 120px;
  height: 120px;

  & img {
    height: 100%;
    width: auto;
    object-fit: contain;
  }
}

.p-kintone__solution-iframe {
  width: 100%;
  height: 600px;

  @media (max-width: 640px) {
    height: 240px;
  }
}

/* プランセクション */
.p-kintone__plan {
  position: relative;
  z-index: 0;
}
.p-kintone__plan-heading {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.p-kintone__plan-contents {
  max-width: calc(100vw - 80px);
  width: 100%;
  margin: 80px 40px 0 40px;
  background-repeat: no-repeat;
  background-size: cover;
  align-content: center;
  border: 3px solid #ffbf00;
  border-radius: 24px;

  @media (max-width: 640px) {
    max-width: calc(100vw - 48px);
    margin: 48px 24px 0;
  }
}

.p-kintone__plan-balloon {
  position: absolute;
  z-index: 1;
  width: 67px;
  height: 40px;
  top: -36px;
  left: calc(50% - 32px);
}

.p-kintone__plan-inner {
  padding: 40px;

  @media (max-width: 640px) {
    padding: 24px;
  }
}

.p-kintone__plan-logo {
  width: 240px;
  margin: 0;

  @media (max-width: 640px) {
    width: 180px;
  }
}

.p-kintone__plan-main {
  align-self: center;
  padding: 0 8px;
  position: relative;
  z-index: 0;

  &::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 14px;
    background-color: #ffbf00;
    z-index: -1;
  }
}

.p-kintone__plan-number {
  font-size: 96px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.05em;

  @media (max-width: 640px) {
    font-size: 72px;
  }
}

.p-kintone__plan-text {
  font-size: 24px;
  font-weight: var(--font-weight-bold);

  @media (max-width: 640px) {
    font-size: 32px;
  }
}

.p-kintone__plan-link {
  width: 240px;
  white-space: nowrap;
}

/* 比較表 */
.p-kintone__compare-heading {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.p-kintone__compare-table {
  grid-template-columns: 240px 1fr 1fr 1fr;
  padding-top: 8px;
  overflow-x: scroll;

  @media (max-width: 640px) {
    grid-template-columns: 140px 1fr 1fr 1fr;
    width: calc(100% + 48px);
    padding: 8px 24px 0 24px;
  }

  & .title,
  & .contents,
  & tfoot,
  & tr {
    display: contents;
  }
  & th,
  & td {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    min-width: 200px;

    &[rowspan='6'] {
      grid-row: auto / span 6;
    }
  }

  & .title th {
    justify-content: center;

    &[class~='u-bg-surface-secondary-500']:not(:last-child) {
      border-right: 1px solid rgba(var(--color-common-white-rgb), 0.8);
    }

    & .p-kintone__compare-table-logo {
      width: 160px;
    }

    &:has(.p-kintone__compare-table-logo) {
      border-bottom: 1px solid rgba(var(--color-surface-secondary-rgb), 0.2);
      position: relative;

      &::after {
        content: '';
        position: absolute;
        top: -8px;
        left: 0;
        width: 100%;
        height: calc(100% + 9px);
        border-top: 6px solid #ffbf00;
        border-left: 6px solid #ffbf00;
        border-right: 6px solid #ffbf00;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
      }
    }
  }

  .contents {
    & .th-bg {
      background-color: var(--color-text-tertiary);
      color: var(--color-common-white);
      word-break: keep-all;
      overflow-wrap: anywhere;
      min-width: auto;
    }

    & tr:not(:last-child) .th-bg {
      border-bottom: 1px solid rgba(var(--color-common-white-rgb), 0.4);
    }

    & td {
      border: 1px solid rgba(var(--color-surface-secondary-rgb), 0.2);
      border-top: 0;
      border-left: 0;

      &.highlight {
        position: relative;
        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: calc(100% + 1px);
          height: calc(100% + 1px);
          border-left: 6px solid #ffbf00;
          border-right: 6px solid #ffbf00;
        }
      }

      & .u-icon {
        font-variation-settings: 'wght' 500;
      }
      & .icon-circle {
        color: #ffbf00;
      }
      & .icon-triangle {
        color: #4376a8;
      }
      & .icon-cross {
        color: var(--color-text-secondary);
      }
    }

    & tr:last-child .highlight,
    & tr .highlight[rowspan='6'] {
      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: calc(100% + 1px);
        height: calc(100% + 1px);
        border-bottom: 6px solid #ffbf00;
      }
    }
  }
}

/* ========================
   Contact
   ======================== */
.p-kintone__contact {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
}

.p-kintone__contact-heading {
  word-break: keep-all;
  overflow-wrap: anywhere;
  max-width: 542px;

  @media (max-width: 640px) {
    font-size: 20px;
  }
}

.p-kintone__contact-main {
  max-width: 800px;
  gap: 16px;
}

.p-kintone__contact-item {
  height: 280px;
  border: 3px solid #bbbbbb;
  border-radius: 8px;
  flex: 1;

  @media (max-width: 640px) {
    height: 240px;
    flex: 100%;
  }

  & .c-contact__icon {
    justify-self: center;
  }

  & .c-contact__button {
    background-color: #ffbf00;
    color: var(--color-text-primary);
    transition:
      opacity 0.2s,
      color 0.2s;
    &:hover {
      opacity: 0.6;
    }
  }

  &:hover .c-contact__button {
    background-color: #ffbf00;
    color: var(--color-text-primary);
    opacity: 0.6;
  }
}

/* ========================
   Single
   ======================== */
.p-kintone-single__head-container {
  padding-top: 80px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;

  @media (max-width: 640px) {
    padding-top: 64px;
  }
}

.p-kintone-single__head {
  margin: 0 auto;

  & .c-tag {
    color: #4376a8;
    border: 1px solid #4376a8;
    font-weight: var(--font-weight-extra-bold);
    border-radius: 4px;
  }
}

.p-kintone-single__bg::before {
  content: none;
}

.p-kintone-single__main {
  max-width: 100vw;
  width: 100%;
}

.p-kintone-single__inner {
  padding-bottom: 64px;
}

/* リッチエディタ */
.p-kintone-single__editor-style {
  width: 100%;
  max-width: 840px;

  & > :first-child {
    margin-top: 0;
  }

  & a {
    color: var(--color-surface-secondary);
  }
}

/* firefox対応 */
@supports not (text-box: trim-both cap alphabetic) {
  .p-kintone__plan-number {
    line-height: 0.7;
  }
  .p-kintone__plan-text {
    line-height: 1;
  }
}