/*
  支援実績ページ。Figma QptNYuzqAdpd6Oejnpxr1J / 1:4988（1680px）が正本。
  共通ヘッダー・フッター・パンくず・CTAボタンの土台は common.css 側にあります。
  PCは 1rem = 16px。768〜1399px は html の font-size を縮めて全体を等比で縮小し、
  1680pxを超えたら同じ倍率で拡大します（TOP・SEO・会社概要・ブログと同じ基準）。
  スマホ（767.98px以下）のカンプは未着手のため、このファイルにはまだ入れていません。
  数値は「上の行がカンプの実寸px、下の行が実際に効くrem」の2行セットで書いています。
*/
html {
  font-size: 100%;
}
.wb-works {
  position: relative;
  isolation: isolate;
  /* 背景文字はカンプどおり右端から17px外へ出るため、横スクロールだけ止める */
  overflow-x: clip;
  color: #00006b;
  -webkit-font-smoothing: antialiased;
}
/* 見た目は common.css の .wb-breadcrumb。ここではこのページでの位置だけ指定する */
.wb-breadcrumb--works {
  padding-top: 109.274px;
  padding-top: 6.8296rem;
}
/*
  背景の大きな英字。カンプの右端は1697.158px（フレーム右外へ17.158px）。
  CSSは最後の1文字のうしろにも字送り33.2474pxが入るため、
  その分（合計50.406px）だけ右へずらして文字位置をそろえる。
*/
.wb-works__decoration {
  position: absolute;
  z-index: -1;
  top: 49.714px;
  top: 3.1071rem;
  right: -50.406px;
  right: -3.1504rem;
  color: transparent;
  background-image: linear-gradient(
    107.75692569576208deg,
    #f0effc 8.1107%,
    #e3eefd 76.025%
  );
  -webkit-background-clip: text;
  background-clip: text;
  font-family: "Ubuntu", sans-serif;
  font-size: 195.573px;
  font-size: 12.2233rem;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 33.2474px;
  letter-spacing: 2.078rem;
  text-align: right;
  white-space: nowrap;
  opacity: 0.59;
}
/* カンプの本文列は x=400〜1280px。この幅をこのページで1回だけ決める */
.wb-works__inner {
  width: 90%;
  max-width: 880.07px;
  max-width: 55.0044rem;
  margin-inline: auto;
  padding-top: 110.44px;
  padding-top: 6.9025rem;
  padding-bottom: 179.107px;
  padding-bottom: 11.1942rem;
}

/* ------------------------------------------------------------
   導入（見出し・リード文・上部CTA）
   ------------------------------------------------------------ */
.wb-works__header {
  margin-bottom: 65.796px;
  margin-bottom: 4.1123rem;
}
.wb-works__ttl {
  margin-bottom: 25.15px;
  margin-bottom: 1.5719rem;
  color: #00006b;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 46.28px;
  font-size: 2.8925rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 2.314px;
  letter-spacing: 0.1446rem;
}
.wb-works__lead {
  margin-bottom: 31.45px;
  margin-bottom: 1.9656rem;
  padding-left: 2.401px;
  padding-left: 0.1501rem;
  color: #00006b;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 17px;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: 1.19px;
  letter-spacing: 0.0744rem;
}
.wb-works__actions {
  display: flex;
  gap: 4.531px;
  gap: 0.2832rem;
}
/*
  CTAボタン。枠線・角丸・色・カーソルを乗せたときの動きは common.css の .wb-btn が持つ
  （よくあるご質問のページと同じ作り）。ここでは寸法だけカンプに合わせる。
*/
.wb-works__action {
  min-height: 66.286px;
  min-height: 4.1429rem;
  border-radius: 3.567px;
  border-radius: 0.2229rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14.5px;
  font-size: 0.9063rem;
  font-weight: 700;
  line-height: normal;
}
.wb-works__action--contact {
  width: 262.212px;
  width: 16.3883rem;
  padding-left: 28.2px;
  padding-left: 1.7625rem;
  padding-right: 26.509px;
  padding-right: 1.6568rem;
  justify-content: space-between;
  border: 0;
  letter-spacing: 1.595px;
  letter-spacing: 0.0997rem;
}
.wb-works__action--download {
  width: 227.651px;
  width: 14.2282rem;
  padding-left: 39.403px;
  padding-left: 2.4627rem;
  padding-right: 0;
  gap: 4.685px;
  gap: 0.2928rem;
  justify-content: flex-start;
  border-width: 1.995px;
  border-width: 0.1247rem;
  letter-spacing: 1.45px;
  letter-spacing: 0.0906rem;
}
.wb-works__action-label {
  display: block;
}
.wb-works__action-icon {
  width: 42.531px;
  width: 2.6582rem;
  height: 33.225px;
  height: 2.0766rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 95.904px;
  border-radius: 5.994rem;
  background: rgba(255, 255, 255, 0.2);
}
.wb-works__action-icon::after {
  width: 7.508px;
  width: 0.4693rem;
  height: 7.508px;
  height: 0.4693rem;
}
.wb-works__action-arrow {
  width: 7.508px;
  width: 0.4693rem;
  height: 7.508px;
  height: 0.4693rem;
  flex: 0 0 auto;
  display: block;
}
.wb-works__action-external {
  width: 18.167px;
  width: 1.1354rem;
  height: 18.165px;
  height: 1.1353rem;
  flex: 0 0 auto;
  display: block;
}

/* ------------------------------------------------------------
   絞り込み
   ------------------------------------------------------------ */
