/* =========================================================
   SusLogi LP
   FV 最終完成版CSS
   ========================================================= */


/* =========================================================
   00｜基本設定
========================================================= */

.suslogi-lp {
  --sl-navy: #071c49;
  --sl-blue: #1687ef;
  --sl-cyan: #08bdbb;
  --sl-green: #08bbb8;
  --sl-gray: #e8edf2;

  width: 100vw !important;
  max-width: 100vw !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  padding: 0 !important;

  overflow-x: hidden;

  color: var(--sl-navy);

  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif;

  box-sizing: border-box;
}


.suslogi-lp *,
.suslogi-lp *::before,
.suslogi-lp *::after {
  box-sizing: border-box;
}


/* =========================================================
   01｜FV全体
========================================================= */

.suslogi-lp .suslogi-fv {
  position: relative;

  width: 100%;
  min-height: 820px;

  padding: 52px 5% 66px;

  background-image:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.03) 48%,
      rgba(255, 255, 255, 0) 100%
    ),
    url("https://suslogi.com/wp-content/uploads/2026/08/ChatGPT-Image-2026%E5%B9%B48%E6%9C%889%E6%97%A5-15_06_53.png");

  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  overflow: hidden;
}


/* 左下の薄い装飾 */
.suslogi-lp .suslogi-fv::after {
  content: "";

  position: absolute;

  left: -160px;
  bottom: -170px;

  width: 720px;
  height: 350px;

  opacity: 0.13;

  background:
    repeating-radial-gradient(
      ellipse at center,
      transparent 0,
      transparent 11px,
      #39a8e9 12px,
      transparent 13px
    );

  transform: rotate(-10deg);

  pointer-events: none;
}


/* =========================================================
   02｜FV内部
   PC：左右横並び
========================================================= */

.suslogi-lp .suslogi-fv__inner {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 1600px;

  margin: 0 auto;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;

  align-items: center;
  justify-content: space-between;

  gap: 60px;
}


/* =========================================================
   03｜左側
========================================================= */

.suslogi-lp .suslogi-fv__content {
  flex: 0 0 calc(49% - 30px);

  width: auto;
  max-width: none;
  min-width: 0;

  margin: 0;
  padding: 0;
}


/* ---------------------------------------------------------
   小見出し
--------------------------------------------------------- */

.suslogi-lp .suslogi-fv__eyebrow {
  margin: 0 0 28px !important;

  color: #168ddd !important;

  font-size: clamp(15px, 1.1vw, 21px) !important;
  line-height: 1.5 !important;

  font-weight: 800 !important;

  letter-spacing: 0.03em;
}


/* 横棒は非表示 */
.suslogi-lp .suslogi-fv__line {
  display: none !important;
}


/* ---------------------------------------------------------
   メインコピー
--------------------------------------------------------- */

.suslogi-lp .suslogi-fv__title {
  margin: 0 0 24px !important;
  padding: 0 !important;

  color: var(--sl-navy) !important;

  font-size: clamp(38px, 3.15vw, 62px) !important;
  line-height: 1.32 !important;

  font-weight: 900 !important;

  letter-spacing: -0.035em !important;

  text-align: left !important;
}


.suslogi-lp .suslogi-fv__title-green {
  color: #00bfc3 !important;
}


.suslogi-lp .suslogi-fv__title-blue {
  color: #1687ef !important;
}


/* ---------------------------------------------------------
   説明文
--------------------------------------------------------- */

.suslogi-lp .suslogi-fv__lead {
  margin: 0 0 27px !important;

  color: #142650 !important;

  font-size: clamp(15px, 1.05vw, 20px) !important;
  line-height: 1.75 !important;

  font-weight: 600 !important;

  letter-spacing: 0.02em;
}


/* =========================================================
   04｜機能カード
   PC：3枚＋2枚
========================================================= */

.suslogi-lp .suslogi-fv__features {
  display: grid !important;

  grid-template-columns:
    repeat(6, minmax(0, 1fr)) !important;

  gap: 9px 10px !important;

  width: 100% !important;

  margin: 0 0 28px !important;
}


/* 1段目 */
.suslogi-lp .suslogi-feature:nth-child(1),
.suslogi-lp .suslogi-feature:nth-child(2),
.suslogi-lp .suslogi-feature:nth-child(3) {
  grid-column: span 2 !important;
}


/* 2段目 */
.suslogi-lp .suslogi-feature:nth-child(4) {
  grid-column: 2 / span 2 !important;
}


.suslogi-lp .suslogi-feature:nth-child(5) {
  grid-column: 4 / span 2 !important;
}


/* カード */
.suslogi-lp .suslogi-feature {
  width: 100% !important;

  height: 46px !important;
  min-height: 46px !important;

  padding: 5px 10px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: rgba(255, 255, 255, 0.84) !important;

  border: 1px solid var(--sl-green) !important;
  border-radius: 999px !important;

  box-shadow: none !important;
}


/* 旧アイコンは非表示 */
.suslogi-lp .suslogi-feature__icon {
  display: none !important;
}


/* 鍵アイコンも非表示 */
.suslogi-lp .suslogi-feature p::before {
  content: none !important;
  display: none !important;
}


/* カード文字 */
.suslogi-lp .suslogi-feature p {
  margin: 0 !important;

  color: #0b4860 !important;

  font-size: 12px !important;
  line-height: 1.3 !important;

  font-weight: 800 !important;

  letter-spacing: 0 !important;

  text-align: center !important;

  white-space: normal !important;
}


/* 長いカードだけ小さく */
.suslogi-lp .suslogi-feature:nth-child(2) p {
  font-size: 9.8px !important;
}


/* HTML側にbrが残っても無効化 */
.suslogi-lp .suslogi-feature p br {
  display: none !important;
}


/* =========================================================
   05｜CTAボタン
========================================================= */

.suslogi-lp .suslogi-fv__buttons {
  width: 100% !important;
  max-width: 560px !important;

  display: grid !important;

  grid-template-columns:
    1fr 1fr !important;

  align-items: start !important;
  justify-items: stretch !important;

  gap: 12px !important;

  margin: 0 0 16px !important;
  padding: 0 !important;
}


/* WordPressのbr対策 */
.suslogi-lp .suslogi-fv__buttons > br {
  display: none !important;
}


/* WordPressのp対策 */
.suslogi-lp .suslogi-fv__buttons > p {
  display: contents !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* ボタン共通 */
.suslogi-lp
.suslogi-fv__buttons
a.suslogi-fv__button {
  width: 100% !important;

  min-width: 0 !important;
  max-width: none !important;

  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;

  margin: 0 !important;

  /* 文字を少し上へ */
  padding: 0 24px 8px !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  position: relative !important;

  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  transform: none !important;

  border-radius: 999px !important;

  font-size: 0.95rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  letter-spacing: 0.01em !important;

  text-align: center !important;
  text-decoration: none !important;

  white-space: nowrap !important;
}


/* 資料ダウンロード */
.suslogi-lp
.suslogi-fv__buttons
a.suslogi-fv__button--primary {
  color: #ffffff !important;

  border: 2px solid transparent !important;

  background:
    linear-gradient(
      90deg,
      #09bdbb 0%,
      #1789ef 100%
    ) !important;

  box-shadow:
    0 10px 22px rgba(15, 128, 218, 0.15) !important;
}


/* お問い合わせ */
.suslogi-lp
.suslogi-fv__buttons
a.suslogi-fv__button--secondary {
  color: #1687ef !important;

  border: 2px solid #1687ef !important;

  background:
    rgba(255, 255, 255, 0.94) !important;

  box-shadow: none !important;
}


/* hover時も位置は動かさない */
.suslogi-lp
.suslogi-fv__buttons
a.suslogi-fv__button:hover {
  transform: none !important;

  opacity: 0.9;

  text-decoration: none !important;
}


/* =========================================================
   06｜注記
========================================================= */

.suslogi-lp .suslogi-fv__note {
  margin: 0 !important;

  color: #597089 !important;

  font-size: clamp(12px, 0.85vw, 16px) !important;
  line-height: 1.6 !important;

  font-weight: 500 !important;
}


/* =========================================================
   07｜右側エリア
========================================================= */

.suslogi-lp .suslogi-fv__visual {
  flex: 0 0 calc(51% - 30px);

  width: auto;
  max-width: none;
  min-width: 0;

  margin: 0;

  padding: 0 42px 0 0 !important;

  display: flex;

  align-items: center !important;
  justify-content: flex-start !important;
}


/* =========================================================
   08｜右側カード
========================================================= */

.suslogi-lp .suslogi-result-card {
  width:
    min(660px, calc(100% - 42px)) !important;

  max-width: 660px !important;

  min-height: auto !important;

  margin:
    0 42px 0 0 !important;

  transform:
    translateX(-36px) !important;

  padding:
    26px 28px 22px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.78) 0%,
      rgba(250, 253, 255, 0.68) 100%
    ) !important;

  border:
    1px solid rgba(204, 218, 230, 0.65) !important;

  border-radius: 20px !important;

  box-shadow:
    0 8px 22px rgba(10, 44, 84, 0.08) !important;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


/* ---------------------------------------------------------
   右カードタイトル
--------------------------------------------------------- */

.suslogi-lp .suslogi-result-card__title {
  margin: 0 !important;

  color: #10234d !important;

  font-size: 20px !important;
  line-height: 1.45 !important;

  font-weight: 900 !important;

  letter-spacing: 0.03em;

  text-align: center !important;
}


/* ---------------------------------------------------------
   タイトル下の線
--------------------------------------------------------- */

.suslogi-lp .suslogi-result-card__divider {
  width: 100%;

  height: 1px;

  margin:
    16px 0 22px !important;

  background: #d7dee7;
}


/* =========================================================
   09｜グラフエリア
========================================================= */

.suslogi-lp .suslogi-result-card__charts {
  width: 100% !important;

  display: flex !important;

  flex-direction: row !important;
  flex-wrap: nowrap !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 12px !important;
}


/* グラフブロック共通 */
.suslogi-lp .suslogi-chart-block {
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;
  justify-content: flex-start !important;

  text-align: center !important;
}


/* ラベル */
.suslogi-lp .suslogi-chart-block__label {
  margin:
    0 0 10px !important;

  color: #11234e !important;

  font-size: 13px !important;
  line-height: 1.35 !important;

  font-weight: 900 !important;

  letter-spacing: 0.04em;

  text-align: center !important;
}


/* =========================================================
   10｜ドーナツグラフ共通
========================================================= */

.suslogi-lp .suslogi-donut {
  position: relative;

  width: 170px;
  min-width: 170px;
  max-width: 170px;

  aspect-ratio: 1 / 1;

  margin: 0 auto;

  border-radius: 50%;
}


/* 内側 */
.suslogi-lp .suslogi-donut::before {
  content: "";

  position: absolute;

  inset: 20px;

  z-index: 1;

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.97);
}


/* 41% */
.suslogi-lp .suslogi-donut--41 {
  background:
    conic-gradient(
      from 0deg,
      #00bbb9 0deg,
      #00bbb9 48deg,
      #087ee9 147.6deg,
      #e8edf2 147.6deg,
      #e8edf2 360deg
    );
}


/* 57% */
.suslogi-lp .suslogi-donut--57 {
  background:
    conic-gradient(
      from 0deg,
      #00bbb9 0deg,
      #00bbb9 58deg,
      #087ee9 205.2deg,
      #e8edf2 205.2deg,
      #e8edf2 360deg
    );
}


/* 数字中央 */
.suslogi-lp .suslogi-donut__center {
  position: absolute;

  inset: 0;

  z-index: 2;

  display: flex;

  align-items: center;
  justify-content: center;

  color: #071c49;
	  transform: translate(10px, -15px); 
}


.suslogi-lp .suslogi-donut__number {
  font-size: 46px !important;
  line-height: 1;

  font-weight: 900;

  letter-spacing: -0.055em;
}


.suslogi-lp .suslogi-donut__percent {
  align-self: center;

  margin-left: 3px;
  margin-top: 15px;

  font-size: 24px !important;
  line-height: 1;

  font-weight: 900;
}


/* =========================================================
   11｜現状の積載率
   少し小さく
========================================================= */

.suslogi-lp
.suslogi-result-card__charts
.suslogi-chart-block:first-child {
  width: 165px !important;
  min-width: 165px !important;
  max-width: 165px !important;
}


.suslogi-lp
.suslogi-result-card__charts
.suslogi-chart-block:first-child
.suslogi-donut {
  width: 132px !important;
  min-width: 132px !important;
  max-width: 132px !important;
}


.suslogi-lp
.suslogi-result-card__charts
.suslogi-chart-block:first-child
.suslogi-donut::before {
  inset: 16px !important;
}


.suslogi-lp
.suslogi-result-card__charts
.suslogi-chart-block:first-child
.suslogi-donut__number {
  font-size: 40px !important;
}


.suslogi-lp
.suslogi-result-card__charts
.suslogi-chart-block:first-child
.suslogi-donut__percent {
  margin-top: 13px !important;

  font-size: 21px !important;
}


/* =========================================================
   12｜改善目標
   大きめにして強調
========================================================= */

.suslogi-lp
.suslogi-result-card__charts
.suslogi-chart-block:last-child {
  width: 210px !important;
  min-width: 210px !important;
  max-width: 210px !important;
}


.suslogi-lp
.suslogi-result-card__charts
.suslogi-chart-block:last-child
.suslogi-chart-block__label {
  font-size: 13px !important;
}


.suslogi-lp
.suslogi-result-card__charts
.suslogi-chart-block:last-child
.suslogi-donut {
  width: 178px !important;
  min-width: 178px !important;
  max-width: 178px !important;
}


.suslogi-lp
.suslogi-result-card__charts
.suslogi-chart-block:last-child
.suslogi-donut::before {
  inset: 20px !important;
}


.suslogi-lp
.suslogi-result-card__charts
.suslogi-chart-block:last-child
.suslogi-donut__number {
  font-size: 54px !important;
}


.suslogi-lp
.suslogi-result-card__charts
.suslogi-chart-block:last-child
.suslogi-donut__percent {
  margin-top: 17px !important;

  font-size: 27px !important;
}


/* =========================================================
   13｜中央矢印
========================================================= */

.suslogi-lp .suslogi-chart-arrow {
  width: 44px !important;
  min-width: 44px !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  padding-top: 16px !important;
}


.suslogi-lp .suslogi-chart-arrow span {
  position: relative;

  display: block;

  width: 28px !important;
  height: 4px !important;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #01bcbf 0%,
      #1479ee 100%
    );
}


.suslogi-lp .suslogi-chart-arrow span::after {
  content: "";

  position: absolute;

  right: -1px;
  top: 50%;

  width: 13px !important;
  height: 13px !important;

  border-top:
    4px solid #1479ee !important;

  border-right:
    4px solid #1479ee !important;

  transform:
    translateY(-50%)
    rotate(45deg);
}


/* =========================================================
   14｜右カード下部テキスト
========================================================= */

.suslogi-lp .suslogi-result-card__bottom {
  margin:
    18px 0 0 !important;

  color: #15284e !important;

  font-size: 13px !important;
  line-height: 1.6 !important;

  font-weight: 800 !important;

  letter-spacing: 0.025em;

  text-align: center !important;
}


/* =========================================================
   15｜タブレット
   768px ～ 1023px
========================================================= */

@media screen and (min-width: 768px) and (max-width: 1023px) {

  /* FV */
  .suslogi-lp .suslogi-fv {
    min-height: auto;

    padding:
      45px 3.5% 52px;

    background-position:
      58% center;
  }


  .suslogi-lp .suslogi-fv__inner {
    gap: 28px;

    align-items: flex-start;
  }


  /* 左右 */
  .suslogi-lp .suslogi-fv__content {
    flex:
      0 0 calc(50% - 14px);
  }


  .suslogi-lp .suslogi-fv__visual {
    flex:
      0 0 calc(50% - 14px);

    padding-right:
      20px !important;
  }


  /* 左側文字 */
  .suslogi-lp .suslogi-fv__eyebrow {
    margin-bottom:
      22px !important;

    font-size:
      13px !important;
  }


  .suslogi-lp .suslogi-fv__title {
    font-size:
      clamp(29px, 4.2vw, 43px) !important;

    line-height:
      1.35 !important;
  }


  .suslogi-lp .suslogi-fv__lead {
    font-size:
      14px !important;

    line-height:
      1.7 !important;
  }


  /* 機能カード：2列 */
  .suslogi-lp .suslogi-fv__features {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap:
      8px !important;
  }


  .suslogi-lp .suslogi-feature:nth-child(n) {
    grid-column:
      auto !important;
  }


  .suslogi-lp .suslogi-feature {
    height:
      42px !important;

    min-height:
      42px !important;

    padding:
      4px 8px !important;
  }


  .suslogi-lp .suslogi-feature p,
  .suslogi-lp .suslogi-feature:nth-child(2) p {
    font-size:
      9px !important;

    line-height:
      1.25 !important;
  }


  /* CTA */
  .suslogi-lp .suslogi-fv__buttons {
    gap:
      10px !important;
  }


  .suslogi-lp
  .suslogi-fv__buttons
  a.suslogi-fv__button {
    height:
      54px !important;

    min-height:
      54px !important;

    max-height:
      54px !important;

    padding:
      0 14px !important;

    font-size:
      0.82rem !important;
  }


  /* 右カード */
  .suslogi-lp .suslogi-result-card {
    width:
      min(540px, calc(100% - 20px)) !important;

    max-width:
      540px !important;

    margin:
      0 20px 0 0 !important;

    transform:
      translateX(-10px) !important;

    padding:
      22px 18px 18px !important;
  }


  .suslogi-lp .suslogi-result-card__title {
    font-size:
      15px !important;
  }


  /* グラフ */
  .suslogi-lp .suslogi-result-card__charts {
    gap:
      8px !important;
  }


  .suslogi-lp
  .suslogi-result-card__charts
  .suslogi-chart-block:first-child {
    width:
      135px !important;

    min-width:
      135px !important;

    max-width:
      135px !important;
  }


  .suslogi-lp
  .suslogi-result-card__charts
  .suslogi-chart-block:last-child {
    width:
      160px !important;

    min-width:
      160px !important;

    max-width:
      160px !important;
  }


  .suslogi-lp .suslogi-chart-block__label {
    font-size:
      12px !important;
  }


  /* 現状 */
  .suslogi-lp
  .suslogi-result-card__charts
  .suslogi-chart-block:first-child
  .suslogi-donut {
    width:
      110px !important;

    min-width:
      110px !important;

    max-width:
      110px !important;
  }


  .suslogi-lp
  .suslogi-result-card__charts
  .suslogi-chart-block:first-child
  .suslogi-donut::before {
    inset:
      14px !important;
  }


  .suslogi-lp
  .suslogi-result-card__charts
  .suslogi-chart-block:first-child
  .suslogi-donut__number {
    font-size:
      34px !important;
  }


  .suslogi-lp
  .suslogi-result-card__charts
  .suslogi-chart-block:first-child
  .suslogi-donut__percent {
    font-size:
      18px !important;

    margin-top:
      11px !important;
  }


  /* 改善目標 */
  .suslogi-lp
  .suslogi-result-card__charts
  .suslogi-chart-block:last-child
  .suslogi-donut {
    width:
      140px !important;

    min-width:
      140px !important;

    max-width:
      140px !important;
  }


  .suslogi-lp
  .suslogi-result-card__charts
  .suslogi-chart-block:last-child
  .suslogi-donut::before {
    inset:
      17px !important;
  }


  .suslogi-lp
  .suslogi-result-card__charts
  .suslogi-chart-block:last-child
  .suslogi-donut__number {
    font-size:
      42px !important;
  }


  .suslogi-lp
  .suslogi-result-card__charts
  .suslogi-chart-block:last-child
  .suslogi-donut__percent {
    font-size:
      21px !important;

    margin-top:
      13px !important;
  }


  /* 矢印 */
  .suslogi-lp .suslogi-chart-arrow {
    width:
      38px !important;

    min-width:
      38px !important;

    padding-top:
      14px !important;
  }


  .suslogi-lp .suslogi-chart-arrow span {
    width:
      24px !important;

    height:
      4px !important;
  }


  .suslogi-lp
  .suslogi-chart-arrow
  span::after {
    width:
      11px !important;

    height:
      11px !important;

    border-top-width:
      3px !important;

    border-right-width:
      3px !important;
  }


  .suslogi-lp .suslogi-result-card__bottom {
    font-size:
      12px !important;
  }

}


