@charset "UTF-8";
/* ============================================================
// info
============================================================ */
/* ------------------------------------------------------------
// Fluid Design Function
// 最小値〜最大値の間で数値を可変させる共通関数
------------------------------------------------------------ */
/* ------------------------------------------------------------
// design parts
------------------------------------------------------------ */
.page-header {
  background: url(../images/business/bg-business-ttl.png) no-repeat center center/cover;
}

.business-category-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px clamp(20px, 0.5286343612vw + 18.0176211454px, 26px);
}
.business-category-list li a {
  display: inline-block;
  font-size: clamp(15px, 0.4037685061vw + 11.9030955585px, 18px);
  padding: 0 4px;
  color: #270f00;
  -webkit-text-decoration: underline wavy transparent;
          text-decoration: underline wavy transparent;
  text-underline-offset: 6px;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
@media (hover: hover) {
  .business-category-list li a:hover {
    text-decoration-color: #ffa76f;
    transform: translateY(-4px);
  }
}
@media (max-width: 767px) {
  .business-category-list {
    justify-content: flex-start;
  }
}

.business-box {
  display: flex;
  gap: clamp(20px, 2.6954177898vw + -0.7008086253px, 40px);
}
.business-box .business-img {
  width: clamp(340px, 40.4312668464vw + 29.4878706199px, 640px);
}
.business-box .business-img img {
  border-radius: 16px;
}
.business-box .business-body {
  flex: 1;
}
.business-box .business-body .first-time-item-ttl {
  font-size: clamp(22px, 0.269541779vw + 19.9299191375px, 24px);
  line-height: 1.4;
  margin-bottom: clamp(14px, 0.8086253369vw + 7.7897574124px, 20px);
  padding-bottom: clamp(10px, 0.539083558vw + 5.8598382749px, 14px);
  border-bottom: 2px solid #270f00;
}
.business-box .business-body .first-time-item-txt span {
  display: inline;
  font-size: clamp(18px, 0.269541779vw + 15.9299191375px, 20px);
  padding-left: 8px;
  background: linear-gradient(transparent 70%, #fff9b1 70%);
}
.business-box .business-body .first-time-item-txt p {
  margin-top: 14px;
}
.business-box .business-body .business-body-list {
  margin-top: clamp(20px, 1.7621145374vw + 13.3920704846px, 40px);
  padding: clamp(20px, 0.8810572687vw + 16.6960352423px, 30px);
  background: #ffa76f;
  border-radius: 8px;
}
.business-box .business-body .business-body-list .business-body-list-ttl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  margin-bottom: clamp(10px, 0.8810572687vw + 6.6960352423px, 20px);
  padding: 4px 16px;
  background: #270f00;
  border-radius: 8px;
}
.business-box .business-body .business-body-list ul {
  margin-left: 0.5em;
}
.business-box .business-body .business-body-list ul li {
  position: relative;
  color: #ffffff;
  line-height: 1.6;
  padding-left: 20px;
}
.business-box .business-body .business-body-list ul li::before {
  content: "・";
  position: absolute;
  left: 0;
}
@media (max-width: 767px) {
  .business-box {
    flex-direction: column;
  }
  .business-box .business-img {
    width: 100%;
    padding-inline: 40px;
  }
}

.business-orange-box {
  margin-top: 40px;
  padding: clamp(20px, 1.7621145374vw + 13.3920704846px, 40px);
  background: #ffa76f;
  border-radius: 16px;
}
.business-orange-box .business-orange-ttl {
  font-size: clamp(18px, 0.5286343612vw + 16.0176211454px, 24px);
  color: #ffffff;
  line-height: 1.4;
  text-align: center;
  margin-bottom: clamp(30px, 0.8810572687vw + 26.6960352423px, 40px);
  padding-block: 12px;
  border-bottom: 1px solid #ffffff;
}
.business-orange-box ul {
  display: grid;
  grid-template-rows: repeat(4, auto);
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  gap: 12px 32px;
  padding: 0;
  list-style: none;
}
@media (max-width: 767px) {
  .business-orange-box ul {
    grid-template-rows: none;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    gap: 12px;
  }
}
.business-orange-box ul li {
  position: relative;
  color: #ffffff;
  line-height: 1.6;
  padding-left: 20px;
}
.business-orange-box ul li::before {
  content: "・";
  position: absolute;
  left: 0;
}
.business-orange-box .business-orange-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.business-orange-box .business-orange-flex .business-orange-flex-box {
  width: calc(50% - 10px);
  padding: 30px 20px;
  background: #ffffff;
  border-radius: 8px;
}
.business-orange-box .business-orange-flex .business-orange-flex-box .business-orange-flex-box-ttl {
  font-size: clamp(18px, 0.1762114537vw + 17.3392070485px, 20px);
  line-height: 1.4;
  margin-bottom: 16px;
  padding: 2px 0 2px 12px;
  border-left: 4px solid #ffa76f;
}
@media (max-width: 767px) {
  .business-orange-box .business-orange-flex {
    flex-direction: column;
  }
  .business-orange-box .business-orange-flex .business-orange-flex-box {
    width: 100%;
  }
}