/*
  よくあるご質問ページ。Figma QptNYuzqAdpd6Oejnpxr1J / 14:13（1680px）が正本。
  共通ヘッダー・フッター・パンくずの見た目は common.css 側にあります。
  PCは 1rem = 16px。768〜1399px は html の font-size を縮めて全体を等比で縮小します。
  スマホ（767.98px以下）のカンプは未着手のため、このファイルにはまだ入れていません。
*/
html {
  font-size: 100%;
}
.wb-faq {
  position: relative;
  isolation: isolate;
  /* 背景文字はカンプどおり右端から17px外へ出るため、横スクロールだけ止める */
  overflow-x: clip;
  color: #000025;
  -webkit-font-smoothing: antialiased;
}
/* 見た目は common.css の .wb-breadcrumb。ここではこのページでの位置だけ指定する */
.wb-breadcrumb--faq {
  padding-top: 109.274px;
  padding-top: 6.8296rem;
}
.wb-faq__decoration {
  position: absolute;
  z-index: -1;
  top: 49.71px;
  top: 3.1069rem;
  /*
    カンプの右端は1697.158px（フレーム右外へ17.158px）。CSSは最後の1文字のうしろにも
    字送り33.2474pxが入るため、その分（合計50.405px）だけ右へずらして文字位置をそろえる。
  */
  right: -50.405px;
  right: -3.1503rem;
  color: transparent;
  background-image: linear-gradient(99.83193647235564deg, #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;
  white-space: nowrap;
  opacity: 0.59;
}
.wb-faq__inner {
  width: 90%;
  max-width: 879.593px;
  max-width: 54.9746rem;
  margin-inline: auto;
  padding-top: 110.44px;
  padding-top: 6.9025rem;
  padding-bottom: 179.107px;
  padding-bottom: 11.1942rem;
}

/* 導入（見出し・リード文・上部CTA） */
.wb-faq__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-faq__lead {
  padding-left: 1.832px;
  padding-left: 0.1145rem;
  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-faq__actions {
  margin-top: 33.899px;
  margin-top: 2.1187rem;
  display: flex;
  gap: 4.332px;
  gap: 0.2708rem;
}
/* ボタンの土台（枠線・角丸・ホバー）は common.css の .wb-btn。ここでは寸法だけ上書きする */
.wb-faq__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-faq__action--contact {
  width: 252.41px;
  width: 15.7756rem;
  padding-left: 28.199px;
  padding-left: 1.7624rem;
  padding-right: 22.707px;
  padding-right: 1.4192rem;
  justify-content: space-between;
  border: 0;
  letter-spacing: 1.595px;
  letter-spacing: 0.0997rem;
}
.wb-faq__action--download {
  width: 227.651px;
  width: 14.2282rem;
  padding-left: 37.408px;
  padding-left: 2.338rem;
  padding-right: 0;
  gap: 4.686px;
  gap: 0.2929rem;
  justify-content: flex-start;
  border-width: 1.995px;
  border-width: 0.1247rem;
  letter-spacing: 1.45px;
  letter-spacing: 0.0906rem;
}
.wb-faq__action-label {
  display: block;
}
.wb-faq__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-faq__action-icon::after {
  width: 7.508px;
  width: 0.4693rem;
  height: 7.508px;
  height: 0.4693rem;
}
.wb-faq__action-arrow {
  width: 7.508px;
  width: 0.4693rem;
  height: 7.508px;
  height: 0.4693rem;
  flex: 0 0 auto;
  display: block;
}
.wb-faq__action-external {
  width: 18.167px;
  width: 1.1354rem;
  height: 18.165px;
  height: 1.1353rem;
  flex: 0 0 auto;
  display: block;
}

/* 目次。サービスページの目次と同じ作りで、値はこのカンプから取っている */
.wb-faq-toc {
  margin-top: 56.321px;
  margin-top: 3.5201rem;
  max-width: 796.986px;
  max-width: 49.8116rem;
}
.wb-faq-toc__items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 30.528px;
  column-gap: 1.908rem;
  row-gap: 13.685px;
  row-gap: 0.8553rem;
  list-style: none;
}
/*
  高さを固定しているのは、カンプの行間隔（56.152px）を保つため。
  「医療広告ガイドライン・コンプライアンス」のように2行になる項目があっても行がずれない。
*/
.wb-faq-toc__link {
  height: 42.467px;
  height: 2.6542rem;
  padding-bottom: 11.2px;
  padding-bottom: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  gap: 0.25rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  color: #000025;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 15px;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.75px;
  letter-spacing: 0.0469rem;
  text-decoration: none;
  position: relative;
}
.wb-faq-toc__link::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  height: 0.0625rem;
  background: #00006b;
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
@media (hover: hover) {
  .wb-faq-toc__link:hover::after {
    transform: scaleX(1);
  }
  .wb-faq-toc__link:hover .wb-faq-toc__icon {
    transform: translateY(3px);
  }
}
.wb-faq-toc__label {
  min-width: 0;
}
.wb-faq-toc__icon {
  width: 18.143px;
  width: 1.1339rem;
  height: 18.143px;
  height: 1.1339rem;
  flex: 0 0 auto;
  display: block;
  transition: transform 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
  .wb-faq-toc__link::after {
    transition: none;
  }
  .wb-faq-toc__icon {
    transition: none;
  }
}

/* カテゴリー */
.wb-faq-category {
  margin-top: 100.44px;
  margin-top: 6.2775rem;
  /* 目次から飛んだときに、追従ヘッダーで見出しが隠れないようにする（サービスページと同じ値） */
  scroll-margin-top: 128px;
  scroll-margin-top: 8rem;
}
.wb-faq-category__label {
  height: 32.879px;
  height: 2.0549rem;
  color: #1a298c;
  font-family: "Gidole", sans-serif;
  font-size: 18.788px;
  font-size: 1.17425rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 2.2546px;
  letter-spacing: 0.1409rem;
}
.wb-faq-category__label-img {
  height: 32.879px;
  height: 2.0549rem;
  width: auto;
  display: block;
}
.wb-faq-category__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;
}
/*
  見出しから1問目までの間隔は、カンプではカテゴリーごとに52〜61pxとばらついている。
  質問は管理画面から増減するため、中間の54.653pxにそろえている。
*/
.wb-faq-category__list {
  margin-top: 54.653px;
  margin-top: 3.4158rem;
}