/* =========================================================
   16｜スマホ
   ～767px
========================================================= */

@media screen and (max-width: 767px) {

  /* FV */
  .suslogi-lp .suslogi-fv {
    min-height: auto;

    padding:
      35px 18px 42px;

    background-position:
      67% top;

    background-size:
      auto 100%;
  }


  /* 背景を少し白く */
  .suslogi-lp .suslogi-fv::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.94) 0%,
        rgba(255, 255, 255, 0.86) 57%,
        rgba(255, 255, 255, 0.88) 100%
      );

    pointer-events: none;
  }


  /* 1カラム */
  .suslogi-lp .suslogi-fv__inner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 100%;

    display: flex;

    flex-direction: column;

    gap: 35px;
  }


  .suslogi-lp .suslogi-fv__content,
  .suslogi-lp .suslogi-fv__visual {
    width: 100%;
    max-width: 100%;

    flex: none;
  }


  /* 左側 */
  .suslogi-lp .suslogi-fv__eyebrow {
    margin-bottom:
      20px !important;

    font-size:
      13px !important;
  }


  .suslogi-lp .suslogi-fv__title {
    margin-bottom:
      19px !important;

    font-size:
      clamp(28px, 8.4vw, 38px) !important;

    line-height:
      1.38 !important;

    letter-spacing:
      -0.04em !important;
  }


  .suslogi-lp .suslogi-fv__lead {
    margin-bottom:
      24px !important;

    font-size:
      14px !important;

    line-height:
      1.8 !important;
  }


  .suslogi-lp .suslogi-fv__lead br {
    display: none;
  }


  /* 機能カード：1列 */
  .suslogi-lp .suslogi-fv__features {
    grid-template-columns:
      1fr !important;

    gap:
      7px !important;

    margin-bottom:
      20px !important;
  }


  .suslogi-lp .suslogi-feature:nth-child(n) {
    grid-column:
      auto !important;
  }


  .suslogi-lp .suslogi-feature {
    height:
      42px !important;

    min-height:
      42px !important;

    padding:
      4px 12px !important;
  }


  .suslogi-lp .suslogi-feature p,
  .suslogi-lp .suslogi-feature:nth-child(2) p {
    font-size:
      11px !important;

    line-height:
      1.3 !important;
  }


  /* CTA：縦並び */
  .suslogi-lp .suslogi-fv__buttons {
    width:
      100% !important;

    max-width:
      340px !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    grid-template-columns:
      1fr !important;

    gap:
      8px !important;
  }


  .suslogi-lp
  .suslogi-fv__buttons
  a.suslogi-fv__button {
    width:
      100% !important;

    height:
      54px !important;

    min-height:
      54px !important;

    max-height:
      54px !important;

    padding:
      0 20px !important;

    font-size:
      0.9rem !important;
  }


  .suslogi-lp .suslogi-fv__note {
    font-size:
      11px !important;

    line-height:
      1.6 !important;
  }


  /* 右エリア */
  .suslogi-lp .suslogi-fv__visual {
    padding-right:
      0 !important;

    justify-content:
      center !important;
  }


  /* 右カード */
  .suslogi-lp .suslogi-result-card {
    width:
      100% !important;

    max-width:
      100% !important;

    margin:
      0 !important;

    transform:
      none !important;

    padding:
      22px 14px 20px !important;
  }


  .suslogi-lp .suslogi-result-card__title {
    font-size:
      17px !important;
  }


  /* 横並び維持 */
  .suslogi-lp .suslogi-result-card__charts {
    gap:
      4px !important;
  }


  /* 現状ブロック */
  .suslogi-lp
  .suslogi-result-card__charts
  .suslogi-chart-block:first-child {
    width:
      105px !important;

    min-width:
      105px !important;

    max-width:
      105px !important;
  }


  /* 改善ブロック */
  .suslogi-lp
  .suslogi-result-card__charts
  .suslogi-chart-block:last-child {
    width:
      120px !important;

    min-width:
      120px !important;

    max-width:
      120px !important;
  }


  .suslogi-lp .suslogi-chart-block__label {
    margin-bottom:
      8px !important;

    font-size:
      11px !important;
  }


  /* 現状円グラフ */
  .suslogi-lp
  .suslogi-result-card__charts
  .suslogi-chart-block:first-child
  .suslogi-donut {
    width:
      92px !important;

    min-width:
      92px !important;

    max-width:
      92px !important;
  }


  .suslogi-lp
  .suslogi-result-card__charts
  .suslogi-chart-block:first-child
  .suslogi-donut::before {
    inset:
      12px !important;
  }


  .suslogi-lp
  .suslogi-result-card__charts
  .suslogi-chart-block:first-child
  .suslogi-donut__number {
    font-size:
      28px !important;
  }


  .suslogi-lp
  .suslogi-result-card__charts
  .suslogi-chart-block:first-child
  .suslogi-donut__percent {
    font-size:
      15px !important;

    margin-top:
      9px !important;
  }


  /* 改善円グラフ */
  .suslogi-lp
  .suslogi-result-card__charts
  .suslogi-chart-block:last-child
  .suslogi-donut {
    width:
      112px !important;

    min-width:
      112px !important;

    max-width:
      112px !important;
  }


  .suslogi-lp
  .suslogi-result-card__charts
  .suslogi-chart-block:last-child
  .suslogi-donut::before {
    inset:
      14px !important;
  }


  .suslogi-lp
  .suslogi-result-card__charts
  .suslogi-chart-block:last-child
  .suslogi-donut__number {
    font-size:
      34px !important;
  }


  .suslogi-lp
  .suslogi-result-card__charts
  .suslogi-chart-block:last-child
  .suslogi-donut__percent {
    font-size:
      18px !important;

    margin-top:
      11px !important;
  }


  /* 矢印 */
  .suslogi-lp .suslogi-chart-arrow {
    width:
      26px !important;

    min-width:
      26px !important;

    padding-top:
      12px !important;
  }


  .suslogi-lp .suslogi-chart-arrow span {
    width:
      18px !important;

    height:
      3px !important;
  }


  .suslogi-lp
  .suslogi-chart-arrow
  span::after {
    width:
      9px !important;

    height:
      9px !important;

    border-top-width:
      3px !important;

    border-right-width:
      3px !important;
  }


  .suslogi-lp .suslogi-result-card__bottom {
    margin-top:
      18px !important;

    font-size:
      11px !important;
  }

}


/* =========================================================
   17｜小さいスマホ
   ～390px
========================================================= */

@media screen and (max-width: 390px) {

  .suslogi-lp .suslogi-fv {
    padding-left:
      15px;

    padding-right:
      15px;
  }


  .suslogi-lp .suslogi-fv__title {
    font-size:
      27px !important;
  }


  .suslogi-lp .suslogi-result-card {
    padding-left:
      10px !important;

    padding-right:
      10px !important;
  }


  .suslogi-lp
  .suslogi-result-card__charts
  .suslogi-chart-block:first-child {
    width:
      96px !important;

    min-width:
      96px !important;

    max-width:
      96px !important;
  }


  .suslogi-lp
  .suslogi-result-card__charts
  .suslogi-chart-block:last-child {
    width:
      108px !important;

    min-width:
      108px !important;

    max-width:
      108px !important;
  }


  .suslogi-lp
  .suslogi-result-card__charts
  .suslogi-chart-block:first-child
  .suslogi-donut {
    width:
      84px !important;

    min-width:
      84px !important;

    max-width:
      84px !important;
  }


  .suslogi-lp
  .suslogi-result-card__charts
  .suslogi-chart-block:last-child
  .suslogi-donut {
    width:
      102px !important;

    min-width:
      102px !important;

    max-width:
      102px !important;
  }


  .suslogi-lp .suslogi-chart-arrow {
    width:
      22px !important;

    min-width:
      22px !important;
  }


  .suslogi-lp .suslogi-chart-arrow span {
    width:
      15px !important;
  }

}
/* =========================================================
   SusLogi LP
   WHY NOW Section｜白背景 最終完成版
========================================================= */


/* =========================================================
   00｜基本設定
========================================================= */

.suslogi-why,
.suslogi-why *,
.suslogi-why *::before,
.suslogi-why *::after {
  box-sizing: border-box;
}


/* =========================================================
   01｜FVとの接続
========================================================= */

/* FV下の余白をなくす */
.suslogi-lp,
.suslogi-lp .suslogi-fv {
  margin-bottom: 0 !important;
}


/* WordPress側に残る余白を詰める */
.suslogi-lp .suslogi-why {
  margin-top: -44px !important;
}


/* =========================================================
   02｜WHY NOW セクション全体
========================================================= */

.suslogi-why {
  position: relative;

  width: 100% !important;
  max-width: 100% !important;

  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;

  padding: 56px 5% 34px !important;

  overflow: hidden;

  color: #071c49;

  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif;

  /* 白背景 */
  background: #ffffff !important;
}


/* 旧背景の青い光は非表示 */
.suslogi-why::before {
  display: none !important;
}


/* =========================================================
   03｜Inner
========================================================= */

.suslogi-why__inner {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 1500px;

  margin: 0 auto;
}


/* =========================================================
   04｜見出しエリア
========================================================= */

.suslogi-why__header {
  width: 100%;

  margin-bottom: 28px !important;

  text-align: center !important;
}


/* =========================================================
   05｜WHY NOW ラベル
========================================================= */

.suslogi-why__label {
  width: fit-content;
  min-width: 180px;

  margin: 0 auto 20px !important;
  padding: 8px 24px !important;

  display: flex;

  align-items: center;
  justify-content: center;

  color: #1687ef !important;

  font-size: 12px !important;
  line-height: 1 !important;

  font-weight: 700 !important;

  letter-spacing: 0.18em !important;

  border: 1.5px solid #1687ef !important;
  border-radius: 999px;

  background:
    rgba(22, 135, 239, 0.05) !important;

  box-shadow: none !important;
}


/* =========================================================
   06｜H2
========================================================= */

.suslogi-why__title {
  margin: 0 0 14px !important;
  padding: 0 !important;

  color: #071c49 !important;

  font-size:
    clamp(28px, 2.8vw, 44px) !important;

  line-height: 1.5 !important;

  font-weight: 900 !important;

  letter-spacing: 0.025em !important;

  text-align: center !important;
}


/* =========================================================
   07｜説明文
   ※HTMLにない場合は影響しません
========================================================= */

.suslogi-why__lead {
  margin: 0 !important;

  color: #34475e !important;

  font-size:
    clamp(14px, 1.05vw, 18px) !important;

  line-height: 1.85 !important;

  font-weight: 400 !important;

  letter-spacing: 0.035em;

  text-align: center !important;
}


/* =========================================================
   08｜カードエリア
   PC：3枚横並び
========================================================= */

.suslogi-why__grid {
  width: 100%;

  margin: 24px auto 0;
  padding: 0;

  display: flex;

  flex-direction: row;
  flex-wrap: nowrap;

  align-items: flex-start;
  justify-content: center;

  gap: 20px;
}


/* =========================================================
   09｜カード共通
========================================================= */

.suslogi-why-card {
  position: relative;

  width: calc((100% - 40px) / 3);
  max-width: 420px;
  min-width: 0;

  min-height: 300px;

  margin: 0;
  padding: 22px 25px 24px;

  flex: 1 1 0;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  align-self: flex-start;

  overflow: hidden;

  /* 白カード */
  background: #ffffff !important;

  border:
    1px solid rgba(22, 135, 239, 0.23) !important;

  border-radius: 18px;

  box-shadow:
    0 8px 24px rgba(20, 58, 91, 0.075) !important;
}


/* カード内の淡い青い光 */
.suslogi-why-card::before {
  content: "";

  position: absolute;

  top: -100px;
  left: -80px;

  width: 300px;
  height: 300px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(22, 135, 239, 0.05),
      transparent 68%
    );

  pointer-events: none;
}


/* =========================================================
   10｜カードアイコン
========================================================= */

.suslogi-why-card__icon {
  position: relative;
  z-index: 2;

  width: 66px;
  height: 66px;

  margin-bottom: 14px;

  flex: 0 0 auto;

  display: flex;

  align-items: center;
  justify-content: center;

  border:
    2px solid #13c8d3 !important;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      rgba(8, 189, 187, 0.06),
      rgba(22, 135, 239, 0.07)
    ) !important;

  box-shadow: none !important;
}


.suslogi-why-card__icon img {
  display: block;

  width: 40px;
  height: 40px;

  object-fit: contain;
}


/* =========================================================
   11｜カテゴリー
========================================================= */

.suslogi-why-card__category {
  position: relative;
  z-index: 2;

  margin: 0 0 10px !important;

  color: #08aaa8 !important;

  font-size: 14px !important;
  line-height: 1.4 !important;

  font-weight: 800 !important;

  letter-spacing: 0.025em;
}


/* =========================================================
   12｜カードタイトル
========================================================= */

.suslogi-why-card__title {
  position: relative;
  z-index: 2;

  margin: 0 !important;
  padding: 0 !important;

  color: #071c49 !important;

  font-size:
    clamp(18px, 1.45vw, 24px) !important;

  line-height: 1.5 !important;

  font-weight: 800 !important;

  letter-spacing: 0.02em !important;

  text-align: left !important;
}


/* =========================================================
   13｜カード内区切り線
========================================================= */

.suslogi-why-card__line {
  position: relative;
  z-index: 2;

  width: 100%;
  height: 1px;

  margin: 16px 0 14px;

  background:
    linear-gradient(
      90deg,
      #08bdbb 0%,
      #1687ef 100%
    ) !important;
}


/* =========================================================
   14｜カード説明文
========================================================= */

.suslogi-why-card__text {
  position: relative;
  z-index: 2;

  margin: 0 !important;

  color: #34475e !important;

  font-size:
    clamp(13px, 0.98vw, 16px) !important;

  line-height: 1.8 !important;

  font-weight: 400 !important;

  letter-spacing: 0.025em;
}


/* =========================================================
   15｜注記
   ※HTMLにない場合は影響しません
========================================================= */

.suslogi-why__note {
  margin: 22px 0 0 !important;

  color: #66788d !important;

  font-size: 12px !important;
  line-height: 1.6 !important;

  font-weight: 400 !important;

  letter-spacing: 0.02em;

  text-align: center !important;
}


/* =========================================================
   16｜タブレット
   768px ～ 1023px
   2カラム
========================================================= */

@media screen and (min-width: 768px) and (max-width: 1023px) {

  .suslogi-why {
    padding: 50px 4% 32px !important;
  }


  .suslogi-why__header {
    margin-bottom: 28px !important;
  }


  .suslogi-why__label {
    min-width: 160px;

    margin-bottom: 22px !important;

    padding: 8px 20px !important;

    font-size: 11px !important;
  }


  .suslogi-why__title {
    font-size:
      clamp(26px, 4vw, 36px) !important;

    line-height: 1.55 !important;
  }


  .suslogi-why__lead {
    font-size: 14px !important;
    line-height: 1.85 !important;
  }


  /* 2列 */
  .suslogi-why__grid {
    flex-wrap: wrap;

    justify-content: center;

    gap: 16px;

    margin-top: 24px;
  }


  .suslogi-why-card {
    width: calc(50% - 8px);
    max-width: none;

    flex:
      0 0 calc(50% - 8px);

    min-height: 300px;

    padding:
      22px 25px 24px;
  }


  .suslogi-why-card__icon {
    width: 60px;
    height: 60px;
  }


  .suslogi-why-card__icon img {
    width: 36px;
    height: 36px;
  }


  .suslogi-why-card__category {
    font-size:
      13px !important;
  }


  .suslogi-why-card__title {
    font-size:
      19px !important;
  }


  .suslogi-why-card__text {
    font-size:
      13px !important;
  }


  .suslogi-why__note {
    font-size:
      12px !important;
  }

}


/* =========================================================
   17｜スマートフォン
   ～767px
   1カラム
========================================================= */

@media screen and (max-width: 767px) {

  .suslogi-lp .suslogi-why {
    margin-top: -44px !important;
  }


  .suslogi-why {
    padding:
      42px 18px 30px !important;
  }


  .suslogi-why__header {
    margin-bottom:
      24px !important;
  }


  .suslogi-why__label {
    min-width: 140px;

    margin-bottom:
      20px !important;

    padding:
      7px 18px !important;

    font-size:
      10px !important;

    letter-spacing:
      0.14em !important;
  }


  .suslogi-why__title {
    margin-bottom:
      16px !important;

    font-size:
      clamp(24px, 7vw, 32px) !important;

    line-height:
      1.5 !important;

    letter-spacing:
      0 !important;
  }


  .suslogi-why__title br {
    display: none;
  }


  .suslogi-why__lead {
    font-size:
      14px !important;

    line-height:
      1.8 !important;

    text-align:
      left !important;
  }


  .suslogi-why__lead br {
    display: none;
  }


  /* 1列 */
  .suslogi-why__grid {
    flex-direction: column;
    flex-wrap: nowrap;

    gap: 14px;

    margin-top: 24px;
  }


  .suslogi-why-card {
    width: 100%;
    max-width: 100%;

    min-height: auto;

    flex: none;

    margin: 0;

    padding:
      22px 25px 24px;
  }


  .suslogi-why-card__icon {
    width: 56px;
    height: 56px;
  }


  .suslogi-why-card__icon img {
    width: 32px;
    height: 32px;
  }


  .suslogi-why-card__category {
    font-size:
      13px !important;
  }


  .suslogi-why-card__title {
    font-size:
      18px !important;

    line-height:
      1.55 !important;
  }


  .suslogi-why-card__text {
    font-size:
      13px !important;

    line-height:
      1.75 !important;
  }


  .suslogi-why-card__text br {
    display: none;
  }


  .suslogi-why__note {
    margin-top:
      23px !important;

    font-size:
      11px !important;

    line-height:
      1.65 !important;

    text-align:
      left !important;
  }

}