.wb-works-filter {
  margin-bottom: 76.96px;
  margin-bottom: 4.81rem;
}
.wb-works-filter__ttl {
  margin-bottom: 21.595px;
  margin-bottom: 1.3497rem;
  color: #00006b;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 25px;
  font-size: 1.5625rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 1.25px;
  letter-spacing: 0.0781rem;
}
.wb-works-filter__group:not(:last-child) {
  margin-bottom: 38.829px;
  margin-bottom: 2.4268rem;
}
.wb-works-filter__label {
  margin-bottom: 14.638px;
  margin-bottom: 0.9149rem;
  display: flex;
  align-items: center;
  gap: 6.796px;
  gap: 0.4248rem;
  color: #00006b;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 17px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.85px;
  letter-spacing: 0.0531rem;
}
/* 見出しの前の小さな四角。カンプでは文字の中心より0.88px下にある */
.wb-works-filter__mark {
  width: 13.845px;
  width: 0.8653rem;
  height: 13.845px;
  height: 0.8653rem;
  margin-top: 1.762px;
  margin-top: 0.1101rem;
  flex: 0 0 auto;
  display: block;
  border-radius: 0.889px;
  border-radius: 0.0556rem;
  background: #00006b;
}
.wb-works-filter__list {
  display: flex;
  flex-wrap: wrap;
  column-gap: 6.75px;
  column-gap: 0.4219rem;
  row-gap: 8.18px;
  row-gap: 0.5113rem;
  list-style: none;
  padding-bottom: 0rem;
}
.wb-works-filter__chip {
  min-height: 37.307px;
  min-height: 2.3317rem;
  padding-left: 22.5px;
  padding-left: 1.4063rem;
  padding-right: 22.5px;
  padding-right: 1.4063rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #00006b;
  border-width: 1.5px;
  border-radius: 108.585px;
  border-radius: 6.7866rem;
  color: #00006b;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16.288px;
  font-size: 1.018rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.6515px;
  letter-spacing: 0.0407rem;
  text-decoration: none;
  padding-bottom: 0.1rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    color 0.3s ease,
    border-color 0.3s ease;
}
.wb-works-filter__chip::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #33bcd9 0%, #74a2f1 82.17%), #00006b;
  content: "";
  opacity: 0;
  transition: opacity 0.3s ease;
}
.wb-works-filter__chip.is-current {
  color: #ffffff;
  border-color: transparent;
  font-weight: 700;
}
.wb-works-filter__chip.is-current::before {
  opacity: 1;
}
@media (hover: hover) {
  .wb-works-filter__chip:hover {
    color: #ffffff;
    border-color: transparent;
  }
  .wb-works-filter__chip:hover::before {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wb-works-filter__chip {
    transition: none;
  }
  .wb-works-filter__chip::before {
    transition: none;
  }
}
/* 「すべて」だけはカンプの左右の余白が広い */
.wb-works-filter__chip--all {
  padding-left: 27.5px;
  padding-left: 1.7188rem;
  padding-right: 27.5px;
  padding-right: 1.7188rem;
}
/* 施術側のボタンは、カンプでは高さ・文字・余白がわずかに大きい */
.wb-works-filter__group--treatment .wb-works-filter__chip {
  min-height: 37.798px;
  min-height: 2.3624rem;
  padding-left: 25px;
  padding-left: 1.5625rem;
  padding-right: 25px;
  padding-right: 1.5625rem;
  border-width: 1.423px;
  border-width: 1.5px;
  border-radius: 109.45px;
  border-radius: 6.8406rem;
  font-size: 16.418px;
  font-size: 1.0261rem;
  letter-spacing: 0.6567px;
  letter-spacing: 0.041rem;
}
.wb-works-filter__group--treatment .wb-works-filter__chip--all {
  padding-left: 27.5px;
  padding-left: 1.7188rem;
  padding-right: 27.5px;
  padding-right: 1.7188rem;
}

/* ------------------------------------------------------------
   セクション見出し（英字ラベル＋日本語見出し）
   ------------------------------------------------------------ */
/* 英字はカンプの書体（DIN 2014）がWebフォントにないため画像で置いている */
.wb-works-heading__label-img {
  width: auto;
  height: 32.879px;
  height: 2.0549rem;
  display: block;
}
.wb-works-heading__ttl {
  margin-top: 4.29px;
  margin-top: 0.2681rem;
  color: transparent;
  background-image: linear-gradient(
    128.03885492824224deg,
    #084eb7 0.513%,
    #1a298c 94.347%
  );
  -webkit-background-clip: text;
  background-clip: text;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 38px;
  font-size: 2.375rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 2.66px;
  letter-spacing: 0.16625rem;
}
.wb-works-list__header {
  margin-bottom: 31.331px;
  margin-bottom: 1.9582rem;
}
.wb-works-group__header {
  margin-bottom: 72.121px;
  margin-bottom: 4.5076rem;
}
.wb-works-related__header {
  margin-bottom: 34.351px;
  margin-bottom: 2.1469rem;
}

/* ------------------------------------------------------------
   支援実績一覧
   ------------------------------------------------------------ */
.wb-works-list {
  margin-bottom: 100.547px;
  margin-bottom: 6.2842rem;
}
.wb-works-list__items {
  margin-bottom: 21px;
  margin-bottom: 1.3125rem;
  list-style: none;
}
.wb-works-list__item:not(:last-child) {
  margin-bottom: 40.83px;
  margin-bottom: 2.5519rem;
}
.wb-works-list__notes {
  color: #000025;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  font-size: 0.8125rem;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.52px;
  letter-spacing: 0.0325rem;
}
/*
  ページ送り。ブログ一覧と同じ見た目で、矢印もブログの画像を使い回している。
  上の余白は、カードから注釈までのカンプの21pxに足して、ブログ一覧と同じ44.592pxにしている。
*/
.wb-works-pagination {
  margin-top: 23.592px;
  margin-top: 1.4745rem;
  margin-bottom: 44.592px;
  margin-bottom: 2.787rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25.6px;
  gap: 1.6rem;
}
.wb-works-pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00006b;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 20.582px;
  font-size: 1.2864rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1.029px;
  letter-spacing: 0.0643rem;
  text-decoration: none;
}
.wb-works-pagination .current {
  width: 39.691px;
  width: 2.4807rem;
  height: 39.691px;
  height: 2.4807rem;
  border-radius: 50%;
  color: #ffffff;
  background: #00006b;
  padding-bottom: 0.2rem;
  padding-left: 0.1rem;
}
.wb-works-pagination__arrow {
  width: 18.432px;
  width: 1.152rem;
  height: 16.027px;
  height: 1.0017rem;
  display: block;
}
/* 絞り込んだ結果が0件のときの案内。カンプには無いので、本文と同じ書体でひかえめに出す */
.wb-works-list__empty {
  margin-bottom: 21px;
  margin-bottom: 1.3125rem;
  padding-top: 40px;
  padding-top: 2.5rem;
  padding-bottom: 40px;
  padding-bottom: 2.5rem;
  color: #00006b;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 17px;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: 1.19px;
  letter-spacing: 0.0744rem;
}
.wb-works-list__empty-link {
  color: #1a298c;
  text-decoration: underline;
}
/* 「WORK 01」。カンプの書体（DIN 2014）の代わりに、他ページと同じGidoleを使う */
.wb-works-card__no {
  margin-bottom: 9.359px;
  margin-bottom: 0.5849rem;
  display: flex;
  align-items: center;
  gap: 6.954px;
  gap: 0.4346rem;
  color: #1a298c;
  font-family: "Gidole", sans-serif;
  font-size: 16px;
  font-size: 1rem;
  font-style: italic;
  font-weight: 400;
  -webkit-text-stroke: 0.25px currentColor;
  -webkit-text-stroke: 0.015625rem currentColor;
  line-height: 1.75;
  letter-spacing: 1.92px;
  letter-spacing: 0.12rem;
}
.wb-works-card__no-line {
  width: 20.403px;
  width: 1.2752rem;
  height: 1px;
  height: 0.0625rem;
  flex: 0 0 auto;
  display: block;
  background: #1a298c;
}
/*
  カードの下地。カンプは不透明度74%のグラデーションなので、
  重ね方をそのまま再現できるよう疑似要素に分けている。
*/
.wb-works-card__panel {
  position: relative;
  isolation: isolate;
  padding-top: 40.196px;
  padding-top: 2.5123rem;
  padding-right: 43.25px;
  padding-right: 2.7031rem;
  padding-bottom: 43.25px;
  padding-bottom: 2.7031rem;
  padding-left: 42.95px;
  padding-left: 2.6844rem;
}
.wb-works-card__panel::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  border-radius: 10px;
  border-radius: 0.625rem;
  background-image: linear-gradient(
    134.22450319789453deg,
    #eff5fe 1.6649%,
    #f6f6fd 116.6%
  );
  opacity: 0.74;
}
.wb-works-card__head {
  margin-bottom: 30.607px;
  margin-bottom: 1.9129rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
/*
  左の列。カンプの見出し枠は443.682pxだが、同じ文字をブラウザで並べると445.2px必要で
  1文字はみ出すため、448pxにしてカンプと同じ位置で折り返すようにしている。
  右のグラフは space-between で右端にそろえるので、この幅を変えても位置は動かない。
*/
.wb-works-card__main {
  width: 448px;
  width: 28rem;
  padding-top: 5.497px;
  padding-top: 0.3436rem;
  flex: 0 0 auto;
}
.wb-works-card__tags {
  margin-bottom: 11.99px;
  margin-bottom: 0.7494rem;
  display: flex;
  flex-wrap: wrap;
  column-gap: 5.71px;
  column-gap: 0.3569rem;
  row-gap: 6.482px;
  row-gap: 0.4051rem;
  list-style: none;
}
.wb-works-card__tag {
  min-height: 30.328px;
  min-height: 1.8955rem;
  padding-left: 21px;
  padding-left: 1.3125rem;
  padding-right: 21px;
  padding-right: 1.3125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.254px solid transparent;
  border-width: 0.0784rem;
  border-radius: 96.465px;
  border-radius: 6.0291rem;
  color: #ffffff;
  background: linear-gradient(90deg, #33bcd9 0%, #74a2f1 82.17%), #00006b;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14.47px;
  font-size: 0.9044rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.5788px;
  letter-spacing: 0.0362rem;
}
.wb-works-card__ttl {
  margin-bottom: 5.58px;
  margin-bottom: 0.3488rem;
  color: #00006b;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 28.01px;
  font-size: 1.7506rem;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: 1.6806px;
  letter-spacing: 0.105rem;
}
/*
  見出し下の地域から数値までの間隔は、カンプではカードごとに29.87 / 13.87 / 16.87pxと
  ばらついている。文章量で行数が変わる場所なので、WORK 02・03がそろえている値を採用した。
*/
.wb-works-card__region {
  margin-bottom: 15.37px;
  margin-bottom: 0.9606rem;
  color: #00006b;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 15.434px;
  font-size: 0.9646rem;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 1.0804px;
  letter-spacing: 0.0675rem;
}
.wb-works-card__metrics {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  column-gap: 15.551px;
  column-gap: 0.9719rem;
  row-gap: 8px;
  row-gap: 0.5rem;
  list-style: none;
}
.wb-works-card__metric {
  display: flex;
  align-items: center;
  gap: 4.277px;
  gap: 0.5673rem;
}
.wb-works-card__metric-label {
  height: 27.148px;
  height: 1.6968rem;
  padding-left: 10.3px;
  padding-left: 0.6438rem;
  padding-right: 10.3px;
  padding-right: 0.6438rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.929px;
  border-radius: 0.1206rem;
  color: #ffffff;
  background: #00006b;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12.114px;
  font-size: 0.7571rem;
  font-weight: 700;
  line-height: 32.707px;
  line-height: 2.0442rem;
  letter-spacing: 1.2114px;
  letter-spacing: 0.0757rem;
  white-space: nowrap;
}
.wb-works-card__metric-value {
  color: #877b00;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16.399px;
  font-size: 1.275rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/*
  右のグラフ。カンプの@imgどおり、白い枠ごと1枚の画像として書き出している。
  枠の中の余白や図の位置が画像側で決まるので、画面幅が変わっても崩れない。
  画像が未設定でも枠だけは残るよう、白い下地と縦横比をCSSで持たせている。
*/
.wb-works-card__chart {
  width: 328.319px;
  width: 20.5199rem;
  aspect-ratio: 328.319 / 290.741;
  margin: 0;
  flex: 0 0 auto;
  background: #ffffff;
}
.wb-works-card__chart-img {
  width: 100%;
  height: 100%;
  display: block;
  /* 別の縦横比の画像を入れても、ゆがまず白い枠に収まるようにする */
  object-fit: contain;
}

/* ご相談時の状況 */
.wb-works-card__situation {
  margin-bottom: 20.22px;
  margin-bottom: 1.2638rem;
  padding-left: 17.577px;
  padding-left: 1.0986rem;
}
.wb-works-card__sub-ttl {
  margin-bottom: 10.6px;
  margin-bottom: 0.6625rem;
  padding-left: 2.676px;
  padding-left: 0.1673rem;
  display: flex;
  align-items: center;
  gap: 4.14px;
  gap: 0.2588rem;
  color: #00006b;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 17.331px;
  font-size: 1.0832rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.8665px;
  letter-spacing: 0.0542rem;
}
/* 見出しの前の四角。カンプでは文字の中心より1.81px下にある */
.wb-works-card__sub-mark {
  width: 13.141px;
  width: 0.8213rem;
  height: 13.141px;
  height: 0.8213rem;
  margin-top: 3.62px;
  margin-top: 0.2263rem;
  flex: 0 0 auto;
  display: block;
  border-radius: 0.844px;
  border-radius: 0.0528rem;
  background: #00006b;
}
.wb-works-card__situation-list {
  list-style: none;
}
.wb-works-card__situation-item {
  color: #000e27;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.75px;
  letter-spacing: 0.0469rem;
}
.wb-works-card__situation-item:not(:last-child) {
  margin-bottom: 9px;
  margin-bottom: 0.5625rem;
}

/* 実施したこと */
.wb-works-card__action {
  position: relative;
  isolation: isolate;
  margin-bottom: 19.799px;
  margin-bottom: 1.2374rem;
  padding-top: 16.035px;
  padding-top: 1.0022rem;
  padding-right: 18.497px;
  padding-right: 1.1561rem;
  padding-bottom: 22.15px;
  padding-bottom: 1.3844rem;
  padding-left: 18.497px;
  padding-left: 1.1561rem;
}
/* カンプは不透明度72%の枠なので、枠と下地だけを疑似要素に分けている */
.wb-works-card__action::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  border: 1.543px solid #877b00;
  border-width: 0.0964rem;
  border-radius: 4.823px;
  border-radius: 0.3014rem;
  background: #faf9ef;
  opacity: 0.72;
}
.wb-works-card__sub-ttl--action {
  margin-bottom: 5.699px;
  margin-bottom: 0.3562rem;
  padding-left: 0;
  gap: 5.041px;
  gap: 0.3151rem;
  color: #877b00;
  font-size: 17.07px;
  font-size: 1.0669rem;
  letter-spacing: 0.8535px;
  letter-spacing: 0.0533rem;
}
.wb-works-card__sub-mark--action {
  width: 12.944px;
  width: 0.809rem;
  height: 12.944px;
  height: 0.809rem;
  margin-top: 3.562px;
  margin-top: 0.2226rem;
  border-radius: 0.831px;
  border-radius: 0.0519rem;
  background: #877b00;
}
.wb-works-card__action-list {
  padding-left: 5.33px;
  padding-left: 0.3331rem;
  list-style: none;
}
.wb-works-card__action-item {
  color: #000e27;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14.856px;
  font-size: 0.9285rem;
  font-weight: 500;
  line-height: 1.95;
  letter-spacing: 0.7428px;
  letter-spacing: 0.0464rem;
}

/* 結果 */
.wb-works-card__result {
  display: flex;
  align-items: flex-start;
  gap: 14.163px;
  gap: 0.8852rem;
}
.wb-works-card__result-badge {
  width: 66.761px;
  width: 4.1726rem;
  height: 35.803px;
  height: 2.2377rem;
  margin: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2.036px;
  border-radius: 0.1273rem;
  color: #ffffff;
  background: #b6a600;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18.52px;
  font-size: 1.1575rem;
  font-weight: 700;
  line-height: 43.135px;
  line-height: 2.6959rem;
  letter-spacing: 1.852px;
  letter-spacing: 0.1158rem;
  padding-bottom: 0.1rem;
}
.wb-works-card__result-list {
  min-width: 0;
  padding-top: 3.078px;
  padding-top: 0.1924rem;
  list-style: none;
}
.wb-works-card__result-item {
  display: flex;
  align-items: flex-start;
  gap: 6.519px;
  gap: 0.4074rem;
}
.wb-works-card__result-item:not(:last-child) {
  margin-bottom: 6.318px;
  margin-bottom: 0.3949rem;
}
.wb-works-card__result-icon {
  width: 21.32px;
  width: 1.3325rem;
  height: 21.32px;
  height: 1.3325rem;
  margin-top: 5.258px;
  margin-top: 0.3286rem;
  flex: 0 0 auto;
  display: block;
}
.wb-works-card__result-txt {
  color: #000e27;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16.399px;
  font-size: 1.0249rem;
  font-weight: 700;
  line-height: 1.95;
  letter-spacing: 0.82px;
  letter-spacing: 0.0513rem;
}

/* ------------------------------------------------------------
   グループ全体での支援実績
   ------------------------------------------------------------ */
.wb-works-group {
  margin-bottom: 99.382px;
  margin-bottom: 6.2114rem;
}
.wb-works-group__figures {
  margin-bottom: 36.627px;
  margin-bottom: 2.2892rem;
}
/*
  「累計200,000件以上集患支援」はカンプの書体を組み合わせた図版のため画像。
  カンプの実寸は886.341pxで本文列より6.3px広いが、列に合わせて表示している。
*/
.wb-works-group__figures-img {
  width: 100%;
  height: auto;
  display: block;
}
.wb-works-group__points {
  margin-bottom: 11.319px;
  margin-bottom: 0.7074rem;
  list-style: none;
}
.wb-works-group__point {
  display: flex;
  align-items: flex-start;
  gap: 6.519px;
  gap: 0.4074rem;
}
.wb-works-group__point:not(:last-child) {
  margin-bottom: 6.318px;
  margin-bottom: 0.3949rem;
}
.wb-works-group__point-icon {
  width: 21.32px;
  width: 1.3325rem;
  height: 21.32px;
  height: 1.3325rem;
  margin-top: 5.258px;
  margin-top: 0.3286rem;
  flex: 0 0 auto;
  display: block;
}
.wb-works-group__point-txt {
  color: #000e27;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16.399px;
  font-size: 1.0249rem;
  font-weight: 700;
  line-height: 1.95;
  letter-spacing: 0.82px;
  letter-spacing: 0.0513rem;
}
.wb-works-group__notes {
  color: #000025;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  font-size: 0.8125rem;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.52px;
  letter-spacing: 0.0325rem;
}

/* ------------------------------------------------------------
   無料診断のCTA帯
   ------------------------------------------------------------ */
.wb-works-cta-panel {
  margin-bottom: 99.582px;
  margin-bottom: 6.2239rem;
}

/* ------------------------------------------------------------
   関連サービス
   ------------------------------------------------------------ */
.wb-works-related__items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20.404px;
  gap: 1.2753rem;
  list-style: none;
}
.wb-works-service {
  width: 204.04px;
  width: 12.7525rem;
  max-width: 100%;
  min-height: 191.04px;
  min-height: 11.94rem;
  padding-top: 34px;
  padding-top: 2.125rem;
  padding-right: 12px;
  padding-right: 0.75rem;
  padding-bottom: 31px;
  padding-bottom: 1.9375rem;
  padding-left: 12px;
  padding-left: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: auto;
  margin-left: auto;
  border-radius: 10px;
  border-radius: 0.625rem;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 9.6px rgba(200, 212, 224, 0.86);
  box-shadow: 0 0 0.6rem rgba(200, 212, 224, 0.86);
  text-decoration: none;
  transition: transform 0.25s ease;
}
@media (hover: hover) {
  .wb-works-service:hover {
    transform: scale(1.025);
  }
}
@media (prefers-reduced-motion: reduce) {
  .wb-works-service {
    transition: none;
  }
}
/* アイコンは4つとも大きさが違うので、いちばん高いものに合わせた枠の下端でそろえる */
.wb-works-service__icon {
  height: 45.248px;
  height: 2.828rem;
  margin-bottom: 12.6px;
  margin-bottom: 0.7875rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.wb-works-service__icon-img {
  display: block;
  transition: transform 0.25s ease;
}
@media (hover: hover) {
  .wb-works-service:hover .wb-works-service__icon-img {
    transform: scale(1.1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .wb-works-service__icon-img {
    transition: none;
  }
}
/* アイコンも画面幅に合わせて大きさが変わるよう、remで指定する */
.wb-works-service__icon-img--seo {
  width: 39.985px;
  width: 2.4991rem;
  height: 39.985px;
  height: 2.4991rem;
}
.wb-works-service__icon-img--meo {
  width: 48.397px;
  width: 3.0248rem;
  height: 37.243px;
  height: 2.3277rem;
}
.wb-works-service__icon-img--ad {
  width: 46.448px;
  width: 2.903rem;
  height: 42.023px;
  height: 2.6264rem;
}
.wb-works-service__icon-img--consulting {
  width: 45.227px;
  width: 2.8267rem;
  height: 45.248px;
  height: 2.828rem;
}
.wb-works-service__link {
  padding-bottom: 0.297px;
  padding-bottom: 0.0186rem;
  display: flex;
  align-items: center;
  gap: 3.389px;
  gap: 0.2118rem;
  position: relative;
  transition: transform 0.25s ease;
  border-bottom: 1px solid rgba(25, 42, 141, 0.2);
}
.wb-works-service__link::after {
  position: absolute;
  right: 0;
  bottom: -0.06rem;
  left: 0;
  height: 1px;
  height: 0.0625rem;
  background: #192a8d;
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
@media (hover: hover) {
  .wb-works-service:hover .wb-works-service__link {
    transform: translate(2px, -2px);
  }
  .wb-works-service:hover .wb-works-service__link::after {
    transform: scaleX(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .wb-works-service__link {
    transition: none;
  }
  .wb-works-service__link::after {
    transition: none;
  }
}
.wb-works-service__txt {
  color: #192a8d;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 16.227px;
  font-size: 1.0142rem;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.8113px;
  letter-spacing: 0.0507rem;
  white-space: nowrap;
}
.wb-works-service__arrow {
  width: 14px;
  width: 0.675rem;
  flex: 0 0 auto;
  display: block;
  transition: transform 0.25s ease;
  transform: translateY(0.2rem);
}
@media (hover: hover) {
  .wb-works-service:hover .wb-works-service__arrow {
    transform: translate(2px, -2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .wb-works-service__arrow {
    transition: none;
  }
}

/* 768〜1399pxは、カンプ1680pxの見た目のまま全体を等比で縮める */
@media (min-width: 768px) and (max-width: 1399px) {
  html {
    font-size: calc((100vw - 768px) / 632 * 3 + 13px);
  }
}

/* PC基準幅1680pxを超えたら同じ倍率で拡大する（TOP・SEOと同じ基準） */
@media (width > 1680px) {
  html {
    font-size: 0.9523809524vw;
  }
}

/*
  スマホ。Figma QptNYuzqAdpd6Oejnpxr1J / 1:387（414 × 7035）。
  414pxで1rem = 16pxになり、画面幅に合わせて全体が同じ倍率で変わります
  （TOP・ブログ・会社概要と同じ方式）。

  SPカンプは一部が作りかけです。ページ上部の見出しがMEO対策ページの文章のまま、
  絞り込みの2つ目が「サービスで絞り込む」の複製、WORK 02・03がタグと見出しまで、
  注釈が省略されています。文章・項目数・件数はPCを正とし、
  カンプからは文字の大きさと余白だけを取っています。
*/
@media (max-width: 767.98px) {
  html {
    font-size: 3.8647342995vw;
  }
  .wb-breadcrumb--works {
    width: 87.947%;
    max-width: none;
    margin-inline: auto;
    padding-top: 60.5px;
    padding-top: 3.7813rem;
  }
  .wb-works__decoration {
    top: 34.912px;
    top: 2.182rem;
    right: -23.239px;
    right: -1.4524rem;
    font-size: 88.478px;
    font-size: 5.5299rem;
    letter-spacing: 15.0413px;
    letter-spacing: 0.9401rem;
  }
  .wb-works__inner {
    width: 87.947%;
    max-width: none;
    padding-top: 32.8px;
    padding-top: 2.05rem;
    padding-bottom: 115.013px;
    padding-bottom: 7.1883rem;
  }

  /* 導入 */
  .wb-works__header {
    margin-bottom: 50.636px;
    margin-bottom: 3.1648rem;
  }
  .wb-works__ttl {
    margin-bottom: 14.5px;
    margin-bottom: 0.9063rem;
    font-size: 33px;
    font-size: 2.0625rem;
    line-height: 1.45;
    letter-spacing: 2.31px;
    letter-spacing: 0.1444rem;
  }
  .wb-works__lead {
    margin-bottom: 27.83px;
    margin-bottom: 1.7394rem;
    padding-left: 0;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.65;
    letter-spacing: 1.12px;
    letter-spacing: 0.07rem;
  }
  .wb-works__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 5.058px;
    gap: 0.3161rem;
  }
  .wb-works__action {
    border-radius: 3.89px;
    border-radius: 0.2431rem;
    font-size: 15.813px;
    font-size: 0.9883rem;
  }
  .wb-works__action--contact {
    width: 278.623px;
    width: 17.4139rem;
    min-height: 67.115px;
    min-height: 4.1947rem;
    padding-left: 43.839px;
    padding-left: 1.6399rem;
    padding-right: 34.668px;
    padding-right: 2.1668rem;
    letter-spacing: 1.7394px;
    letter-spacing: 0.1087rem;
    gap: 0.4rem;
  }
  .wb-works__action-label {
    white-space: nowrap;
  }
  .wb-works__action--download {
    width: 278.623px;
    width: 17.4139rem;
    min-height: 61.205px;
    min-height: 3.8253rem;
    padding-left: 44.061px;
    padding-left: 2.7538rem;
    gap: 26.327px;
    gap: 1.6454rem;
    border-width: 2.175px;
    border-width: 0.1359rem;
    letter-spacing: 1.5813px;
    letter-spacing: 0.0988rem;
  }
  .wb-works__action-icon {
    width: 46.382px;
    width: 2.8989rem;
    height: 36.233px;
    height: 2.2646rem;
    border-radius: 104.586px;
    border-radius: 6.5366rem;
  }
  .wb-works__action-arrow {
    width: 8.188px;
    width: 0.5118rem;
    height: 8.188px;
    height: 0.5118rem;
  }
  .wb-works__action-icon::after {
    width: 8.188px;
    width: 0.5118rem;
    height: 8.188px;
    height: 0.5118rem;
  }
  .wb-works__action-external {
    width: 19.812px;
    width: 1.2383rem;
    height: 19.81px;
    height: 1.2381rem;
  }

  /* 絞り込み */
  .wb-works-filter {
    margin-bottom: 50.519px;
    margin-bottom: 3.1574rem;
  }
  .wb-works-filter__ttl {
    margin-bottom: 17.656px;
    margin-bottom: 1.1035rem;
  }
  .wb-works-filter__group:not(:last-child) {
    margin-bottom: 21.728px;
    margin-bottom: 1.358rem;
  }
  .wb-works-filter__label {
    margin-bottom: 12.158px;
    margin-bottom: 0.7599rem;
  }
  .wb-works-filter__list {
    column-gap: 5px;
    column-gap: 0.3125rem;
    row-gap: 6.332px;
    row-gap: 0.3958rem;
  }
  .wb-works-filter__chip {
    min-height: 34.695px;
    min-height: 2.1684rem;
    padding-left: 21px;
    padding-left: 1.3125rem;
    padding-right: 21px;
    padding-right: 1.3125rem;
    border-width: 1.313px;
    border-width: 0.0821rem;
    border-radius: 100.984px;
    border-radius: 6.3115rem;
    font-size: 15.148px;
    font-size: 0.9468rem;
    letter-spacing: 0.6059px;
    letter-spacing: 0.0379rem;
  }
  .wb-works-filter__chip--all {
    padding-left: 25.9px;
    padding-left: 1.6188rem;
    padding-right: 25.9px;
    padding-right: 1.6188rem;
  }
  /* スマホのカンプでは施術側もサービス側と同じ大きさなので、PCの差分を戻す */
  .wb-works-filter__group--treatment .wb-works-filter__chip {
    min-height: 34.695px;
    min-height: 2.1684rem;
    padding-left: 21px;
    padding-left: 1.3125rem;
    padding-right: 21px;
    padding-right: 1.3125rem;
    border-width: 1.313px;
    border-width: 0.0821rem;
    border-radius: 100.984px;
    border-radius: 6.3115rem;
    font-size: 15.148px;
    font-size: 0.9468rem;
    letter-spacing: 0.6059px;
    letter-spacing: 0.0379rem;
  }
  .wb-works-filter__group--treatment .wb-works-filter__chip--all {
    padding-left: 25.9px;
    padding-left: 1.6188rem;
    padding-right: 25.9px;
    padding-right: 1.6188rem;
  }

  /* セクション見出し */
  .wb-works-heading__label-img {
    height: 28px;
    height: 1.75rem;
    opacity: 0.26;
  }
  .wb-works-heading__ttl {
    margin-top: 3.168px;
    margin-top: 0.198rem;
    font-size: 29px;
    font-size: 1.8125rem;
    line-height: 1.4;
    letter-spacing: 1.74px;
    letter-spacing: 0.1088rem;
  }
  .wb-works-list__header {
    margin-bottom: 26.389px;
    margin-bottom: 1.6493rem;
  }
  .wb-works-group__header {
    margin-bottom: 18.222px;
    margin-bottom: 1.1389rem;
  }
  .wb-works-related__header {
    margin-bottom: 30.814px;
    margin-bottom: 1.9259rem;
  }

  /* 支援実績のカード */
  .wb-works-list {
    margin-bottom: 96.992px;
    margin-bottom: 6.062rem;
  }
  .wb-works-list__item:not(:last-child) {
    margin-bottom: 35.986px;
    margin-bottom: 2.2491rem;
  }
  .wb-works-pagination {
    margin-top: 8.06px;
    margin-top: 0.5038rem;
    margin-bottom: 29.06px;
    margin-bottom: 1.8163rem;
    gap: 21px;
    gap: 1.3125rem;
  }
  .wb-works-pagination .page-numbers {
    font-size: 18.524px;
    font-size: 1.1578rem;
    letter-spacing: 0.9262px;
    letter-spacing: 0.0579rem;
  }
  .wb-works-pagination .current {
    width: 35.723px;
    width: 2.2327rem;
    height: 35.723px;
    height: 2.2327rem;
  }
  .wb-works-pagination__arrow {
    width: 16.591px;
    width: 1.0369rem;
    height: 14.425px;
    height: 0.9016rem;
  }
  .wb-works-card__no {
    margin-bottom: 6.359px;
    margin-bottom: 0.3974rem;
  }
  .wb-works-card__panel {
    padding-top: 25.465px;
    padding-top: 1.5916rem;
    padding-right: 23px;
    padding-right: 1.4375rem;
    padding-bottom: 42.113px;
    padding-bottom: 2.6321rem;
    padding-left: 23px;
    padding-left: 1.4375rem;
  }
  .wb-works-card__panel::before {
    border-radius: 8px;
    border-radius: 0.5rem;
    background-image: linear-gradient(
      104.1036642019663deg,
      #eff5fe 1.6649%,
      #f6f6fd 116.6%
    );
  }
  /* スマホはグラフを見出しの下へ回す */
  .wb-works-card__head {
    margin-bottom: 19.705px;
    margin-bottom: 1.2316rem;
    flex-direction: column;
    align-items: stretch;
  }
  .wb-works-card__main {
    width: 100%;
    margin-bottom: 20.731px;
    margin-bottom: 1.2957rem;
    padding-top: 0;
  }
  .wb-works-card__tags {
    margin-bottom: 8.99px;
    margin-bottom: 0.5619rem;
  }
  .wb-works-card__ttl {
    margin-bottom: 7.383px;
    margin-bottom: 0.4614rem;
    font-size: 26.01px;
    font-size: 1.6256rem;
    line-height: 1.6;
    letter-spacing: 1.3005px;
    letter-spacing: 0.0813rem;
  }
  .wb-works-card__region {
    margin-bottom: 14.022px;
    margin-bottom: 0.8764rem;
  }
  .wb-works-card__metrics {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 8.082px;
    row-gap: 0.5051rem;
  }
  .wb-works-card__chart {
    width: 313.247px;
    width: 19.5779rem;
    margin-inline: auto;
  }
  .wb-works-card__situation {
    margin-bottom: 16.902px;
    margin-bottom: 1.0564rem;
    padding-left: 0;
  }
  .wb-works-card__sub-ttl {
    margin-bottom: 4.696px;
    margin-bottom: 0.2935rem;
    font-size: 16.331px;
    font-size: 1.0207rem;
    letter-spacing: 0.8165px;
    letter-spacing: 0.051rem;
  }
  .wb-works-card__situation-item {
    line-height: 1.65;
  }
  .wb-works-card__situation-item:not(:last-child) {
    margin-bottom: 6.219px;
    margin-bottom: 0.3887rem;
  }
  /* 黄色い枠だけはカンプで本文より左右へ13pxほど広がっている */
  .wb-works-card__action {
    margin-bottom: 20.761px;
    margin-bottom: 1.2976rem;
    margin-left: -13.039px;
    margin-left: -0.8149rem;
    margin-right: -13.707px;
    margin-right: -0.8567rem;
    padding-top: 13.685px;
    padding-top: 0.8553rem;
    padding-right: 17.248px;
    padding-right: 1.078rem;
    padding-bottom: 18.504px;
    padding-bottom: 1.1565rem;
    padding-left: 17.248px;
    padding-left: 1.078rem;
  }
  .wb-works-card__action::before {
    border-width: 1.2px;
    border-width: 0.075rem;
  }
  .wb-works-card__sub-ttl--action {
    margin-bottom: 7.819px;
    margin-bottom: 0.4887rem;
    gap: 5.546px;
    gap: 0.3466rem;
    font-size: 18.777px;
    font-size: 1.1736rem;
    letter-spacing: 0.9389px;
    letter-spacing: 0.0587rem;
  }
  .wb-works-card__sub-mark--action {
    width: 14.238px;
    width: 0.8899rem;
    height: 14.238px;
    height: 0.8899rem;
    border-radius: 0.914px;
    border-radius: 0.0571rem;
  }
  .wb-works-card__action-list {
    padding-left: 2.579px;
    padding-left: 0.1612rem;
  }
  .wb-works-card__action-item {
    line-height: 1.6;
  }
  .wb-works-card__action-item:not(:last-child) {
    margin-bottom: 7.46px;
    margin-bottom: 0.4663rem;
  }
  /* スマホは「結果」のラベルを箇条書きの上へ回す */
  .wb-works-card__result {
    flex-direction: column;
    gap: 0;
  }
  .wb-works-card__result-badge {
    margin-bottom: 13.567px;
    margin-bottom: 0.848rem;
  }
  .wb-works-card__result-list {
    padding-top: 0;
    padding-left: 2.963px;
    padding-left: 0.1852rem;
  }
  .wb-works-card__result-item {
    gap: 7.509px;
    gap: 0.4693rem;
  }
  .wb-works-card__result-item:not(:last-child) {
    margin-bottom: 13.15px;
    margin-bottom: 0.8219rem;
  }
  .wb-works-card__result-icon {
    width: 17.621px;
    width: 1.1013rem;
    height: 17.621px;
    height: 1.1013rem;
    margin-top: 5.311px;
    margin-top: 0.3319rem;
  }
  .wb-works-card__result-txt {
    font-size: 15.579px;
    font-size: 0.9737rem;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.779px;
    letter-spacing: 0.0487rem;
  }

  /* グループ全体での支援実績 */
  .wb-works-group {
    margin-bottom: 55.304px;
    margin-bottom: 3.4565rem;
  }
  .wb-works-group__figures {
    margin-bottom: 27.212px;
    margin-bottom: 1.7008rem;
  }
  .wb-works-group__point {
    gap: 6.903px;
    gap: 0.4314rem;
  }
  .wb-works-group__point:not(:last-child) {
    margin-bottom: 13.33px;
    margin-bottom: 0.8331rem;
  }
  .wb-works-group__point-icon {
    width: 18.548px;
    width: 1.1593rem;
    height: 18.548px;
    height: 1.1593rem;
    margin-top: 2.621px;
    margin-top: 0.1638rem;
  }
  .wb-works-group__point-txt {
    font-size: 15.7px;
    font-size: 0.9813rem;
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: 0.785px;
    letter-spacing: 0.0491rem;
  }

  /* 無料診断のCTA帯 */
  .wb-works-cta-panel {
    margin-bottom: 55.305px;
    margin-bottom: 3.4566rem;
  }

  /* 関連サービス。スマホは2列 */
  .wb-works-related__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 11.12px;
    column-gap: 0.695rem;
    row-gap: 16.871px;
    row-gap: 1.0544rem;
  }
  /*
    「Webコンサルティング」だけカンプで2行になり、行ごとに下線が入る。
    行の途中で折り返しても下線が続くよう、リンクは文字の流れのまま置いている。
  */
  .wb-works-service {
    min-height: 168.25px;
    min-height: 10.5156rem;
    padding-top: 36.15px;
    padding-top: 2.2594rem;
    padding-right: 8.25px;
    padding-right: 0.5156rem;
    padding-bottom: 17.74px;
    padding-bottom: 1.1088rem;
    padding-left: 8.25px;
    padding-left: 0.5156rem;
    display: block;
    border-radius: 8.809px;
    border-radius: 0.5506rem;
    box-shadow: 0 0 8.289px #c8d4e0;
    box-shadow: 0 0 0.5181rem #c8d4e0;
    text-align: center;
  }
  .wb-works-service__icon {
    margin-bottom: 10.45px;
    margin-bottom: 0.6531rem;
  }
  .wb-works-service__link {
    display: inline;
  }
  .wb-works-service__txt {
    white-space: normal;
  }
  .wb-works-service__arrow {
    margin-left: 3.389px;
    margin-left: 0.2118rem;
    display: inline-block;
    vertical-align: middle;
  }
}