/* 質問と回答。開閉は assets/js/site.js（TOPのFAQと共通） */
.wb-faq-item {
  padding-bottom: 36.538px;
  padding-bottom: 2.2836rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: padding-bottom 0.3s;
}
.wb-faq-item.is-open {
  padding-bottom: 25.535px;
  padding-bottom: 1.5959rem;
}
.wb-faq-item + .wb-faq-item {
  margin-top: 32.635px;
  margin-top: 2.0397rem;
}
.wb-faq-item__question {
  display: flex;
  align-items: flex-start;
  gap: 4.37px;
  gap: 0.5731rem;
}
/* カンプの「Q.」の位置に、TOPと同じQの画像を置く。少し下げて文字の下端をそろえる */
.wb-faq-item__q {
  width: 15.41px;
  width: 0.9631rem;
  height: 27.2px;
  height: 1.7rem;
  /* 幅はwidthに任せる。ここをpxで固定すると、remが16pxより小さい画面幅で縦横比が崩れる */
  flex: 0 0 auto;
  display: block;
  transform: translateY(2.41px);
  transform: translateY(0.2506rem);
}
.wb-faq-item__ttl {
  min-width: 0;
  margin: 0;
  flex: 1;
  color: #00006b;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 16px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 27.2px;
  line-height: 1.7rem;
  letter-spacing: 0.8px;
  letter-spacing: 0.05rem;
}
.wb-faq-item__toggle {
  position: relative;
  width: 15px;
  width: 0.9375rem;
  height: 27.2px;
  height: 1.7rem;
  /* 幅はwidthに任せる。ここをpxで固定すると、縦棒と横棒の中心がずれて＋が崩れる */
  flex: 0 0 auto;
  display: block;
}
.wb-faq-item__toggle::before {
  position: absolute;
  top: 14.873px;
  top: 0.9296rem;
  right: 0;
  left: 0;
  height: 1.878px;
  height: 0.1174rem;
  content: "";
  background: #00006b;
}
.wb-faq-item__toggle::after {
  position: absolute;
  top: 8.312px;
  top: 0.5195rem;
  left: 6.561px;
  left: 0.4101rem;
  width: 1.878px;
  width: 0.1174rem;
  height: 15px;
  height: 0.9375rem;
  content: "";
  background: #00006b;
  transition:
    transform 0.3s,
    opacity 0.3s;
}
.wb-faq-item.is-open .wb-faq-item__toggle::after {
  opacity: 0;
  transform: rotate(90deg);
}
.wb-faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s;
}
/* 質問と回答のあいだの余白。閉じているときは高さ0に畳みたいので疑似要素で作る */
.wb-faq-item__answer::before {
  height: 21.003px;
  height: 1.3127rem;
  content: "";
  display: block;
}
.wb-faq-item__body {
  max-width: 766.938px;
  max-width: 47.9336rem;
  margin: 0;
  color: #000e27;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 1.2px;
  letter-spacing: 0.075rem;
}