/* =========================================================
   SusLogi LP
   PROBLEM Section｜最終完成版
   ・カードをコンパクト化
   ・イラストを少し大きく
   ・課題文を少し大きく
   ・カード内タイトルを中央揃え
   ・PC 3列 / タブレット2列 / スマホ1列
   ・締めコピー内のSusLogiをロゴ画像に変更
========================================================= */


/* =========================================================
   00｜基本設定
========================================================= */

.suslogi-problem,
.suslogi-problem *,
.suslogi-problem *::before,
.suslogi-problem *::after {
  box-sizing: border-box;
}


/* =========================================================
   01｜前セクションとの接続
========================================================= */

.suslogi-lp .suslogi-problem {
  margin-top: -44px !important;
}


/* =========================================================
   02｜セクション全体
========================================================= */

.suslogi-problem {
  position: relative;

  width: 100% !important;
  max-width: 100% !important;

  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;

  padding: 54px 5% 42px !important;

  overflow: hidden;

  color: #071c49;

  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif;

  background:
    radial-gradient(
      circle at 50% 10%,
      rgba(22, 135, 239, 0.055) 0%,
      rgba(22, 135, 239, 0.015) 40%,
      transparent 68%
    ),
    linear-gradient(
      180deg,
      #f9fbfd 0%,
      #ffffff 52%,
      #f8fbfe 100%
    );
}


/* =========================================================
   03｜Inner
========================================================= */

.suslogi-problem__inner {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 1500px;

  margin: 0 auto;
}


/* =========================================================
   04｜見出しエリア
========================================================= */

.suslogi-problem__header {
  width: 100%;

  margin: 0 0 30px !important;

  text-align: center !important;
}


/* =========================================================
   05｜PROBLEM ラベル
========================================================= */

.suslogi-problem__label {
  width: fit-content;
  min-width: 170px;

  margin: 0 auto 22px !important;
  padding: 8px 26px !important;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #167fe9 !important;

  font-size: 12px !important;
  line-height: 1 !important;

  font-weight: 800 !important;

  letter-spacing: 0.20em !important;

  border: 1.5px solid #1687ef;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.72);
}


/* =========================================================
   06｜H2
   WHY NOW・REASONと同じサイズ
========================================================= */

.suslogi-problem .suslogi-problem__title {
  margin: 0 !important;
  padding: 0 !important;

  color: #071c49 !important;

  font-size:
    clamp(28px, 2.8vw, 44px) !important;

  line-height: 1.5 !important;

  font-weight: 900 !important;

  letter-spacing: 0.025em !important;

  text-align: center !important;
}


/* =========================================================
   07｜カードエリア
   PC：3枚横並び
========================================================= */

.suslogi-problem .suslogi-problem__grid {
  width: 100% !important;

  margin: 0 auto !important;
  padding: 0 !important;

  display: flex !important;

  flex-direction: row !important;
  flex-wrap: nowrap !important;

  align-items: flex-start !important;
  justify-content: center !important;

  gap: 24px !important;

  grid-template-columns: none !important;
}


/* =========================================================
   08｜カード
   固定高さをやめて下余白を削減
========================================================= */

.suslogi-problem .suslogi-problem-card,
.suslogi-problem .suslogi-problem-card:nth-child(1),
.suslogi-problem .suslogi-problem-card:nth-child(2),
.suslogi-problem .suslogi-problem-card:nth-child(3) {
  position: relative !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  width:
    calc((100% - 48px) / 3) !important;

  max-width: 430px !important;
  min-width: 0 !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  flex: 1 1 0 !important;

  display: flex !important;
  flex-direction: column !important;

  align-self: flex-start !important;

  overflow: hidden;

  transform: none !important;

  background:
    rgba(255, 255, 255, 0.97);

  border:
    1px solid rgba(211, 222, 232, 0.96);

  border-radius: 20px;

  box-shadow:
    0 8px 25px rgba(20, 58, 91, 0.09);
}


/* =========================================================
   09｜イラストエリア
   少し大きく
========================================================= */

.suslogi-problem .suslogi-problem-card__image {
  width: 100% !important;

  height: 165px !important;
  min-height: 165px !important;
  max-height: 165px !important;

  flex: 0 0 165px !important;

  padding:
    10px
    18px
    0 !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  overflow: hidden;
}


.suslogi-problem .suslogi-problem-card__image img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 auto !important;

  object-fit: contain !important;
  object-position: center !important;
}


/* =========================================================
   10｜カード本文
   上下余白をコンパクトに
========================================================= */

.suslogi-problem .suslogi-problem-card__body {
  width: 100% !important;

  padding:
    8px
    22px
    11px !important;

  flex: 0 0 auto !important;

  display: flex !important;
  flex-direction: column !important;

  justify-content: flex-start !important;
}


/* =========================================================
   11｜カードタイトル
   中央揃え
========================================================= */

.suslogi-problem .suslogi-problem-card__title {
  margin: 0 !important;
  padding: 0 !important;

  color: #071c49 !important;

  font-size: 18px !important;

  line-height: 1.45 !important;

  font-weight: 900 !important;

  letter-spacing: 0.01em !important;

  text-align: center !important;
}


/* =========================================================
   12｜カード説明文
   ※現在のHTMLでは未使用
========================================================= */

.suslogi-problem .suslogi-problem-card__text {
  margin: 10px 0 0 !important;

  color: #31435c !important;

  font-size: 13px !important;

  line-height: 1.8 !important;

  font-weight: 500 !important;

  letter-spacing: 0.02em;

  text-align: center !important;
}


/* =========================================================
   13｜下部メッセージ
========================================================= */

.suslogi-problem .suslogi-problem__solution {
  width: 100%;

  margin-top: 26px !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;
}


/* =========================================================
   14｜下向き矢印
========================================================= */

.suslogi-problem .suslogi-problem__arrow {
  position: relative !important;

  width: 6px !important;
  height: 30px !important;

  margin:
    0 auto 27px !important;

  border: 0 !important;

  background:
    linear-gradient(
      180deg,
      #19a8e8 0%,
      #1680ed 100%
    ) !important;

  transform: none !important;
}


/* 矢印先端 */
.suslogi-problem .suslogi-problem__arrow::after {
  content: "" !important;

  position: absolute !important;

  left: 50% !important;
  bottom: -14px !important;

  width: 0 !important;
  height: 0 !important;

  border-left:
    15px solid transparent !important;

  border-right:
    15px solid transparent !important;

  border-top:
    16px solid #1680ed !important;

  border-bottom:
    0 !important;

  transform:
    translateX(-50%) !important;
}


/* =========================================================
   15｜締めコピー
========================================================= */

.suslogi-problem .suslogi-problem__solution-text {
  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 0.12em !important;

  color: #071c49 !important;

  font-size:
    clamp(22px, 2.15vw, 35px) !important;

  line-height: 1.55 !important;

  font-weight: 900 !important;

  letter-spacing: 0.015em !important;

  text-align: center !important;

  white-space: nowrap !important;
}


/* =========================================================
   SusLogi ロゴ
========================================================= */

.suslogi-problem .suslogi-problem__brand-logo {
  display: block !important;

  width: auto !important;
  height: 1.5em !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  flex: 0 0 auto !important;

  object-fit: contain !important;
}

/* =========================================================
   16｜タブレット
   768px ～ 1023px
   2カラム
========================================================= */

@media screen and (min-width: 768px) and (max-width: 1023px) {

  .suslogi-problem {
    padding:
      48px
      4%
      38px !important;
  }


  .suslogi-problem__header {
    margin-bottom:
      28px !important;
  }


  .suslogi-problem__label {
    min-width: 150px;

    margin-bottom:
      18px !important;

    padding:
      7px
      22px !important;

    font-size:
      11px !important;
  }


  .suslogi-problem .suslogi-problem__title {
    font-size:
      clamp(26px, 4vw, 36px) !important;
  }


  .suslogi-problem .suslogi-problem__grid {
    flex-wrap: wrap !important;

    gap: 18px !important;
  }


  .suslogi-problem .suslogi-problem-card,
  .suslogi-problem .suslogi-problem-card:nth-child(1),
  .suslogi-problem .suslogi-problem-card:nth-child(2),
  .suslogi-problem .suslogi-problem-card:nth-child(3) {
    width:
      calc(50% - 9px) !important;

    max-width: none !important;

    flex:
      0 0 calc(50% - 9px) !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }


  .suslogi-problem .suslogi-problem-card__image {
    height: 155px !important;
    min-height: 155px !important;
    max-height: 155px !important;

    flex:
      0 0 155px !important;

    padding:
      9px
      16px
      0 !important;
  }


  .suslogi-problem .suslogi-problem-card__body {
    padding:
      8px
      18px
      10px !important;
  }


  .suslogi-problem .suslogi-problem-card__title {
    font-size:
      17px !important;

    line-height:
      1.45 !important;

    text-align:
      center !important;
  }


  .suslogi-problem .suslogi-problem__solution {
    margin-top:
      24px !important;
  }


  .suslogi-problem .suslogi-problem__solution-text {
    font-size:
      clamp(21px, 3vw, 29px) !important;
  }


  /* ロゴ */
  .suslogi-problem .suslogi-problem__brand-logo {
    height: 1.15em !important;
    vertical-align: -0.14em !important;
  }

}


/* =========================================================
   17｜スマートフォン
   ～767px
   1カラム
========================================================= */

@media screen and (max-width: 767px) {

  .suslogi-lp .suslogi-problem {
    margin-top:
      -44px !important;
  }


  .suslogi-problem {
    padding:
      42px
      18px
      32px !important;
  }


  .suslogi-problem__header {
    margin-bottom:
      24px !important;
  }


  .suslogi-problem__label {
    min-width: 135px;

    margin-bottom:
      18px !important;

    padding:
      7px
      18px !important;

    font-size:
      10px !important;

    letter-spacing:
      0.16em !important;
  }


  .suslogi-problem .suslogi-problem__title {
    font-size:
      clamp(24px, 7vw, 32px) !important;

    line-height:
      1.5 !important;
  }


  .suslogi-problem .suslogi-problem__grid {
    flex-direction:
      column !important;

    flex-wrap:
      nowrap !important;

    gap:
      14px !important;
  }


  .suslogi-problem .suslogi-problem-card,
  .suslogi-problem .suslogi-problem-card:nth-child(1),
  .suslogi-problem .suslogi-problem-card:nth-child(2),
  .suslogi-problem .suslogi-problem-card:nth-child(3) {
    width: 100% !important;
    max-width: 100% !important;

    flex: none !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    border-radius: 17px;
  }


  .suslogi-problem .suslogi-problem-card__image {
    height: 155px !important;
    min-height: 155px !important;
    max-height: 155px !important;

    flex:
      0 0 155px !important;

    padding:
      9px
      14px
      0 !important;
  }


  .suslogi-problem .suslogi-problem-card__body {
    padding:
      8px
      17px
      11px !important;
  }


  .suslogi-problem .suslogi-problem-card__title {
    font-size:
      16px !important;

    line-height:
      1.45 !important;

    text-align:
      center !important;
  }


  /* スマホでは強制改行を解除 */
  .suslogi-problem
  .suslogi-problem-card__title br {
    display: none;
  }


  .suslogi-problem .suslogi-problem__solution {
    margin-top:
      22px !important;
  }


  .suslogi-problem .suslogi-problem__arrow {
    width: 5px !important;
    height: 26px !important;

    margin-bottom:
      24px !important;
  }


  .suslogi-problem
  .suslogi-problem__arrow::after {
    bottom:
      -12px !important;

    border-left-width:
      13px !important;

    border-right-width:
      13px !important;

    border-top-width:
      14px !important;
  }


  .suslogi-problem
  .suslogi-problem__solution-text {
    font-size:
      clamp(20px, 6.2vw, 27px) !important;

    line-height:
      1.6 !important;
  }


  /* スマホのロゴ */
  .suslogi-problem .suslogi-problem__brand-logo {
    height: 1.1em !important;
    margin:
      0 0.10em !important;

    vertical-align:
      -0.13em !important;
  }

}


/* =========================================================
   18｜小さいスマートフォン
   ～390px
========================================================= */

@media screen and (max-width: 390px) {

  .suslogi-problem {
    padding-left:
      15px !important;

    padding-right:
      15px !important;
  }


  .suslogi-problem .suslogi-problem__title {
    font-size:
      24px !important;
  }


  .suslogi-problem .suslogi-problem-card__image {
    height:
      145px !important;

    min-height:
      145px !important;

    max-height:
      145px !important;

    flex:
      0 0 145px !important;
  }


  .suslogi-problem .suslogi-problem-card__body {
    padding:
      8px
      15px
      10px !important;
  }


  .suslogi-problem .suslogi-problem-card__title {
    font-size:
      15px !important;

    text-align:
      center !important;
  }


  /* 小さいスマホのロゴ */
  .suslogi-problem .suslogi-problem__brand-logo {
    height:
      1.05em !important;

    margin:
      0 0.08em !important;
  }

}
/* =========================================================
   SusLogi LP
   REASON Section｜最終完成版
   ・H2のSusLogi文字をロゴ画像に変更
   ・「4つの理由」のグラデーション維持
   ・PC / タブレット / スマホ対応
========================================================= */


/* =========================================================
   00｜基本設定
========================================================= */

.suslogi-reason,
.suslogi-reason *,
.suslogi-reason *::before,
.suslogi-reason *::after {
  box-sizing: border-box;
}


/* =========================================================
   01｜セクション全体
========================================================= */

.suslogi-reason {
  position: relative;

  width: 100%;
  max-width: 100%;

  margin: 0 !important;

  padding: 56px 5% 52px;

  overflow: hidden;

  color: #071c49;

  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif;

  background: #ffffff;
}


/* =========================================================
   02｜Inner
========================================================= */

.suslogi-reason__inner {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 1320px;

  margin: 0 auto;

  padding-left: 28px;
  padding-right: 28px;
}


/* =========================================================
   03｜セクション見出し
========================================================= */

.suslogi-reason__header {
  width: 100%;

  margin: 0 0 42px;

  text-align: center;
}


/* REASONラベル */
.suslogi-reason__label {
  width: fit-content;
  min-width: 150px;

  margin: 0 auto 20px !important;
  padding: 8px 24px !important;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #167fe9 !important;

  font-size: 12px !important;
  line-height: 1 !important;

  font-weight: 800 !important;

  letter-spacing: 0.20em !important;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      rgba(22, 135, 239, 0.10),
      rgba(8, 189, 187, 0.10)
    );
}


/* =========================================================
   04｜H2
   SusLogiロゴ＋「が選ばれる」＋「4つの理由」
========================================================= */

.suslogi-reason__title {
  margin: 0 0 18px !important;
  padding: 0 !important;

  display: flex !important;

  flex-direction: row !important;
  flex-wrap: nowrap !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 0.08em !important;

  color: #071c49 !important;

  font-size:
    clamp(28px, 2.8vw, 44px) !important;

  line-height: 1.5 !important;

  font-weight: 900 !important;

  letter-spacing: 0.025em !important;

  text-align: center !important;

  white-space: nowrap !important;
}


/* SusLogiロゴ */
.suslogi-reason__title-logo {
  display: block !important;

  width: auto !important;
  height: 1.25em !important;
  max-width: none !important;
  max-height: none !important;

  margin: 0 0.08em 0 0 !important;
  padding: 0 !important;

  flex: 0 0 auto !important;

  object-fit: contain !important;

  transform: translateY(1px);
}


/* 「が選ばれる」 */
.suslogi-reason__title-normal {
  display: inline-block !important;

  color: #071c49 !important;

  background: none !important;

  -webkit-background-clip: initial !important;
  background-clip: initial !important;

  -webkit-text-fill-color: #071c49 !important;

  white-space: nowrap !important;
}


/* 「4つの理由」 */
.suslogi-reason__title-accent {
  display: inline-block !important;

  color: #0daebc !important;

  background:
    linear-gradient(
      90deg,
      #0ebdb7 0%,
      #1687ef 100%
    ) !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;

  -webkit-text-fill-color: transparent !important;

  white-space: nowrap !important;
}


/* =========================================================
   05｜リード文
========================================================= */

.suslogi-reason__lead {
  margin: 0 !important;

  color: #263b56 !important;

  font-size:
    clamp(14px, 1.05vw, 18px) !important;

  line-height: 1.9 !important;

  font-weight: 500 !important;

  letter-spacing: 0.025em;

  text-align: center !important;
}


/* =========================================================
   06｜各REASON共通
========================================================= */

.suslogi-reason-row {
  position: relative;

  width: 100%;
  max-width: 1280px;

  margin-left: auto;
  margin-right: auto;

  padding: 34px 0;

  display: grid;

  align-items: center;

  column-gap: 64px;

  border-bottom:
    1px solid #dce5ed;
}


/* 最後は区切り線なし */
.suslogi-reason-row:last-child {
  border-bottom: 0;
}


/* =========================================================
   07｜REASON 1・3
   文章左 / 画像右
========================================================= */

.suslogi-reason-row--image-right {
  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(320px, 0.75fr);
}


/* 文章 */
.suslogi-reason-row--image-right
.suslogi-reason-row__content {
  width: 100%;
  max-width: 650px;

  justify-self: end;

  padding: 0;
}


/* 画像 */
.suslogi-reason-row--image-right
.suslogi-reason-row__visual {
  justify-self: start;
}


/* =========================================================
   08｜REASON 2・4
   画像左 / 文章右
========================================================= */

.suslogi-reason-row--image-left {
  grid-template-columns:
    minmax(320px, 0.75fr)
    minmax(0, 1.25fr);
}


/* 画像位置 */
.suslogi-reason-row--image-left
.suslogi-reason-row__visual {
  justify-self: end;
}


/* 文章だけ右へ寄せる */
.suslogi-reason-row--image-left
.suslogi-reason-row__content {
  width: 100%;
  max-width: 650px;

  justify-self: start;

  padding-left: 160px;
  padding-right: 0;
}


/* =========================================================
   09｜文章共通
========================================================= */

.suslogi-reason-row__content {
  min-width: 0;
}


/* REASON 1〜4 */
.suslogi-reason-row__number {
  margin: 0 0 15px !important;

  color: #167fe9 !important;

  font-size: 13px !important;
  line-height: 1 !important;

  font-weight: 900 !important;

  letter-spacing: 0.18em !important;
}


