/* ==========================================================================
   OC Theme - Base Stylesheet
   ==========================================================================
   This is the main stylesheet for the OC Theme.
   - Blog-specific styles are in oc-blog-style.css
   - Contact-specific styles are in oc-contact-style.css
   ========================================================================== */

/* ==========================================================================
   1. CSS Reset (Minimal Modern Reset)
   ========================================================================== */

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

* {
  margin: 0;
  padding: 0;
}

html:focus-within {
  scroll-behavior: smooth;
}

img,
picture {
  max-width: 100%;
  height: auto;
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
}

table {
  border-collapse: collapse;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   2. CSS Custom Properties (Variables)
   ==========================================================================
   Color values come from theme.json via --wp--preset--color--*.
   Blog layout variables are defined here as custom properties.
   ========================================================================== */

/* Blog layout variables are defined in theme.json settings.custom.blog
   and available as --wp--custom--blog--* */

/* ==========================================================================
   3. Base Typography
   ==========================================================================
   Restores sensible defaults for common HTML elements.
   ========================================================================== */

body {
  min-height: 100vh;
  font-family: var(--wp--preset--font-family--body, "Noto Sans JP", sans-serif);
  font-size: 16px;
  line-height: 1.8;
  color: var(--wp--preset--color--text);
  background-color: var(--wp--preset--color--background);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  line-height: 1.3;
}

h1 {
  font-size: 2rem;
}
h2 {
  font-size: 1.5rem;
}
h3 {
  font-size: 1.25rem;
}
h4 {
  font-size: 1.125rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 0.875rem;
}

p {
  margin-bottom: 1rem;
}

ul,
ol {
  padding-left: 0;
  list-style: none;
}

a {
  text-decoration: none;
  color: var(--wp--preset--color--accent);
}

a:hover {
  text-decoration: none;
}

/* ==========================================================================
   4. Theme Component Styles
   ========================================================================== */

/* --- Text Color Utility --- */
.text-primary-color {
  color: var(--wp--preset--color--primary);
}

/* --- Clear Fix --- */
.clear-fix {
  clear: both;
}

/* --- Background Image --- */
.bg-image {
  z-index: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* --- Text Background Top (Hero Banner) --- */
.text-bg-top {
  z-index: 0;
  height: 200px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-bg-top .caption {
}

.text-bg-top .caption h1,
.text-bg-top .caption h2 {
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
}

/* --- 404 Page --- */
.content-none {
  text-align: center;
  font-size: 20px;
  padding: 80px 10px;
}

.content-none .error-number {
  font-size: 70px;
}

.content-none .content-none-btn {
  margin: 20px auto;
  text-align: center;
}

/* ==========================================================================
   5. OC Button Style
   ========================================================================== */

.site-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 375px;
  height: 73px;
  max-width: 90%;
  border: 1px solid var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary);
  background-color: transparent;
  transition: all 0.5s;
}

/* ==========================================================================
   6. OC Modal Style
   ========================================================================== */

.modal-design {
  height: 80vh;
  overflow: scroll;
  margin: 15% 0 10% 0;
  border-radius: unset;
}

.modal-dialog {
  max-width: 800px;
  padding: 1rem;
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
  }
}

.close-btn {
  position: fixed;
  right: 0;
  top: 25px;
}

.modal-side-margin {
  margin: 0;
}

.modal-body-design {
  padding: 0;
}

.round_btn {
  display: block;
  width: 45px;
  height: 45px;
  border: 2px solid #aa8400;
  border-radius: 50%;
  background: #fff;
}

.round_btn::before,
.round_btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 22px;
  background: #aa8400;
}

.round_btn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.round_btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ==========================================================================
   7. Layout Utilities
   ========================================================================== */

/* --- Container --- */
.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* --- Row / Grid --- */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* --- Columns (Mobile First) ---
 * 親 .row の gap: 1rem を考慮した calc 値。
 * N 列並びで `100% + (N-1)*gap` の overflow を起こさないように
 * 各列から `(1 - X/12) * gap` を減算している。
 */
.col-6 {
  flex: 0 0 calc(50% - 0.5rem);
  max-width: calc(50% - 0.5rem);
}
.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 576px) {
  .col-sm-6 {
    flex: 0 0 calc(50% - 0.5rem);
    max-width: calc(50% - 0.5rem);
  }
  .col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .mb-sm-0 {
    margin-bottom: 0;
  }
  .mb-sm-3 {
    margin-bottom: 1rem;
  }
  .align-items-sm-center {
    align-items: center;
  }
}

@media (min-width: 768px) {
  .col-md-1 {
    flex: 0 0 calc(8.333% - 0.917rem);
    max-width: calc(8.333% - 0.917rem);
  }
  .col-md-2 {
    flex: 0 0 calc(16.666% - 0.833rem);
    max-width: calc(16.666% - 0.833rem);
  }
  .col-md-3 {
    flex: 0 0 calc(25% - 0.75rem);
    max-width: calc(25% - 0.75rem);
  }
  .col-md-4 {
    flex: 0 0 calc(33.333% - 0.667rem);
    max-width: calc(33.333% - 0.667rem);
  }
  .col-md-5 {
    flex: 0 0 calc(41.666% - 0.583rem);
    max-width: calc(41.666% - 0.583rem);
  }
  .col-md-6 {
    flex: 0 0 calc(50% - 0.5rem);
    max-width: calc(50% - 0.5rem);
  }
  .col-md-7 {
    flex: 0 0 calc(58.333% - 0.417rem);
    max-width: calc(58.333% - 0.417rem);
  }
  .col-md-8 {
    flex: 0 0 calc(66.666% - 0.333rem);
    max-width: calc(66.666% - 0.333rem);
  }
  .col-md-9 {
    flex: 0 0 calc(75% - 0.25rem);
    max-width: calc(75% - 0.25rem);
  }
  .col-md-10 {
    flex: 0 0 calc(83.333% - 0.167rem);
    max-width: calc(83.333% - 0.167rem);
  }
  .col-md-11 {
    flex: 0 0 calc(91.666% - 0.083rem);
    max-width: calc(91.666% - 0.083rem);
  }
  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .offset-md-1 {
    margin-left: 8.333%;
  }
}

@media (min-width: 992px) {
  .col-lg-10 {
    flex: 0 0 calc(83.333% - 0.167rem);
    max-width: calc(83.333% - 0.167rem);
  }
  .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .offset-lg-1 {
    margin-left: 8.333%;
  }
}

/* ==========================================================================
   8. Display Utilities
   ========================================================================== */

.d-flex {
  display: flex;
}
.d-block {
  display: block;
}
.d-none {
  display: none;
}

/* ==========================================================================
   9. Flexbox Utilities
   ========================================================================== */

.flex-row {
  flex-direction: row;
}
.flex-column {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}

.justify-start,
.justify-content-start {
  justify-content: flex-start;
}
.justify-center,
.justify-content-center {
  justify-content: center;
}
.justify-end,
.justify-content-end {
  justify-content: flex-end;
}
.justify-between,
.justify-content-between {
  justify-content: space-between;
}

.align-start,
.align-items-start {
  align-items: flex-start;
}
.align-center,
.align-items-center {
  align-items: center;
}
.align-end,
.align-items-end {
  align-items: flex-end;
}

.align-self-end {
  align-self: flex-end;
}

/* ==========================================================================
   10. Text Utilities
   ========================================================================== */

.text-start {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-end {
  text-align: right;
}

.text-dark {
  color: var(--wp--preset--color--text);
}

.fw-bold {
  font-weight: bold;
}
.fw-normal {
  font-weight: normal;
}

/* ==========================================================================
   11. Width Utilities
   ========================================================================== */

.w-100 {
  width: 100%;
}

/* ==========================================================================
   11b. Font Size Utilities
   ========================================================================== */

.fs-4 {
  font-size: 1.5rem;
}
.fs-5 {
  font-size: 1.25rem;
}

/* ==========================================================================
   11c. Misc Utilities
   ========================================================================== */

.img-cover-white {
  position: relative;
}
.img-cover-white::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.15);
  pointer-events: none;
}

.more-info-btn-cover {
  display: flex;
  justify-content: center;
}
.more-info-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.75em 2em;
  border: 1px solid var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary);
  background-color: transparent;
  transition: all 0.3s;
}
.more-info-btn:hover {
  background-color: var(--wp--preset--color--primary);
  color: #fff;
}

/* ==========================================================================
   12. Margin Utilities
   ==========================================================================
   Scale: 0=0, 1=0.25rem, 2=0.5rem, 3=1rem, 4=1.5rem, 5=3rem
   ========================================================================== */

/* --- All sides --- */
.m-0 {
  margin: 0;
}
.m-1 {
  margin: 0.25rem;
}
.m-2 {
  margin: 0.5rem;
}
.m-3 {
  margin: 1rem;
}
.m-4 {
  margin: 1.5rem;
}
.m-5 {
  margin: 3rem;
}

/* --- Top --- */
.mt-0 {
  margin-top: 0;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 1rem;
}
.mt-4 {
  margin-top: 1.5rem;
}
.mt-5 {
  margin-top: 3rem;
}

/* --- Bottom --- */
.mb-0 {
  margin-bottom: 0;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 1rem;
}
.mb-4 {
  margin-bottom: 1.5rem;
}
.mb-5 {
  margin-bottom: 3rem;
}

/* --- Start (Left in LTR) --- */
.ms-0 {
  margin-left: 0;
}
.ms-1 {
  margin-left: 0.25rem;
}
.ms-2 {
  margin-left: 0.5rem;
}

/* --- End (Right in LTR) --- */
.me-0 {
  margin-right: 0;
}
.me-1 {
  margin-right: 0.25rem;
}
.me-2 {
  margin-right: 0.5rem;
}

/* --- Vertical (Top + Bottom) --- */
.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-3 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-4 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.my-5 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

/* --- Horizontal Auto --- */
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   13. Padding Utilities
   ==========================================================================
   Scale: 0=0, 1=0.25rem, 2=0.5rem, 3=1rem, 4=1.5rem, 5=3rem
   ========================================================================== */

/* --- All sides --- */
.p-0 {
  padding: 0;
}
.p-1 {
  padding: 0.25rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 1rem;
}
.p-4 {
  padding: 1.5rem;
}
.p-5 {
  padding: 3rem;
}

