@charset "utf-8";

/****************************************
トップ
****************************************/
.topTextCts {
  margin-top: 50px;
  position: relative;

  & dt {
    font-size: 3.2rem;
    line-height: 1.4;
    font-weight: 600;
    color: #937700;
    border-bottom: 2px solid #937700;
    width: calc(100% - 280px);
    padding-bottom: 10px;

    & img {
      position: absolute;
      width: 250px;
      top: -10px;
      right: 0;
    }
  }

  & dd {
    & p {
      margin-top: 15px;

      &:first-child {
        font-size: 1.8rem;
        font-weight: 600;
      }
    }
  }
}

@media only screen and (max-width: 768px) {
  .topTextCts {
    margin-top: 55px;

    & dt {
      font-size: 3rem;
      width: 100%;
      padding-bottom: 15px;

      & img {
        width: 90px;
        top: -45px;
      }
    }

    & dd {
      & p {
        & br {
          display: none;
        }
      }
    }
  }
}

/****************************************
商品
****************************************/
.itemWrap {
  background-color: #FFF;
  padding: 20px 30px 25px 30px;
  margin-top: 30px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  position: relative;
}

.itemCts {
  line-height: 1.6;

  & dt {
    font-size: 2.2rem;
    font-weight: 600;
    color: #937700;
  }

  & + img {
    position: absolute;
    width: 320px;
    border-radius: 5px;
    top: 30px;
    right: 30px;

    & + p {
      text-align: center;
      margin-top: 25px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 10px;
      color: #937700;

      &::before,
      &::after {
        content: "";
        flex: 1;
        max-width: 200px;
        height: 1px;
        background: #937700;
      }
    }
  }
}

.itemTable {

  & th,
  td {
    vertical-align: top;
    padding-top: 10px;
  }

  & th {
    width: 10px;
    white-space: nowrap;
    font-weight: 600;
    padding-right: 15px;

    &::before {
      content: "■";
      color: #937700;
    }
  }

  & td {
    & p {
      & span {
        font-weight: 600;
        font-size: 2.2rem;
        line-height: 1;
      }
    }

    & ul {
      & li {
        font-weight: 500;

        &:not(:first-child) {
          margin-top: 5px;
        }

        & a {
          & i {
            color: #937700;
          }

          &.shopBtn {
            background-color: #937700;
            color: #FFF;
            font-size: 1.4rem;
            padding: 5px 5px 5px 10px;
            display: block;
            width: fit-content;
            margin-top: 10px;
            border-radius: 5px;

            & i {
              color: #FFF;
            }
          }
        }
      }
    }
  }
}

@media only screen and (max-width: 768px) {
  .itemWrap {
    padding: 15px 25px 20px 25px;
  }

  .itemCts {
    & + img {
      position: static;
      width: 100%;
      margin-top: 15px;

      & + p {
        text-align: justify;
        margin-top: 15px;
        display: block;

        &::before,
        &::after {
          display: none;
        }
      }
    }
  }

  .itemTable {

    & th,
    td {
      padding-top: 0;
      display: block;
    }

    & th {
      padding-top: 10px;
      width: 100%;
      padding-right: 0;
    }

    & td {
      padding-top: 5px;
    }
  }
}