/* =========================================================
   10｜理由タイトル
========================================================= */

.suslogi-reason-row__title {
  margin: 0 0 18px !important;
  padding: 0 !important;

  color: #071c49 !important;

  font-size:
    clamp(22px, 1.8vw, 29px) !important;

  line-height: 1.55 !important;

  font-weight: 900 !important;

  letter-spacing: 0.01em !important;

  text-align: left !important;
}


/* =========================================================
   11｜本文
========================================================= */

.suslogi-reason-row__text {
  margin: 0 0 17px !important;

  color: #34475e !important;

  font-size:
    clamp(13px, 1vw, 16px) !important;

  line-height: 1.9 !important;

  font-weight: 500 !important;

  letter-spacing: 0.02em;
}


/* =========================================================
   12｜チェックリスト
========================================================= */

.suslogi-reason-row__list {
  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}


.suslogi-reason-row__list li {
  position: relative;

  margin: 0 0 10px !important;

  padding-left: 29px;

  color: #263b56 !important;

  font-size:
    clamp(13px, 0.98vw, 16px) !important;

  line-height: 1.65 !important;

  font-weight: 500 !important;
}


.suslogi-reason-row__list li:last-child {
  margin-bottom: 0 !important;
}


/* チェックマーク */
.suslogi-reason-row__list li::before {
  content: "";

  position: absolute;

  left: 3px;
  top: 0.45em;

  width: 12px;
  height: 7px;

  border-left:
    2px solid #08bdbb;

  border-bottom:
    2px solid #08bdbb;

  transform:
    rotate(-45deg);
}


/* =========================================================
   13｜イラスト
========================================================= */

.suslogi-reason-row__visual {
  width: 100%;
  max-width: 420px;
  min-width: 0;

  margin: 0;

  padding: 14px;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  background:
    rgba(255, 255, 255, 0.80);

  border:
    1px solid rgba(205, 220, 232, 0.92);

  border-radius: 18px;

  box-shadow:
    0 7px 22px rgba(20, 58, 91, 0.055);
}


/* イラスト自体 */
.suslogi-reason-row__visual img {
  display: block;

  width: 100%;
  max-width: 390px;
  height: auto;
  max-height: 290px;

  margin: 0 auto;

  object-fit: contain;
  object-position: center;
}


/* =========================================================
   14｜タブレット
   768px ～ 1023px
========================================================= */

@media screen and (min-width: 768px) and (max-width: 1023px) {

  .suslogi-reason {
    padding:
      50px
      4%
      42px;
  }


  .suslogi-reason__inner {
    padding-left: 15px;
    padding-right: 15px;
  }


  .suslogi-reason__header {
    margin-bottom: 32px;
  }


  .suslogi-reason__label {
    min-width: 140px;

    padding:
      7px 21px !important;

    font-size:
      11px !important;
  }


  /* H2 */
  .suslogi-reason__title {
    font-size:
      clamp(26px, 4vw, 36px) !important;

    gap:
      0.07em !important;
  }


  .suslogi-reason__title-logo {
    height:
      1.23em !important;
  }


  .suslogi-reason__lead {
    font-size:
      14px !important;
  }


  /* 共通 */
  .suslogi-reason-row {
    max-width: 920px;

    padding: 30px 0;

    column-gap: 32px;
  }


  /* 理由1・3 */
  .suslogi-reason-row--image-right {
    grid-template-columns:
      minmax(0, 1.15fr)
      minmax(260px, 0.85fr);
  }


  /* 理由2・4 */
  .suslogi-reason-row--image-left {
    grid-template-columns:
      minmax(260px, 0.85fr)
      minmax(0, 1.15fr);
  }


  /* タブレットでは右寄せ量を控えめに */
  .suslogi-reason-row--image-left
  .suslogi-reason-row__content {
    padding-left: 24px;
  }


  .suslogi-reason-row__content {
    max-width: 520px;
  }


  .suslogi-reason-row__number {
    font-size:
      11px !important;
  }


  .suslogi-reason-row__title {
    font-size:
      clamp(19px, 2.5vw, 23px) !important;
  }


  .suslogi-reason-row__text,
  .suslogi-reason-row__list li {
    font-size:
      13px !important;
  }


  .suslogi-reason-row__visual {
    max-width: 320px;

    padding: 10px;
  }


  .suslogi-reason-row__visual img {
    max-width: 300px;
    max-height: 250px;
  }

}


/* =========================================================
   15｜スマートフォン
   ～767px
========================================================= */

@media screen and (max-width: 767px) {

  .suslogi-reason {
    padding:
      42px
      18px
      34px;
  }


  .suslogi-reason__inner {
    padding-left: 0;
    padding-right: 0;
  }


  .suslogi-reason__header {
    margin-bottom: 26px;
  }


  .suslogi-reason__label {
    min-width: 130px;

    padding:
      7px 18px !important;

    font-size:
      10px !important;
  }


  /* =======================================================
     スマホ H2
     1行を維持
  ======================================================= */

  .suslogi-reason__title {
    margin-bottom:
      15px !important;

    font-size:
      clamp(19px, 5.2vw, 27px) !important;

    line-height:
      1.5 !important;

    gap:
      0.05em !important;

    flex-wrap:
      nowrap !important;

    white-space:
      nowrap !important;
  }


  .suslogi-reason__title-logo {
    height:
      1.18em !important;

    margin-right:
      0.05em !important;

    transform:
      translateY(1px);
  }


  .suslogi-reason__lead {
    font-size:
      14px !important;

    line-height:
      1.8 !important;

    text-align:
      left !important;
  }


  .suslogi-reason__lead br {
    display: none;
  }


  /* =======================================================
     スマホ：すべて文章 → イラスト
  ======================================================= */

  .suslogi-reason-row,
  .suslogi-reason-row--image-left,
  .suslogi-reason-row--image-right {
    width: 100%;
    max-width: 100%;

    padding:
      28px 0;

    display: flex;

    flex-direction: column;

    gap: 20px;

    align-items: stretch;
  }


  /* 文章 */
  .suslogi-reason-row__content,
  .suslogi-reason-row--image-left
  .suslogi-reason-row__content,
  .suslogi-reason-row--image-right
  .suslogi-reason-row__content {
    width: 100%;
    max-width: 100%;

    order: 1;

    padding: 0;

    justify-self: auto;
  }


  /* 画像 */
  .suslogi-reason-row__visual,
  .suslogi-reason-row--image-left
  .suslogi-reason-row__visual,
  .suslogi-reason-row--image-right
  .suslogi-reason-row__visual {
    width: 88%;
    max-width: 420px;

    order: 2;

    margin-left: auto;
    margin-right: auto;

    padding: 10px;

    justify-self: auto;

    border-radius: 15px;
  }


  .suslogi-reason-row__visual img {
    width: 100%;
    max-width: 100%;
    max-height: none;
  }


  .suslogi-reason-row__number {
    margin-bottom:
      12px !important;

    font-size:
      11px !important;
  }


  .suslogi-reason-row__title {
    margin-bottom:
      14px !important;

    font-size:
      20px !important;

    line-height:
      1.55 !important;
  }


  .suslogi-reason-row__title br {
    display: none;
  }


  .suslogi-reason-row__text {
    margin-bottom:
      15px !important;

    font-size:
      13px !important;

    line-height:
      1.8 !important;
  }


  .suslogi-reason-row__list li {
    margin-bottom:
      8px !important;

    font-size:
      13px !important;
  }

}


/* =========================================================
   16｜小さいスマートフォン
   ～390px
========================================================= */

@media screen and (max-width: 390px) {

  .suslogi-reason {
    padding-left: 15px;
    padding-right: 15px;
  }


  /* H2を1行に収める */
  .suslogi-reason__title {
    font-size:
      18px !important;

    gap:
      0.04em !important;
  }


  .suslogi-reason__title-logo {
    height:
      1.15em !important;

    margin-right:
      0.03em !important;
  }


  .suslogi-reason-row__title {
    font-size:
      18px !important;
  }

}


/* =========================================================
   17｜PROBLEM → REASON 間の白い余白を削除
========================================================= */

.suslogi-lp .suslogi-reason {
  margin-top: -44px !important;
}
/* =========================================================
   SusLogi LP
   HOW IT WORKS｜アイコンなし完成版
========================================================= */


/* =========================================================
   00｜基本設定
========================================================= */

.suslogi-flow,
.suslogi-flow *,
.suslogi-flow *::before,
.suslogi-flow *::after {
  box-sizing: border-box;
}


/* =========================================================
   01｜セクション全体
========================================================= */

.suslogi-flow {
  position: relative !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;

  padding:
    58px
    5%
    60px !important;

  overflow: hidden !important;

  color: #071c49;

  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif;

  background: #f4f9fd !important;
}


/* =========================================================
   02｜INNER
========================================================= */

.suslogi-flow__inner {
  width: 100% !important;
  max-width: 1400px !important;

  margin: 0 auto !important;
  padding: 0 !important;
}


/* =========================================================
   03｜見出しエリア
========================================================= */

.suslogi-flow__header {
  width: 100% !important;

  margin:
    0 auto 42px !important;

  text-align: center !important;
}


/* =========================================================
   04｜HOW IT WORKS ラベル
========================================================= */

.suslogi-flow__label {
  width: fit-content !important;
  min-width: 210px !important;

  margin:
    0 auto 22px !important;

  padding:
    9px 28px !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  color: #1687ef !important;

  font-size: 12px !important;
  line-height: 1 !important;

  font-weight: 800 !important;

  letter-spacing:
    0.16em !important;

  border:
    1.5px solid rgba(22, 135, 239, 0.38) !important;

  border-radius:
    999px !important;

  background:
    #ffffff !important;
}


/* =========================================================
   05｜H2
========================================================= */

.suslogi-flow__title {
  margin:
    0 0 14px !important;

  padding: 0 !important;

  color:
    #071c49 !important;

  font-size:
    clamp(28px, 2.8vw, 44px) !important;

  line-height:
    1.5 !important;

  font-weight:
    900 !important;

  letter-spacing:
    0.025em !important;

  text-align:
    center !important;
}


/* =========================================================
   06｜リード文
========================================================= */

.suslogi-flow__lead {
  margin: 0 !important;

  padding: 0 !important;

  color:
    #34475e !important;

  font-size:
    clamp(14px, 1.05vw, 18px) !important;

  line-height:
    1.85 !important;

  font-weight:
    500 !important;

  letter-spacing:
    0.025em !important;

  text-align:
    center !important;
}


/* =========================================================
   07｜カードエリア
   PC：4枚横並び
========================================================= */

.suslogi-flow .suslogi-flow__grid {
  width: 100% !important;
  max-width: 1320px !important;

  margin:
    0 auto !important;

  padding:
    0 15px !important;

  display:
    flex !important;

  flex-direction:
    row !important;

  flex-wrap:
    nowrap !important;

  align-items:
    stretch !important;

  justify-content:
    center !important;

  gap:
    38px !important;
}


/* =========================================================
   08｜カード
========================================================= */

.suslogi-flow .suslogi-flow-card,
.suslogi-flow .suslogi-flow-card:nth-child(1),
.suslogi-flow .suslogi-flow-card:nth-child(2),
.suslogi-flow .suslogi-flow-card:nth-child(3),
.suslogi-flow .suslogi-flow-card:nth-child(4) {
  position:
    relative !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  width:
    calc((100% - 114px) / 4) !important;

  max-width:
    305px !important;

  min-width:
    0 !important;

  height:
    205px !important;

  min-height:
    205px !important;

  margin:
    0 !important;

  padding:
    28px
    20px
    24px !important;

  flex:
    1 1 0 !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    center !important;

  justify-content:
    flex-start !important;

  align-self:
    stretch !important;

  text-align:
    center !important;

  transform:
    none !important;

  overflow:
    visible !important;

  background:
   #ffffff!important;

  border:
    1px solid #d4e0e9 !important;

  border-radius:
    18px !important;

  box-shadow:
    0 7px 22px rgba(20, 58, 91, 0.06) !important;
}


/* =========================================================
   09｜カード上部アクセント
========================================================= */

.suslogi-flow .suslogi-flow-card::before {
  display: none !important;
}

/* =========================================================
   10｜カード間矢印
========================================================= */

.suslogi-flow
.suslogi-flow-card:not(:last-child)::after {
  content: "" !important;

  position:
    absolute !important;

  top:
    50% !important;

  right:
    -27px !important;

  width:
    0 !important;

  height:
    0 !important;

  border-top:
    9px solid transparent !important;

  border-bottom:
    9px solid transparent !important;

  border-left:
    14px solid #1687ef !important;

  transform:
    translateY(-50%) !important;

  z-index:
    10 !important;
}


/* =========================================================
   11｜番号
========================================================= */

.suslogi-flow-card__number {
  width:
    44px !important;

  height:
    44px !important;

  min-width:
    44px !important;

  margin:
    0 auto 16px !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  color:
    #ffffff !important;

  font-size:
    20px !important;

  line-height:
    1 !important;

  font-weight:
    900 !important;

  border-radius:
    50% !important;

  background:
    linear-gradient(
      135deg,
      #08bdbb 0%,
      #08aeb6 100%
    ) !important;

  box-shadow:
    0 4px 10px rgba(8, 189, 187, 0.12) !important;
}


/* =========================================================
   12｜カードタイトル
========================================================= */

.suslogi-flow-card__title {
  margin:
    0 0 14px !important;

  padding:
    0 !important;

  color:
    #08aaa8 !important;

  font-size:
    22px !important;

  line-height:
    1.4 !important;

  font-weight:
    900 !important;

  letter-spacing:
    0.02em !important;

  text-align:
    center !important;
}


/* =========================================================
   13｜説明文
========================================================= */

.suslogi-flow-card__text {
  margin:
    0 !important;

  padding:
    0 !important;

  color:
    #263b56 !important;

  font-size:
    14px !important;

  line-height:
    1.8 !important;

  font-weight:
    500 !important;

  letter-spacing:
    0.015em !important;

  text-align:
    center !important;
}


/* =========================================================
   14｜PC
   901px以上は4列固定
========================================================= */

@media screen and (min-width: 901px) {

  .suslogi-flow .suslogi-flow__grid {
    display:
      flex !important;

    flex-direction:
      row !important;

    flex-wrap:
      nowrap !important;
  }


  .suslogi-flow .suslogi-flow-card {
    width:
      calc((100% - 114px) / 4) !important;

    flex:
      1 1 0 !important;
  }

}


/* =========================================================
   15｜タブレット
   601px ～ 900px
========================================================= */

@media screen and (min-width: 601px) and (max-width: 900px) {

  .suslogi-flow {
    padding:
      50px
      4%
      48px !important;
  }


  .suslogi-flow__header {
    margin-bottom:
      34px !important;
  }


  .suslogi-flow__label {
    min-width:
      180px !important;

    font-size:
      11px !important;
  }


  .suslogi-flow__title {
    font-size:
      clamp(26px, 4vw, 36px) !important;
  }


  .suslogi-flow__lead {
    font-size:
      14px !important;
  }


  .suslogi-flow .suslogi-flow__grid {
    display:
      grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap:
      18px !important;

    padding:
      0 !important;
  }


  .suslogi-flow .suslogi-flow-card,
  .suslogi-flow .suslogi-flow-card:nth-child(1),
  .suslogi-flow .suslogi-flow-card:nth-child(2),
  .suslogi-flow .suslogi-flow-card:nth-child(3),
  .suslogi-flow .suslogi-flow-card:nth-child(4) {
    width:
      100% !important;

    max-width:
      none !important;

    height:
      195px !important;

    min-height:
      195px !important;

    padding:
      24px
      20px
      22px !important;
  }


  .suslogi-flow
  .suslogi-flow-card::after {
    display:
      none !important;
  }


  .suslogi-flow-card__number {
    width:
      40px !important;

    height:
      40px !important;

    min-width:
      40px !important;

    margin-bottom:
      13px !important;

    font-size:
      18px !important;
  }


  .suslogi-flow-card__title {
    font-size:
      20px !important;
  }


  .suslogi-flow-card__text {
    font-size:
      13px !important;
  }

}


/* =========================================================
   16｜スマートフォン
   ～600px
========================================================= */

@media screen and (max-width: 600px) {

  .suslogi-flow {
    padding:
      42px
      18px
      38px !important;
  }


  .suslogi-flow__header {
    margin-bottom:
      28px !important;
  }


  .suslogi-flow__label {
    min-width:
      155px !important;

    margin-bottom:
      20px !important;

    padding:
      7px
      18px !important;

    font-size:
      10px !important;
  }


  .suslogi-flow__title {
    font-size:
      clamp(24px, 7vw, 32px) !important;

    line-height:
      1.5 !important;
  }


  .suslogi-flow__title br {
    display:
      none;
  }


  .suslogi-flow__lead {
    font-size:
      14px !important;

    line-height:
      1.8 !important;

    text-align:
      left !important;
  }


  .suslogi-flow .suslogi-flow__grid {
    display:
      flex !important;

    flex-direction:
      column !important;

    flex-wrap:
      nowrap !important;

    gap:
      14px !important;

    padding:
      0 !important;
  }


  .suslogi-flow .suslogi-flow-card,
  .suslogi-flow .suslogi-flow-card:nth-child(1),
  .suslogi-flow .suslogi-flow-card:nth-child(2),
  .suslogi-flow .suslogi-flow-card:nth-child(3),
  .suslogi-flow .suslogi-flow-card:nth-child(4) {
    width:
      100% !important;

    max-width:
      100% !important;

    height:
      auto !important;

    min-height:
      175px !important;

    flex:
      none !important;

    padding:
      23px
      18px
      21px !important;

    border-radius:
      17px !important;
  }


  .suslogi-flow
  .suslogi-flow-card::after {
    display:
      none !important;
  }


  .suslogi-flow-card__number {
    width:
      38px !important;

    height:
      38px !important;

    min-width:
      38px !important;

    margin-bottom:
      12px !important;

    font-size:
      17px !important;
  }


  .suslogi-flow-card__title {
    margin-bottom:
      11px !important;

    font-size:
      19px !important;
  }


  .suslogi-flow-card__text {
    font-size:
      13px !important;

    line-height:
      1.75 !important;
  }


  .suslogi-flow-card__text br {
    display:
      none;
  }

}


/* =========================================================
   17｜小さいスマートフォン
========================================================= */

@media screen and (max-width: 390px) {

  .suslogi-flow {
    padding-left:
      15px !important;

    padding-right:
      15px !important;
  }


  .suslogi-flow__title {
    font-size:
      24px !important;
  }

}
/* =========================================================
   SusLogi LP
   CONSULTING Section｜最終整理版
========================================================= */


/* =========================================================
   00｜基本設定
========================================================= */

.suslogi-consult,
.suslogi-consult *,
.suslogi-consult *::before,
.suslogi-consult *::after {
  box-sizing: border-box;
}