/* --- Horizontal (Left + Right) --- */
.px-0 {
  padding-left: 0;
  padding-right: 0;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-3 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-4 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-5 {
  padding-left: 3rem;
  padding-right: 3rem;
}

/* --- Vertical (Top + Bottom) --- */
.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-3 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-4 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-5 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/* ==========================================================================
   14. Breadcrumbs
   ========================================================================== */

.bread-crumbs {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.75rem;
  margin: 0;
  padding: 10px 1.5rem;
  list-style: none;
}

.bread-crumbs .bc-home-icon {
  margin-right: 3px;
  vertical-align: baseline;
}

.bread-crumbs .bc-link {
  display: inline-flex;
  align-items: center;
  color: var(--wp--preset--color--accent, #0a4b8b);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bread-crumbs .bc-item {
  display: inline-block;
  color: var(--wp--preset--color--text-muted, #707070);
  font-size: 0.75rem;
  font-weight: 500;
  margin: 0 0.75em 0 0;
}

.bread-crumbs .bc-item:not(.bc-home)::before {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin: 0 0.75em 0 0;
  border-top: 2px solid var(--wp--preset--color--text-muted, #707070);
  border-right: 2px solid var(--wp--preset--color--text-muted, #707070);
  transform: rotate(45deg) translateY(15%);
}

/* Landing Page 2026 */
:root {
  --container-padding: 25px;

  --color-body: #4c4948;
  --color-orange: #ff8c00;
  --color-blue: #0099a2;
  --color-blue-light: #cfeced;
  --color-yellow: #eeee00;
  --color-yellow2: #ffe100;
  --color-red: #f32e00;
  --color-gray-light: #cdcccc;
  --color-orange-light: #ffdfb8;

  --all-transition: all 0.4s ease;
}
.overflow-hidden {
  overflow: hidden;
}
.font-notosansjp {
  /* フォールバックを serif(明朝) → ゴシック系システムフォントへ。
     Webフォント読み込み前後の見た目差を小さくし、FOUT/レイアウトシフトを抑える。 */
  font-family: "NotoSansJP", "Noto Sans JP", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
}
@font-face {
  font-family: "NotoSansJP";
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  src:
    url("../fonts/notosans_jp/NotoSansJP-VariableFont_wght.woff2")
      format("woff2"),
    url("../fonts/notosans_jp/NotoSansJP-VariableFont_wght.woff") format("woff");
}
.font-BeautifulFont {
  /* 手書きフォントの読み込み前は serif(明朝) ではなくゴシック系にして差を軽減 */
  font-family: "BeautifulFont", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", "Meiryo", sans-serif;
  letter-spacing: -0.26em;
  line-height: 1;
}
@font-face {
  font-family: "BeautifulFont";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src:
    url("../fonts/beautiful_font/beautiful_font.woff2") format("woff2"),
    url("../fonts/beautiful_font/beautiful_font.woff") format("woff");
}
main.landingPage-2026 {
  line-height: 1.4;
}
main.landingPage-2026 h1,
main.landingPage-2026 h2,
main.landingPage-2026 h3,
main.landingPage-2026 h4,
main.landingPage-2026 h5,
main.landingPage-2026 h6 {
  --wp--preset--color--primary: var(--color-body);
  line-height: 1.4;
}
body.page-template-p_LandingPage-2026 > header,
body.page-template-p_LandingPage-2026 > footer {
  display: none;
}
.c-body {
  color: var(--color-body);
}
.c-white {
  color: #fff;
}
.c-orange {
  color: var(--color-orange);
}
.c-orange-light {
  color: var(--color-orange-light);
}
.c-blue {
  color: var(--color-blue);
}
.c-gray-light {
  color: var(--color-gray-light);
}
.c-yellow {
  color: var(--color-yellow);
}
.c-yellow2 {
  color: var(--color-yellow2);
}
.fw-light {
  font-weight: 300;
}
.fw-medium {
  font-weight: 500;
}
.fw-bold,
.contact-form-container .contact-form .submit-btn {
  font-weight: 700;
}
.fw-exbold {
  font-weight: 800;
}
.fw-black {
  font-weight: 900;
}
.lh-1 {
  line-height: 1;
}
.lh-1_2 {
  line-height: 1.2;
}
.lh-1_25 {
  line-height: 1.25;
}
.lh-1_4 {
  line-height: 1.4;
}
.lh-1_5 {
  line-height: 1.5;
}
.fs-120 {
  font-size: 120px;
}
.fs-114 {
  font-size: 114px;
}
.fs-112 {
  font-size: 112px;
}
.fs-95 {
  font-size: 95px;
}
.fs-94 {
  font-size: 94px;
}
.fs-90 {
  font-size: 90px;
}
.fs-88 {
  font-size: 88px;
}
.fs-87 {
  font-size: 87px;
}
.fs-84 {
  font-size: 84px;
}
.fs-80 {
  font-size: 80px;
}
.fs-78 {
  font-size: 78px;
}
.fs-77 {
  font-size: 77px;
}
.fs-76 {
  font-size: 76px;
}
.fs-70 {
  font-size: 70px;
}
.fs-69 {
  font-size: 69px;
}
.fs-68 {
  font-size: 68px;
}
.fs-66 {
  font-size: 66px;
}
.fs-61 {
  font-size: 61px;
}
.fs-60 {
  font-size: 60px;
}
.fs-58 {
  font-size: 58px;
}
.fs-56 {
  font-size: 56px;
}
.fs-50 {
  font-size: 50px;
}
.fs-46 {
  font-size: 46px;
}
.fs-45 {
  font-size: 45px;
}
.fs-44 {
  font-size: 44px;
}
.fs-42 {
  font-size: 42px;
}
.fs-41 {
  font-size: 41px;
}
.fs-40 {
  font-size: 40px;
}
.fs-38 {
  font-size: 38px;
}
.fs-37 {
  font-size: 37px;
}
.fs-36 {
  font-size: 36px;
}
.fs-35 {
  font-size: 35px;
}
.fs-34 {
  font-size: 34px;
}
.fs-33 {
  font-size: 33px;
}
.fs-32 {
  font-size: 32px;
}
.fs-30 {
  font-size: 30px;
}
.fs-29 {
  font-size: 29px;
}
.fs-28 {
  font-size: 28px;
}
.fs-27 {
  font-size: 27px;
}
.fs-26 {
  font-size: 26px;
}
.fs-24 {
  font-size: 24px;
}
.fs-23 {
  font-size: 23px;
}
.fs-22 {
  font-size: 22px;
}
.fs-21 {
  font-size: 21px;
}
.fs-20 {
  font-size: 20px;
}
.fs-18,
.contact-form-container .contact-form .submit-btn {
  font-size: 18px;
}
.fs-17 {
  font-size: 17px;
}
.fs-16 {
  font-size: 16px;
}
.fs-15 {
  font-size: 15px;
}
.fs-13 {
  font-size: 13px;
}
.fs-12 {
  font-size: 12px;
}
.landingIntro-heading .text-outline {
  filter: drop-shadow(0px 8px 8px rgba(0, 0, 0, 0.5));
}
.landingIntro-heading img {
  filter: none;
  display: inline;
}
.compareCircle-bottom > p {
  position: relative;
}
.compareCircle-bottom > p .yellow-line {
  position: absolute;
  z-index: -1;
  bottom: 0.5em;
  left: 0;
  right: 0;
  height: 0.7em;
  background-color: var(--color-yellow);
}
.text-outline {
  -webkit-text-stroke: 0.15em #fff;
  paint-order: stroke fill;
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.5));
}
.fs-26.text-outline {
  -webkit-text-stroke: 0.2em #fff;
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.5));
}
.btn-main {
  font-weight: 700;
  min-width: 200px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 18px;
  border-radius: 2em;
  height: 48px;
  color: #fff;
  background: var(--color-orange);
  transition: var(--all-transition);
}
.btn-main:hover {
  color: #fff;
  background: var(--color-red);
}
.hLight-yellow {
  position: relative;
  background: linear-gradient(
    to bottom,
    transparent 0,
    transparent 60%,
    #ffe100 60%,
    #ffe100 100%
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  display: inline;
}
.landingPage-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.landingPage-header .landingHeader-l {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 0;
  padding-left: var(--container-padding);
}
.landingHeader-logo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-right: 36px;
}
.landingHeader-logo img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  object-position: center;
}
.landingPage-header .fs-21 {
  /* h1 化により theme.json の見出し色(--wp--preset--color--primary=#0099A2)が
     効いて青くなるため、本文色(#4c4948)に戻す。 */
  color: #4c4948;
}
.landingPage-header .landingHeader-text {
  margin-right: 18px;
}
.landingPage-header .landingHeader-crown {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: 8px;
}
.landingPage-header .landingHeader-crown .crown-l img,
.landingPage-header .landingHeader-crown .crown-r img {
  width: 14px;
  height: 32px;
  object-fit: contain;
  object-position: center;
}
.landingPage-header .landingHeader-crown .crown-t {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, calc(-100% - 0px));
  width: 100px;
  height: 15px;
  object-fit: contain;
  object-position: bottom;
}
.landingPage-header .landingHeader-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 36px;
  height: 85px;
  color: #fff;
  background-color: var(--color-orange);
  transition: var(--all-transition);
}
.landingPage-header .landingHeader-btn:hover {
  background-color: var(--color-red);
}
.landingIntro-section {
  position: relative;
}
.landingIntro-section {
  display: grid;
  grid-template-columns: 100%;
}
.landingIntro-section > * {
  grid-column: 1;
  grid-row: 1;
}
.landingIntro-section .bg-overlay {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: 50vw;
  aspect-ratio: 1440 / 1086;
  background-image: url("../img/intro-overlay.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.landingIntro-section .bg-img {
  position: relative;
  grid-area: 1 / 1;
  background-image:
    url("../img/intro-img-mb.webp"),
    linear-gradient(
      180deg,
      #f5fbfd 0%,
      #f7fcfe 35%,
      #ffffff 70%,
      #ffffff 100%
    );
  background-repeat: no-repeat, no-repeat;
  background-position: center bottom, center;
  background-size: 100% auto, 100% 100%;
}
.media-wrapper {
  position: relative;
  width: 100%;
  height: auto;
}
.media-wrapper * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.media-wrapper::before {
  content: "";
  display: block;
}
.media-wrapper.media6-5::before {
  padding-top: calc((5 / 6) * 100%);
}
.landingIntro-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(6, 1fr);
}
.landingIntro-section .landingIntro-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 9;
}
.landingIntro-avatar {
  position: relative;
  z-index: 4;
}
.landingIntro-avatar img {
  width: 245px;
  height: auto;
  max-height: 245px;
}
.landingIntro-bottom {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}
.landingIntro-bottom .landingIntro-bottomText {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}
.landingIntro-bottomText > * {
  position: relative;
  border-radius: 24px;
}
.landingIntro-bottomText > *::before {
  transform: translateX(-75%);
}
.landingIntro-bottomText > *::before,
.landingIntro-bottomText > *::after {
  z-index: -1;
  content: "";
  position: absolute;
  inset: 0;
  background-color: #fff;
  box-shadow: 12px -12px 24px 12px rgba(255, 255, 255, 1);
  -webkit-box-shadow: 12px -12px 24px 12px rgba(255, 255, 255, 1);
  -moz-box-shadow: 12px -12px 24px 12px rgba(255, 255, 255, 1);
}
.landingIntro-bottomText > .bottomText-top {
  position: relative;
  z-index: 2;
  padding-top: 18px;
}
.landingIntro-bottomText > .bottomText-bottom {
  margin-top: -12px;
  position: relative;
  z-index: 1;
  padding-top: 18px;
  padding-bottom: 18px;
}
.landingIntro-heading {
  position: relative;
  z-index: 10;
  margin-top: 140px;
  padding-left: 8vw;
  padding-right: 2vw;
  width: fit-content;
  height: fit-content;
  background:
    linear-gradient(var(--color-body), var(--color-body)) 0 33% / 100% 1px
      no-repeat,
    linear-gradient(var(--color-body), var(--color-body)) 0 68% / 100% 1px
      no-repeat;
}
.landingIntro-box {
  position: fixed;
  z-index: 99;
  right: min(60px, 4vw);
  bottom: min(15px, 1vw);
  background-color: #fff;
  padding: 24px;
  padding-top: 32px;
  border: 6px solid var(--color-orange);
  border-radius: 24px;
}
.landingIntro-box .introBox-inner {
  position: relative;
}
.introBox-close {
  top: -32px;
  right: -58px;
  border: 0px;
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
  background-color: var(--color-body);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.close-icon {
  display: block;
  width: 17px;
  height: 17px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17.006' height='17.006' viewBox='0 0 17.006 17.006'%3E%3Cpath id='Path_131' data-name='Path 131' d='M1523.969,654.327l-2.758,2.758-5.705-5.705-5.785,5.786-2.758-2.731,5.759-5.813-5.732-5.7,2.757-2.758,5.732,5.732,5.651-5.678,2.758,2.758-5.624,5.65Z' transform='translate(-1506.963 -640.16)' fill='%23fff'/%3E%3C/svg%3E%0A");
}
.landingIntro-box .introBox-inner .introBox-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.landingIntro-box .introBox-inner .introBox-content .btn-main {
  margin-top: 14px;
  margin-bottom: 8px;
}
.landingIntro-box .introBox-inner .introBox-circle {
  width: 100px;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, calc(-50% - 28px));
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--color-orange);
  color: #fff;
  text-align: center;
}
.landingTrouble-section .section-content {
  position: relative;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.landingTrouble-section {
  position: relative;
  padding: 90px 0;
  background-color: var(--color-blue-light);
}
.landingTrouble-section .bg-obj {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: repeating-linear-gradient(
    -45deg,
    #c0e5e6 0 4px,
    transparent 4px 12px
  );
}
.landingTrouble-section .section-heading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 5;
}
.landingTrouble-section .section-heading .text-outline {
  position: relative;
  z-index: 4;
}
.landingTrouble-section .section-heading .heading-vector {
  position: relative;
  padding: 2% 8%;
  margin-top: -3%;
}
.landingTrouble-section .section-heading .heading-vector > .font-sp {
  position: relative;
  z-index: 2;
}
.landingTrouble-section .section-heading .heading-vector::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateY(1.5em);
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1149.684' height='180.433' viewBox='0 0 1149.684 180.433'%3E%3Cg id='Group_88' data-name='Group 88' transform='translate(-225.37 -1409.679)'%3E%3Cpath id='Path_267' data-name='Path 267' d='M448.92,1443.746c-21.634,2.376-23.694-1.585-17.513-2.377s-10.3,3.169-40.177,3.961-58.721,2.377-58.721,2.377l12.363-6.338L315,1443.746l-23.694-2.377-15.453,5.546s-15.452,19.014-21.634,11.884-15.453-3.169-15.453-3.169v9.507l-13.392,5.546,9.272,19.014s47.388,38.028,49.449,45.95,12.362,15.845,12.362,15.845l29.875,30.9s24.725,12.676,72.113,5.545,59.75-7.922,59.75-7.922,222.28,2.653,199.856,0c-13.392-1.585-32.966-3.961-32.966-3.961s89.626.792,128.773-1.585,45.328-6.338,45.328-6.338l9.272-3.961s-16.483,5.545,23.694,2.376,31.935-1.584,31.935-1.584,134.954-.792,160.709,0c9.845.3,21.5.027,32.135-.43,17.191-.738,31.736-1.947,31.736-1.947S1028.913,1561,1032,1561s45.328-2.377,83.444-3.169,70.053-1.585,70.053-1.585,2.06,2.377,23.694-3.961,28.845-5.546,21.634-6.338,50.479-.792,7.211.792-38.117.792-38.117.792l18.543-3.961s10.3-3.169,34-8.715,12.362-3.169,23.694-5.546,6.181-1.584,6.181-1.584l5.151-.792,18.543-7.131s-5.151.792,15.453-5.546l20.6-6.337-5.151-8.715,11.332-8.715s-16.483,4.753-2.061-8.715,2.061-5.546,14.423-13.468,13.392-5.546,12.362-7.923l-1.03-2.377s-6.181,1.585-26.785,3.169-29.875,1.585-29.875,1.585l-10.3-3.169s8.241,0,18.543-8.715,0-13.468,10.3-17.43a99.732,99.732,0,0,0,16.483-7.922l24.724-4.754s-1.03-.792-26.784-1.584-63.872-2.377-63.872-2.377l18.544,7.923-35.027-1.585-72.112-2.377s2.06-.792-50.479-.792-235.912,2.377-235.912,2.377H819.786l65.932-5.546-98.9,2.377,9.272-6.338,19.573-3.169-61.811,3.961-3.09,5.546H689.983s-23.694,3.961-16.483,6.338,16.483-5.546-7.211-2.377-65.932,4.754-65.932,4.754l-7.212,3.961-30.905,2.377-77.264,3.169Z' fill='%230099a2'/%3E%3Cpath id='Path_268' data-name='Path 268' d='M1258.644,1410.471h-53.57l-37.086,1.584s55.629,3.962,64.9,3.169S1258.644,1410.471,1258.644,1410.471Z' fill='%230099a2'/%3E%3Cpath id='Path_269' data-name='Path 269' d='M1268.945,1541.986l19.574-7.13-12.362,10.3Z' fill='%230099a2'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.landingTrouble-section .section-content {
  position: relative;
  /* z-index を付与せず重ね合わせコンテキストを作らないことで、
     内部の .landingTrouble-float(z-index:9) が .section-heading(z-index:5)
     より前面に出られるようにする（フローリッシュが見出し裏に隠れる不具合の対策）。
     写真(.section-content 直下の picture)は z-index:auto のまま見出しの下に残る。 */
}
.landingTrouble-section .section-content img {
  width: 100%;
  height: auto;
}
.troubleBubble {
  position: relative;
  display: grid;
  place-items: center;
  width: fit-content;
}
.troubleBubble > p {
  position: relative;
  z-index: 2;
}
.troubleBubble .bubble-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.troubleBubble .bubble-bg img {
  width: 100%;
  margin: 0 auto;
  display: block;
}
.troubleBubble > p {
  width: fit-content;
}
.landingTrouble-float {
  display: grid;
  grid-template-columns: repeat(2, 50%);
}
.troubleBubble-text > p {
  position: relative;
  width: fit-content;
  /* p 自身を重ね合わせコンテキスト化して ::before(z-index:-1) を内側に閉じ込める。
     これが無いと SP ではコンテキストを作る祖先が無く、z-index:-1 がルートまで抜けて
     セクション背景の裏に落ち、フローリッシュが不可視になる。 */
  isolation: isolate;
}
.troubleBubble-text > p::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* サイズは見出し(手書き文字)のフォントサイズ基準の em。
     文字側が min()/clamp() で可変するため、フローリッシュも同じ比率で追従する。 */
  width: 0.73em;
  height: 0.86em;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70.139' height='81.256' viewBox='0 0 70.139 81.256'%3E%3Cpath id='Path_270' data-name='Path 270' d='M257.663,1730.554c5.4,1.571,5.458,1.559,7.188-1.371a39.16,39.16,0,0,1,2.489-4.142c.89-1.152,2.432-1.709,3.557-.707a4.369,4.369,0,0,1,1.442,3.385,18.444,18.444,0,0,1-2.4,5.055c-2.81,4.891-1.229,8.833,4.3,10.4,1.022.29,2.21.084,3.169.48a2.13,2.13,0,0,1,.164,3.8,7.787,7.787,0,0,1-3.834.8,11.246,11.246,0,0,1-8.466-5.661,40.767,40.767,0,0,1-2.161-4.711c-3.567-1.364-6.774-2.713-10.068-3.791a16.246,16.246,0,0,0-4.71-.569c-2.431-.046-4.881.312-7.3.132-6.016-.444-11.015-2.686-13.669-8.58a10.758,10.758,0,0,0-.777-1.417,8.211,8.211,0,0,0-1.1-.99c-1.3-.1-3.162-.21-5.012-.395-8.634-.861-13.163-6.372-11.676-14.995a58.448,58.448,0,0,1,4.131-13.946A46.952,46.952,0,0,1,233.471,1671a38.822,38.822,0,0,1,9.045-3.447c4.386-1.129,8.687-.546,12.17,2.649,1.686,1.546,3.28,2.582,5.715,2.3a8.7,8.7,0,0,1,3.929.792,8.446,8.446,0,0,1,5.862,7.973,23.361,23.361,0,0,1-4.791,15.191c-2.388,3.257-5.033,6.33-8.024,10.059a39.586,39.586,0,0,1,5.318-.526,5.777,5.777,0,0,1,5.81,5.6,15.613,15.613,0,0,1-4.139,11.937C262.441,1725.771,260.293,1727.818,257.663,1730.554Zm-15.621-37.7c-5.232,4.967-8.076,11.309-10.246,18.006-.63,1.955-1.8,4.046.019,6.036,11.729-.762,29.594-19.318,32.64-29.258a17.407,17.407,0,0,0,.611-6.394,5.336,5.336,0,0,0-2.164-3.079c-1.079-.847-2.5-1.008-3.868.646a35.978,35.978,0,0,1-.577,5.179c-1.6,6.488-5.464,11.064-11.848,13.328-2.257.8-3.5-.1-4.4-3.053a15.945,15.945,0,0,1-.321-1.577c6.484.379,9.835-3.393,11.694-8.976.244-.736-.279-1.726-.591-3.364C248.131,1684.266,243.945,1687.528,242.042,1692.852ZM225.4,1717.288c1.382-4.444,2.36-8.672,4.023-12.611a71.19,71.19,0,0,1,5.87-10.622,96.783,96.783,0,0,1,7.619-10.469c2.735-3.212,5.928-6.029,9.382-9.48-2.079-.933-3.415-1.871-4.87-2.118-4.2-.711-8,.752-11.593,2.756-12.047,6.72-19.133,16.942-22.257,30.371-1.983,8.533,2.458,13.294,9.7,12.606C223.8,1717.671,224.31,1717.512,225.4,1717.288Zm6.392,5.5c2.957,4.424,3.657,5.151,6.794,5.831,3.649.791,7.373,1.549,10.546-.757a77.289,77.289,0,0,1,1.843-9.02c.979-2.961,2.543-5.728,4.522-10.048-4.754,3.3-8.042,5.878-11.617,7.969C240.2,1718.914,236.247,1720.593,231.788,1722.788Zm30.746-11.814c-5.257,3.3-7.825,7.7-7.806,14.043C262.279,1721.1,264.277,1717.548,262.534,1710.974Z' transform='translate(-208.522 -1667.026)' fill='%2391d3d7' fill-rule='evenodd'/%3E%3C/svg%3E%0A");
}
.landingTrouble-container {
  position: relative;
}
.landingTrouble-container .trouble-bottom {
  position: relative;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.landingTrouble-container .trouble-bottom > img {
  position: absolute;
  bottom: 50%;
  right: 2rem;
  z-index: 0;
  width: 118px;
}
.landingExplain-r {
  position: relative;
}
.landingExplain-r > .bg-obj {
  position: absolute;
  inset: 0;
  right: calc(50% - 50vw);
  z-index: 0;
  background-image: url("../img/explain-bg.webp");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
}
.landingExplain-r > .bg-obj::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: clamp(100px, 12vw, 220px);
  background: linear-gradient(
    to right,
    #fff 0%,
    rgba(255, 255, 255, 0.95) 20%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
}
@media (max-width: 1320px) and (min-width: 769px) {
  .landingExplain-r > .bg-obj::before {
    width: clamp(140px, 16vw, 230px);
  }
}
.landingExplain-container {
  position: relative;
  padding: 0 var(--container-padding);
}
.landingExplain-top {
  position: relative;
  max-width: 1176px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  align-items: stretch;
}
.landingExplain-top
  .landingExplain-r
  .landingExplain-media
  .landingExplain-bubble {
  position: absolute;
}
.landingExplain-top .landingExplain-r .landingExplain-media {
  position: relative;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  height: 100%;
}
.landingExplain-top .landingExplain-r .landingExplain-media > img {
  width: auto;
  height: 405px;
  display: block;
  object-fit: contain;
  object-position: bottom;
}
.landingExplain-top .landingExplain-l {
  padding-top: 100px;
  padding-bottom: 200px;
}
.landingExplain-top .landingExplain-l .c-orange {
  position: relative;
}
.landingExplain-top .landingExplain-l .c-orange::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
.landingExplain-top .fs-18 {
  margin-top: 40px;
  max-width: 620px;
}
.landingExplain-bottom {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background: var(--color-blue);
  padding: 0 var(--container-padding);
}
.landingExplain-bottom .explainBottom-text {
  padding: 1rem 0;
  color: #fff;
}
.explainBottom-circle {
  position: relative;
}
.explainBottom-circle > p {
  position: relative;
}
.explainBottom-circle > p::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, calc(100% + 10px));
  width: 0;
  height: 0;
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  border-top: 1em solid var(--color-orange);
}
.landingExplain-bottom .explainBottom-circle {
  text-align: center;
  margin-top: -50%;
  height: 150%;
  width: auto;
  aspect-ratio: 1;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 8px solid var(--color-blue);
  background: #fff;
  padding: 0.5em;
  transform: rotate(-25deg);
}
.nationWide-section {
  padding: 100px 0;
}
.nationWide-section .section-heading {
  text-align: center;
}
.nationWide-section .nationWide-heading-main {
  padding-left: clamp(4px, 0.5vw, 8px);
}