/* 最後のCTA */
.wb-faq-cta-panel {
  margin-top: 100.44px;
  margin-top: 6.2775rem;
}

@media (min-width: 768px) and (max-width: 1399px) {
  html {
    font-size: calc((100vw - 768px) / 632 * 3 + 13px);
  }
}

/*
  SP。Figma QptNYuzqAdpd6Oejnpxr1J / 14:304（414 × 2713）が正本。
  カンプの中身はMEO対策ページの文章で作られた見本のため、文章・質問数・カテゴリー数は
  PCの実装を正とし、ここでは文字サイズと余白だけをカンプに合わせている。
  414pxで1rem = 16px。画面幅に合わせてページ全体が同じ倍率で変わる（TOP・ブログと同じ基準）。
*/
@media (max-width: 767.98px) {
  html {
    font-size: 3.8647342995vw;
  }
  .wb-breadcrumb--faq {
    width: 100%;
    max-width: none;
    padding-top: 60.5px;
    padding-top: 3.7813rem;
    padding-right: 13.62px;
    padding-right: 0.8513rem;
    padding-left: 13.62px;
    padding-left: 0.8513rem;
  }
  .wb-faq__decoration {
    top: -6.088px;
    top: -0.3805rem;
    right: -27.848px;
    right: -1.7405rem;
    font-size: 121.478px;
    font-size: 7.5924rem;
    letter-spacing: 20.6513px;
    letter-spacing: 1.2907rem;
  }
  .wb-faq__inner {
    width: 100%;
    max-width: none;
    padding-top: 32.796px;
    padding-top: 2.0498rem;
    padding-right: 25px;
    padding-right: 1.5625rem;
    padding-bottom: 100px;
    padding-bottom: 6.25rem;
    padding-left: 25px;
    padding-left: 1.5625rem;
  }
  .wb-faq__ttl {
    margin-bottom: 14.505px;
    margin-bottom: 0.9066rem;
    font-size: 33px;
    font-size: 2.0625rem;
    line-height: 1.45;
    letter-spacing: 2.31px;
    letter-spacing: 0.1444rem;
  }
  .wb-faq__lead {
    padding-left: 0;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.65;
    letter-spacing: 1.12px;
    letter-spacing: 0.07rem;
  }
  /* SPはボタンを縦に積む */
  .wb-faq__actions {
    margin-top: 27.836px;
    margin-top: 1.7398rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 5.058px;
    gap: 0.3161rem;
  }
  .wb-faq__action {
    min-height: 67.115px;
    min-height: 4.1947rem;
    border-radius: 3.89px;
    border-radius: 0.2431rem;
    font-size: 15.813px;
    font-size: 0.9883rem;
  }
  .wb-faq__action--contact {
    width: 278.623px;
    width: 17.4139rem;
    padding-left: 43.839px;
    padding-left: 2.7399rem;
    padding-right: 34.668px;
    padding-right: 2.1668rem;
    letter-spacing: 1.7394px;
    letter-spacing: 0.1087rem;
  }
  .wb-faq__action--download {
    width: 278.623px;
    width: 17.4139rem;
    min-height: 61.205px;
    min-height: 3.8253rem;
    padding-left: 41.886px;
    padding-left: 2.6179rem;
    gap: 26.327px;
    gap: 1.6454rem;
    border-width: 2.175px;
    border-width: 0.1359rem;
    letter-spacing: 1.5813px;
    letter-spacing: 0.0988rem;
  }
  .wb-faq__action-icon {
    width: 46.382px;
    width: 2.8989rem;
    height: 36.233px;
    height: 2.2646rem;
    border-radius: 104.586px;
    border-radius: 6.5366rem;
  }
  .wb-faq__action-icon::after {
    width: 8.188px;
    width: 0.5118rem;
    height: 8.188px;
    height: 0.5118rem;
  }
  .wb-faq__action-arrow {
    width: 8.188px;
    width: 0.5118rem;
    height: 8.188px;
    height: 0.5118rem;
  }
  .wb-faq__action-external {
    width: 19.812px;
    width: 1.2383rem;
    height: 19.811px;
    height: 1.2382rem;
  }
  /* 目次は1列になる */
  .wb-faq-toc {
    margin-top: 40.551px;
    margin-top: 2.5344rem;
    max-width: none;
  }
  .wb-faq-toc__items {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 15.994px;
    row-gap: 0.9996rem;
  }
  .wb-faq-toc__link {
    height: 47.467px;
    height: 2.9667rem;
    padding-right: 9.473px;
    padding-right: 0.5921rem;
    padding-bottom: 16.067px;
    padding-bottom: 1.0042rem;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.9;
    letter-spacing: 0.8px;
    letter-spacing: 0.05rem;
  }
  .wb-faq-category {
    margin-top: 96.457px;
    margin-top: 6.0286rem;
    /* SPの追従ヘッダー分。ブログ詳細のSPと同じ値 */
    scroll-margin-top: 72px;
    scroll-margin-top: 4.5rem;
  }
  /* 目次のすぐ下にくる1つ目だけ、カンプでは少し詰まっている */
  .wb-faq-category:first-of-type {
    margin-top: 85.609px;
    margin-top: 5.3506rem;
  }
  .wb-faq-category__label {
    height: 28px;
    height: 1.75rem;
    font-size: 16px;
    font-size: 1rem;
    letter-spacing: 1.92px;
    letter-spacing: 0.12rem;
    opacity: 0.26;
  }
  .wb-faq-category__label-img {
    height: 28px;
    height: 1.75rem;
  }
  .wb-faq-category__ttl {
    margin-top: 0;
    background-image: linear-gradient(100.72754945920495deg, #084eb7 0.513%, #1a298c 94.347%);
    font-size: 29px;
    font-size: 1.8125rem;
    line-height: 1.4;
    letter-spacing: 1.74px;
    letter-spacing: 0.1088rem;
  }
  .wb-faq-category__list {
    margin-top: 29.438px;
    margin-top: 1.8399rem;
  }
  .wb-faq-item {
    padding-bottom: 31.538px;
    padding-bottom: 1.9711rem;
  }
  /* SPは開いていても閉じていても、区切り線までの余白が同じ */
  .wb-faq-item.is-open {
    padding-bottom: 31.538px;
    padding-bottom: 1.9711rem;
  }
  .wb-faq-item + .wb-faq-item {
    margin-top: 26.637px;
    margin-top: 1.6648rem;
  }
  .wb-faq-item__body {
    max-width: none;
  }
  .wb-faq-cta-panel {
    margin-top: 96.457px;
    margin-top: 6.0286rem;
  }
}