/* =========================================================
   01｜セクション全体
========================================================= */

.suslogi-consult {
  position: relative !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 60px 4% 64px !important;

  color: #071c49;

  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif;

  background: #ffffff !important;
}


/* =========================================================
   02｜大外枠
========================================================= */

.suslogi-consult__inner {
  position: relative;

  width: 100% !important;
  max-width: 1460px !important;

  margin: 0 auto !important;
  padding: 54px 50px 52px !important;

  border: 2px solid transparent;
  border-radius: 24px;

  background:
    linear-gradient(
      #ffffff,
      #ffffff
    ) padding-box,
    linear-gradient(
      135deg,
      #08bdbb 0%,
      #1687ef 100%
    ) border-box;

  box-shadow:
    0 8px 30px rgba(20, 58, 91, 0.045);
}


/* =========================================================
   03｜見出し
========================================================= */

.suslogi-consult__header {
  width: 100%;

  margin: 0 auto 42px !important;

  text-align: center !important;
}


/* CONSULTING */
.suslogi-consult__label {
  width: fit-content;
  min-width: 190px;

  margin: 0 auto 24px !important;
  padding: 9px 26px !important;

  color: #1687ef !important;

  font-size: 12px !important;
  line-height: 1 !important;

  font-weight: 800 !important;
  letter-spacing: 0.16em !important;

  border:
    1px solid rgba(22, 135, 239, 0.28);

  border-radius: 999px;

  background: #f3f8ff;
}


/* =========================================================
   04｜H2
========================================================= */

.suslogi-consult__title {
  margin: 0 0 18px !important;
  padding: 0 !important;

  color: #071c49 !important;

  font-size:
    clamp(28px, 2.8vw, 44px) !important;

  line-height: 1.5 !important;

  font-weight: 900 !important;
  letter-spacing: 0.015em !important;

  text-align: center !important;
}


/* 「伴走します。」 */
.suslogi-consult__title span {
  display: inline-block;

  background:
    linear-gradient(
      90deg,
      #08bdbb 0%,
      #1687ef 100%
    );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;
}


/* =========================================================
   05｜リード文
========================================================= */

.suslogi-consult__lead {
  margin: 0 !important;

  color: #43546a !important;

  font-size:
    clamp(14px, 1.05vw, 17px) !important;

  line-height: 1.8 !important;

  font-weight: 500 !important;

  text-align: center !important;
}


/* =========================================================
   06｜STEP 1〜4
   PC：4枚横並び
========================================================= */

.suslogi-consult .suslogi-consult__steps {
  width: 100% !important;

  margin: 0 auto 46px !important;
  padding: 0 !important;

  display: flex !important;

  flex-direction: row !important;
  flex-wrap: nowrap !important;

  align-items: stretch !important;
  justify-content: center !important;

  gap: 20px !important;
}


/* =========================================================
   07｜STEPカード
========================================================= */

.suslogi-consult .suslogi-consult-step {
  position: relative !important;

  width:
    calc((100% - 60px) / 4) !important;

  max-width: none !important;
  min-width: 0 !important;

  height: 360px !important;
  min-height: 360px !important;
  max-height: 360px !important;

  margin: 0 !important;
  padding: 24px 22px 26px !important;

  flex: 1 1 0 !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;
  justify-content: flex-start !important;

  align-self: stretch !important;

  overflow: hidden;

  background: #ffffff !important;

  border:
    1px solid #d7e1e9 !important;

  border-radius: 16px !important;

  box-shadow:
    0 7px 22px rgba(20, 58, 91, 0.055) !important;
}


/* =========================================================
   08｜STEP番号
========================================================= */

.suslogi-consult .suslogi-consult-step__number {
  width: 100% !important;

  margin: 0 0 12px !important;

  color: #1687ef !important;

  font-size: 15px !important;
  line-height: 1 !important;

  font-weight: 900 !important;
  letter-spacing: 0.12em !important;

  text-align: left !important;
}


/* =========================================================
   09｜STEP画像
========================================================= */

.suslogi-consult-step__image {
  width: 100% !important;

  height: 165px !important;
  min-height: 165px !important;

  margin: 0 0 14px !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  overflow: hidden !important;
}


.suslogi-consult-step__image img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: 210px !important;

  margin: 0 auto !important;

  object-fit: contain !important;
  object-position: center !important;
}


/* =========================================================
   10｜STEPタイトル
========================================================= */

.suslogi-consult-step__title {
  margin: 0 0 11px !important;
  padding: 0 !important;

  color: #071c49 !important;

  font-size: 20px !important;
  line-height: 1.45 !important;

  font-weight: 900 !important;

  text-align: center !important;
}


/* =========================================================
   11｜STEP説明
========================================================= */

.suslogi-consult-step__text {
  margin: 0 !important;
  padding: 0 !important;

  color: #4a596a !important;

  font-size: 14px !important;
  line-height: 1.8 !important;

  font-weight: 500 !important;

  text-align: center !important;
}


/* =========================================================
   12｜有償サービスエリア
========================================================= */

.suslogi-assessment {
  width: 100% !important;

  padding: 34px 36px !important;

  border:
    1px solid #d7e5ef;

  border-radius: 20px;

  background:
    linear-gradient(
      135deg,
      #f3f9ff 0%,
      #edf6fc 100%
    );
}


/* =========================================================
   13｜有償サービス見出し
========================================================= */

.suslogi-assessment__header {
  width: 100%;

  margin-bottom: 26px;
}


/* 有償サービス */
.suslogi-assessment__badge {
  width: fit-content;

  margin: 0 0 16px !important;
  padding: 8px 22px !important;

  color: #ffffff !important;

  font-size: 12px !important;
  line-height: 1 !important;

  font-weight: 800 !important;
  letter-spacing: 0.12em !important;

  border-radius: 999px;

  background: #071c49;
}


/* =========================================================
   14｜アセスメントタイトル＋匿名加工
========================================================= */

.suslogi-consult .suslogi-assessment__heading {
  margin-bottom: 10px !important;

  display: flex !important;

  flex-direction: row !important;
  flex-wrap: wrap !important;

  align-items: center !important;

  gap: 12px 18px !important;
}


.suslogi-assessment__title {
  margin: 0 !important;
  padding: 0 !important;

  color: #071c49 !important;

  font-size:
    clamp(22px, 2vw, 30px) !important;

  line-height: 1.45 !important;

  font-weight: 900 !important;
}


/* =========================================================
   15｜匿名加工で実施
========================================================= */

.suslogi-consult .suslogi-assessment__privacy {
  position: relative !important;

  width: auto !important;

  height: 32px !important;
  min-height: 32px !important;

  margin: 0 !important;
  padding: 0 16px !important;

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  color: #088e7d !important;

  font-size: 12px !important;
  line-height: 1 !important;

  font-weight: 800 !important;

  white-space: nowrap !important;

  border:
    1px solid #40b9a1 !important;

  border-radius: 999px !important;

  background: #ffffff !important;

  transform: none !important;

  overflow: visible !important;
}


/*
  枠は動かさず、
  文字だけ少し上へ
*/
.suslogi-assessment__privacy-text {
  position: relative;

  top: -2px;
}


/* 不要な疑似要素 */
.suslogi-consult
.suslogi-assessment__privacy::before,
.suslogi-consult
.suslogi-assessment__privacy::after {
  content: none !important;

  display: none !important;
}


/* =========================================================
   16｜アセスメント説明
========================================================= */

.suslogi-assessment__lead {
  margin: 0 !important;

  color: #43546a !important;

  font-size: 15px !important;
  line-height: 1.8 !important;
}


/* =========================================================
   17｜アセスメント3カード
   PC：横一列
========================================================= */

.suslogi-assessment__grid {
  width: 100% !important;

  display: flex !important;

  flex-direction: row !important;
  flex-wrap: nowrap !important;

  align-items: stretch !important;

  gap: 22px !important;
}


/* =========================================================
   18｜アセスメントカード
========================================================= */

.suslogi-assessment-card {
  width:
    calc((100% - 44px) / 3) !important;

  min-width: 0 !important;
  min-height: 270px !important;

  padding: 20px 20px 23px !important;

  flex: 1 1 0 !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;
  justify-content: flex-start !important;

  background: #ffffff !important;

  border:
    1px solid #d6e0e8 !important;

  border-radius: 15px !important;
}


/* =========================================================
   19｜アセスメント画像
========================================================= */

.suslogi-assessment-card__image {
  width: 100% !important;

  height: 130px !important;
  min-height: 130px !important;

  margin-bottom: 10px !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;
}


.suslogi-assessment-card__image img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: 170px !important;

  margin: 0 auto !important;

  object-fit: contain !important;
}


/* =========================================================
   20｜アセスメントカードタイトル
========================================================= */

.suslogi-assessment-card__title {
  margin: 0 0 9px !important;
  padding: 0 !important;

  color: #071c49 !important;

  font-size: 18px !important;
  line-height: 1.5 !important;

  font-weight: 900 !important;

  text-align: center !important;
}


/* =========================================================
   21｜アセスメントカード説明
========================================================= */

.suslogi-assessment-card__text {
  margin: 0 !important;

  color: #4c5c6f !important;

  font-size: 13px !important;
  line-height: 1.8 !important;

  text-align: center !important;
}


/* =========================================================
   22｜最下部補足
========================================================= */

.suslogi-assessment__note {
  position: relative;

  width: 100%;

  margin-top: 25px;
  padding: 17px 22px;

  display: flex;

  align-items: center;

  gap: 16px;

  overflow: hidden;

  background: #ffffff;

  border:
    1px solid #d8e1e8;

  border-radius: 11px;
}


/* 左ブルーライン */
.suslogi-assessment__note::before {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;
  left: 0;

  width: 5px;

  background:
    linear-gradient(
      180deg,
      #08bdbb,
      #1687ef
    );
}


/* =========================================================
   23｜チェックマーク
========================================================= */

.suslogi-consult .suslogi-assessment__check {
  position: relative !important;

  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;

  flex: 0 0 36px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: block !important;

  color: transparent !important;

  font-size: 0 !important;
  line-height: 0 !important;

  border: 0 !important;
  border-radius: 50% !important;

  background: #08b5ad !important;

  overflow: visible !important;
}


/* 白い✓ */
.suslogi-consult
.suslogi-assessment__check::after {
  content: "" !important;

  position: absolute !important;

  left: 50% !important;
  top: 47% !important;

  width: 10px !important;
  height: 6px !important;

  border-left:
    2px solid #ffffff !important;

  border-bottom:
    2px solid #ffffff !important;

  transform:
    translate(-50%, -50%)
    rotate(-45deg) !important;
}


.suslogi-consult
.suslogi-assessment__check::before {
  content: none !important;

  display: none !important;
}


/* 補足文章 */
.suslogi-assessment__note p {
  margin: 0 !important;

  color: #071c49 !important;

  font-size: 14px !important;
  line-height: 1.7 !important;

  font-weight: 700 !important;
}


/* =========================================================
   24｜タブレット
   768px ～ 1023px
========================================================= */

@media screen and (min-width: 768px) and (max-width: 1023px) {

  .suslogi-consult {
    padding:
      50px
      4%
      52px !important;
  }


  .suslogi-consult__inner {
    padding:
      44px
      28px
      40px !important;
  }


  /* STEP：2列 */
  .suslogi-consult
  .suslogi-consult__steps {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 18px !important;
  }


  .suslogi-consult
  .suslogi-consult-step {
    width: 100% !important;

    height: 335px !important;
    min-height: 335px !important;
    max-height: 335px !important;
  }


  .suslogi-consult
  .suslogi-consult-step__number {
    font-size:
      14px !important;
  }


  /* アセスメント：2列 */
  .suslogi-assessment__grid {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 18px !important;
  }


  .suslogi-assessment-card {
    width: 100% !important;
  }


  .suslogi-assessment-card:last-child {
    grid-column:
      1 / -1;

    width:
      calc(50% - 9px) !important;

    justify-self:
      center;
  }

}


/* =========================================================
   25｜スマートフォン
   ～767px
========================================================= */

@media screen and (max-width: 767px) {

  .suslogi-consult {
    padding:
      42px
      0
      40px !important;
  }


  .suslogi-consult__inner {
    width:
      calc(100% - 24px) !important;

    padding:
      34px
      0
      26px !important;

    border-radius: 18px;
  }


  /* =======================================================
     見出し
  ======================================================= */

  .suslogi-consult__header {
    padding: 0 18px;

    margin-bottom:
      30px !important;
  }


  .suslogi-consult__label {
    min-width: 150px;

    margin-bottom:
      19px !important;

    padding:
      7px
      18px !important;

    font-size:
      10px !important;
  }


  .suslogi-consult__title {
    font-size:
      clamp(24px, 7vw, 32px) !important;

    line-height:
      1.5 !important;
  }


  .suslogi-consult__lead {
    font-size:
      14px !important;

    text-align:
      left !important;
  }


  /* =======================================================
     STEP
     横スライド
  ======================================================= */

  .suslogi-consult
  .suslogi-consult__steps {
    width: 100% !important;

    margin:
      0
      0
      32px !important;

    padding:
      0
      18px
      12px !important;

    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    justify-content:
      flex-start !important;

    gap: 14px !important;

    overflow-x:
      auto !important;

    overflow-y:
      hidden !important;

    scroll-snap-type:
      x mandatory;

    scroll-padding-left:
      18px;

    -webkit-overflow-scrolling:
      touch;

    overscroll-behavior-x:
      contain;

    scrollbar-width:
      none;
  }


  .suslogi-consult__steps::-webkit-scrollbar {
    display: none;
  }


  .suslogi-consult
  .suslogi-consult-step {
    width: 84% !important;
    min-width: 84% !important;
    max-width: 84% !important;

    height: 330px !important;
    min-height: 330px !important;
    max-height: 330px !important;

    flex:
      0 0 84% !important;

    scroll-snap-align:
      start;

    scroll-snap-stop:
      always;

    padding:
      22px
      20px
      23px !important;
  }


  .suslogi-consult
  .suslogi-consult-step__number {
    font-size:
      14px !important;
  }


  .suslogi-consult-step__image {
    height:
      145px !important;

    min-height:
      145px !important;
  }


  .suslogi-consult-step__image img {
    max-width:
      190px !important;
  }


  .suslogi-consult-step__title {
    font-size:
      18px !important;
  }


  .suslogi-consult-step__text {
    font-size:
      13px !important;
  }


  .suslogi-consult-step__text br {
    display: none;
  }


  /* =======================================================
     有償サービス
  ======================================================= */

  .suslogi-assessment {
    width:
      calc(100% - 24px) !important;

    margin:
      0 auto !important;

    padding:
      24px
      0 !important;

    border-radius:
      16px;
  }


  .suslogi-assessment__header {
    padding:
      0 18px;
  }


  .suslogi-consult
  .suslogi-assessment__heading {
    flex-direction:
      row !important;

    flex-wrap:
      wrap !important;

    align-items:
      center !important;

    gap:
      10px
      12px !important;
  }


  .suslogi-assessment__title {
    font-size:
      22px !important;
  }


  /* 匿名加工 */
  .suslogi-consult
  .suslogi-assessment__privacy {
    height:
      30px !important;

    min-height:
      30px !important;

    padding:
      0 13px !important;

    font-size:
      11px !important;
  }


  .suslogi-assessment__privacy-text {
    top: -1px;
  }


  .suslogi-assessment__lead {
    font-size:
      13px !important;
  }


  /* =======================================================
     アセスメントカード
     横スライド
  ======================================================= */

  .suslogi-assessment__grid {
    width: 100% !important;

    padding:
      0
      18px
      12px !important;

    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    justify-content:
      flex-start !important;

    gap: 14px !important;

    overflow-x:
      auto !important;

    overflow-y:
      hidden !important;

    scroll-snap-type:
      x mandatory;

    scroll-padding-left:
      18px;

    -webkit-overflow-scrolling:
      touch;

    overscroll-behavior-x:
      contain;

    scrollbar-width:
      none;
  }


  .suslogi-assessment__grid::-webkit-scrollbar {
    display: none;
  }


  .suslogi-assessment-card,
  .suslogi-assessment-card:last-child {
    width: 84% !important;
    min-width: 84% !important;
    max-width: 84% !important;

    min-height:
      250px !important;

    flex:
      0 0 84% !important;

    grid-column:
      auto;

    scroll-snap-align:
      start;

    scroll-snap-stop:
      always;

    padding:
      18px
      18px
      21px !important;
  }


  .suslogi-assessment-card__image {
    height:
      120px !important;

    min-height:
      120px !important;
  }


  .suslogi-assessment-card__title {
    font-size:
      17px !important;
  }


  .suslogi-assessment-card__text {
    font-size:
      13px !important;
  }


  .suslogi-assessment-card__text br {
    display: none;
  }


  /* =======================================================
     補足
  ======================================================= */

  .suslogi-assessment__note {
    width:
      calc(100% - 36px);

    margin:
      18px auto 0;

    padding:
      15px
      15px
      15px
      18px;

    align-items:
      flex-start;

    gap:
      12px;
  }


  .suslogi-consult
  .suslogi-assessment__check {
    width:
      34px !important;

    height:
      34px !important;

    min-width:
      34px !important;

    flex:
      0 0 34px !important;
  }


  .suslogi-assessment__note p {
    font-size:
      12px !important;

    line-height:
      1.7 !important;
  }

}


/* =========================================================
   26｜小さいスマートフォン
   ～390px
========================================================= */

@media screen and (max-width: 390px) {

  .suslogi-consult__title {
    font-size:
      24px !important;
  }


  .suslogi-consult
  .suslogi-consult-step {
    width:
      88% !important;

    min-width:
      88% !important;

    max-width:
      88% !important;

    flex:
      0 0 88% !important;
  }


  .suslogi-assessment-card,
  .suslogi-assessment-card:last-child {
    width:
      88% !important;

    min-width:
      88% !important;

    max-width:
      88% !important;

    flex:
      0 0 88% !important;
  }

}
/* =========================================================
   SusLogi LP
   TRACK RECORD｜2×2固定版
========================================================= */


/* =========================================================
   00｜基本設定
========================================================= */

.suslogi-track,
.suslogi-track *,
.suslogi-track *::before,
.suslogi-track *::after {
  box-sizing: border-box;
}


/* =========================================================
   01｜セクション全体
========================================================= */

.suslogi-track {
  position: relative !important;

  width: 100% !important;
  max-width: 100% !important;

  /* 上のCONSULTINGとの余白を詰める */
  margin: -44px 0 0 !important;

  padding:
    54px
    5%
    56px !important;

  color: #071c49;

  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif;

  background: #ffffff !important;
}


.suslogi-track__inner {
  width: 100% !important;
  max-width: 1400px !important;

  margin: 0 auto !important;
}


/* =========================================================
   02｜見出し
========================================================= */