.nationWide-section .nationWide-container {
  position: relative;
}
.nationWide-section .nationWide-container .bg-obj {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  aspect-ratio: 1665 / 1111;
  background-image: url("../img/nationWide-bg.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.nationWide-section .nationWide-content {
  display: grid;
  align-items: center;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
}
.nationWide-section .nationWide-content img {
  width: 100%;
  height: auto;
  max-width: 960px;
  margin-left: auto;
  display: block;
  position: relative;
  z-index: 1;
}
.nationWide-section .nationWide-content > p {
  position: relative;
  z-index: 2;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}
.nationWide-section .nationWide-content > * {
  position: relative;
}
.beforeAfter-section {
  padding-top: 100px;
}
.beforeAfter-section .section-heading {
  text-align: center;
  margin-bottom: 60px;
}
.beforeAfter-section .section-heading .c-orange {
  position: relative;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.beforeAfter-section .section-heading .c-orange::before {
  width: 70px;
  height: 60px;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-50%);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='71.612' height='60.879' viewBox='0 0 71.612 60.879'%3E%3Cg id='Group_215' data-name='Group 215' transform='translate(-348.31 -4661.287)'%3E%3Cpath id='Path_360' data-name='Path 360' d='M402.419,4710.544l-39.486-25.127,15.011-13.053Z' fill='%23ff8c00'/%3E%3Cpath id='Path_361' data-name='Path 361' d='M395.081,4720.438l-46.771,1.728,4.948-19.268Z' fill='%23ff8c00'/%3E%3Cpath id='Path_362' data-name='Path 362' d='M409.347,4707.169l-9.237-45.882,19.813,1.781Z' fill='%23ff8c00'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.beforeAfter-section .beforeAfter-container {
  position: relative;
}
.beforeAfter-container > * {
  position: relative;
  z-index: 2;
}

.beforeAfter-section {
  position: relative;
  background-color: #e0dfdd;
}
.beforeAfter-section > .bg-obj {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.beforeAfter-section > * {
  position: relative;
  z-index: 2;
}
.beforeAfter-section > .bg-obj {
  background: repeating-linear-gradient(
    -45deg,
    #dbdbd9 0 4px,
    transparent 4px 12px
  );
}
.before-container {
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  padding-bottom: 40px;
}
.after-container {
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  padding-top: 40px;
  background: #ffebd3;
}
.after-container > .bg-obj {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.after-container > * {
  position: relative;
  z-index: 2;
}
.after-container > .bg-obj {
  background: repeating-linear-gradient(
    -45deg,
    #ffe9cf 0 4px,
    transparent 4px 12px
  );
}
.beforeAfter-box {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  border-radius: 40px;
  padding: 35px 25px;
  box-shadow: 7px 7px 7px 0px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 7px 7px 7px 0px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 7px 7px 7px 0px rgba(0, 0, 0, 0.6);
}
.beforeAfter-box img {
  display: block;
  width: 100%;
  height: auto;
}
.beforeAfter-box .box-content {
  display: grid;
  grid-template-columns: auto 44%;
  gap: 60px;
}
ul.list-reset {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
ul.list-check {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
}
ul.list-check li {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  line-height: 1.5;
}
ul.list-check li::before {
  content: "";
  display: inline-flex;
  align-self: center;
  flex-shrink: 0;
  width: 24px;
  height: 22px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='100%25' height='100%25' viewBox='0 0 195 161' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg transform='matrix(1,0,0,1,-7164,-41611)'%3E%3Cg transform='matrix(8.33333,0,0,8.33333,0,0)'%3E%3Cg transform='matrix(1,0,0,1,874.955,4997.37)'%3E%3Cpath d='M0,12.835L-12.835,12.835L-12.835,-0L-2.026,-0L0.406,-2.432L-15.267,-2.432L-15.267,15.267L2.432,15.267L2.432,8.717L0,11.149L0,12.835Z' style='fill:rgb(255,140,0);fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(1,0,0,1,866.916,5002.45)'%3E%3Cpath d='M0,-3.659L-2.501,-1.158L1.571,2.914L4.072,5.416L6.573,2.914L16.06,-6.573L13.559,-9.075L4.072,0.412L0,-3.659Z' style='fill:rgb(255,140,0);fill-rule:nonzero;'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}
.beforeAfter-container .beforeAfter-arrow {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='100%25' height='100%25' viewBox='0 0 2769 265' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg transform='matrix(1,0,0,1,-5247,-44793)'%3E%3Cg transform='matrix(8.33333,0,0,8.33333,0,0)'%3E%3Cg transform='matrix(1,0,0,1,844.933,5406.91)'%3E%3Cpath d='M0,-31.642L-45.777,0L-91.555,-31.642L0,-31.642Z' style='fill:rgb(255,140,0);fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(1,0,0,1,961.85,5406.91)'%3E%3Cpath d='M0,-31.642L-45.777,0L-91.555,-31.642L0,-31.642Z' style='fill:rgb(255,140,0);fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(1,0,0,1,721.27,5406.91)'%3E%3Cpath d='M0,-31.642L-45.777,0L-91.555,-31.642L0,-31.642Z' style='fill:rgb(255,140,0);fill-rule:nonzero;'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
  width: 300px;
  height: 34px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}
.after-container .after-bottom {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 5;
  padding-top: 50px;
  padding-bottom: 100px;
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.after-container .after-img {
  position: absolute;
  z-index: -1;
  bottom: 0;
  right: 0;
  width: 350px;
  transform: translateX(40%);
}
.after-container .after-img img {
  height: auto;
  width: 100%;
  margin-left: auto;
}
.compareCircle-section {
  padding-top: 100px;
  padding-bottom: 140px;
  position: relative;
}
.compareCircle-section .section-heading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 40px;
}
.headingBg-orange {
  background: var(--color-orange);
  padding: 12px 8px;
  border-radius: 10px;
  display: inline-block;
}
.compareCircle-section .section-heading .headingBg-orange {
  margin-bottom: 0.6em;
}
.compareCircle-container {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  max-width: 1600px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  align-items: stretch;
  position: relative;
}
.compareCircle-container::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, -125%);
  border-top: 28px solid transparent;
  border-bottom: 28px solid transparent;
  border-left: 18px solid var(--color-blue);
}
.compareCircle-img .compareCircle-tag {
  position: absolute;
  height: 50px;
  top: 0;
  color: #fff;
  z-index: 4;
}
.compareCircle-before .compareCircle-tag {
  background-color: var(--color-body);
  right: 0;
  padding-right: 24px;
}
.compareCircle-after .compareCircle-tag {
  background-color: var(--color-blue);
  left: 0;
  padding-left: 24px;
  padding-right: 24px;
}
.compareCircle-item .compareCircle-tag p {
  position: relative;
  z-index: 4;
}
.tag-inner {
  padding: 0px 12px;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tag-inner::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 0;
  height: 0;
}
.compareCircle-before .tag-inner::before {
  border-left: 2em solid transparent;
  border-right: 2em solid transparent;
  border-top: 50px solid var(--color-body);
  left: 0;
  transform: translateX(-50%);
}
.compareCircle-after .tag-inner::before {
  border-left: 2em solid transparent;
  border-right: 2em solid transparent;
  border-top: 50px solid var(--color-blue);
  right: 0;
  transform: translateX(calc(50% + 24px));
}
.compareCircle-item {
  position: relative;
}
.compareCircle-item .compareCircle-img {
  position: relative;
}
.compareCircle-item .compareCircle-img img {
  width: 100%;
  height: auto;
  display: block;
}
.compareCircle-before .compareCircle-row {
  right: 0;
}
.compareCircle-row {
  padding: 0 15px;
  position: absolute;
  bottom: 0;
  transform: translateY(50%);
  display: flex;
  width: fit-content;
  justify-content: stretch;
  align-items: stretch;
  gap: 15px;
}
.compareCircle-row .compare-circle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex: 0 0 160px;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--color-body);
  color: #fff;
}
.compareCircle-after .compareCircle-row .compare-circle {
  background-color: var(--color-blue);
}
.compareCircle-item .compareCircle-bottom {
  text-align: center;
  display: block;
  width: fit-content;
  margin-top: 125px;
  padding: 0 30px;
}
.compareCircle-before.compareCircle-item .compareCircle-bottom {
  margin-left: auto;
}
.step-section {
  z-index: 9;
  position: relative;
  background-color: var(--color-blue);
}
.step-section > * {
  position: relative;
  z-index: 4;
}
.step-section > .bg-obj {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: repeating-linear-gradient(
    -45deg,
    #24a3aa 0 4px,
    transparent 4px 12px
  );
}
.step-section .section-heading > p::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 72px;
  transform: translateX(-50%);
  bottom: -1px;
  height: 2px;
  background: #fff;
  z-index: 1;
}
.step-section .section-heading::before,
.step-section .section-heading::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translate(-50%, 100%);
  bottom: -1px;
  border-left: 48px solid transparent;
  border-right: 48px solid transparent;
  border-top: 48px solid var(--color-blue);
}
.step-section .section-heading::after {
  border-left: 36px solid transparent;
  border-right: 36px solid transparent;
  border-top: 36px solid #fff;
  bottom: 1px;
}
.step-section .section-heading {
  position: relative;
  z-index: 4;
  transform: translateY(-50%);
  background: #fff;
  padding: 12px 40px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50vw;
  border: 10px solid var(--color-blue);
}
.step-section .section-content {
  position: relative;
  z-index: 4;
}
.step-section .section-bottom {
  text-align: center;
  margin: 80px auto;
  width: fit-content;
  position: relative;
  padding: 0.5em 3em;
  display: flex;
  justify-content: center;
  align-items: center;
}
.step-section .section-bottom .bg-obj {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110%;
  aspect-ratio: 531.69 / 318.573;
  transform: translate(-50%, -50%);
  z-index: 0;
  background-image: url("../img/step-bubble-mb.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media (min-width: 769px) {
  .step-section .section-bottom .bg-obj {
    aspect-ratio: 739.283 / 174.65;
    background-image: url("../img/step-bubble.svg");
  }
}
.step-section .stepBottom-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.step-section .stepBottom-container > .section-bottom {
  z-index: 1;
  position: relative;
}
.step-section .stepBottom-container > .section-btn {
  z-index: 4;
  position: relative;
}
.step-section .stepBottom-container > img {
  z-index: 3;
  position: absolute;
  bottom: 0;
  right: 2vw;
  width: 220px;
  height: auto;
  display: block;
}
.step-container {
  display: flex;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.step-container .step-item .step-heading {
  text-align: center;
}
.step-container .step-item {
  flex: 1 1 calc(100% / 3);
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  padding: 20px 35px;
  background-color: var(--bg-color);
}
.step-container .step-item img {
  height: 115px;
  width: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.step-container .step-item:nth-child(1) {
  z-index: 9;
}
.step-container .step-item:nth-child(2) {
  z-index: 8;
}
.step-container .step-item:nth-child(3) {
  z-index: 7;
}
.step-section .section-btn {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 30px;
  padding-bottom: 60px;
}
.btn-gradient {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  font-weight: bold;

  column-gap: 16px;
  width: fit-content;
  max-width: 100%;
  padding: 16px;
  display: flex;
  justify-content: stretch;
  align-items: center;

  background: linear-gradient(
    to bottom,
    #41b61e 0%,
    #3cb11e 23.3%,
    #2ea51e 49.6%,
    #18911e 77.3%,
    #007b1e 100%
  );

  border: 4px solid #fff;
  border-radius: 12px;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4);
}
.btn-gradient > p {
  white-space: nowrap;
  filter: drop-shadow(0.3rem 0.3rem 0.1rem rgba(0, 0, 0, 0.7));
}
.btn-gradient.gradient-red {
  background: linear-gradient(to bottom, #f5801e 0%, #f5321e 100%);
}
.btn-gradient.gradient-red::before {
  background: linear-gradient(to bottom, #f25425 0%, #860700 100%);
}
.btn-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;

  background: linear-gradient(
    to bottom,
    #30782b 0%,
    #2d732a 27.2%,
    #246528 58%,
    #164f25 90.3%,
    #114724 100%
  );

  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-gradient > * {
  position: relative;
  z-index: 1;
}

.btn-gradient:hover::before {
  opacity: 1;
}
.btn-gradient .btn-box {
  flex-shrink: 0;
  border-radius: 8px;
  display: flex;
  padding: 8px;
  color: var(--color-body);
  background-color: #fff;
  text-align: center;
  font-weight: 800;
  white-space: nowrap;
}
.caseStudy-section {
  position: relative;
  padding: 90px 0;
  background-color: var(--color-blue-light);
}
.caseStudy-section > * {
  position: relative;
  z-index: 4;
}
.caseStudy-section > .section-heading {
  margin-bottom: 50px;
}
.caseStudy-heading .heading-inner {
  width: calc(100% - 150px);
  margin-left: auto;
  margin-right: auto;
}
.caseStudy-section > .bg-obj {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: repeating-linear-gradient(
    -45deg,
    #c0e5e6 0 4px,
    transparent 4px 12px
  );
}
.caseStudy-container {
  padding: 0 var(--container-padding);
}
.caseStudy-container .caseStudy-item:not(:last-child) {
  margin-bottom: 80px;
}
.caseStudy-item {
  background-color: #fff;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  position: relative;
  border: 2px solid var(--color-orange);
  box-shadow: 7px 7px 7px 0px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 7px 7px 7px 0px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 7px 7px 7px 0px rgba(0, 0, 0, 0.6);
}
.caseStudy-item .caseStudy-heading {
  background-color: var(--color-orange);
  text-align: center;
  padding: 8px 12px;
}
.caseStudy-item .caseStudy-content {
  padding: 30px;
}
.caseStudy-item .caseStudy-top {
  display: grid;
  grid-template-columns: 46% 1fr;
  gap: 30px;
}

.caseStudy-item .caseStudy-top img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
.caseStudy-item .caseStudy-problem {
  position: relative;
  background: #def2f3;
  border-radius: 12px;
  border: 2px dashed var(--color-blue);
  padding: 24px;
  padding-left: 36px;
  margin-left: 24px;
}
.caseStudy-problem .problem-circle {
  color: #fff;
  background: var(--color-blue);
  border-radius: 50%;
  width: 66px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transform: translate(-50%, -50%);
}
.caseStudy-badge {
  position: absolute;
  top: -18px;
  left: -24px;
  z-index: 4;
  color: #fff;
}
.caseStudy-badge .badge-inner > * {
  z-index: 2;
}
.caseStudy-badge .badge-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='128.291' height='149.984' viewBox='0 0 128.291 149.984'%3E%3Cdefs%3E%3ClinearGradient id='linear-gradient' x1='0.5' y1='1' x2='0.5' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23ff7500'/%3E%3Cstop offset='0.503' stop-color='%23fd7400'/%3E%3Cstop offset='0.685' stop-color='%23f67100'/%3E%3Cstop offset='0.814' stop-color='%23ea6c00'/%3E%3Cstop offset='0.918' stop-color='%23d96500'/%3E%3Cstop offset='1' stop-color='%23c65d00'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='Group_116' data-name='Group 116' transform='translate(-276.567 -8397.265)'%3E%3Cpath id='Path_276' data-name='Path 276' d='M396.737,8397.266H284.687c-4.06.06-8.12,3.848-8.12,11.2v138.784l56.026-21.1,56.026,21.1V8408.465C388.619,8401.112,392.678,8397.322,396.737,8397.266Z' fill='url(%23linear-gradient)'/%3E%3Cpath id='Path_277' data-name='Path 277' d='M392.4,8408.465v6.748h12.454v-6.748c0-6.08-2.19-7.581-6.227-7.581C395.422,8400.884,392.4,8402.239,392.4,8408.465Z' fill='%23ff7500'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.caseStudy-badge .badge-inner {
  position: relative;
  width: 128px;
  height: 150px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 18px;
  justify-content: center;
  align-items: center;
  padding-bottom: 1em;
}
.caseStudy-journey {
  margin: 20px 0;
  padding: 8px;
  padding-top: 4px;
  padding-right: 60px;
  display: flex;
  width: fit-content;
  justify-content: flex-start;
  align-items: center;
  background-color: var(--color-blue);
  color: #fff;
  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 100%, 0% 100%);
}
.feedback-section {
  position: relative;
  padding: 0 var(--container-padding);
  padding-top: 120px;
  padding-bottom: 100px;
}
.feedback-section > .bg-obj {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../img/feedback-bg.webp");
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
}
.feedback-section > * {
  position: relative;
  z-index: 2;
}
.feedback-section .section-heading {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.feedback-heading {
  position: relative;
}
.feedback-heading > img {
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
  height: 76px;
  display: block;
  transform: translate(100%, -50%);
}
.feedback-item .feedback-text {
  text-align: center;
}
.feedback-container {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 30px;
  margin-top: 60px;
}
.feedback-item {
  padding: 24px;
  flex: 0 1 320px;
  background-color: #fff;
  position: relative;
  box-shadow: 7px 7px 7px 0px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 7px 7px 7px 0px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 7px 7px 7px 0px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
.feedback-item .font-BeautifulFont {
  letter-spacing: -0.4em;
}
.feedback-item .feedback-desc {
  flex-grow: 1;
  margin-top: 18px;
  margin-bottom: 18px;
}
.feedback-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  text-align: center;
  border: 3px solid var(--color-blue);
  border-radius: 12px;
  color: var(--color-blue);
}
.feedback-bottom {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}
.client-section {
  position: relative;
  padding: 100px 0;
  background-color: var(--color-blue-light);
}
.client-section .section-heading {
  padding: 0 var(--container-padding);
  text-align: center;
}
.client-section .section-heading h2 > span {
  position: relative;
}
.client-section .section-heading h2 > span::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-40%, -50%);
  height: 68px;
  width: 144px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='114.462' height='68.29' viewBox='0 0 114.462 68.29'%3E%3Cg id='Group_187' data-name='Group 187' transform='translate(-763.681 -11675.819)'%3E%3Cg id='Group_186' data-name='Group 186'%3E%3Cg id='Group_183' data-name='Group 183'%3E%3Cpath id='Path_680' data-name='Path 680' d='M830.741,11715.478a2.189,2.189,0,0,0,1.43-.911l13.747-19.792a2.2,2.2,0,1,0-3.606-2.506l-13.747,19.793a2.2,2.2,0,0,0,2.176,3.416Z' fill='%23ff8c00'/%3E%3Cpath id='Path_681' data-name='Path 681' d='M844.967,11687.91a2.866,2.866,0,1,0,2.337-3.312A2.866,2.866,0,0,0,844.967,11687.91Z' fill='%23ff8c00'/%3E%3C/g%3E%3Cg id='Group_184' data-name='Group 184'%3E%3Cpath id='Path_682' data-name='Path 682' d='M797.813,11708.547c.054-.01.108-.021.162-.034a2.195,2.195,0,0,0,1.6-2.662l-5.221-20.9a2.2,2.2,0,1,0-4.26,1.063l5.221,20.9A2.2,2.2,0,0,0,797.813,11708.547Z' fill='%23ff8c00'/%3E%3Cpath id='Path_683' data-name='Path 683' d='M788.581,11681.124a2.866,2.866,0,1,0-.932-3.945A2.867,2.867,0,0,0,788.581,11681.124Z' fill='%23ff8c00'/%3E%3C/g%3E%3Cg id='Group_185' data-name='Group 185'%3E%3Cpath id='Path_684' data-name='Path 684' d='M868.595,11742.149a2.2,2.2,0,0,0-.584-4.35l-20.251,1.929a2.2,2.2,0,0,0,.416,4.371l20.252-1.929C868.484,11742.166,868.54,11742.158,868.595,11742.149Z' fill='%23ff8c00'/%3E%3Cpath id='Path_685' data-name='Path 685' d='M873.126,11737.132a2.866,2.866,0,1,0,4.045-.254A2.866,2.866,0,0,0,873.126,11737.132Z' fill='%23ff8c00'/%3E%3C/g%3E%3Cpath id='Path_686' data-name='Path 686' d='M844.162,11727.2a2.21,2.21,0,0,0,.911-.384l22.429-16.206a2.2,2.2,0,0,0-2.572-3.559l-22.428,16.205a2.2,2.2,0,0,0,1.66,3.943Z' fill='%23ff8c00'/%3E%3Cpath id='Path_687' data-name='Path 687' d='M815.864,11708.306a2.2,2.2,0,0,0,1.81-1.932l2.764-26.062a2.2,2.2,0,0,0-4.366-.463l-2.765,26.063a2.2,2.2,0,0,0,1.952,2.415A2.229,2.229,0,0,0,815.864,11708.306Z' fill='%23ff8c00'/%3E%3Cpath id='Path_688' data-name='Path 688' d='M781.691,11716.374a2.195,2.195,0,0,0,1.248-3.642L767.5,11695.8a2.2,2.2,0,0,0-3.244,2.958l15.44,16.936A2.192,2.192,0,0,0,781.691,11716.374Z' fill='%23ff8c00'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.client-section .section-bottom {
  text-align: center;
  padding: 0 var(--container-padding);
}

.client-section .section-content {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding: 80px var(--container-padding);
}

.clientCard-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.info-section .clientCard-item {
  border: 0;
  padding-left: 0;
  padding-right: 0;
}
.info-section .clientCard-container {
  max-width: 1020px;
}
.clientCard-item {
  background: #fff;
  padding: 24px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  gap: 24px;
  border: 1px solid var(--color-blue);
}
.clientCard-item img {
  width: auto;
  height: 68px;
  object-fit: contain;
  display: block;
}
.slide-note {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-top: 60px;
}
.client-logo {
  width: 100%;
  height: 100%;
}
.swiper-clientLogo .swiper-slide:not(:last-child) {
  margin-right: 30px;
}
.swiper-clientLogo .swiper-slide {
  text-align: center;
  width: calc((100% - (30px * 3)) / 4);
}
.client-section .swiper-container {
  position: relative;
  padding: 0 60px;
}
.client-section .swiper-button::after {
  width: 0;
  height: 0;
  content: "";
}
.client-section .swiper-button.swiper-button-prev::after {
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-right: 24px solid var(--color-blue);
}
.client-section .swiper-button.swiper-button-next::after {
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 24px solid var(--color-blue);
}
.client-logo .logo-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  background-color: #fff;
  padding: 8px;
  margin-bottom: 12px;
}
.client-logo .logo-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.howTo-section {
  z-index: 1;
  position: relative;
  padding: 0 var(--container-padding);
  padding-top: 100px;
  background-color: var(--color-blue-light);
}
.howTo-section .section-heading {
  position: relative;
  text-align: center;
}
.howTo-container {
  position: relative;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 60px;
  max-width: 1020px;
}
.howTo-container .howTo-item:not(:last-child) {
  margin-bottom: 50px;
}
.howTo-container .howTo-item:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, calc(100% + 15px));
  z-index: 1;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid var(--color-blue);
}
.howTo-container .howTo-item {
  position: relative;
  background-color: #fff;
  padding: 24px 18px;
  display: grid;
  grid-template-columns: 350px auto;
  gap: 30px;
}
.howTo-item .howTo-heading {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
  width: 100%;
}
.howTo-item .howTo-heading .howTo-circle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 112px;
  flex-shrink: 0;
  aspect-ratio: 1;
  background-color: var(--color-blue);
  color: #fff;
  border-radius: 50%;
}
.howTo-item .howTo-heading .howTo-title {
  width: 100%;
  text-align: center;
}
.howTo-bottom {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 60px;
  max-width: 1000px;
  padding-bottom: 100px;
}
.howTo-bottom > img {
  position: absolute;
  bottom: 0;
  transform: translateX(-25%);
  width: 100%;
  height: 286px;
  width: auto;
  display: block;
}
.howTo-bottom .bottom-text {
  background: var(--color-orange);
  color: #fff;
  text-align: center;
  padding: 24px;
}
.howTo-section + .step-section .stepBottom-container > img {
  transform: translateX(0%);
  width: 300px;
}
.strengths-section {
  position: relative;
}
.strengths-section .section-heading {
  position: relative;
  text-align: center;
  padding: 0 var(--container-padding);
  padding-top: 140px;
  padding-bottom: 50px;
}
.strengths-section .section-heading > * {
  z-index: 2;
  position: relative;
}
.strengths-section .section-heading > .bg-obj {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../img/strengths-bg.webp");
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
}
.strengths-section .heading-box {
  margin: 0 auto;
  margin-top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.strengths-section .heading-bottom {
  position: relative;
  margin-top: 20px;
  display: inline-block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.strengths-section .heading-bottom::before,
.strengths-section .heading-bottom::after {
  content: "";
  width: 190px;
  height: 166px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='191.091' height='167.978' viewBox='0 0 191.091 167.978'%3E%3Cg id='Group_29' data-name='Group 29' transform='translate(-1072.473 -2607.852)'%3E%3Cline id='Line_13' data-name='Line 13' x1='168.867' y2='166.554' transform='translate(1073.176 2608.564)' fill='none' stroke='%230099a2' stroke-miterlimit='10' stroke-width='2'/%3E%3Cline id='Line_14' data-name='Line 14' x1='168.867' y2='166.554' transform='translate(1093.995 2608.564)' fill='none' stroke='%230099a2' stroke-miterlimit='10' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A");
  position: absolute;
  bottom: 0;
  z-index: 1;
}
.strengths-section .heading-bottom::before {
  left: 0;
  transform: translateX(-70%) scaleX(-1);
}
.strengths-section .heading-bottom::after {
  right: 0;
  transform: translateX(70%);
}
.strengths-section .heading-box > span {
  display: inline-block;
}
.strengths-section .heading-box > span:not(.fs-95) {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 88px;
  height: 88px;
  background-color: var(--color-orange);
  color: #fff;
  line-height: 0;
}
.strengths-section .heading-box > span.fs-80 {
  background-color: var(--color-blue);
}
.feature-container {
  overflow: hidden;
  max-width: 1600px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.feature-container .feature-item {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 30px;
}
.feature-container .feature-item:not(:last-child) {
  margin-bottom: 80px;
}
.feature-item > * {
  flex: 0 0 50%;
}
.feature-item .feature-heading {
  position: relative;
  z-index: 2;
}
.feature-item .feature-heading .feature-top {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}
.feature-item .feature-heading .feature-top > img {
  display: block;
  width: 24.5%;
  height: auto;
  flex-shrink: 0;
  min-width: 194px;
}
.feature-item .feature-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.feature-item .feature-title {
  display: inline-flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}
.feature-item .feature-title > span {
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--color-body);
}
.feature-item .feature-heading {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0 24px;
  padding-bottom: 40px;
  gap: 24px;
}
.feature-item .feature-content {
  flex-grow: 1;
  padding: 0 24px;
}
.feature-item .feature-bottom {
  margin: 0 24px;
  width: 111%;
  background-color: var(--color-orange);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 12px 0;
  padding-left: 24px;
  clip-path: polygon(0 0, 100% 0%, 95% 100%, 0% 100%);
}
.message-section {
  position: relative;
  padding-top: 100px;
  padding-bottom: 140px;
  overflow: hidden;
}
.message-section > * {
  position: relative;
  z-index: 2;
}
.message-section > .bg-obj {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../img/message-bg.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.7;
}
.message-section .section-heading {
  position: relative;
  text-align: center;
  padding: 0 var(--container-padding);
}
.message-section .message-heading {
  width: 100%;
  max-width: 1000px;
  margin: 40px auto;
}
.message-section .message-heading > img {
  display: block;
  width: 100%;
  height: auto;
  transform: translateX(7.5%);
}
.message-container {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  width: 100%;
  padding: 0 var(--container-padding);
}
.message-container .message-item {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
}
.message-container .message-item:not(:last-child) {
  margin-bottom: 80px;
}
.message-container .message-item .message-img {
  flex: 1 1 20%;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.message-item .message-content {
  position: relative;
}
.message-item .message-content .message-inner {
  box-shadow: 10px 10px 0px 0px var(--color-blue);
  -webkit-box-shadow: 10px 10px 0px 0px var(--color-blue);
  -moz-box-shadow: 10px 10px 0px 0px var(--color-blue);
}
.message-item .message-content .message-inner {
  width: calc(100% - 40px);
  position: relative;
  background-color: #fff;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 4px solid var(--color-blue);
}
.message-container .message-item .message-img img {
  width: 172px;
  height: auto;
  object-fit: contain;
  object-position: center;
  margin-bottom: 12px;
}
.message-container .message-item .message-img p:last-child {
  margin-top: 4px;
}
.message-section + .step-section .stepBottom-container > img {
  bottom: unset;
  top: 18%;
  right: 9%;
  transform: translateX(0%);
}

.thought-section .section-heading,
.thought-section .section-content {
  position: relative;
  z-index: 9;
  padding: 0 var(--container-padding);
}
.thought-section .section-content {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  width: 100%;
}
.thought-section {
  padding-top: 100px;
}
.thought-section .section-img {
  position: relative;
}
.thought-section .section-img img {
  width: 100%;
  height: auto;
}
/* thought-img: <img>(picture) を CSS背景に置換。<img>と同じ位置・サイズを保つため
   width:100% ＋ 画像の実寸比 aspect-ratio で高さを確保。SP=thought-img-mb.webp を既定に。
   aspect-ratio が画像比と一致するため cover でも切れずに全体が表示される。 */
.thought-section .section-img .thought-img {
  width: 100%;
  aspect-ratio: 1500 / 1174; /* thought-img-mb.webp 実寸 */
  background-image: url("../img/thought-img-mb.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.company-section {
  position: relative;
  padding-top: 100px;
  padding-bottom: 30px;
  background-color: var(--color-blue);
}
.company-section .section-content {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  width: 100%;
  padding: 0 var(--container-padding);
}
.company-section .section-content > p {
  margin-top: 80px;
  margin-left: auto;
  text-align: right;
}
.company-container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
/* .company-item を <a> 化した際に、リンク色・下線でデザインが変わらないようにする。
   grid の子要素なのでブロック化されレイアウトは従来どおり維持される。
   ホバーは位置移動・拡大・影なしで、項目全体をわずかに透過するシンプル表現。 */
.company-container .company-item {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .company-container .company-item:hover {
    opacity: 0.7;
  }
}
/* 4者連携の説明文：中央寄せ・読みやすい文字サイズ/行間、PC/SPで左右余白を確保。
   既存の「.company-section .section-content > p（右寄せ）」を上書きするため詳細度を合わせる。 */
.company-section .section-content > p.company-description {
  max-width: 720px;
  margin: 2rem auto 0;
  padding-inline: 16px;
  color: #fff;
  text-align: center;
  font-size: clamp(15px, 4vw, 18px);
  line-height: 1.8;
}
.company-container .company-item img {
  margin-bottom: 12px;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center;
  background-color: #fff;
}
.info-section {
  padding: 0 var(--container-padding);
  padding-top: 120px;
  padding-bottom: 100px;
}
.info-section .section-content {
  width: 100%;
  max-width: 1000px;
  margin: 40px auto;
  width: 100%;
}
.table-info {
  width: 100%;
}
.table-info tr {
  text-align: left;
}
.table-info tr td {
  padding: 16px 0;
  border-bottom: 1px solid var(--color-body);
}
.table-info tr td:first-child {
  padding-right: 30px;
  width: 115px;
}
.faq-section {
  padding: 0 var(--container-padding);
  padding-top: 100px;
  padding-bottom: 120px;
  background-color: var(--color-blue-light);
}
.faq-section .section-bottom {
  margin-top: 100px;
}
.accordion-container {
  margin-top: 60px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.accordion-item {
  padding: 15px 20px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
.accordion-item:not(:last-child) {
  margin-bottom: 18px;
}
.accordion-item .accordion-title::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 0H9V16H7L7 0Z' fill='%230099A2'/%3E%3Cpath d='M16 6.5332V8.5332H0V6.5332H16Z' fill='%230099A2'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  margin-left: auto;
  width: 2em;
  margin-left: 1em;
  height: 2em;
  transform: translateY(0);
  flex-grow: 0;
}
.accordion-item.active .accordion-title::after {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='2' viewBox='0 0 16 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 0V2H0V0H16Z' fill='%230099A2'/%3E%3C/svg%3E%0A");
}
.accordion-item .accordion-title > p:not(:first-child) {
  flex-grow: 1;
}
.accordion-item .accordion-title,
.accordion-item .accordion-content {
  border-radius: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.accordion-item .accordion-content {
  padding-top: 16px;
  padding-bottom: 0;
}
.accordion-item .accordion-collapse {
  display: none;
}
.accordion-item .accordion-title {
  cursor: pointer;
}
.accordion-item .accordion-circle {
  margin-right: 12px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--color-blue);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.accordion-item .accordion-collapse .accordion-circle {
  background-color: var(--color-orange);
}
.accordion-item .accordion-body {
  padding: 0;
  padding-right: 2em;
  margin: 0;
}
.accordion-item .accordion-body * {
  margin: 0;
}
/* アンカー遷移（/#contact_section 等）でセクション先頭が画面上端や
   WP 管理バーに隠れないよう、スクロール停止位置に余白を確保する。
   固定ヘッダーを持つテンプレートでも JS で位置をずらさずに済ませるための指定。 */
#contact_section,
#oc_dynamic_contact_form,
#feedback {
  scroll-margin-top: 24px;
}
body.admin-bar #contact_section,
body.admin-bar #oc_dynamic_contact_form,
body.admin-bar #feedback {
  scroll-margin-top: 56px;
}
.contact-section {
  padding: 100px var(--container-padding);
}
.contact-section .section-heading {
  margin-bottom: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 30px;
  text-align: center;
}
.contact-form-container .container {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.contact-form-container fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  outline: none;
}
.contact-form-container .contact-form .form-input-radio:has(input:checked) {
  background-color: transparent;
}
.contact-form-container .contact-form .field-group {
  margin-bottom: 35px;
}
.contact-form-container .contact-form .field-group {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.contact-form-container .contact-form .field-group .label-wrap {
  flex-shrink: 0;
  white-space: nowrap;
  min-width: 210px;
  width: fit-content;
  justify-content: flex-start;
}
.contact-form-container .contact-form .field-group .label-wrap .label-required,
.contact-form-container .contact-form .field-group .label-wrap .label-optional {
  color: var(--color-orange);
  background-color: transparent;
  font-size: 18px;
}
.contact-form-container .contact-form .label-txt {
  font-size: 18px;
  font-weight: bold;
}
.contact-form-container .contact-form .radio-group {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  border: 0;
}
.contact-form-container .contact-form .form-input-radio {
  padding: 0;
  flex: unset;
}
.contact-form-container .contact-form .form-input-radio:not(:first-of-type) {
  border-left: 0;
}
.contact-form-container .contact-form .radio-group label input {
  width: 26px;
  height: 26px;
}
.contact-form-container .contact-form .radio-group label {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  width: fit-content;
  font-weight: 500;
}
.contact-form-container .contact-form .input-wrap {
  width: 100%;
}
.contact-form-container .contact-form input[type="text"]:focus,
.contact-form-container .contact-form textarea:focus {
  outline-color: var(--color-blue);
}
.contact-form-container .contact-form input[type="checkbox"] {
  width: 26px;
  height: 26px;
  margin-right: 12px;
}
.contact-form-container .contact-form input::placeholder,
.contact-form-container .contact-form textarea::placeholder {
  color: #afafb0;
}
.contact-form-container .contact-form input[type="text"],
.contact-form-container .contact-form input[type="emil"],
.contact-form-container .contact-form input[type="tel"],
.contact-form-container .contact-form input[type="email"],
.contact-form-container .contact-form textarea,
.contact-form-container .contact-form textarea.form-input-text {
  border-radius: 0;
  width: 100%;
  font-weight: 500;
  padding: 15px;
  border: 1px solid var(--color-body);
}
.contact-form-container .contact-form textarea.form-input-text {
  min-height: 56px;
}
.contact-form-container .contact-form .confirm-group > * {
  cursor: pointer;
}
.contact-form-container .contact-form .confirm-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 24px;
  margin-bottom: 24px;
}
.contact-form-container .contact-form .agree-label {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 24px;
  margin-bottom: 24px;
}
.contact-form-container .contact-form .g-recaptcha {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
}
.contact-form-container .contact-form .form-ctls {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.contact-form-container .submit-group {
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact-form-container .contact-form .submit-btn {
  font-size: 18px;
  border-radius: 12px;
  padding: 0 24px;
  min-width: 230px;
  height: 50px;
  background-color: var(--color-orange);
  color: #fff;
  border: 0;
  outline: 0;
  appearance: none;
  transition: var(--all-transition);
}
.contact-form-container .contact-form .submit-btn:hover {
  background: var(--color-red);
}
.landingPage-footer {
  background-color: var(--color-blue-light);
}
.landingFooter-container {
  padding-top: 55px;
  padding-bottom: 35px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 45px;
}
.landingFooter-bottom {
  text-align: center;
  background-color: var(--color-blue);
  color: #fff;
  padding: 8px var(--container-padding);
}
.text-offset {
  margin-left: -0.5em;
}
.text-nowrap {
  white-space: nowrap;
}
.text-point {
  position: relative;
}
.text-point::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 11px;
  height: 11px;
  background-color: var(--color-orange);
  border-radius: 50%;
  transform: translate(-50%, 0px);
}
@media (min-width: 992px) and (max-width: 1439.98px) {
  .clientCard-content .fs-22 {
    font-size: clamp(20px, calc(20px + 2 * ((100vw - 768px) / 672)), 22px);
  }
  .clientCard-content .fs-18 {
    font-size: clamp(16px, calc(16px + 2 * ((100vw - 768px) / 672)), 18px);
  }
  .nationWide-section .nationWide-content img {
    max-width: clamp(720px, calc(720px + 240 * ((100vw - 992px) / 448)), 960px);
  }
}
/* HEADER BREAKPOINT */
@media (min-width: 768.89px) and (max-width: 1439.98px) {
  .btn-gradient .fs-37 {
    font-size: clamp(27px, calc(27px + 10 * ((100vw - 768px) / 672)), 37px);
  }
  .btn-gradient .fs-18 {
    font-size: clamp(16px, calc(16px + 2 * ((100vw - 768px) / 672)), 18px);
  }
  .stepBottom-container .section-bottom .fs-36 {
    font-size: clamp(26px, calc(26px + 10 * ((100vw - 768px) / 672)), 36px);
  }
  .feature-bottom .fs-27 {
    font-size: clamp(16px, calc(16px + 11 * ((100vw - 768px) / 672)), 27px);
  }
  .landingExplain-l .fs-45 {
    font-size: clamp(35px, calc(35px + 10 * ((100vw - 768px) / 672)), 45px);
  }
  .landingExplain-l .fs-60 {
    font-size: clamp(45px, calc(45px + 15 * ((100vw - 768px) / 672)), 60px);
  }
  .thought-section .section-img .fs-60 {
    font-size: clamp(40px, calc(40px + 20 * ((100vw - 768px) / 672)), 60px);
  }
  .strengths-section .section-heading .fs-70 {
    font-size: clamp(60px, calc(60px + 10 * ((100vw - 768px) / 672)), 70px);
  }
  .strengths-section .section-heading .fs-46 {
    font-size: clamp(36px, calc(36px + 10 * ((100vw - 768px) / 672)), 46px);
  }
  .howTo-bottom .fs-35 {
    font-size: clamp(25px, calc(25px + 10 * ((100vw - 768px) / 672)), 35px);
  }
  .step-section .section-heading .fs-46 {
    font-size: clamp(36px, calc(36px + 10 * ((100vw - 768px) / 672)), 46px);
  }
  .compareCircle-section .section-heading .fs-66 {
    font-size: clamp(46px, calc(46px + 20 * ((100vw - 768px) / 672)), 66px);
  }
  .fs-33.headingBg-orange {
    font-size: clamp(25px, calc(25px + 8 * ((100vw - 768px) / 672)), 33px);
  }
  .beforeAfter-section .section-heading .fs-66 {
    font-size: clamp(46px, calc(46px + 20 * ((100vw - 768px) / 672)), 66px);
  }
  .beforeAfter-section .section-heading .fs-87 {
    font-size: clamp(67px, calc(67px + 20 * ((100vw - 768px) / 672)), 87px);
  }
  .beforeAfter-section .section-heading .fs-120 {
    font-size: clamp(100px, calc(100px + 20 * ((100vw - 768px) / 672)), 120px);
  }
  .nationWide-section .section-heading .fs-80 {
    font-size: clamp(40px, calc(40px + 40 * ((100vw - 768px) / 672)), 80px);
  }
  .nationWide-section .section-heading .fs-46 {
    font-size: clamp(26px, calc(26px + 20 * ((100vw - 768px) / 672)), 46px);
  }
  .nationWide-section .section-heading .fs-38 {
    font-size: clamp(18px, calc(18px + 20 * ((100vw - 768px) / 672)), 38px);
  }
  .landingExplain-bottom .fs-45 {
    font-size: clamp(35px, calc(35px + 10 * ((100vw - 768px) / 672)), 45px);
  }
  .landingExplain-bottom .fs-41 {
    font-size: clamp(31px, calc(31px + 10 * ((100vw - 768px) / 672)), 41px);
  }
  .landingExplain-bottom .fs-30 {
    font-size: clamp(20px, calc(20px + 10 * ((100vw - 768px) / 672)), 30px);
  }
  .troubleBubble > .fs-18 {
    font-size: clamp(14px, calc(14px + 4 * ((100vw - 768px) / 672)), 18px);
  }
  .troubleBubble-text > .fs-78 {
    font-size: clamp(48px, calc(42px + 30 * ((100vw - 768px) / 672)), 78px);
  }
  .trouble-bottom .fs-66 {
    font-size: clamp(46px, calc(46px + 20 * ((100vw - 768px) / 672)), 66px);
  }
  .heading-vector .fs-112 {
    font-size: clamp(92px, calc(92px + 20 * ((100vw - 768px) / 672)), 112px);
  }
  .heading-vector .fs-84 {
    font-size: clamp(64px, calc(64px + 20 * ((100vw - 768px) / 672)), 84px);
  }
  .landingPage-header .landingHeader-crown {
    gap: clamp(4px, calc(4px + 4 * ((100vw - 768px) / 672)), 8px);
  }
  .landingPage-header .landingHeader-logo {
    margin-right: clamp(12px, calc(12px + 24 * ((100vw - 768px) / 672)), 36px);
  }
  .landingPage-header .landingHeader-text {
    margin-right: clamp(12px, calc(12px + 4 * ((100vw - 768px) / 672)), 16px);
  }
  .landingPage-header .landingHeader-logo img {
    width: clamp(24px, calc(24px + 34 * ((100vw - 768px) / 672)), 58px);
  }
  .landingHeader-btn img {
    width: clamp(14px, calc(14px + 22 * ((100vw - 768px) / 672)), 32px);
  }
  .landingPage-header .landingHeader-btn {
    padding: 0 clamp(12px, calc(12px + 24 * ((100vw - 768px) / 672)), 36px);
  }
  .landingPage-header .fs-21 {
    font-size: clamp(14px, calc(14px + 7 * ((100vw - 768px) / 672)), 21px);
  }
  .landingPage-header .fs-18 {
    font-size: clamp(14px, calc(14px + 4 * ((100vw - 768px) / 672)), 18px);
  }
  .landingPage-header .fs-16 {
    font-size: clamp(13px, calc(13px + 3 * ((100vw - 768px) / 672)), 16px);
  }
  .landingPage-header .fs-15 {
    font-size: clamp(12px, calc(12px + 3 * ((100vw - 768px) / 672)), 15px);
  }
  .landingIntro-avatar img {
    width: clamp(125px, calc(125px + 120 * ((100vw - 768px) / 672)), 245px);
  }
  .landingIntro-bottomText .fs-32 {
    font-size: clamp(22px, calc(22px + 10 * ((100vw - 768px) / 672)), 32px);
  }
  .landingIntro-bottomText .fs-24 {
    font-size: clamp(18px, calc(18px + 4 * ((100vw - 768px) / 672)), 24px);
  }
  .landingIntro-bottomText .fs-50 {
    font-size: clamp(28px, calc(28px + 22 * ((100vw - 768px) / 672)), 50px);
  }
}
@media screen and (min-width: 992px) {
  .landingExplain-top
    .landingExplain-r
    .landingExplain-media
    .landingExplain-bubble
    > img {
    width: 234px;
  }
  .landingExplain-top
    .landingExplain-r
    .landingExplain-media
    .landingExplain-bubble {
    bottom: 405px;
    left: -15px;
    transform: translateY(24%);
  }
  .landingExplain-top {
    gap: 25px;
  }
  .thought-section .section-img {
    margin-top: -5%;
  }
  .thought-section .section-img .thought-img {
    /* PC は thought-img.webp（実寸 3200x1662）へ差し替え */
    aspect-ratio: 3200 / 1662;
    background-image: url("../img/thought-img.webp");
  }
  .thought-section .section-img .text-outline {
    position: absolute;
    bottom: 80px;
    left: 0;
    right: 0;
    padding: 0 var(--container-padding);
    z-index: 2;
  }
  .feature-container .feature-item:nth-child(even) .feature-media {
    order: -1;
  }
  .feature-container .feature-item:nth-child(even) .feature-bottom {
    margin-left: -15%;
    padding-left: calc(15% - 24px);
    padding-right: 24px;
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 5% 100%);
  }
  .step-container .step-item:not(:first-child) {
    margin-left: -25px;
    padding-left: calc(20px + 25px);
  }
  .step-container .step-item:not(:last-child) {
    clip-path: polygon(
      0% 0%,
      calc(100% - 25px) 0,
      100% 50%,
      calc(100% - 25px) 100%,
      0% 100%
    );
  }
  .landingIntro-section .bg-img {
    min-height: 950px;
    background-image:
      url("../img/intro-img.webp"),
      linear-gradient(
        180deg,
        #f5fbfd 0%,
        #f7fcfe 35%,
        #ffffff 70%,
        #ffffff 100%
      );
  }
  .landingIntro-box .introBox-inner > .btn-main {
    display: none;
  }
  .beforeAfter-box .box-content {
    margin-bottom: 24px;
  }
  .compareCircle-bottom > p .yellow-line {
    bottom: -0.15em;
    height: 0.5em;
  }
  .nationWide-section {
    padding-bottom: 0;
  }
  .nationWide-section .nationWide-container {
    padding-bottom: 100px;
  }
  .nationWide-section .nationWide-container .bg-obj {
    width: 50vw;
    left: auto;
  }
  .nationWide-section .nationWide-content > p {
    margin-right: auto;
    padding-bottom: 25%;
    z-index: 2;
  }
  .nationWide-section .nationWide-content > * {
    grid-column: 1;
    grid-row: 1;
  }
}
@media screen and (min-width: 768.89px) {
  /* .text-outline(ココで) と .heading-vector(発注に苦労…) の重なりを幅に依存させず一定に保つ。
     従来の margin-top:-3%（幅基準）は狭幅で重なりが不足するため、見出し(h3=fs-112)の
     clamp(92px〜112px) に連動させた値へ置換。1600px で 64px(=-4%相当)、下限769pxでも約52pxを確保。
     ※式は h3 の font-size クランプ [clamp(92px, 92px+20*((100vw-768px)/672), 112px)] × 0.571。 */
  .landingTrouble-section .section-heading .heading-vector {
    margin-top: clamp(
      -64px,
      calc((92px + 20 * ((100vw - 768px) / 672)) * -0.571),
      -52px
    );
  }
  .message-section + .step-section .section-bottom {
    transform: translateX(-10%);
  }
  .landingTrouble-container > picture img,
  .landingTrouble-container > picture > img {
    min-height: 850px;
    object-fit: cover;
    object-position: center;
  }
  .landingTrouble-container .trouble-bottom {
    position: absolute;
    bottom: 0;
    right: 0;
  }
  .landingTrouble-container .trouble-bottom > img {
    width: 130px;
    right: 1rem;
  }
  .trouble-bottom .fs-66 {
    padding-right: 1rem;
  }
  .troubleBubble .bubble-bg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
  .landingTrouble-float .troubleBubble,
  .landingTrouble-float .troubleBubble-text {
    position: absolute;
  }
  .troubleBubble.troubleBubble-1 {
    top: 10%;
    right: 26%;
  }
  .troubleBubble.troubleBubble-1 > p {
    padding: 1.75em 3.3em;
  }
  .troubleBubble.troubleBubble-2 {
    top: 10%;
    right: 2%;
  }
  .troubleBubble.troubleBubble-2 > p {
    padding: 1.75em 3.3em;
  }
  .troubleBubble.troubleBubble-3 {
    top: 12%;
    left: min(17vw, 22%);
  }
  .troubleBubble.troubleBubble-3 > p {
    width: auto;
    padding: 2.4em 3.6em;
  }
  .troubleBubble.troubleBubble-4 {
    top: 50%;
    left: 20%;
  }
  .troubleBubble.troubleBubble-4 > p {
    padding: 2.5em 2.5em;
  }
  .troubleBubble.troubleBubble-5 {
    top: 30%;
    left: 10%;
  }
  .troubleBubble.troubleBubble-5 > p {
    padding: 2em 3.6em;
  }
  .troubleBubble.troubleBubble-6 {
    top: 80%;
    left: 25%;
  }
  .troubleBubble.troubleBubble-6 > p {
    padding: 2.4em 3.2em;
    padding-top: 2.8em;
  }
  .troubleBubble-text {
    z-index: 4;
  }
  .troubleBubble-text > p::before {
    /* PC も見出しフォント基準の em に。文字が clamp() で可変しても比率を維持する。 */
    width: 0.87em;
    height: 1.03em;
  }

  .troubleBubble-text.troubleBubble-text1 {
    top: 0%;
    right: 0;
    padding-right: 5em;
  }
  .troubleBubble-text.troubleBubble-text2 {
    top: 10%;
    left: 0%;
    transform: rotate(-15deg);
  }
  .troubleBubble-text.troubleBubble-text1 > p::before {
    /* -3px / -12px（78px基準）を em 化。見出しフォントに比例してオフセットも可変。 */
    bottom: -0.04em;
    right: -0.15em;
    transform: scaleX(-1) translateX(-100%);
  }
  .troubleBubble-text.troubleBubble-text2 > p::before {
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
  }
  .troubleBubble-text.troubleBubble-text3 {
    top: 64%;
    left: 10%;
    transform: rotate(-15deg);
  }
  .troubleBubble-text.troubleBubble-text3 > p::before {
    top: 0;
    left: 0%;
    transform: translate(0%, -100%);
  }
  .landingTrouble-float {
    position: absolute;
    inset: 0;
    z-index: 9;
  }
  .home .landingPage-header {
    position: absolute;
    z-index: 9;
    top: 0;
    left: 0;
    right: 0;
  }
  .message-item .message-content::before,
  .message-item .message-content .message-inner::before,
  .message-item .message-content .message-inner::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50px;
    transform: translateX(calc(100% - 0px));
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 38px solid var(--color-blue);
  }
  .message-item .message-content .message-inner::after {
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    transform: translateX(calc(100% - 12px));
    border-left: 38px solid #fff;
    z-index: 2;
  }
  .message-item .message-content::before {
    right: 40px;
    top: 70px;
  }
  .message-item:nth-child(even) .message-content .message-inner {
    margin-left: auto;
  }
  .message-item:nth-child(even) .message-content .message-inner {
    box-shadow: -10px 10px 0px 0px var(--color-blue);
    -webkit-box-shadow: -10px 10px 0px 0px var(--color-blue);
    -moz-box-shadow: -10px 10px 0px 0px var(--color-blue);
  }

  .message-item:nth-child(even) .message-content::before,
  .message-item:nth-child(even) .message-content .message-inner::before,
  .message-item:nth-child(even) .message-content .message-inner::after {
    right: unset;
    left: 0;
    transform: translateX(calc(-100% - 0px));
    border-left: 0;
    border-right: 38px solid var(--color-blue);
  }
  .message-item:nth-child(even) .message-content::before {
    left: 40px;
    right: unset;
  }
  .message-item:nth-child(even) .message-content .message-inner::after {
    transform: translateX(calc(-100% + 12px));
    border-left: 0;
    border-right: 38px solid #fff;
  }
  .message-container .message-item:nth-child(even) .message-img {
    order: -1;
  }
  .landingIntro-bottom > .bottomText-top {
    display: none;
  }
  .caseStudy-item .caseStudy-top {
    grid-template-columns: 265px auto;
  }

  .caseStudy-item .caseStudy-top img {
    grid-row: 1 / span 2;
  }
  .br-mb {
    display: none;
  }
  .landingIntro-avatar {
    margin-left: 4.44vw;
  }
}
@media screen and (max-width: 991px) {
  .compareCircle-bottom > p .yellow-line {
    bottom: 0;
  }
  .landingExplain-top .fs-18 {
    max-width: 100%;
    margin-top: 20px;
  }
  .feature-item .feature-bottom {
    width: calc(100% + 24px);
    margin: 0;
    margin-left: -24px;
  }
  .explainBottom-circle .fs-mb-55 {
    font-size: min(calc(55 * 100vw / 768), 55px);
  }
  .explainBottom-circle .fs-mb-50 {
    font-size: min(calc(50 * 100vw / 768), 50px);
  }
  .explainBottom-circle .fs-mb-37 {
    font-size: min(calc(37 * 100vw / 768), 37px);
  }
  .landingExplain-top
    .landingExplain-r
    .landingExplain-media
    .landingExplain-bubble
    > img {
    width: 50vw;
  }
  .landingExplain-top
    .landingExplain-r
    .landingExplain-media
    .landingExplain-bubble {
    top: -8%;
    left: 2vw;
  }
  .thought-section .section-img {
    margin-top: 40px;
  }
  .thought-section .section-img img,
  .thought-section .section-img .thought-img {
    margin-top: -25%;
  }
  .feature-item .feature-heading .feature-top > img {
    width: 21%;
    min-width: unset;
  }
  .feature-container .feature-item {
    flex-direction: column;
  }
  .howTo-container .howTo-item {
    grid-template-columns: 100%;
  }
  .howTo-item .howTo-heading .howTo-title {
    text-align: left;
  }
  .clientCard-container {
    grid-template-columns: 100%;
    width: 100%;
  }
  .feedback-container {
    flex-direction: column;
  }
  .feedback-container .feedback-item {
    padding: 50px 25px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

  .step-container .step-item:not(:first-child) {
    margin-top: -25px;
  }
  .step-container .step-item:not(:last-child) {
    clip-path: polygon(
      0% 0%,
      100% 0,
      100% calc(100% - 25px),
      50% 100%,
      0 calc(100% - 25px)
    );
  }
  .step-container .step-content {
    margin-top: 24px;
  }
  .step-container .step-item img {
    width: 100%;
    height: auto;
  }
  .step-container .step-item {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 33%;
    gap: 0;
    padding: 25px;
    padding-top: 40px;
    padding-bottom: 60px;
  }
  .step-container .step-item .step-heading {
    text-align: left;
  }
  .step-container .step-item .step-img {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: flex-end;
  }
  .step-container {
    flex-direction: column;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding: 0 var(--container-padding);
  }
  .compareCircle-container::before {
    bottom: unset;
    top: 50%;
    transform: translate(-50%, calc(-50% + 18px));
    border-left: 28px solid transparent;
    border-right: 28px solid transparent;
    border-top: 18px solid var(--color-blue);
  }
  .compareCircle-before.compareCircle-item .compareCircle-bottom,
  .compareCircle-after.compareCircle-item .compareCircle-bottom {
    margin-top: 12%;
    margin-left: auto;
    margin-right: auto;
  }
  .compareCircle-before .compareCircle-row,
  .compareCircle-after .compareCircle-row {
    right: 50%;
    transform: translate(50%, 50%);
  }
  .compareCircle-container {
    grid-template-columns: 100%;
    gap: 60px;
  }
  .after-bottom > p.fs-34 {
    padding-right: 0;
  }
  .after-container .after-img {
    width: 40%;
    bottom: 54%;
    transform: translateX(20%);
  }
  .nationWide-section {
    padding-top: 50px;
    padding-bottom: 0;
  }
  .nationWide-section .nationWide-content > p {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }
  .landingExplain-bottom {
    position: relative;
    width: 100%;
  }
  .landingExplain-bottom .explainBottom-text {
    width: 100%;
    text-align: center;
  }
  .landingExplain-bottom .explainBottom-circle {
    width: 46vw;
    height: auto;
    margin: 0;
    position: absolute;
    top: 0;
    left: var(--container-padding);
    transform: translateY(calc(-100% + 12px));
  }
  .landingExplain-bottom .explainBottom-circle p {
    transform: rotate(-25deg);
  }
  .landingExplain-r {
    padding-top: max(20vw, 80px);
  }
  .landingExplain-container {
    padding: 0;
    padding-top: 50px;
  }
  .landingExplain-r > .bg-obj {
    left: 0;
    background-size: cover;
    background-position: top left;
  }
  .landingExplain-top .landingExplain-r .landingExplain-media > img {
    width: 62vw;
    margin-left: auto;
    height: auto;
  }
  .landingExplain-top .landingExplain-r .landingExplain-media {
    display: grid;
    grid-template-columns: 100%;
    place-items: center;
    width: 100%;
    margin: 0 auto;
  }

  .landingExplain-top .landingExplain-r .landingExplain-media > * {
    grid-column: 1;
    grid-row: 1;
  }
  .landingExplain-top .landingExplain-l {
    padding: 0 var(--container-padding);
    padding-bottom: 24px;
  }
  .landingExplain-top {
    flex-direction: column;
  }
  .landingIntro-heading {
    margin-top: max(12vw, 60px);
  }
  .landingIntro-section .bg-img {
    min-height: min(100vw, 700px);
  }
  .landingIntro-box {
    display: block !important;
  }
  .landingIntro-box .introBox-close {
    display: none;
  }
  .landingIntro-box .introBox-inner .introBox-content {
    text-align: left;
    justify-content: flex-start;
  }
  .landingIntro-box .introBox-inner .introBox-content .btn-main {
    display: none;
  }
  .landingIntro-box .introBox-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 100%;
  }
  .landingIntro-box .introBox-inner .btn-main {
    min-width: unset;
    padding: 12px 1em;
    height: auto;
    border-radius: 12px;
    flex-shrink: 0;
  }
  .landingIntro-box .introBox-inner .introBox-circle {
    position: relative;
    width: auto;
    padding: 1em;
    flex-shrink: 0;
    inset: unset;
    transform: unset;
  }
  .landingIntro-box {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    position: relative;
    grid-row: 2;
    inset: unset;
    padding: 8px 8px;
    box-shadow: 7px 7px 7px 0px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 7px 7px 7px 0px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 7px 7px 7px 0px rgba(0, 0, 0, 0.6);
  }
  .landingIntro-section .landingIntro-bottom {
    position: relative;
    grid-row: 3;
  }
}
@media screen and (max-width: 768px) {
  :root {
    --container-padding: 15px;
  }
  .contact-section .section-heading {
    gap: 18px;
    margin-bottom: 40px;
  }
  .message-container .message-item:not(:last-child) {
    margin-bottom: 40px;
  }
  .message-section,
  .company-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .thought-section {
    padding-top: 60px;
  }
  .info-section,
  .faq-section,
  .contact-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .faq-section .section-bottom {
    margin-top: 60px;
  }
  .feature-container .feature-item:not(:last-child) {
    margin-bottom: 20px;
  }
  .howTo-section {
    padding-top: 0;
  }
  .compareCircle-img .compareCircle-tag {
    height: auto;
  }
  .compareCircle-after .tag-inner {
    position: relative;
    height: 100%;
  }
  .compareCircle-after .tag-inner::before {
    border: none;
    top: 0;
    right: 0;
    width: 4em;
    height: 100%;
    background-color: var(--color-blue);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform: translateX(calc(50% + 24px));
  }
  .compareCircle-before .tag-inner {
    position: relative;
    height: 100%;
  }
  .compareCircle-before .tag-inner::before {
    border: none;
    top: 0;
    left: 0;
    width: 4em;
    height: 100%;
    background-color: var(--color-body);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform: translateX(-50%);
  }
  .compareCircle-before.compareCircle-item .compareCircle-bottom,
  .compareCircle-after.compareCircle-item .compareCircle-bottom {
    margin-top: 20%;
  }
  .howTo-item .howTo-heading .howTo-circle {
    width: 15%;
    aspect-ratio: 1;
  }
  .caseStudy-journey {
    padding: 8px;
    padding-right: 60px;
  }
  .feedback-container {
    margin-top: 40px;
  }
  .caseStudy-problem .problem-circle {
    width: auto;
    padding: 0.5em;
  }
  .caseStudy-heading .heading-inner {
    width: 100%;
  }
  .caseStudy-item .caseStudy-heading {
    padding: 18px;
  }
  .caseStudy-container .caseStudy-item:not(:last-child) {
    margin-bottom: 60px;
  }
  .headingBg-orange {
    padding: 4px 8px;
    border-radius: 4px;
  }
  .landingIntro-box .introBox-inner .introBox-content {
    flex-grow: 1;
  }
  .accordion-item .accordion-circle {
    width: 2em;
    height: 2em;
  }
  .message-section .message-heading > img {
    max-width: unset;
    width: 160%;
    margin-left: -30%;
  }
  .strengths-section .heading-box > span:not(.fs-95) {
    height: 5rem;
    padding-bottom: 0.05em;
  }
  .strengths-section .heading-box {
    margin-top: 20px;
  }
  .btn-gradient {
    width: 100%;
    justify-content: center;
    column-gap: clamp(8px, 2vw, 16px);
    padding: clamp(10px, 2vw, 16px);
  }
  .btn-gradient > p {
    flex-grow: 1;
    text-align: center;
    font-size: clamp(18px, 5.8vw, 37px);
  }
  .btn-gradient .btn-box {
    flex-grow: 1;
    font-size: clamp(11px, 3.2vw, 18px);
    padding: 0.75em 0.5em;
    justify-content: center;
    align-items: center;
  }
  .step-section .stepBottom-container > .section-btn {
    flex-direction: column;
    align-items: center;
  }
  .beforeAfter-container .beforeAfter-arrow {
    width: 75%;
    height: 48px;
  }
  .beforeAfter-box {
    padding: 35px 20px;
  }
  .nationWide-section .nationWide-content {
    gap: 30px;
    margin-top: 30px;
  }
  .nationWide-section .nationWide-content > p {
    width: 100%;
  }
  .text-point::before {
    width: 0.22em;
    height: 0.22em;
    transform: translate(-50%, -0.15em);
  }
  .message-section + .step-section .stepBottom-container > img {
    top: 11%;
    right: 2%;
    width: 50vw;
  }
  .howTo-bottom .bottom-text {
    padding: 4vw 1vw;
    padding-left: 28%;
  }
  .howTo-bottom {
    padding-bottom: 12%;
  }
  .landingTrouble-container .trouble-bottom {
    margin-top: 80px;
  }
  .landingTrouble-container .trouble-bottom > img {
    right: 0;
  }
  .landingTrouble-section .section-content {
    margin-top: -50%;
  }
  .troubleBubble {
    width: 100%;
  }
  .troubleBubble .bubble-bg picture,
  .troubleBubble .bubble-bg img {
    height: 100%;
    width: auto;
    object-fit: contain;
    object-position: center;
  }
  .troubleBubble.troubleBubble-1 {
    margin-top: -10%;
    margin-left: -20%;
    width: 125%;
    height: 120%;
  }
  .troubleBubble.troubleBubble-2 {
    grid-column: 1 / span 2;
    grid-row: 2;
    margin-top: -4em;
    margin-left: auto;
    margin-right: 7vw;
    width: fit-content;
    padding: 4em;
    padding-top: 7em;
  }
  .troubleBubble.troubleBubble-3 {
    width: 140%;
    height: 140%;
    margin-top: -60%;
    margin-left: -30%;
    align-self: center;
  }
  .troubleBubble.troubleBubble-4 {
    margin-top: -10%;
    width: 100%;
    height: 100%;
    padding: 0 2.5em;
  }
  .troubleBubble.troubleBubble-4 > p {
    transform: translateX(-0.5em);
  }
  .troubleBubble.troubleBubble-5 {
    width: 120%;
    height: 100%;
    padding: 2em 0;
    padding-top: 4em;
    transform: translate(-5%, -10%);
  }
  .troubleBubble.troubleBubble-6 {
    width: 100%;
    height: 100%;
    padding: 2em 0;
  }
  .troubleBubble-text.troubleBubble-text1 > p::before {
    bottom: 0;
    right: 5%;
  }
  .troubleBubble-text.troubleBubble-text2 > p::before {
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
  }
  .troubleBubble-text.troubleBubble-text3 > p::before {
    top: 0;
    right: 20%;
  }
  .troubleBubble-text .br-mb {
    display: block;
  }
  .landingTrouble-float {
    margin-top: -20%;
  }

  .landingIntro-heading .text-outline {
    filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, 0.5));
  }
  .landingIntro-heading img {
    height: min(13vw, 80px);
    width: auto;
    transform: translateY(0.3em);
  }
  .landingTrouble-section .section-heading .heading-vector::before {
    transform: none;
  }
  .landingTrouble-section .section-heading .heading-vector {
    /* SP は .text-outline(ココで) と重ねず、隣接配置にする（負マージンを解除）。 */
    margin-top: 0;
  }
  .landingTrouble-section .section-heading .heading-vector h3 {
    /* SP は ::before ブラシが上寄せ(contain)になるため、h3 を少し上げて
       背景ブラシの中央に垂直中央揃えする。em 基準で各SP幅でも中央を維持。 */
    transform: translateY(-0.2em);
  }
  .landingHeader-logo img {
    width: min(10vw, 48px);
    height: min(10vw, 48px);
  }
  .landingHeader-logo {
    margin-right: 18px;
  }
  .contact-form-container .contact-form .field-group {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 6px;
  }
  .clientCard-item {
    padding: 20px;
    gap: 16px;
  }
  .clientCard-item .clientCard-img {
    flex: 0 0 20%;
  }
  .clientCard-item img {
    width: 100%;
  }
  .table-info tr {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
  }
  .table-info tr td {
    padding: 0;
  }
  .table-info tr td:first-child {
    border: 0;
    padding-top: 16px;
    padding-bottom: 4px;
  }
  .table-info tr td:last-child {
    padding-bottom: 16px;
  }
  .message-item .message-content::before {
    content: "";
    position: absolute;
    transform: translateX(calc(100% - 0px));
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 68px solid var(--color-blue);
    right: 25%;
    bottom: -56px;
    transform: rotate(45deg);
  }
  .company-container {
    gap: 8vw;
    grid-template-columns: repeat(2, 1fr);
  }
  .feedback-section {
    padding-top: 80px;
    padding-bottom: 60px;
  }
  .message-item .message-content .message-inner {
    width: 100%;
    padding: 18px;
  }
  .message-container .message-item {
    flex-direction: column;
    gap: 40px;
  }
  .message-container .message-item .message-img {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    padding: 0 5vw;
  }
  .message-container .message-item .message-img img {
    width: 38%;
  }
  .message-container .message-item .message-img .img-desc {
    flex-grow: 1;
  }
  .feature-item .feature-heading {
    padding: 0 var(--container-padding);
  }
  .feature-item .feature-bottom {
    width: calc(100% + var(--container-padding));
    margin-left: calc(var(--container-padding) * -1);
  }
  .strengths-section .heading-bottom::before,
  .strengths-section .heading-bottom::after {
    width: 128px;
    height: 98px;
  }
  .strengths-section .section-heading {
    padding-top: 80px;
  }
  .howTo-section + .step-section .stepBottom-container > img {
    transform: translateX(0%);
    right: 2%;
    top: 15%;
    width: 45%;
    height: auto;
  }
  .howTo-bottom > img {
    width: 42%;
    height: auto;
    transform: translateX(-8%);
  }
  .client-section .section-heading h2 > span::before {
    height: 2em;
    width: 2em;
    transform: translate(-40%, -60%);
  }
  .client-section .section-content {
    padding: 40px 0;
    padding-bottom: 20px;
  }
  .client-section .slide-note {
    padding-right: var(--container-padding);
  }
  .client-section .swiper-container {
    padding: 0 50px;
  }
  .swiper-clientLogo .swiper-slide:not(:last-child) {
    margin-right: 12px;
  }
  .swiper-clientLogo .swiper-slide {
    width: calc((100% - (12px * 1)) / 2);
  }

  .br-pc {
    display: none;
  }
  .caseStudy-badge {
    left: -4px;
    top: -0.9%;
  }
  .caseStudy-item:first-child .caseStudy-heading {
    padding-left: 9vw;
    white-space: nowrap;
  }
  .caseStudy-badge .badge-inner {
    width: auto;
    height: auto;
    padding: 12px;
    padding-right: 20px;
    gap: 4px;
  }
  .feedback-bottom {
    width: 100%;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
  }
  .feedback-item .feedback-desc {
    padding: 1em 0;
  }
  .caseStudy-item .caseStudy-content {
    padding: 20px;
  }
  .caseStudy-item .caseStudy-problem {
    grid-column: 1 / span 2;
    margin-left: 0;
    margin-top: 30px;
    text-align: center;
  }
  .caseStudy-item .caseStudy-problem span.fw-medium {
    text-align: left;
    display: block;
    margin-top: 0.6em;
  }
  .step-section .section-bottom {
    margin-left: -1vw;
    margin-bottom: 60px;
    padding: 0.5em 2em;
  }
  .step-section .stepBottom-container {
    width: 100%;
    padding: 0 var(--container-padding);
  }
  .step-section .stepBottom-container > img {
    top: 0;
    bottom: unset;
    transform: none;
  }
  .compareCircle-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .compareCircle-section + .step-section .stepBottom-container > img {
    top: 14%;
    object-fit: cover;
    object-position: top;
    width: 46vw;
    height: 46vw;
  }
  .step-section .section-heading {
    padding: 1vw 4vw;
    border-width: 1vw;
    border-radius: 4vw;
  }
  .step-section .section-heading::before,
  .step-section .section-heading::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translate(-50%, 100%);
    bottom: -1px;
    border-left: 4vw solid transparent;
    border-right: 4vw solid transparent;
    border-top: 4vw solid var(--color-blue);
  }
  .step-section .section-heading::after {
    border-left: 4vw solid transparent;
    border-right: 4vw solid transparent;
    border-top: 4vw solid #fff;
    bottom: 1vw;
  }
  .compareCircle-row {
    width: 100%;
  }
  .compareCircle-row .compare-circle {
    flex: 0 0 calc((100% - 30px) / 3);
    width: calc((100% - 30px) / 3);
  }
  .after-container .after-bottom {
    width: 100%;
    padding-bottom: 60px;
  }
  .beforeAfter-section {
    padding-top: 50px;
  }
  .beforeAfter-section .section-heading .c-orange::before {
    width: 1em;
    height: 1.2em;
    left: -0.6em;
  }
  .landingExplain-top .landingExplain-r .landingExplain-media {
    width: 100%;
    min-width: unset;
  }
  .landingIntro-avatar {
    overflow: hidden;
  }
  .landingIntro-avatar img {
    width: 120%;
    max-width: unset;
    height: 120%;
    top: 0%;
    left: -10%;
    position: absolute;
    max-height: unset;
    object-fit: contain;
    object-position: top;
  }
  .landingIntro-bottomText > *::before,
  .landingIntro-bottomText > *::after {
    content: none;
  }
  .landingIntro-bottomText > .bottomText-top {
    display: none;
  }
  .landingIntro-section .landingIntro-bottom {
    justify-content: flex-start;
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    padding: 30px var(--container-padding);
    padding-bottom: 0;
  }
  .landingIntro-section .landingIntro-bottom > .bottomText-top {
    width: 100%;
  }
  .landingIntro-bottom .landingIntro-bottomText {
    flex: 1 1 56%;
    justify-content: flex-start;
  }
  .landingIntro-bottom .landingIntro-bottomText > .bottomText-bottom {
    width: 120%;
    padding-bottom: 30px;
  }
  .landingIntro-avatar {
    order: 99;
    flex: 0 0 44%;
    display: flex;
    align-items: flex-end;
  }
  .landingIntro-section .landingIntro-bottom > .bottomText-top .br-pc {
    display: none;
  }
  .fw-black {
    font-weight: 800;
  }
  .fs-mb-112 {
    font-size: min(calc(112 * 100vw / 768), 112px);
  }
  .fs-mb-110 {
    font-size: min(calc(110 * 100vw / 768), 110px);
  }
  .fs-mb-90 {
    font-size: min(calc(90 * 100vw / 768), 90px);
  }

  .fs-mb-86 {
    font-size: min(calc(86 * 100vw / 768), 86px);
  }
  .fs-mb-81 {
    font-size: min(calc(81 * 100vw / 768), 81px);
  }
  .fs-mb-80 {
    font-size: min(calc(80 * 100vw / 768), 80px);
  }
  .fs-mb-77 {
    font-size: min(calc(77 * 100vw / 768), 77px);
  }
  .fs-mb-74 {
    font-size: min(calc(74 * 100vw / 768), 74px);
  }
  .fs-mb-71 {
    font-size: min(calc(71 * 100vw / 768), 71px);
  }
  .fs-mb-68 {
    font-size: min(calc(68 * 100vw / 768), 68px);
  }
  .fs-mb-64 {
    font-size: min(calc(64 * 100vw / 768), 64px);
  }
  .fs-mb-60 {
    font-size: min(calc(60 * 100vw / 768), 60px);
  }
  .fs-mb-58 {
    font-size: min(calc(58 * 100vw / 768), 58px);
  }
  .fs-mb-56 {
    font-size: min(calc(56 * 100vw / 768), 56px);
  }
  .fs-mb-55 {
    font-size: min(calc(55 * 100vw / 768), 55px);
  }
  .fs-mb-54 {
    font-size: min(calc(54 * 100vw / 768), 54px);
  }
  .fs-mb-52 {
    font-size: min(calc(52 * 100vw / 768), 52px);
  }
  .fs-mb-50 {
    font-size: min(calc(50 * 100vw / 768), 50px);
  }
  .fs-mb-48 {
    font-size: min(calc(48 * 100vw / 768), 48px);
  }
  .fs-mb-46 {
    font-size: min(calc(46 * 100vw / 768), 46px);
  }
  .fs-mb-45 {
    font-size: min(calc(45 * 100vw / 768), 45px);
  }
  .fs-mb-44 {
    font-size: min(calc(44 * 100vw / 768), 44px);
  }
  .fs-mb-42 {
    font-size: min(calc(42 * 100vw / 768), 42px);
  }
  .fs-mb-41 {
    font-size: min(calc(41 * 100vw / 768), 41px);
  }
  .fs-mb-40 {
    font-size: min(calc(40 * 100vw / 768), 40px);
  }
  .fs-mb-39 {
    font-size: min(calc(39 * 100vw / 768), 39px);
  }
  .fs-mb-38 {
    font-size: min(calc(38 * 100vw / 768), 38px);
  }
  .fs-mb-37 {
    font-size: min(calc(37 * 100vw / 768), 37px);
  }
  .fs-mb-36 {
    font-size: min(calc(36 * 100vw / 768), 36px);
  }
  .fs-mb-35 {
    font-size: min(calc(35 * 100vw / 768), 35px);
  }
  .fs-mb-34 {
    font-size: min(calc(34 * 100vw / 768), 34px);
  }
  .fs-mb-33 {
    font-size: min(calc(33 * 100vw / 768), 33px);
  }
  .fs-mb-32 {
    font-size: min(calc(32 * 100vw / 768), 32px);
  }
  .fs-mb-31 {
    font-size: min(calc(31 * 100vw / 768), 31px);
  }
  .fs-mb-30 {
    font-size: min(calc(30 * 100vw / 768), 30px);
  }
  .fs-mb-28 {
    font-size: min(calc(28 * 100vw / 768), 28px);
  }
  .fs-mb-27,
  .contact-form-container .contact-form .submit-btn {
    font-size: min(calc(27 * 100vw / 768), 27px);
  }
  .fs-mb-26 {
    font-size: min(calc(26 * 100vw / 768), 26px);
  }
  .fs-mb-25 {
    font-size: min(calc(25 * 100vw / 768), 25px);
  }
  .fs-mb-24 {
    font-size: min(calc(24 * 100vw / 768), 24px);
  }
  .fs-mb-22 {
    font-size: min(calc(22 * 100vw / 768), 22px);
  }
  .fs-mb-20 {
    font-size: min(calc(20 * 100vw / 768), 20px);
  }
  .fs-mb-18 {
    font-size: min(calc(18 * 100vw / 768), 18px);
  }
  .fs-mb-14 {
    font-size: min(calc(14 * 100vw / 768), 14px);
  }
  .landingIntro-heading {
    background:
      linear-gradient(var(--color-body), var(--color-body)) 0 13.5vw / 100% 1px
        no-repeat,
      linear-gradient(var(--color-body), var(--color-body)) 0 29vw / 100% 1px
        no-repeat;
  }
  .landingPage-header .landingHeader-l {
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0;
    padding-top: 12px;
  }
  .landingPage-header .landingHeader-l .landingHeader-text {
    margin-right: 0;
    width: 100%;
    text-align: center;
    background-color: var(--color-body);
    color: #fff;
    margin-top: 12px;
  }
  .landingPage-header .landingHeader-l .landingHeader-logo {
    order: -2;
    padding-left: var(--container-padding);
  }
  .landingPage-header .landingHeader-l .landingHeader-crown {
    order: -1;
    padding-top: 0.5em;
    margin-right: var(--container-padding);
    gap: 1vw;
  }
  .landingPage-header .landingHeader-crown .crown-t {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, calc(-36%));
    width: 70%;
    height: auto;
    object-fit: contain;
    object-position: bottom;
  }
  .landingPage-header .landingHeader-crown .crown-l img,
  .landingPage-header .landingHeader-crown .crown-r img {
    width: 3vw;
    height: auto;
  }
  .landingHeader-r {
    display: none;
  }
  .landingIntro-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .beforeAfter-box .box-content {
    grid-template-columns: 100%;
    row-gap: 40px;
    margin-bottom: 40px;
  }
}

