/* ==================================================
   Craftsman Trouble
================================================== */

.craftsman-trouble {
  width: 100%;
  padding: 3rem 0;
  background-color: #FFFFFF;
}


/* ==================================================
   Trouble Head
================================================== */

.craftsman-trouble__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.craftsman-trouble__icon {
  width: 42px;
}

.craftsman-trouble__icon img {
  display: block;
  width: 100%;
  height: auto;
}

.craftsman-trouble__title {
  margin-top: 20px;

  color: #000000;

  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 400;

  line-height: 1.5;
  letter-spacing: 0.05em;
}


/* ==================================================
   Trouble List
================================================== */

.craftsman-trouble__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  column-gap: 70px;
  row-gap: 14px;

  width: min(100%, 760px);

  margin: 45px auto 0;
}

.craftsman-trouble__item {
  position: relative;

  margin: 0;
  padding-left: 24px;

  color: #000000;

  font-family: var(--font-base);
  font-size: 12px;

  line-height: 1.8;
}

.craftsman-trouble__item::before {
  content: "";

  position: absolute;

  top: 0.35em;
  left: 0;

  width: 14px;
  height: 14px;

  background-image: url("https://tsunashiki.co.jp/system_panel/uploads/images/check.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}


/* ==================================================
   Craftsman Section Head
================================================== */

.craftsman-section-head {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;

  padding-bottom: 22px;

  border-bottom: 1px solid #8C8C8C;

  text-align: center;
}

.craftsman-section-head__icon {
  width: 34px;
}

.craftsman-section-head__icon img {
  display: block;

  width: 100%;
  height: auto;
}

.craftsman-section-head__title {
  margin-top: 9px;

  color: #000000;

  font-family: var(--font-base);
  font-size: 18px;
  font-weight: 400;

  line-height: 1.5;
}


/* ==================================================
   Craftsman Support
================================================== */

.craftsman-support {
  width: 100%;
  padding: 0 0 140px;

  background-color: #FFFFFF;
}

.craftsman-support__list {
  width: min(100%, 820px);

  margin: 55px auto 0;
}


/* ==================================================
   Support Item
================================================== */

.craftsman-support__item {
  display: grid;

  grid-template-columns:
    240px
    minmax(0, 1fr);

  align-items: center;

  gap: clamp(55px, 7vw, 90px);

  width: 100%;
}

.craftsman-support__item + .craftsman-support__item {
  margin-top: 55px;
}


/* ==================================================
   Support Visual
================================================== */

.craftsman-support__visual {
  width: 100%;
}

.craftsman-support__visual img {
  display: block;

  width: 100%;
  height: auto;

  object-fit: contain;
}


/* ==================================================
   Support Content
================================================== */

.craftsman-support__content {
  width: 100%;
  min-width: 0;
}

.craftsman-support__title {
  margin: 0;

  color: #000000;

  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 400;

  line-height: 1.7;
  letter-spacing: 0.04em;
}

.craftsman-support__text {
  margin-top: 18px;

  color: #000000;

  font-family: var(--font-base);
  font-size: 12px;
  font-weight: 400;

  line-height: 2;
  letter-spacing: 0.03em;
}


/* ==================================================
   Craftsman Merit
================================================== */

.craftsman-merit {
  width: 100%;

  padding: 0 0 150px;

  background-color: #FFFFFF;
}

.craftsman-merit__list {
  width: min(100%, 960px);

  margin: 55px auto 0;
}


/* ==================================================
   Merit Item
================================================== */

.craftsman-merit__item {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: 55px;
}

.craftsman-merit__item + .craftsman-merit__item {
  margin-top: 50px;
}

.craftsman-merit__item--reverse
.craftsman-merit__image {
  order: 2;
}

.craftsman-merit__item--reverse
.craftsman-merit__content {
  order: 1;
}


/* ==================================================
   Merit Image
================================================== */

.craftsman-merit__image {
  width: 100%;

  aspect-ratio: 1.45 / 1;

  overflow: hidden;
}

.craftsman-merit__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* ==================================================
   Merit Content
================================================== */

.craftsman-merit__content {
  width: 100%;
  min-width: 0;
}

.craftsman-merit__number {
  margin: 0 0 10px;

  color: #777777;

  font-family: var(--font-en);
  font-size: 9px;

  letter-spacing: 0.12em;
}

.craftsman-merit__title {
  margin: 0;

  color: #000000;

  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 400;

  line-height: 1.7;
}

.craftsman-merit__text {
  margin-top: 18px;

  color: #000000;

  font-family: var(--font-base);
  font-size: 11px;

  line-height: 2;
  letter-spacing: 0.03em;
}


/* ==================================================
   Craft Service
================================================== */

.craft-service {
  width: 100%;

  padding: 0 0 150px;

  background-color: #FFFFFF;
}


/* ==================================================
   Service Grid
================================================== */

.craft-service__grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 58px 70px;

  width: min(100%, 860px);

  margin: 55px auto 0;
}


/* ==================================================
   Service Item
================================================== */

.craft-service__item {
  width: 100%;
}


/* ==================================================
   Service Image
================================================== */

.craft-service__image {
  width: 100%;

  aspect-ratio: 1.28 / 1;

  overflow: hidden;

  background-color: #F5F2E9;
}

.craft-service__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* ==================================================
   Service Content
================================================== */

.craft-service__content {
  width: 100%;

  padding-top: 20px;
}


/* ==================================================
   Service Title
================================================== */

.craft-service__title {
  margin: 0;

  color: #000000;

  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 400;

  line-height: 1.65;
  letter-spacing: 0.04em;
}


/* ==================================================
   Service Text
================================================== */

.craft-service__text {
  margin-top: 14px;

  color: #000000;

  font-family: var(--font-base);
  font-size: 12px;
  font-weight: 400;

  line-height: 2;
  letter-spacing: 0.03em;
}


/* ==================================================
   Service Tags
================================================== */

.craft-service__tags {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 10px 22px;

  width: 100%;

  margin-top: 20px;
  padding: 14px 18px;

  background-color: #F8F7F3;
}

.craft-service__tag {
  position: relative;

  margin: 0;
  padding-left: 14px;

  color: #000000;

  font-family: var(--font-base);
  font-size: 11px;
  font-weight: 400;

  line-height: 1.6;
}

.craft-service__tag::before {
  content: "";

  position: absolute;

  top: 0.7em;
  left: 0;

  width: 5px;
  height: 5px;

  background-color: #A5925D;

  border-radius: 50%;

  transform: translateY(-50%);
}


/* ==================================================
   Tablet
================================================== */

@media screen and (max-width: 1024px) {

  .craftsman-support__item {
    grid-template-columns:
      200px
      minmax(0, 1fr);

    gap: 45px;
  }


  .craft-service__grid {
    gap: 50px 45px;

    width: min(100%, 780px);
  }

}


/* ==================================================
   SP
================================================== */

@media screen and (max-width: 768px) {

  /* ----------------------------------------
     Trouble
  ---------------------------------------- */

  .craftsman-trouble {
    padding: 70px 0 80px;
  }

  .craftsman-trouble__icon {
    width: 38px;
  }

  .craftsman-trouble__title {
    margin-top: 16px;

    font-size: 17px;
  }

  .craftsman-trouble__list {
    grid-template-columns: 1fr;

    gap: 12px;

    margin-top: 35px;
  }

  .craftsman-trouble__item {
    padding-left: 22px;

    font-size: 12px;
  }

  .craftsman-trouble__item::before {
    width: 13px;
    height: 13px;
  }


  /* ----------------------------------------
     Support
  ---------------------------------------- */

  .craftsman-support {
    padding-bottom: 100px;
  }

  .craftsman-support__list {
    width: 100%;

    margin-top: 45px;
  }

  .craftsman-support__item {
    grid-template-columns: 1fr;

    gap: 20px;
  }

  .craftsman-support__item + .craftsman-support__item {
    margin-top: 55px;
  }

  .craftsman-support__visual {
    width: min(72%, 260px);

    margin: 0 auto;
  }

  .craftsman-support__content {
    width: 100%;
  }

  .craftsman-support__title {
    font-size: 16px;

    line-height: 1.7;
  }

  .craftsman-support__text {
    margin-top: 12px;

    font-size: 12px;
    line-height: 1.9;
  }


  /* ----------------------------------------
     Merit
  ---------------------------------------- */

  .craftsman-merit {
    padding-bottom: 100px;
  }

  .craftsman-merit__item,
  .craftsman-merit__item--reverse {
    display: flex;
    flex-direction: column;

    gap: 22px;
  }

  .craftsman-merit__item + .craftsman-merit__item {
    margin-top: 55px;
  }

  .craftsman-merit__item--reverse
  .craftsman-merit__image,
  .craftsman-merit__item--reverse
  .craftsman-merit__content {
    order: initial;
  }

  .craftsman-merit__content {
    width: 100%;
  }

  .craftsman-merit__title {
    font-size: 17px;
  }

  .craftsman-merit__text {
    font-size: 12px;
  }


  /* ----------------------------------------
     Craft Service
  ---------------------------------------- */

  .craft-service {
    padding-bottom: 100px;
  }

  .craft-service__grid {
    grid-template-columns: 1fr;

    gap: 48px;

    width: 100%;

    margin-top: 45px;
  }

  .craft-service__content {
    padding-top: 16px;
  }

  .craft-service__title {
    font-size: 17px;
  }

  .craft-service__text {
    margin-top: 12px;

    font-size: 12px;
    line-height: 1.9;
  }

  .craft-service__tags {
    margin-top: 16px;
    padding: 13px 15px;

    gap: 9px 16px;
  }

  .craft-service__tag {
    font-size: 11px;
  }

}


/* ==================================================
   Small SP
================================================== */

@media screen and (max-width: 480px) {

  .craftsman-support__visual {
    width: min(78%, 240px);
  }

  .craft-service__tags {
    grid-template-columns: 1fr;
  }

}