.suslogi-track__header {
  width: 100%;

  margin:
    0 auto 34px !important;

  text-align: center !important;
}


/* TRACK RECORD */
.suslogi-track__label {
  width: fit-content;
  min-width: 205px;

  margin:
    0 auto 20px !important;

  padding:
    9px 24px !important;

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  color: #1687ef !important;

  font-size: 12px !important;
  line-height: 1 !important;

  font-weight: 800 !important;
  letter-spacing: 0.16em !important;

  border:
    1px solid rgba(22, 135, 239, 0.28);

  border-radius: 999px;

  background: #f3f8ff;
}


/* =========================================================
   03｜H2
   他セクションと統一
========================================================= */

.suslogi-track__title {
  margin:
    0 0 16px !important;

  padding: 0 !important;

  color: #071c49 !important;

  font-size:
    clamp(28px, 2.8vw, 44px) !important;

  line-height: 1.45 !important;

  font-weight: 900 !important;

  letter-spacing: 0.015em !important;

  text-align: center !important;
}


/* =========================================================
   04｜リード
========================================================= */

.suslogi-track__lead {
  margin: 0 !important;

  color: #43546a !important;

  font-size:
    clamp(14px, 1.05vw, 17px) !important;

  line-height: 1.8 !important;

  font-weight: 500 !important;

  text-align: center !important;
}


/* =========================================================
   05｜カード全体
========================================================= */

.suslogi-track .suslogi-track__cards {
  width: 100% !important;
  max-width: 1260px !important;

  margin: 0 auto !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 18px !important;
}


/* =========================================================
   06｜1行に必ず2枚
========================================================= */

.suslogi-track .suslogi-track__row {
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;

  flex-direction: row !important;
  flex-wrap: nowrap !important;

  align-items: stretch !important;

  gap: 18px !important;
}


/* =========================================================
   07｜カード
========================================================= */

.suslogi-track .suslogi-track-card {
  position: relative !important;

  width:
    calc(50% - 9px) !important;

  min-width:
    calc(50% - 9px) !important;

  max-width:
    calc(50% - 9px) !important;

  flex:
    0 0 calc(50% - 9px) !important;

  min-height:
    220px !important;

  height:
    auto !important;

  margin:
    0 !important;

  padding:
    20px
    22px !important;

  display:
    grid !important;

  grid-template-columns:
    32% minmax(0, 1fr) !important;

  align-items:
    center !important;

  column-gap:
    22px !important;

  overflow:
    hidden !important;

  background:
    #ffffff !important;

  border:
    1px solid #d9e3ec !important;

  border-radius:
    17px !important;

  box-shadow:
    0 7px 22px rgba(20, 58, 91, 0.05) !important;
}


/* =========================================================
   08｜画像
========================================================= */

.suslogi-track-card__image {
  width: 100% !important;

  height:
    160px !important;

  margin:
    0 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;
}


.suslogi-track-card__image img {
  display:
    block !important;

  width:
    100% !important;

  height:
    100% !important;

  max-width:
    190px !important;

  max-height:
    160px !important;

  margin:
    0 auto !important;

  object-fit:
    contain !important;

  object-position:
    center !important;
}


/* =========================================================
   09｜右側コンテンツ
========================================================= */

.suslogi-track-card__content {
  width:
    100% !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    flex-start !important;

  justify-content:
    center !important;
}


/* =========================================================
   10｜タグ
========================================================= */

.suslogi-track-card__tag {
  width:
    fit-content !important;

  margin:
    0 0 10px !important;

  padding:
    7px
    13px !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  color:
    #1687ef !important;

  font-size:
    11px !important;

  line-height:
    1.2 !important;

  font-weight:
    800 !important;

  white-space:
    nowrap !important;

  border:
    1px solid #bdd8ff !important;

  border-radius:
    999px !important;

  background:
    #f4f8ff !important;
}


/* =========================================================
   11｜カードタイトル
========================================================= */

.suslogi-track-card__title {
  width: 100% !important;

  margin:
    0 0 9px !important;

  padding:
    0 !important;

  color:
    #071c49 !important;

  font-size:
    18px !important;

  line-height:
    1.45 !important;

  font-weight:
    900 !important;
}


/* =========================================================
   12｜本文
========================================================= */

.suslogi-track-card__text {
  width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  color:
    #34475e !important;

  font-size:
    13px !important;

  line-height:
    1.75 !important;

  font-weight:
    500 !important;
}


/* =========================================================
   13｜タブレット
========================================================= */

@media screen and (min-width: 768px) and (max-width: 1023px) {

  .suslogi-track {
    margin-top:
      -36px !important;

    padding:
      50px
      4%
      48px !important;
  }


  .suslogi-track
  .suslogi-track__row {
    gap:
      16px !important;
  }


  .suslogi-track
  .suslogi-track-card {
    width:
      calc(50% - 8px) !important;

    min-width:
      calc(50% - 8px) !important;

    max-width:
      calc(50% - 8px) !important;

    flex:
      0 0 calc(50% - 8px) !important;

    min-height:
      300px !important;

    padding:
      20px !important;

    grid-template-columns:
      1fr !important;

    grid-template-rows:
      125px auto !important;

    row-gap:
      10px !important;
  }


  .suslogi-track-card__image {
    height:
      125px !important;
  }


  .suslogi-track-card__image img {
    max-width:
      175px !important;

    max-height:
      125px !important;
  }


  .suslogi-track-card__title {
    font-size:
      16px !important;
  }


  .suslogi-track-card__text {
    font-size:
      12px !important;
  }

}


/* =========================================================
   14｜スマートフォン
   横スライドで1枚ずつ
========================================================= */

@media screen and (max-width: 767px) {

  .suslogi-track {
    margin-top:
      -30px !important;

    padding:
      46px
      0
      40px !important;
  }


  /* 見出し */
  .suslogi-track__header {
    margin-bottom:
      26px !important;

    padding:
      0 18px;
  }


  .suslogi-track__label {
    min-width:
      170px;

    margin-bottom:
      18px !important;

    padding:
      8px
      18px !important;

    font-size:
      10px !important;
  }


  .suslogi-track__title {
    font-size:
      clamp(24px, 7vw, 32px) !important;

    line-height:
      1.5 !important;
  }


  .suslogi-track__lead {
    font-size:
      14px !important;

    line-height:
      1.8 !important;

    text-align:
      left !important;
  }


  /* =======================================================
     2行構造をスマホでは解除
  ======================================================= */

  .suslogi-track .suslogi-track__cards {
    width:
      100% !important;

    max-width:
      none !important;

    margin:
      0 !important;

    padding:
      0
      18px
      12px !important;

    display:
      flex !important;

    flex-direction:
      row !important;

    flex-wrap:
      nowrap !important;

    gap:
      14px !important;

    overflow-x:
      auto !important;

    overflow-y:
      hidden !important;

    scroll-snap-type:
      x mandatory;

    scroll-padding-left:
      18px;

    -webkit-overflow-scrolling:
      touch;

    overscroll-behavior-x:
      contain;

    scrollbar-width:
      none;
  }


  .suslogi-track__cards::-webkit-scrollbar {
    display:
      none !important;
  }


  /*
    PC用の「上段・下段」を解除し、
    4カードを同じ横スクロール列にする
  */
  .suslogi-track
  .suslogi-track__row {
    display:
      contents !important;
  }


  /* =======================================================
     スマホカード
  ======================================================= */

  .suslogi-track
  .suslogi-track-card {
    width:
      86% !important;

    min-width:
      86% !important;

    max-width:
      86% !important;

    flex:
      0 0 86% !important;

    min-height:
      345px !important;

    padding:
      20px
      18px
      22px !important;

    display:
      flex !important;

    flex-direction:
      column !important;

    align-items:
      flex-start !important;

    justify-content:
      flex-start !important;

    scroll-snap-align:
      start;

    scroll-snap-stop:
      always;
  }


  .suslogi-track-card__image {
    width:
      100% !important;

    height:
      145px !important;

    margin-bottom:
      12px !important;
  }


  .suslogi-track-card__image img {
    max-width:
      200px !important;

    max-height:
      145px !important;
  }


  .suslogi-track-card__content {
    width:
      100% !important;
  }


  .suslogi-track-card__tag {
    margin-bottom:
      9px !important;

    font-size:
      10px !important;
  }


  .suslogi-track-card__title {
    margin-bottom:
      8px !important;

    font-size:
      18px !important;
  }


  .suslogi-track-card__text {
    font-size:
      13px !important;

    line-height:
      1.75 !important;
  }

}


/* =========================================================
   15｜小さいスマホ
========================================================= */

@media screen and (max-width: 390px) {

  .suslogi-track
  .suslogi-track-card {
    width:
      89% !important;

    min-width:
      89% !important;

    max-width:
      89% !important;

    flex:
      0 0 89% !important;
  }

}
/* =========================================================
   SusLogi LP
   FLOW｜ご利用までの流れ｜整理済み完成版
========================================================= */


/* =========================================================
   00｜基本設定
========================================================= */

.suslogi-useflow,
.suslogi-useflow *,
.suslogi-useflow *::before,
.suslogi-useflow *::after {
  box-sizing: border-box;
}


/* =========================================================
   01｜セクション全体
========================================================= */

.suslogi-useflow {
  position: relative !important;

  width: 100% !important;
  max-width: 100% !important;

  /* 前セクションとの余白を詰める */
  margin: -44px 0 0 !important;

  padding:
    58px
    5%
    62px !important;

  color: #071c49;

  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif;

  background: #f7fbff !important;
}


/* =========================================================
   02｜内側
========================================================= */

.suslogi-useflow__inner {
  width: 100% !important;
  max-width: 1400px !important;

  margin: 0 auto !important;
}


/* =========================================================
   03｜見出し
========================================================= */

.suslogi-useflow__header {
  width: 100%;

  margin: 0 auto 38px !important;

  text-align: center !important;
}


/* =========================================================
   04｜FLOW ラベル
========================================================= */

.suslogi-useflow__label {
  width: fit-content;
  min-width: 150px;

  margin: 0 auto 22px !important;

  padding:
    9px
    24px !important;

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  color: #1687ef !important;

  font-size: 12px !important;
  line-height: 1 !important;

  font-weight: 800 !important;

  letter-spacing: 0.16em !important;

  border:
    1px solid rgba(22, 135, 239, 0.28);

  border-radius: 999px;

  background: #f3f8ff;
}


/* =========================================================
   05｜H2
   他セクションと同じサイズ
========================================================= */

.suslogi-useflow__title {
  margin: 0 !important;
  padding: 0 !important;

  color: #071c49 !important;

  font-size:
    clamp(28px, 2.8vw, 44px) !important;

  line-height: 1.45 !important;

  font-weight: 900 !important;

  letter-spacing: 0.015em !important;

  text-align: center !important;
}


/* =========================================================
   06｜カード一覧
   PC：3枚横並び
========================================================= */

.suslogi-useflow .suslogi-useflow__cards {
  width: 100% !important;
  max-width: 1260px !important;

  margin: 0 auto !important;
  padding: 0 !important;

  display: flex !important;

  flex-direction: row !important;
  flex-wrap: nowrap !important;

  align-items: stretch !important;
  justify-content: center !important;

  gap: 22px !important;
}


/* =========================================================
   07｜カード
========================================================= */

.suslogi-useflow .suslogi-useflow-card {
  position: relative !important;

  width:
    calc((100% - 44px) / 3) !important;

  min-width: 0 !important;
  max-width: none !important;

  min-height: 430px !important;

  margin: 0 !important;

  padding:
    30px
    28px
    28px !important;

  flex: 1 1 0 !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;
  justify-content: flex-start !important;

  overflow: hidden !important;

  background: #ffffff !important;

  border:
    1px solid #e1e8ef !important;

  border-radius: 18px !important;

  box-shadow:
    0 8px 26px rgba(20, 58, 91, 0.06) !important;
}


/* =========================================================
   08｜STEP
========================================================= */

.suslogi-useflow-card__step {
  min-width: 130px;

  margin:
    0 auto 18px !important;

  padding:
    10px
    22px !important;

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  color: #ffffff !important;

  font-size: 15px !important;
  line-height: 1 !important;

  font-weight: 900 !important;

  letter-spacing: 0.12em !important;

  border-radius: 999px !important;

  background:
    linear-gradient(
      90deg,
      #08bdbb 0%,
      #1687ef 100%
    ) !important;
}


/* =========================================================
   09｜画像
========================================================= */

.suslogi-useflow-card__image {
  width: 100% !important;

  height: 205px !important;
  min-height: 205px !important;

  margin:
    0 0 18px !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  overflow: hidden !important;
}


.suslogi-useflow-card__image img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: 280px !important;
  max-height: 205px !important;

  margin: 0 auto !important;

  object-fit: contain !important;
  object-position: center !important;
}


/* =========================================================
   10｜カードタイトル
========================================================= */

.suslogi-useflow-card__title {
  width: 100% !important;

  margin:
    0 0 12px !important;

  padding: 0 !important;

  color: #071c49 !important;

  font-size: 21px !important;
  line-height: 1.5 !important;

  font-weight: 900 !important;

  text-align: center !important;
}


/* 「データアセスメント（有償）」だけ1行 */
.suslogi-useflow-card__title--nowrap {
  white-space: nowrap !important;
}


/* （有償） */
.suslogi-useflow-card__title span {
  font-size: 14px !important;

  font-weight: 800 !important;

  white-space: nowrap !important;
}


/* =========================================================
   11｜説明文
========================================================= */

.suslogi-useflow-card__text {
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #405169 !important;

  font-size: 14px !important;
  line-height: 1.85 !important;

  font-weight: 500 !important;

  text-align: center !important;
}


/* =========================================================
   12｜タブレット
   768px ～ 1023px
========================================================= */

@media screen and (min-width: 768px) and (max-width: 1023px) {

  .suslogi-useflow {
    margin-top:
      -36px !important;

    padding:
      52px
      4%
      52px !important;
  }


  /* 2列 */
  .suslogi-useflow
  .suslogi-useflow__cards {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 18px !important;
  }


  .suslogi-useflow
  .suslogi-useflow-card {
    width: 100% !important;

    min-height:
      400px !important;
  }


  /* STEP3だけ中央 */
  .suslogi-useflow
  .suslogi-useflow-card:last-child {
    grid-column:
      1 / -1;

    width:
      calc(50% - 9px) !important;

    justify-self:
      center !important;
  }


  .suslogi-useflow-card__image {
    height:
      180px !important;

    min-height:
      180px !important;
  }


  .suslogi-useflow-card__image img {
    max-width:
      240px !important;

    max-height:
      180px !important;
  }


  .suslogi-useflow-card__title {
    font-size:
      19px !important;
  }

}


/* =========================================================
   13｜スマートフォン
   ～767px
   1カードずつ縦並び
========================================================= */

@media screen and (max-width: 767px) {

  .suslogi-useflow {
    margin-top:
      -30px !important;

    padding:
      46px
      16px
      40px !important;
  }


  /* =======================================================
     見出し
  ======================================================= */

  .suslogi-useflow__header {
    margin-bottom:
      28px !important;

    padding:
      0 !important;
  }


  .suslogi-useflow__label {
    min-width:
      130px;

    margin-bottom:
      18px !important;

    padding:
      8px
      18px !important;

    font-size:
      10px !important;
  }


  .suslogi-useflow__title {
    font-size:
      clamp(24px, 7vw, 32px) !important;

    line-height:
      1.5 !important;
  }


  /* =======================================================
     カード一覧
     横スクロールを完全解除して縦並び
  ======================================================= */

  .suslogi-useflow
  .suslogi-useflow__cards {
    width: 100% !important;
    max-width: 520px !important;

    margin:
      0 auto !important;

    padding:
      0 !important;

    display: flex !important;

    flex-direction:
      column !important;

    flex-wrap:
      nowrap !important;

    align-items:
      stretch !important;

    justify-content:
      flex-start !important;

    gap:
      16px !important;

    overflow:
      visible !important;

    scroll-snap-type:
      none !important;
  }


  /* =======================================================
     スマホカード
  ======================================================= */

  .suslogi-useflow
  .suslogi-useflow-card,
  .suslogi-useflow
  .suslogi-useflow-card:last-child {
    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    min-height:
      auto !important;

    margin:
      0 !important;

    padding:
      24px
      20px
      26px !important;

    flex:
      none !important;

    grid-column:
      auto !important;

    display:
      flex !important;

    flex-direction:
      column !important;

    align-items:
      center !important;

    justify-content:
      flex-start !important;

    scroll-snap-align:
      none !important;
  }


  /* STEP */
  .suslogi-useflow-card__step {
    min-width:
      115px;

    margin-bottom:
      15px !important;

    padding:
      9px
      18px !important;

    font-size:
      13px !important;
  }


  /* 画像 */
  .suslogi-useflow-card__image {
    height:
      175px !important;

    min-height:
      175px !important;

    margin-bottom:
      15px !important;
  }


  .suslogi-useflow-card__image img {
    max-width:
      230px !important;

    max-height:
      175px !important;
  }


  /* タイトル */
  .suslogi-useflow-card__title {
    margin-bottom:
      10px !important;

    font-size:
      19px !important;

    line-height:
      1.5 !important;
  }


  /*
    データアセスメント（有償）は
    スマホでも1行
  */
  .suslogi-useflow-card__title--nowrap {
    font-size:
      18px !important;

    white-space:
      nowrap !important;
  }


  .suslogi-useflow-card__title span {
    font-size:
      12px !important;
  }


  /* 説明 */
  .suslogi-useflow-card__text {
    font-size:
      13px !important;

    line-height:
      1.8 !important;
  }


  .suslogi-useflow-card__text br {
    display:
      none;
  }

}


/* =========================================================
   14｜小さいスマートフォン
   ～390px
========================================================= */

@media screen and (max-width: 390px) {

  .suslogi-useflow {
    padding-left:
      12px !important;

    padding-right:
      12px !important;
  }


  .suslogi-useflow
  .suslogi-useflow-card {
    padding:
      22px
      16px
      24px !important;
  }


  .suslogi-useflow-card__title {
    font-size:
      18px !important;
  }


  /* 長いのでこのタイトルだけ少し小さく */
  .suslogi-useflow-card__title--nowrap {
    font-size:
      16px !important;
  }


  .suslogi-useflow-card__title span {
    font-size:
      11px !important;
  }

}

/* =========================================================
   SusLogi LP
   FAQ｜よくあるご質問｜最終整理版
========================================================= */


/* =========================================================
   00｜基本設定
========================================================= */

.suslogi-faq,
.suslogi-faq *,
.suslogi-faq *::before,
.suslogi-faq *::after {
  box-sizing: border-box;
}


/* =========================================================
   01｜セクション全体
========================================================= */

.suslogi-faq {
  position: relative !important;

  width: 100% !important;
  max-width: 100% !important;

  /* 前セクションとの余白を詰める */
  margin: -44px 0 0 !important;

  padding:
    58px
    5%
    60px !important;

  color: #071c49;

  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif;

  background: #ffffff !important;
}