/* 1600px〜1830px：1100pxから1200pxへ滑らかに変化 */
@media (min-width: 1600px) and (max-width: 1829.98px) {
  .landingIntro-section .bg-img {
    min-height: calc(43.4783vw + 404.348px);
  }
}

/* 1830px〜2020px：1200pxから1300pxへ滑らかに変化 */
@media (min-width: 1830px) and (max-width: 2019.98px) {
  .landingIntro-section .bg-img {
    min-height: calc(52.6316vw + 236.842px);
  }
}

/* 2020px以上 */
@media (min-width: 2020px) {
  .landingIntro-section .bg-img {
    min-height: 1300px;
  }
}
/* 事例紹介 見出し：超狭幅(〜400px)で「バッジは読みやすいサイズを維持」しつつ、
   見出しテキスト側を折り返してバッジとの重なりを解消する。 */
@media (max-width: 400px) {
  /* バッジ：縮みすぎ防止。最小サイズ・最小フォントを確保 */
  .caseStudy-badge .badge-inner {
    width: clamp(52px, 15vw, 64px);
    min-width: 52px;
    flex-shrink: 0;
    padding: 10px 10px 10px 8px;
    gap: 2px;
  }
  .caseStudy-badge .badge-inner .fs-mb-18 {
    /* 「事例」 */
    font-size: clamp(12px, 3.4vw, 15px);
  }
  .caseStudy-badge .badge-inner .fs-mb-30 {
    /* 番号 */
    font-size: clamp(22px, 6.2vw, 28px);
  }

  /* 見出し：バッジ幅ぶんの余白を確保し、収まらない場合は自然に折り返す */
  .caseStudy-item .caseStudy-heading {
    padding: 12px 10px;
  }
  /* 1件目は既存で padding-left:9vw / white-space:nowrap が当たっているため解除 */
  .caseStudy-item:first-child .caseStudy-heading {
    padding-left: 10px;
    white-space: normal;
  }
  .caseStudy-heading .heading-inner {
    height: auto;
    min-height: 55px;
    display: flex;
    align-items: center;
  }
  .caseStudy-heading .heading-inner > p {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    margin: 0;
    /* 左右均等にバッジ幅ぶんの余白を確保し、見出し全体の中央に見せる。
       左側はバッジ(この範囲での最大60px, -4pxはみ出し)をクリア、右側も同量で対称。 */
    padding-inline: 56px;
    text-align: center;
    font-size: clamp(16px, 4.5vw, 20px);
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: break-word;
  }
}

