@charset "UTF-8";

/* ====================================
	共通スタイル
==================================== */
/* セクション */
.section {
  margin-top: 6rem;
}

.section-title {
  padding-top: 0.8em;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
  border-top: 1px solid var(--light-gray);
  position: relative;
}

.section-title::before {
  content: '';
  display: inline-block;
  inline-size: 90px;
  block-size: 5px;
  background: linear-gradient(90deg, var(--sharp-red) 0%, var(--sharp-red) 80px, var(--base-color) 80px, var(--base-color) 100%);
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-50%);
}

/* カードリスト */
.card__list {
  margin-top: 3rem;
}

.card__item {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border: 1px solid #d9d9d9;
  min-block-size: 14rem;
  text-align: center;
}

.card__item-link {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1rem;
  block-size: 100%;
  padding: 1em;
  background: #fff;
  box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.25);
}

.card__title {
  display: flex;
  align-items: center;
  font-size: 1.8rem;
  font-weight: 700;
  padding: 0.75em 0 0.75em 4.4em;
  background-image: url(images/icon-catalog.svg), url(/assets/common/images/chevron-right-solid.svg);
  background-repeat: no-repeat, no-repeat;
  background-position: left center, left 3.4em center;
  background-size: auto 4rem, 1.2rem auto;

  &.i-inquiry {
    background-image: url(images/icon-inquiry.svg), url(/assets/common/images/chevron-right-solid.svg);
  }

  &.i-note {
    background-image: url(images/icon-note.svg), url(/assets/common/images/chevron-right-solid.svg);
  }
}

.card__text {
  font-size: 1.4rem;
}

.tell__title {
  font-size: 2rem;
  font-weight: 700;
}

.tell__text {
  padding: 0 1rem 0 3rem;
  font-size: 2.4rem;
  font-weight: 900;
  background-image: url(images/icon-tel.svg);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: auto 3rem;

}

.tell__caption {
  font-size: 1.2rem;
}

/* ====================================
	768px未満専用スタイル
==================================== */
@media screen and (width <768px) {

  /* カードリスト */
  .card__list>li:not(:first-child) {
    margin-top: 2.4rem;
  }
}

/* ====================================
	768px以上専用スタイル
==================================== */
@media print,
screen and (768px <=width) {
  .mt-m {
    margin-top: 5rem;
  }

  /* セクション */
  .section {
    margin-top: 8rem;
  }

  .section-title {
    padding-top: 2.2rem;
    font-size: 3rem;
  }

  /* カードリスト */
  .card__list {
    display: flex;
    flex-wrap: wrap;
    gap: 4rem 2%;
    margin-top: 5rem;

    li {
      inline-size: 32%;
    }
  }

  .card__item {
    padding: 2rem 5% 1.3rem;
  }

  .card__item-link {
    gap: 2rem;
    padding: 2rem 3rem;
  }

  .card__title {
    font-size: 2rem;
    background-size: auto 6rem, 1.4rem auto;
  }

  .card__text {
    font-size: 1.4rem;
  }

  /* ご購入後相談窓口 */
  .inquiry-after {
    margin-top: 12rem;
  }

  .inquiry-after-text {
    font-size: 1.8rem;
  }
}

/* ====================================
	768px以上1080px未満専用スタイル
==================================== */
@media print,
screen and (768px <=width <1080px) {}

/* ==========================================
	ホバー、マウスポインタがサポートされている環境
=========================================== */
@media (hover:hover) and (pointer: fine) {

  /* カードリスト */
  .card__item-link:hover {
    text-decoration: none;
  }
}