/* =========================================================
   02｜内側
========================================================= */

.suslogi-faq__inner {
  width: 100% !important;
  max-width: 1400px !important;

  margin: 0 auto !important;
}


/* =========================================================
   03｜見出し
========================================================= */

.suslogi-faq__header {
  width: 100%;

  margin:
    0 auto 34px !important;

  text-align: center !important;
}


/* =========================================================
   04｜FAQラベル
========================================================= */

.suslogi-faq__label {
  width: fit-content;
  min-width: 100px;

  margin:
    0 auto 20px !important;

  padding:
    8px
    22px !important;

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  color: #1687ef !important;

  font-size: 12px !important;
  line-height: 1 !important;

  font-weight: 800 !important;

  letter-spacing: 0.16em !important;

  border:
    1px solid rgba(22, 135, 239, 0.28);

  border-radius: 999px;

  background: #f3f8ff;
}


/* =========================================================
   05｜H2
========================================================= */

.suslogi-faq__title {
  margin: 0 !important;
  padding: 0 !important;

  color: #071c49 !important;

  font-size:
    clamp(28px, 2.8vw, 44px) !important;

  line-height: 1.45 !important;

  font-weight: 900 !important;

  letter-spacing: 0.015em !important;

  text-align: center !important;
}


/* =========================================================
   06｜FAQ一覧
========================================================= */

.suslogi-faq__list {
  width: 100% !important;
  max-width: 1160px !important;

  margin: 0 auto !important;

  display: flex !important;

  flex-direction: column !important;

  gap: -6px !important;
}


/* =========================================================
   07｜FAQカード
========================================================= */

.suslogi-faq-item {
  width: 100% !important;

  margin: 0 !important;

  overflow: hidden !important;

  background: #ffffff !important;

  border: 1.5px solid #9adbd5 !important;

  border-radius: 10px !important;
}


/* =========================================================
   08｜質問
   横長・細め
========================================================= */

.suslogi-faq-item__question {
  position: relative !important;

  width: 100% !important;

  /*
    閉じている状態をかなり細く
  */
  min-height: 38px !important;

  margin: 0 !important;

  padding:
    7px
    48px
    7px
    20px !important;

  display: flex !important;

  align-items: center !important;

  color: #071c49 !important;

  list-style: none !important;

  cursor: pointer !important;

  background: #ffffff !important;
}


/* ブラウザ標準の三角を消す */
.suslogi-faq-item__question::-webkit-details-marker {
  display: none !important;
}


.suslogi-faq-item__question::marker {
  content: "" !important;
}


/* =========================================================
   09｜質問文
========================================================= */

.suslogi-faq-item__question-text {
  display: block !important;

  width: 100% !important;
  min-width: 0 !important;

  color: #071c49 !important;

  font-size: 14px !important;
  line-height: 1.45 !important;

  font-weight: 800 !important;

  letter-spacing: 0.01em !important;
}


/* =========================================================
   10｜＋ / −
========================================================= */

.suslogi-faq-item__icon {
  position: absolute !important;

  top: 50% !important;
  right: 18px !important;

  width: 16px !important;
  height: 16px !important;

  transform:
    translateY(-50%) !important;
}


/* 横線 */
.suslogi-faq-item__icon::before {
  content: "";

  position: absolute;

  top: 50%;
  left: 1px;

  width: 14px;
  height: 2px;

  border-radius: 999px;

  background: #1687ef;

  transform:
    translateY(-50%);
}


/* 縦線 */
.suslogi-faq-item__icon::after {
  content: "";

  position: absolute;

  top: 1px;
  left: 50%;

  width: 2px;
  height: 14px;

  border-radius: 999px;

  background: #1687ef;

  transform:
    translateX(-50%);

  transition:
    opacity 0.2s ease;
}


/* 開くと「−」 */
.suslogi-faq-item[open]
.suslogi-faq-item__icon::after {
  opacity: 0;
}


/* =========================================================
   11｜開いたとき
========================================================= */

.suslogi-faq-item[open]
.suslogi-faq-item__question {
  background:
    #fbfdff !important;

  border-bottom:
    1px solid #e5ebf0 !important;
}


/* =========================================================
   12｜回答
========================================================= */

.suslogi-faq-item__answer {
  width: 100% !important;

  padding:
    13px
    48px
    15px
    20px !important;

  display: block !important;

  background: #ffffff !important;
}


/* =========================================================
   13｜回答文
========================================================= */

.suslogi-faq-item__answer p {
  margin: 0 !important;
  padding: 0 !important;

  color: #405169 !important;

  font-size: 13px !important;
  line-height: 1.8 !important;

  font-weight: 500 !important;
}


/* =========================================================
   14｜hover
========================================================= */

@media (hover: hover) {

  .suslogi-faq-item__question {
    transition:
      background-color 0.2s ease;
  }


  .suslogi-faq-item__question:hover {
    background:
      #f8fbfe !important;
  }

}


/* =========================================================
   15｜タブレット
   768px ～ 1023px
========================================================= */

@media screen and (min-width: 768px) and (max-width: 1023px) {

  .suslogi-faq {
    margin-top:
      -36px !important;

    padding:
      52px
      4%
      52px !important;
  }


  .suslogi-faq__header {
    margin-bottom:
      30px !important;
  }


  .suslogi-faq-item__question {
    min-height:
      38px !important;

    padding:
      7px
      46px
      7px
      18px !important;
  }


  .suslogi-faq-item__question-text {
    font-size:
      13px !important;
  }


  .suslogi-faq-item__answer {
    padding:
      12px
      44px
      14px
      18px !important;
  }


  .suslogi-faq-item__answer p {
    font-size:
      13px !important;
  }

}


/* =========================================================
   16｜スマートフォン
   ～767px
========================================================= */

@media screen and (max-width: 767px) {

  .suslogi-faq {
    margin-top:
      -30px !important;

    padding:
      46px
      16px
      42px !important;
  }


  /* 見出し */
  .suslogi-faq__header {
    margin-bottom:
      26px !important;
  }


  .suslogi-faq__label {
    min-width: 88px;

    margin-bottom:
      18px !important;

    padding:
      7px
      17px !important;

    font-size:
      10px !important;
  }


  .suslogi-faq__title {
    font-size:
      clamp(24px, 7vw, 32px) !important;

    line-height:
      1.5 !important;
  }


  /* FAQ間隔 */
  .suslogi-faq__list {
    gap:
      8px !important;
  }


  /* カード */
  .suslogi-faq-item {
    border-radius:
      9px !important;
  }


  /* 質問 */
  .suslogi-faq-item__question {
    /*
      スマホは長文が折り返すため
      高さ固定ではなく最小40px
    */
    min-height:
      40px !important;

    padding:
      8px
      40px
      8px
      14px !important;

    align-items:
      center !important;
  }


  .suslogi-faq-item__question-text {
    font-size:
      13px !important;

    line-height:
      1.5 !important;
  }


  /* ＋ / − */
  .suslogi-faq-item__icon {
    right:
      13px !important;

    width:
      15px !important;

    height:
      15px !important;
  }


  .suslogi-faq-item__icon::before {
    width:
      13px;
  }


  .suslogi-faq-item__icon::after {
    height:
      13px;
  }


  /* 回答 */
  .suslogi-faq-item__answer {
    padding:
      12px
      14px
      14px
      14px !important;
  }


  .suslogi-faq-item__answer p {
    font-size:
      13px !important;

    line-height:
      1.75 !important;
  }

}

/* =========================================================
   SusLogi LP
   CHECK CTA｜完成版
========================================================= */


/* =========================================================
   00｜基本設定
========================================================= */

.suslogi-checkcta,
.suslogi-checkcta *,
.suslogi-checkcta *::before,
.suslogi-checkcta *::after {
  box-sizing: border-box;
}


/* =========================================================
   01｜セクション全体
========================================================= */

.suslogi-checkcta {
  position: relative !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;

  padding:
    34px
    4% !important;

  color: #ffffff;

  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif;

  background:
    #ffffff !important;
}


/* =========================================================
   02｜CTA本体
========================================================= */

.suslogi-checkcta__inner {
  position: relative;

  width: 100% !important;
  max-width: 1400px !important;

  min-height: 245px;

  margin:
    0 auto !important;

  padding:
    42px
    40px !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  text-align: center !important;

  overflow: hidden;

  border-radius:
    24px;

  /*
    装飾画像なし。
    背景色のみ。
  */
  background:
    linear-gradient(
      105deg,
      #0dbbb3 0%,
      #079fc4 48%,
      #1680ea 100%
    ) !important;
}


/* =========================================================
   03｜見出し
========================================================= */

.suslogi-checkcta__title {
  margin:
    0 0 26px !important;

  padding:
    0 !important;

  color:
    #ffffff !important;

  font-size:
    clamp(28px, 2.8vw, 44px) !important;

  line-height:
    1.5 !important;

  font-weight:
    900 !important;

  letter-spacing:
    0.015em !important;

  text-align:
    center !important;
}

/* =========================================================
   SusLogi LP
   SIMPLE CTA｜最終完成版
========================================================= */


/* =========================================================
   00｜基本設定
========================================================= */

.suslogi-simplecta,
.suslogi-simplecta *,
.suslogi-simplecta *::before,
.suslogi-simplecta *::after {
  box-sizing: border-box !important;
}


/* =========================================================
   01｜セクション全体
========================================================= */

.suslogi-simplecta {
  position: relative !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;

  padding:
    28px
    4% !important;

  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif;

  background: #ffffff !important;
}


/* =========================================================
   02｜CTA本体
========================================================= */

.suslogi-simplecta__inner {
  position: relative !important;

  width: 100% !important;
  max-width: 1400px !important;

  min-height: 250px !important;

  margin: 0 auto !important;

  padding:
    42px
    30px !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;

  overflow: hidden !important;

  border-radius:
    24px !important;

  background:
    linear-gradient(
      105deg,
      #12bbb3 0%,
      #0aa8bf 42%,
      #1683e7 100%
    ) !important;
}


/* =========================================================
   03｜見出し
========================================================= */

.suslogi-simplecta__title {
  width: 100% !important;

  margin:
    0 0 28px !important;

  padding:
    0 !important;

  color:
    #ffffff !important;

  background:
    none !important;

  font-size:
    clamp(24px, 2.3vw, 36px) !important;

  line-height:
    1.5 !important;

  font-weight:
    900 !important;

  letter-spacing:
    0.015em !important;

  text-align:
    center !important;

  border:
    0 !important;

  box-shadow:
    none !important;
}


/* =========================================================
   04｜CTAボタン
========================================================= */

.suslogi-simplecta__button,
.suslogi-simplecta__button:link,
.suslogi-simplecta__button:visited {
  position: relative !important;

  width:
    min(460px, 100%) !important;

  max-width:
    460px !important;

  min-width:
    0 !important;

  height:
    64px !important;

  min-height:
    64px !important;

  margin:
    0 auto !important;

  padding:
    0
    32px !important;

  display:
    flex !important;

  flex-direction:
    row !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  color:
    #0878df !important;

  background:
    #ffffff !important;

  border:
    0 !important;

  border-radius:
    999px !important;

  box-shadow:
    0 8px 24px rgba(0, 74, 132, 0.12) !important;

  /* 少し小さく */
  font-size:
    16px !important;

  line-height:
    1 !important;

  font-weight:
    800 !important;

  letter-spacing:
    0.01em !important;

  text-align:
    center !important;

  text-decoration:
    none !important;

  white-space:
    nowrap !important;

  overflow:
    hidden !important;

  appearance:
    none !important;

  -webkit-appearance:
    none !important;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
}


/* =========================================================
   05｜ボタン文字だけ少し上へ
========================================================= */

.suslogi-simplecta__button-text {
  position: relative !important;

  top:
    -5px !important;
}


/* =========================================================
   06｜矢印などの疑似要素を完全削除
========================================================= */

.suslogi-simplecta__button::before,
.suslogi-simplecta__button::after {
  content:
    none !important;

  display:
    none !important;
}


/* =========================================================
   07｜hover
========================================================= */

@media (hover: hover) {

  .suslogi-simplecta__button:hover {
    color:
      #0878df !important;

    background:
      #ffffff !important;

    transform:
      translateY(-2px) !important;

    box-shadow:
      0 12px 28px rgba(0, 74, 132, 0.18) !important;
  }

}


/* =========================================================
   08｜タブレット
   768px ～ 1023px
========================================================= */

@media screen and (min-width: 768px) and (max-width: 1023px) {

  .suslogi-simplecta {
    padding:
      24px
      4% !important;
  }


  .suslogi-simplecta__inner {
    min-height:
      225px !important;

    padding:
      38px
      28px !important;

    border-radius:
      20px !important;
  }


  .suslogi-simplecta__title {
    margin-bottom:
      24px !important;

    font-size:
      clamp(24px, 3.5vw, 32px) !important;
  }


  .suslogi-simplecta__button,
  .suslogi-simplecta__button:link,
  .suslogi-simplecta__button:visited {
    max-width:
      420px !important;

    height:
      60px !important;

    min-height:
      60px !important;

    padding:
      0
      28px !important;

    font-size:
      15px !important;
  }

}


/* =========================================================
   09｜スマートフォン
   ～767px
========================================================= */

@media screen and (max-width: 767px) {

  .suslogi-simplecta {
    padding:
      18px
      14px !important;
  }


  .suslogi-simplecta__inner {
    min-height:
      auto !important;

    padding:
      34px
      18px !important;

    border-radius:
      17px !important;
  }


  .suslogi-simplecta__title {
    margin-bottom:
      22px !important;

    font-size:
      clamp(22px, 6.5vw, 28px) !important;

    line-height:
      1.55 !important;
  }


  .suslogi-simplecta__button,
  .suslogi-simplecta__button:link,
  .suslogi-simplecta__button:visited {
    width:
      100% !important;

    max-width:
      330px !important;

    height:
      56px !important;

    min-height:
      56px !important;

    padding:
      0
      20px !important;

    font-size:
      14px !important;
  }


  .suslogi-simplecta__button-text {
    top:
      -1px !important;
  }

}


/* =========================================================
   10｜小さいスマートフォン
   ～390px
========================================================= */

@media screen and (max-width: 390px) {

  .suslogi-simplecta__inner {
    padding:
      30px
      14px !important;
  }


  .suslogi-simplecta__title {
    font-size:
      22px !important;
  }


  .suslogi-simplecta__button,
  .suslogi-simplecta__button:link,
  .suslogi-simplecta__button:visited {
    font-size:
      13px !important;
  }

}
/* =========================================================
   SusLogi 固定ナビゲーション
   PC・タブレット・スマートフォン対応
========================================================= */

.suslogi-fixed-nav,
.suslogi-fixed-nav *,
.suslogi-fixed-nav *::before,
.suslogi-fixed-nav *::after {
  box-sizing: border-box !important;
}


/* =========================================================
   ページ内スクロール
========================================================= */

html {
  scroll-behavior: smooth !important;
}


/* =========================================================
   ページ上部アンカー
========================================================= */

html body .suslogi-page-top,
html body #top.suslogi-page-top {
  display: block !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
}


/* =========================================================
   固定ナビで移動先が隠れないようにする
========================================================= */

html body #suslogi-reason,
html body #suslogi-features,
html body #suslogi-consulting,
html body #suslogi-faq,
html body #suslogi-contact {
  scroll-margin-top: 88px !important;
}


/* =========================================================
   固定ナビ本体
========================================================= */

html body .suslogi-fixed-nav {
  position: fixed !important;
  z-index: 99999 !important;

  top: 0 !important;
  right: 0 !important;
  left: 0 !important;

  display: block !important;

  width: 100% !important;
  max-width: none !important;

  height: 76px !important;
  min-height: 76px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: #ffffff !important;

  box-shadow:
    0 3px 16px rgba(34, 55, 70, 0.08) !important;

  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    Meiryo,
    sans-serif !important;
}


/* テーマ側の疑似要素を無効化 */

html body .suslogi-fixed-nav::before,
html body .suslogi-fixed-nav::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  background: none !important;

  content: none !important;
}


/* =========================================================
   ナビ内側
========================================================= */

html body .suslogi-fixed-nav .suslogi-fixed-nav__inner {
  position: relative !important;

  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;

  align-items: center !important;
  justify-content: space-between !important;

  width: 100% !important;
  max-width: 1600px !important;

  height: 76px !important;
  min-height: 76px !important;

  margin: 0 auto !important;

  padding:
    5px
    3.5% !important;

  gap: 18px !important;
}


/* =========================================================
   ロゴ
========================================================= */

html body .suslogi-fixed-nav a.suslogi-fixed-nav__logo {
  display: inline-flex !important;
  flex: 0 0 auto !important;

  align-items: center !important;
  justify-content: flex-start !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: transparent !important;

  text-decoration: none !important;
}


html body .suslogi-fixed-nav .suslogi-fixed-nav__logo img {
  display: block !important;

  width: auto !important;
  height: 38px !important;
  max-width: 235px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  object-fit: contain !important;
  object-position: left center !important;
}


/* =========================================================
   PCメニュー
========================================================= */

html body .suslogi-fixed-nav .suslogi-fixed-nav__links {
  display: flex !important;

  flex: 1 1 auto !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;

  align-items: center !important;
  justify-content: center !important;

  min-width: 0 !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  gap: clamp(38px, 4vw, 72px) !important;
}


html body .suslogi-fixed-nav .suslogi-fixed-nav__links a {
  position: relative !important;

  display: inline-flex !important;

  flex: 0 0 auto !important;

  align-items: center !important;
  justify-content: center !important;

  width: auto !important;

  height: 38px !important;
  min-height: 38px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  color: #263b4d !important;

  font-family: inherit !important;

  font-size: 13px !important;
  font-weight: 700 !important;

  line-height: 1 !important;

  letter-spacing: 0 !important;

  text-align: center !important;
  text-decoration: none !important;

  white-space: nowrap !important;

  box-shadow: none !important;

  transform: none !important;

  transition:
    color 0.2s ease !important;
}


/* ホバー下線 */

html body .suslogi-fixed-nav .suslogi-fixed-nav__links a::after {
  position: absolute !important;

  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  display: block !important;

  width: 0 !important;
  height: 2px !important;

  margin: 0 auto !important;

  border-radius: 999px !important;

  background:
    linear-gradient(
      90deg,
      #08bca8 0%,
      #168bd9 100%
    ) !important;

  content: "" !important;

  transition:
    width 0.2s ease !important;
}


html body .suslogi-fixed-nav .suslogi-fixed-nav__links a:hover {
  color: #118fc8 !important;
}


html body .suslogi-fixed-nav .suslogi-fixed-nav__links a:hover::after {
  width: 100% !important;
}


/* =========================================================
   お問い合わせ
========================================================= */