/* ==========================================================================
   Privacy / 汎用固定ページ（ブロックエディタ本文）
   --------------------------------------------------------------------------
   page-privacy.php（Template Name: Privacy）で使用。
   ブロックエディタで入力した見出し・段落・リスト・リンク等が
   既存LPのデザイン内で崩れずに表示されるようにする。
   ========================================================================== */
.privacy-page {
  color: var(--color-body);
  line-height: 1.9;
}
.privacy-hero {
  padding: clamp(40px, 8vw, 72px) 0 clamp(24px, 5vw, 40px);
  border-bottom: 1px solid var(--color-gray-light);
  margin-bottom: clamp(32px, 6vw, 56px);
}
.privacy-hero .privacy-title {
  margin: 0;
  text-align: center;
  line-height: 1.4;
  font-size: clamp(26px, 5vw, 40px);
  color: var(--color-body);
}
.privacy-content {
  max-width: 880px;
  margin: 0 auto;
  padding-bottom: clamp(56px, 10vw, 100px);
  font-size: clamp(15px, 3.6vw, 16px);
}
/* 見出し */
.privacy-content h2,
.privacy-content h3,
.privacy-content h4,
.privacy-content h5,
.privacy-content h6 {
  color: #4c4948;
}
.privacy-content h2 {
  margin: 2.4em 0 0.8em;
  padding-bottom: 0.4em;
  border-bottom: 2px solid var(--color-body);
  font-size: clamp(20px, 4.6vw, 26px);
  font-weight: 700;
  line-height: 1.5;
}
.privacy-content h3 {
  margin: 2em 0 0.6em;
  font-size: clamp(17px, 4vw, 21px);
  font-weight: 700;
  line-height: 1.5;
}
.privacy-content h4 {
  margin: 1.6em 0 0.5em;
  font-size: clamp(16px, 3.8vw, 18px);
  font-weight: 700;
  line-height: 1.5;
}
.privacy-content > *:first-child {
  margin-top: 0;
}
/* 段落 */
.privacy-content p {
  margin: 0 0 1.4em;
}
/* リスト */
.privacy-content ul,
.privacy-content ol {
  margin: 0 0 1.4em;
  padding-left: 1.5em;
}
.privacy-content ul {
  list-style: disc;
}
.privacy-content ol {
  list-style: decimal;
}
.privacy-content li {
  margin-bottom: 0.5em;
}
.privacy-content li > ul,
.privacy-content li > ol {
  margin: 0.5em 0 0;
}
/* リンク */
.privacy-content a {
  color: var(--color-blue);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  overflow-wrap: break-word;
  word-break: break-word;
}
@media (hover: hover) {
  .privacy-content a:hover {
    opacity: 0.7;
  }
}
/* 引用・区切り・テーブル・画像 */
.privacy-content blockquote {
  margin: 0 0 1.4em;
  padding: 0.8em 1.2em;
  border-left: 4px solid var(--color-gray-light);
  background: #f7f7f7;
}
.privacy-content hr {
  margin: 2.4em 0;
  border: 0;
  border-top: 1px solid var(--color-gray-light);
}
.privacy-content table {
  width: 100%;
  margin: 0 0 1.4em;
  border: 1px solid var(--color-gray-light);
}
.privacy-content th,
.privacy-content td {
  padding: 0.7em 1em;
  border: 1px solid var(--color-gray-light);
  text-align: left;
  vertical-align: top;
}
.privacy-content img {
  height: auto;
}

/* フッターのプライバシーポリシーリンク：既存テキスト色を維持しつつリンク化 */
.landingFooter-content a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
@media (hover: hover) {
  .landingFooter-content a:hover {
    opacity: 0.7;
  }
}

/* ヘッダーロゴ：トップページへのリンク（既存 .landingHeader-logo の flex を継承） */
.landingHeader-logo-link {
  color: inherit;
  text-decoration: none;
}
@media (hover: hover) {
  .landingHeader-logo-link:hover {
    opacity: 0.7;
  }
}

/* ホバーアニメーション未設定の操作要素に共通の透過ホバーを付与 */
.introBox-close,
.client-section .swiper-button,
.privacy-link,
.btn-submit,
.back-button {
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .introBox-close:hover,
  .client-section .swiper-button:not(.swiper-button-disabled):hover,
  .privacy-link:hover,
  .btn-submit:hover,
  .back-button:hover {
    opacity: 0.7;
  }
}