@charset "UTF-8";
/**
 * イージングプロパティ
 * https://github.com/dmnsgn/sass-easing
 */
/**
 * メディアクエリ
 * @param {string} $mode - max または min
 * @param {number} $width - 設定値
 */
/**
 * メディアクエリ PC
 * @param {number} [$width:$breakpoin] - 設定値
 */
/**
 * メディアクエリ SP
 * @param {number} [$width:$breakpoin] - 設定値
 */
/**
 * メディアクエリによるIE11ハック
 */
/**
 * Google Fonts の読み込み
 * @param {string} $family - フォント名（要URLエンコード）
 * @param {array} [$weights:(400,700)] - ウェイト
 */
/**
 * Noto Sans JP
 * @param {array} [$weights:(400,700)] - ウェイト
 */
/**
 * Noto Serif JP
 * @param {array} [$weights:(400,700)] - ウェイト
 */
/**
 * Lato
 * @param {array} [$weights:(400,700)] - ウェイト
 */
/**
 * Roboto
 * @param {array} [$weights:(400)] - ウェイト
 */
/**
 * VW計算
 * @param {string} $property  - プロパティ
 * @param {number} $value - 基準となる値
 * @param {number} $basewidth - 基準となるウィンドウ幅
 * @param {number} [$maxwidth:0] - 拡大を停止するウィンドウ幅
 * @param {number} [$minwidth:0] - 縮小を停止するウィンドウ幅
 */
/**
 * 三角形
 * @param {string} $direction - 三角の向き 上:T / 下:B / 左:L / 右:R
 * @param {number} $w - 幅
 * @param {number} $h - 高さ
 * @param {string} $color - 色
 */
/**
 * ローディングアニメーション
 * @param {number} $size - 円のサイズ
 * @param {number} $thickness - 円の枠線の太さ
 * @param {string} $backcolor - 円の色
 * @param {string} $forecolor - 円の強調色
 * @param {string} [$duration=1] - アニメーションのスピード（単位は秒:s）
 */
@media screen and (max-width: 767px) {
  .work-page .intro {
    margin-top: 10.6666666667vw;
    padding-bottom: 13.3333333333vw;
  }
}
@media screen and (max-width: 767px) {
  .work-page .intro .intro__inner {
    padding-left: 5.3333333333vw;
    padding-right: 5.3333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .work-page .intro .intro__block {
    display: flex;
    align-items: flex-start;
    padding-top: 5.8565153734vw;
    padding-bottom: 5.8565153734vw;
  }
}
@media screen and (min-width: 768px) {
  .work-page .intro .intro__block:not(:first-of-type) {
    border-top: 1px solid #D5D5D5;
  }
}
@media screen and (max-width: 767px) {
  .work-page .intro .intro__block:not(:first-of-type) {
    margin-top: 13.3333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .work-page .intro .intro__block.reverse {
    flex-direction: row-reverse;
  }
}
@media screen and (min-width: 768px) {
  .work-page .intro .intro__block--image {
    width: 43.9238653001vw;
  }
}
@media screen and (min-width: 768px) {
  .work-page .intro .intro__block--contents {
    width: 43.5578330893vw;
  }
}
@media screen and (max-width: 767px) {
  .work-page .intro .intro__block--contents {
    margin-top: 5.3333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .work-page .intro .intro__block--default {
    margin-left: 2.9282576867vw;
  }
}
@media screen and (min-width: 768px) {
  .work-page .intro .intro__block--reverse {
    margin-right: 2.9282576867vw;
  }
}
.work-page .intro .intro__block--heading {
  font-weight: bold;
  display: flex;
  align-items: center;
  line-height: 1;
  position: relative;
  z-index: 2;
  color: #0D3994;
}
@media screen and (min-width: 768px) {
  .work-page .intro .intro__block--heading {
    font-size: 2.9282576867vw;
  }
}
@media screen and (max-width: 767px) {
  .work-page .intro .intro__block--heading {
    font-size: 7.4666666667vw;
  }
}
.work-page .intro .intro__block--number {
  font-weight: bold;
  position: relative;
}
@media screen and (min-width: 768px) {
  .work-page .intro .intro__block--number {
    font-size: 4.0995607613vw;
    padding-right: 3.6603221083vw;
  }
}
@media screen and (max-width: 767px) {
  .work-page .intro .intro__block--number {
    font-size: 10.1333333333vw;
    padding-right: 8vw;
  }
}
.work-page .intro .intro__block--number::before {
  content: "";
  display: block;
  position: absolute;
  background: #0D3994;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (min-width: 768px) {
  .work-page .intro .intro__block--number::before {
    right: 1.8301610542vw;
    width: 2px;
    height: 3.2210834553vw;
  }
}
@media screen and (max-width: 767px) {
  .work-page .intro .intro__block--number::before {
    right: 3.7333333333vw;
    width: 2px;
    height: 8.5333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .work-page .intro .intro__block--text {
    margin-top: 2.196193265vw;
    font-size: 1.1713030747vw;
  }
}
@media screen and (max-width: 767px) {
  .work-page .intro .intro__block--text {
    font-size: 3.7333333333vw;
    margin-top: 5.3333333333vw;
  }
}
.work-page .intro .intro__block--title {
  font-weight: bold;
  color: #0D3994;
}
@media screen and (min-width: 768px) {
  .work-page .intro .intro__block--title {
    font-size: 1.6105417277vw;
    margin-top: 4.39238653vw;
  }
}
@media screen and (max-width: 767px) {
  .work-page .intro .intro__block--title {
    margin-top: 8vw;
    font-size: 4.2666666667vw;
  }
}
.work-page .intro .intro__block--list {
  display: flex;
}
@media screen and (min-width: 768px) {
  .work-page .intro .intro__block--list {
    gap: 0.7320644217vw;
    margin-top: 1.4641288433vw;
  }
}
@media screen and (max-width: 767px) {
  .work-page .intro .intro__block--list {
    flex-wrap: wrap;
    margin-top: 4vw;
    gap: 1.3333333333vw;
  }
}
.work-page .intro .intro__block--item {
  border-radius: 50%;
  border: 2px solid #00AEAC;
}
@media screen and (min-width: 768px) {
  .work-page .intro .intro__block--item {
    width: 8.0527086384vw;
  }
}
@media screen and (max-width: 767px) {
  .work-page .intro .intro__block--item {
    width: 24vw;
  }
}
.work-page .intro .intro__block--itemLink {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .work-page .intro .intro__block--itemLink {
    padding: 0.5124450952vw;
  }
}
@media screen and (max-width: 767px) {
  .work-page .intro .intro__block--itemLink {
    padding: 1.8666666667vw;
  }
}
@media (hover: hover) and (pointer: fine) {
  .work-page .intro .intro__block--itemLink:hover .intro__block--itemImage {
    transform: scale(1.18);
  }
}
.work-page .intro .intro__block--itemImage {
  transition: transform 0.5s ease;
}
@media screen and (min-width: 768px) {
  .work-page .faq__wrapper {
    margin-top: 2.9282576867vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .work-page .faq__wrapper {
    margin-top: 40px;
  }
}
@media screen and (max-width: 767px) {
  .work-page .faq__wrapper {
    margin-top: 8vw;
  }
}