html body .suslogi-fixed-nav .suslogi-fixed-nav__actions {
  display: flex !important;

  flex: 0 0 auto !important;

  align-items: center !important;
  justify-content: flex-end !important;

  margin: 0 !important;
  padding: 0 !important;
}


html body .suslogi-fixed-nav a.suslogi-fixed-nav__contact {
  display: inline-flex !important;

  flex: 0 0 auto !important;

  align-items: center !important;
  justify-content: center !important;

  width: 162px !important;

  height: 42px !important;
  min-height: 42px !important;

  margin: 0 !important;

  padding:
    0
    20px !important;

  border: 0 !important;

  border-radius: 999px !important;

  background:
    linear-gradient(
      90deg,
      #08bca8 0%,
      #168bd9 100%
    ) !important;

  color: #ffffff !important;

  font-family: inherit !important;

  font-size: 13px !important;
  font-weight: 800 !important;

  line-height: 1 !important;

  text-align: center !important;
  text-decoration: none !important;

  white-space: nowrap !important;

  box-shadow:
    0 8px 18px rgba(15, 150, 184, 0.18) !important;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
}


html body .suslogi-fixed-nav a.suslogi-fixed-nav__contact span {
  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;

  line-height: 1 !important;
}


html body .suslogi-fixed-nav a.suslogi-fixed-nav__contact:hover {
  color: #ffffff !important;

  transform:
    translateY(-1px) !important;

  box-shadow:
    0 11px 23px rgba(15, 150, 184, 0.23) !important;
}


/* =========================================================
   PCではスマホメニュー非表示
========================================================= */

html body .suslogi-fixed-nav .suslogi-fixed-nav__mobile {
  display: none !important;
}


/* =========================================================
   ★ FVとの接続
========================================================= */

/*
  ここが今回重要です。

  #suslogi-lp 自体には
  padding-topを入れません。
*/

html body #suslogi-lp {
  margin-top: 0 !important;
  margin-block-start: 0 !important;

  padding-top: 0 !important;
}


/*
  FV背景はページ最上部から始め、
  固定ナビ分だけ「FV内部」に余白を確保。

  これにより、

  ヘッダー
  ↓
  すぐFV背景

  になります。
*/

html body .suslogi-fv {
  margin-top: 0 !important;
  margin-block-start: 0 !important;

  padding-top: 96px !important;

  border-top: 0 !important;
}


/* WordPressのブロック間余白対策 */

html body #suslogi-lp > .suslogi-fv:first-child {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}


/* =========================================================
   WordPress管理バー
========================================================= */

html body.admin-bar .suslogi-fixed-nav {
  top: 32px !important;
}


/* =========================================================
   中型PC
   1181px〜1380px
========================================================= */

@media screen and (min-width: 1181px) and (max-width: 1380px) {

  html body
  .suslogi-fixed-nav
  .suslogi-fixed-nav__inner {
    padding-right: 2.5% !important;
    padding-left: 2.5% !important;

    gap: 14px !important;
  }


  html body
  .suslogi-fixed-nav
  .suslogi-fixed-nav__logo img {
    height: 34px !important;

    max-width: 210px !important;
  }


  html body
  .suslogi-fixed-nav
  .suslogi-fixed-nav__links {
    gap: clamp(24px, 3vw, 42px) !important;
  }


  html body
  .suslogi-fixed-nav
  .suslogi-fixed-nav__links a {
    font-size: 12px !important;
  }


  html body
  .suslogi-fixed-nav
  a.suslogi-fixed-nav__contact {
    width: 148px !important;

    height: 38px !important;
    min-height: 38px !important;

    padding:
      0
      17px !important;

    font-size: 12px !important;
  }

}


/* =========================================================
   タブレット
   768px〜1180px
========================================================= */

@media screen and (min-width: 768px) and (max-width: 1180px) {

  html body #suslogi-reason,
  html body #suslogi-features,
  html body #suslogi-consulting,
  html body #suslogi-faq,
  html body #suslogi-contact {
    scroll-margin-top: 112px !important;
  }


  /*
    SusLogiはメニューが4個だけなので
    EmMatchのように2段にはしません。
  */

  html body .suslogi-fixed-nav {
    height: 76px !important;
    min-height: 76px !important;
  }


  html body
  .suslogi-fixed-nav
  .suslogi-fixed-nav__inner {
    height: 76px !important;
    min-height: 76px !important;

    padding:
      5px
      3% !important;

    gap: 12px !important;
  }


  html body
  .suslogi-fixed-nav
  .suslogi-fixed-nav__logo img {
    height: 30px !important;

    max-width: 185px !important;
  }


  html body
  .suslogi-fixed-nav
  .suslogi-fixed-nav__links {
    gap: clamp(14px, 2vw, 24px) !important;
  }


  html body
  .suslogi-fixed-nav
  .suslogi-fixed-nav__links a {
    font-size: 11.5px !important;
  }


  html body
  .suslogi-fixed-nav
  a.suslogi-fixed-nav__contact {
    width: 132px !important;

    height: 36px !important;
    min-height: 36px !important;

    padding:
      0
      14px !important;

    font-size: 11px !important;
  }


  html body .suslogi-fv {
    padding-top: 96px !important;
  }

}


/* =========================================================
   スマートフォン
   767px以下
========================================================= */

@media screen and (max-width: 767px) {

  html body #suslogi-reason,
  html body #suslogi-features,
  html body #suslogi-consulting,
  html body #suslogi-faq,
  html body #suslogi-contact {
    scroll-margin-top: 86px !important;
  }


  /* 白い固定バー */

  html body .suslogi-fixed-nav {
    height: 74px !important;
    min-height: 74px !important;

    background: #ffffff !important;

    box-shadow:
      0 3px 14px rgba(25, 45, 58, 0.10) !important;

    overflow: visible !important;
  }


  html body
  .suslogi-fixed-nav
  .suslogi-fixed-nav__inner {
    position: relative !important;

    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      auto
      40px !important;

    grid-template-areas:
      "logo actions mobile" !important;

    align-items: center !important;

    width: 100% !important;
    max-width: none !important;

    height: 74px !important;
    min-height: 74px !important;

    margin: 0 !important;

    padding:
      9px
      12px
      9px
      14px !important;

    gap: 8px !important;

    overflow: visible !important;
  }


  /* ロゴ */

  html body
  .suslogi-fixed-nav
  a.suslogi-fixed-nav__logo {
    grid-area: logo !important;

    display: flex !important;

    align-items: center !important;
    justify-content: flex-start !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
  }


  html body
  .suslogi-fixed-nav
  .suslogi-fixed-nav__logo img {
    display: block !important;

    width:
      clamp(
        118px,
        35vw,
        158px
      ) !important;

    max-width: 158px !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
  }


  /* PC用メニュー非表示 */

  html body
  .suslogi-fixed-nav
  .suslogi-fixed-nav__links {
    display: none !important;
  }


  /* お問い合わせ */

  html body
  .suslogi-fixed-nav
  .suslogi-fixed-nav__actions {
    grid-area: actions !important;

    display: flex !important;

    align-items: center !important;
    justify-content: flex-end !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  html body
  .suslogi-fixed-nav
  a.suslogi-fixed-nav__contact {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 108px !important;

    height: 38px !important;
    min-height: 38px !important;

    margin: 0 !important;

    padding:
      0
      9px !important;

    border-radius: 999px !important;

    font-size: 10.5px !important;
    font-weight: 800 !important;

    line-height: 1 !important;
  }


  /* =======================================================
     ハンバーガー
  ======================================================= */

  html body
  .suslogi-fixed-nav
  .suslogi-fixed-nav__mobile {
    grid-area: mobile !important;

    position: static !important;

    display: block !important;

    width: 40px !important;
    height: 40px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    overflow: visible !important;
  }


  html body
  .suslogi-fixed-nav
  .suslogi-fixed-nav__mobile-toggle {
    position: relative !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 40px !important;
    height: 40px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    color: #172f40 !important;

    font-size: 0 !important;

    list-style: none !important;

    cursor: pointer !important;

    -webkit-appearance: none !important;
    appearance: none !important;
  }


  html body
  .suslogi-fixed-nav
  .suslogi-fixed-nav__mobile-toggle::-webkit-details-marker {
    display: none !important;
  }


  html body
  .suslogi-fixed-nav
  .suslogi-fixed-nav__mobile-toggle::marker {
    display: none !important;

    content: "" !important;
  }


  /* 三本線 */

  html body
  .suslogi-fixed-nav
  .suslogi-fixed-nav__hamburger {
    position: relative !important;

    display: block !important;

    width: 24px !important;
    height: 14px !important;

    margin: 0 auto !important;

    background:
      linear-gradient(
        to bottom,

        #173448 0,
        #173448 2px,

        transparent 2px,
        transparent 6px,

        #173448 6px,
        #173448 8px,

        transparent 8px,
        transparent 12px,

        #173448 12px,
        #173448 14px

      ) !important;
  }


  html body
  .suslogi-fixed-nav
  .suslogi-fixed-nav__hamburger span {
    display: none !important;
  }


  /* ×印 */

  html body
  .suslogi-fixed-nav
  .suslogi-fixed-nav__hamburger::before,

  html body
  .suslogi-fixed-nav
  .suslogi-fixed-nav__hamburger::after {
    position: absolute !important;

    top: 6px !important;
    left: 0 !important;

    display: block !important;

    width: 24px !important;
    height: 2px !important;

    border-radius: 999px !important;

    background: #173448 !important;

    content: "" !important;

    opacity: 0 !important;

    transform-origin: center !important;

    transition:
      transform 0.22s ease,
      opacity 0.16s ease !important;
  }


  html body
  .suslogi-fixed-nav
  .suslogi-fixed-nav__mobile[open]
  .suslogi-fixed-nav__hamburger {
    background: none !important;
  }


  html body
  .suslogi-fixed-nav
  .suslogi-fixed-nav__mobile[open]
  .suslogi-fixed-nav__hamburger::before {
    opacity: 1 !important;

    transform:
      rotate(45deg) !important;
  }


  html body
  .suslogi-fixed-nav
  .suslogi-fixed-nav__mobile[open]
  .suslogi-fixed-nav__hamburger::after {
    opacity: 1 !important;

    transform:
      rotate(-45deg) !important;
  }


  /* 閉じているとき */

  html body
  .suslogi-fixed-nav
  .suslogi-fixed-nav__mobile:not([open])
  .suslogi-fixed-nav__mobile-panel {
    display: none !important;
  }


  /* 開いたメニュー */

  html body
  .suslogi-fixed-nav
  .suslogi-fixed-nav__mobile[open]
  .suslogi-fixed-nav__mobile-panel {
    position: absolute !important;

    z-index: 100 !important;

    top: 74px !important;
    right: 0 !important;
    left: 0 !important;

    display: block !important;

    width: 100% !important;

    max-height:
      calc(100vh - 74px) !important;

    margin: 0 !important;

    padding:
      5px
      16px
      9px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    border: 0 !important;

    border-top:
      1px solid #edf0f5 !important;

    border-bottom:
      1px solid #e1e5ed !important;

    background: #ffffff !important;

    box-shadow:
      0 15px 25px rgba(25, 45, 58, 0.12) !important;
  }


  /* メニュー項目 */

  html body
  .suslogi-fixed-nav
  .suslogi-fixed-nav__mobile-panel a {
    position: relative !important;

    display: flex !important;

    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;

    height: 40px !important;
    min-height: 40px !important;

    margin: 0 !important;

    padding:
      0
      22px
      0
      8px !important;

    border: 0 !important;

    border-bottom:
      1px solid #edf0f5 !important;

    background: #ffffff !important;

    color: #434f5e !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    line-height: 1.4 !important;

    text-align: left !important;
    text-decoration: none !important;

    white-space: nowrap !important;
  }


  html body
  .suslogi-fixed-nav
  .suslogi-fixed-nav__mobile-panel a:last-child {
    border-bottom: 0 !important;
  }


  /* 右矢印 */

  html body
  .suslogi-fixed-nav
  .suslogi-fixed-nav__mobile-panel a::after {
    position: absolute !important;

    top: 50% !important;
    right: 7px !important;

    display: block !important;

    width: 6px !important;
    height: 6px !important;

    border-top:
      1.5px solid #919aa5 !important;

    border-right:
      1.5px solid #919aa5 !important;

    content: "" !important;

    transform:
      translateY(-50%)
      rotate(45deg) !important;
  }


  /* FV */

  html body .suslogi-fv {
    margin-top: 0 !important;

    padding-top: 90px !important;
  }

}


/* =========================================================
   小さいスマホ
========================================================= */

@media screen and (max-width: 390px) {

  html body
  .suslogi-fixed-nav
  .suslogi-fixed-nav__inner {
    grid-template-columns:
      minmax(0, 1fr)
      auto
      40px !important;

    padding-right: 8px !important;
    padding-left: 10px !important;

    gap: 5px !important;
  }


  html body
  .suslogi-fixed-nav
  .suslogi-fixed-nav__logo img {
    width:
      clamp(
        105px,
        32vw,
        130px
      ) !important;

    max-width: 130px !important;
  }


  html body
  .suslogi-fixed-nav
  a.suslogi-fixed-nav__contact {
    width: 92px !important;

    height: 36px !important;
    min-height: 36px !important;

    padding-right: 5px !important;
    padding-left: 5px !important;

    font-size: 9px !important;
  }

}


/* =========================================================
   WordPress管理バー：スマートフォン
========================================================= */

@media screen and (max-width: 782px) {

  html body.admin-bar .suslogi-fixed-nav {
    top: 46px !important;
  }

}
/* =========================
   フッター全体
========================= */

.emmatchaip-lp-footer {
  background: #ffffff;
  padding: 36px 24px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
}

.emmatchaip-lp-footer *,
.emmatchaip-lp-footer *::before,
.emmatchaip-lp-footer *::after {
  box-sizing: border-box;
}

.emmatchaip-lp-footer__inner {
  max-width: 1180px;
  margin: 0 auto;
}


/* 画像暴走防止 */

.emmatchaip-lp-footer__logo {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
}

.emmatchaip-lp-footer__logo-link {
  display: inline-block;
  text-decoration: none;
  line-height: 1;
}


/* =========================
   PC
========================= */

@media screen and (min-width: 768px) {

  .emmatchaip-lp-footer__inner {
    display: grid;

    grid-template-columns: 260px 1fr;

    grid-template-areas:
      "emmatchaip nav"
      "emmatch copy";

    column-gap: 80px;
    row-gap: 24px;

    align-items: start;
  }


  .emmatchaip-lp-footer__area--emmatchaip {
    grid-area: emmatchaip;
  }


  .emmatchaip-lp-footer__area--nav {
    grid-area: nav;

    display: flex;

    justify-content: flex-end;
    align-items: center;

    flex-wrap: wrap;
  }


  .emmatchaip-lp-footer__area--emmatch {
    grid-area: emmatch;

    margin-top: -8px;
  }


  .emmatchaip-lp-footer__area--copy {
    grid-area: copy;

    margin: 0;

    text-align: right;

    align-self: start;
  }


  /* ロゴサイズ */

  .emmatchaip-lp-footer__logo--emmatchaip {
    width: 185px !important;
  }

  .emmatchaip-lp-footer__logo--emmatch {
    width: 140px !important;
  }


  /* ナビ */

  .emmatchaip-lp-footer__area--nav a {
    color: #111 !important;

    text-decoration: none;

    font-size: 15px;
    line-height: 1.7;
    font-weight: 500;

    margin-left: 28px;
  }

  .emmatchaip-lp-footer__area--nav a:first-child {
    margin-left: 0;
  }


  /* テーマ側の矢印削除 */

  .emmatchaip-lp-footer__area--nav a::after {
    content: none !important;
  }


  /* コピー */

  .emmatchaip-lp-footer__area--copy {
    color: #111;

    font-size: 14px;
    line-height: 1.7;
  }

}


/* =========================
   スマホ
========================= */

@media screen and (max-width: 767px) {

  .emmatchaip-lp-footer {
    padding: 28px 20px 0;
  }


  .emmatchaip-lp-footer__inner {
    display: grid;

    grid-template-columns: 1fr;

    grid-template-areas:
      "emmatchaip"
      "nav"
      "emmatch"
      "copy";
  }


  .emmatchaip-lp-footer__area--emmatchaip {
    grid-area: emmatchaip;

    margin-bottom: 16px;
  }


  .emmatchaip-lp-footer__area--nav {
    grid-area: nav;

    display: flex;

    flex-direction: column;
    align-items: flex-start;

    gap: 10px;

    margin-bottom: 20px;
  }


  .emmatchaip-lp-footer__area--emmatch {
    grid-area: emmatch;

    margin-bottom: 12px;
  }


  .emmatchaip-lp-footer__area--copy {
    grid-area: copy;

    margin: 0;

    text-align: left;
  }


  /* ロゴ */

  .emmatchaip-lp-footer__logo--emmatchaip {
    width: 120px !important;
  }

  .emmatchaip-lp-footer__logo--emmatch {
    width: 110px !important;
  }


  /* ナビ */

  .emmatchaip-lp-footer__area--nav a {
    color: #111 !important;

    text-decoration: none;

    font-size: 13px;
    line-height: 1.6;
    font-weight: 500;

    margin: 0;
  }


  .emmatchaip-lp-footer__area--nav a::after {
    content: none !important;
  }


  /* コピー */

  .emmatchaip-lp-footer__area--copy {
    color: #111;

    font-size: 13px;
    line-height: 1.6;
  }

}
/* =========================================================
   SusLogi フッターナビだけ強制補正
   元のEmMatch AIPフッター構造はそのまま
========================================================= */

@media screen and (min-width: 768px) {

  html body .emmatchaip-lp-footer
  .emmatchaip-lp-footer__area--nav {

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: baseline !important;
    justify-content: flex-end !important;

    gap: 28px !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap !important;
  }


  html body .emmatchaip-lp-footer
  .emmatchaip-lp-footer__area--nav > a {

    position: static !important;

    display: inline-block !important;

    flex: 0 0 auto !important;

    width: auto !important;
    max-width: none !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: none !important;

    color: #111 !important;

    font-family:
      "Noto Sans JP",
      "Hiragino Kaku Gothic ProN",
      "Yu Gothic",
      Meiryo,
      sans-serif !important;

    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.7 !important;

    letter-spacing: 0 !important;

    white-space: nowrap !important;

    vertical-align: baseline !important;

    transform: none !important;
  }


  /* テーマ側の装飾を消す */

  html body .emmatchaip-lp-footer
  .emmatchaip-lp-footer__area--nav > a::before,

  html body .emmatchaip-lp-footer
  .emmatchaip-lp-footer__area--nav > a::after {

    display: none !important;
    content: none !important;
  }


  /* WordPressがbrを入れていた場合も無効化 */

  html body .emmatchaip-lp-footer
  .emmatchaip-lp-footer__area--nav br {

    display: none !important;
  }

}