/*
 * Shopify テーマから持ってこられなかったセクション用のスタイル
 * （section-main-page / section-main-product / section-contact-form /
 *   component-collection-hero / section-product-recommendations の代わり）
 */

/* ---------- 固定ページ ---------- */
.main-page-title {
  margin-bottom: 3rem;
}

@media screen and (min-width: 750px) {
  .main-page-title {
    margin-bottom: 4rem;
  }
}

.rte table {
  border-collapse: collapse;
  width: 100%;
}

.rte th,
.rte td {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.15);
  padding: 1.2rem 1rem;
  text-align: left;
  vertical-align: top;
}

.rte th {
  white-space: nowrap;
  width: 30%;
}

@media screen and (max-width: 749px) {
  .rte table,
  .rte tbody,
  .rte tr,
  .rte th,
  .rte td {
    display: block;
    width: 100%;
  }

  .rte th {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

.rte .tR {
  text-align: right;
}

/* ---------- 商品一覧の見出し ---------- */
.collection-hero__inner {
  display: flex;
  flex-direction: column;
}

.collection-hero__title {
  margin: 2.5rem 0;
}

@media screen and (min-width: 750px) {
  .collection-hero__title {
    margin: 4rem 0 3rem;
  }
}

/* ---------- 商品詳細 ---------- */
.product {
  margin: 0 0 3rem;
}

@media screen and (min-width: 750px) {
  .product {
    margin-top: 2rem;
  }

  .product__info-wrapper {
    padding-left: 4rem;
  }

  .product__info-container--sticky {
    position: sticky;
    top: 3rem;
  }
}

.product__media {
  overflow: hidden;
}

.product__media img {
  object-fit: contain;
}

.product__info-container > * + * {
  margin: 1.5rem 0;
}

.product__text {
  margin-bottom: 1rem;
}

.product__title {
  margin: 0 0 1.5rem;
  word-break: break-word;
}

.product__tax {
  margin-top: -1rem;
}

.price--large {
  font-size: 1.6rem;
  letter-spacing: 0.13rem;
  line-height: 1.5;
}

@media screen and (min-width: 750px) {
  .price--large {
    font-size: 1.8rem;
  }
}

.product__buttons {
  margin: 2.5rem 0;
  max-width: 44rem;
}

.product__description {
  margin: 2.5rem 0;
}

.product__description hr {
  margin: 2rem 0;
}

/* ---------- おすすめ商品 ---------- */
.product-recommendations__heading {
  margin: 0 0 3rem;
}

/* ---------- 問い合わせフォーム ---------- */
.contact .field {
  margin-bottom: 1.5rem;
}

.contact .form__message {
  color: rgb(var(--color-base-accent-2));
  margin: -0.5rem 0 1.5rem;
}

@media screen and (min-width: 750px) {
  .contact__fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 2rem;
  }
}

.contact__privacy {
  margin: 1rem 0 2rem;
}

.contact__button {
  margin-top: 1rem;
}

.contact__honeypot {
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.form-status {
  margin: 0 0 2rem;
  padding: 1.5rem 2rem;
}

.form-status--success {
  background-color: rgba(var(--color-foreground), 0.04);
}

.form-status--error {
  border: 0.1rem solid rgb(var(--color-base-accent-2));
  color: rgb(var(--color-base-accent-2));
}

/* ---------- 404 ---------- */
.error-page__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 3rem;
}

/* ---------- ヘッダー ---------- */
.list-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-menu--inline {
  display: inline-flex;
  flex-wrap: wrap;
}

.list-menu__item {
  align-items: center;
  display: flex;
  line-height: 1.3;
}

header-drawer {
  justify-self: start;
  margin-left: -1.2rem;
}

.header__heading-logo {
  max-width: 100px;
}

@media screen and (min-width: 990px) {
  header-drawer {
    display: none;
  }
}