@charset "UTF-8";

/* =========================================================================
   トップページ固有レイアウト
========================================================================= */

/* メインレイアウト */
.heroArea {
  width: 100%;
  background-color: var(--c-bg-gray);
}

.heroImage img {
  width: 100%;
  height: auto;
  display: block;
}

.topServiceWrap {
  background-image: url("/wp-content/themes/wk_altpaper_2026/top_img/bak_service.svg");
  background-color: var(--c-white);
  background-repeat: no-repeat;
  background-position: center 196px;
  background-size: cover;
}

/* コンテンツセクション */
.serviceBoxArea {
  padding: 0 24px clamp(60px, 9vw + 27px, 120px);
  --box-gap: clamp(32px, 4vw + 16px, 64px);
}

.FlexBox1s,
.FlexBox2s {
  display: flex;
  flex-direction: column;
  gap: var(--box-gap);
  max-width: 1280px;
  margin: 0 auto;
}

.FlexBox1s {
  padding: 24px;
  background-color: var(--c-bg-gray);
  border-radius: 8px;
}

.FlexBox2s {
  margin-top: var(--box-gap);
}

.fb2s {
  background-color: var(--c-bg-gray);
  border-radius: 8px;
  padding: 24px;
}

.FlexBox1s img,
.fb2i img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.ssTit,
.serviceTit {
  font-size: clamp(22px, 1.5vw + 16px, 32px);
  font-feature-settings: "palt";
  color: var(--c-primary);
}

.serviceTit {
  margin-top: 24px;
  font-size: clamp(22px, 1.5vw + 16px, 24px);
}

.ssTxt,
.serviceTxt {
  margin: 24px 0;
  font-size: var(--fs-c-14-18);
  font-weight: 400;
}

/* トップページ固有メディアクエリ */
@media (min-width: 768px) {

  .FlexBox1s,
  .FlexBox2s {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .fb1s,
  .fb2s {
    width: calc(50% - (var(--box-gap) / 2));
  }
}

@media (min-width: 1024px) {
  .serviceBoxArea {
    padding-left: 5%;
    padding-right: 5%;
  }
}