/* =========================================
   共通設定（Variables）
========================================= */
:root {
    /* 1. カラーパレット */
    --bg-base: #F3F3F3;
    --text-muted: #8296A2;
    --text-main: #3F5168;
    --bg-surface: #FFFFFF;
    --bg-sub: #F5FBFF;
    --color-primary: #132B88;
    --partner-tax: #4092E9;
    --color-primary-variant: #2F7BCB;
    --bg-blue-light: #96C3FF;
    --color-accent: #D0AB5B;
    --color-accent-yellow: #FFD900;
    --bg-highlight: #FFFCE2;
    --partner-realestate: #ED9710;
    --partner-admin: #BFA1D3;
    --partner-judicial: #78C09F;
    /* 2. タイポグラフィ（フォント） */
    --font-family-base: 'Noto Sans JP', sans-serif;
    --font-family-en: 'Inter', sans-serif;
    /* 3. 余白（Spacing）のルール */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 40px;
    --space-xl: 80px;
    --space-xxl:120px;
    /* 4. レイアウト幅 */
    --max-width-pc: 1440px;
    --middle-width-pc:1100px;
    --content-width-pc: 800px;
    --padding-sp: 20px;
}

/* =========================================
   共通設定（Base & Utilities）
========================================= */
body {
    font-family: var(--font-family-base);
    color: var(--text-main);
    background-color: var(--bg-surface);
    line-height: 1.6;
    letter-spacing: 0.05em;
}
.wrap-all {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
    -webkit-touch-callout: none; user-select: none;
}
br.pc_none {
    display: inline;
}
br.sp_only {
    display: inline;
}
/* 共通マーカー・ハイライト */
.marker-yellow {
    background: linear-gradient(transparent 60%, var(--color-accent-yellow) 60%);
    font-weight: bold;
}
.highlight-blue {
    color: var(--color-primary-variant);
    font-weight: bold;
}
.text-blue {
    color: var(--color-primary);
    font-weight: bold;
}
.text-gold {
    color: var(--color-accent);
    font-weight: bold;
}
/* 共通：文字の上の点々（圏点） */
.em-dots {
    -webkit-text-emphasis: filled dot var(--color-accent-yellow);
    text-emphasis: filled dot var(--color-accent-yellow);
}
.em-big {
    font-size: 1.2em;
}
.em-bold {
    font-weight: bold;
}
.num {
    font-family: var(--font-family-en);
}
/* CTA */
.common-cta {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* ボタン内の画像もレスポンシブに対応させる */
.common-cta button {
  width: 100%;
  cursor: pointer;
}

/* =========================================
   追従CTA（Floating CTA）
========================================= */
.floating-cta {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 83%;
    max-width:480px; 
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-out;
}
.floating-cta a {
    display: block;
}
.floating-cta.is-show {
    opacity: 1;
    visibility: visible;
}

/* =========================================
   ヘッダー（Header）
========================================= */
.header {
    background-color: #fff;
    padding: var(--space-xs) var(--padding-sp);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    position: relative;
    z-index: 10;
}
.header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header__logo img {
    height: 24px;
    width: auto;
}
.header__banner img {
    height: 32px;
    width: auto;
}

/* =========================================
   ファーストビュー（FV）
========================================= */
.fv {
    position: relative;
    background-color: var(--bg-sub);
    display: flex;
    flex-direction: column;
}
.fv__inner {
    min-height: calc(100svh - 48px);
    background: linear-gradient(to bottom, transparent 70%, var(--bg-sub) 100%), url('../img/fv-sp.webp') no-repeat left center/cover;
    display: flex;
    flex-direction: column;
    padding: 10px 10px 0;
    width: 100%;
}
.fv__copy {
    width: 90%;
    margin: 0 auto;
}
.fv .common-cta {
    margin-top: auto;
}
.fv__note {
    font-size: 12px;
    color: var(--text-muted);
    text-align: right;
    width: 100%;
    padding: 0 var(--padding-sp);
}
@media (max-width: 375px) {
    .fv__inner {
        background: linear-gradient(to bottom, transparent 70%, var(--bg-sub) 100%), url('../img/fv-se.webp') no-repeat left bottom/cover;
        background-size: cover;
    }
    .fv__copy{
        width: 80%;
    }
}

/* =========================================
   お悩み（Trouble）
========================================= */
.trouble {
    background-color: var(--bg-sub);
    padding: var(--space-lg) var(--padding-sp) var(--space-xxl);
    text-align: center;
}
.trouble__lead {
    font-size: 18px;
    font-weight: bold;
    color: var(--color-primary);
}
.trouble__lead span{
    font-size: 22px;
}
.trouble__title {
    font-size: 32px;
    color: var(--color-primary);
    line-height: 1.4;
}
.trouble__header {
    position: relative;
    padding-bottom: 20px;
    margin-bottom: var(--space-md);
    display: inline-block;
}
.trouble__header::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 12px;
    background: url('../img/troube-path.webp') no-repeat center bottom;
    background-size: 100% auto;
}
.trouble-card {
    background-color: #fff;
    border-radius: 16px;
    padding: var(--space-xl) var(--space-md) var(--space-md);
    margin-top: 100px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    text-align: left;
    position: relative;
}
/* カードビジュアル部分（円と人物の重なり） */
.trouble-card__visual {
    position: absolute;
    left:0;
    top: -80px;
}
.trouble-card__circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: var(--partner-judicial);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.trouble-card:nth-child(2) .trouble-card__visual {
    right:0;
    left:auto;
}
.trouble-card:nth-child(2) .trouble-card__visual .trouble-card__person{
    right:var(--space-xxl);
    left:auto;
}
.trouble-card__label {
    font-weight: bold;
    font-size: 20px;
}
.trouble-card__target {
    font-size: 16px;
    line-height: 1.2;
    margin-top: 4px;
}
.trouble-card__person {
    position: absolute;
    bottom: 0;
    left: var(--space-xxl);
    height: 140px;
    width: auto;
}
/* お悩みリスト（チェックマーク） */
.trouble-card__list li {
    position: relative;
    padding-left: 1.8em;
    margin-bottom: 0.8em;
    font-weight: bold;
    line-height: 1.4;
}
.trouble-card__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.1em;
    width: 1.4em;
    height: 1.4em;
    background-color: var(--color-accent-yellow);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
}

/* =========================================
   事実（Fact）
========================================= */
.fact {
    position: relative;
    background-color: var(--bg-base);
    padding: var(--space-lg) var(--padding-sp) var(--space-xxl);
    text-align: center;
    z-index: 5;
}
.fact::before,
.fact::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 120vw;
    height: 80px;
    background-color: var(--bg-base);
    border-radius: 50%;
    z-index: -1;
}
.fact::before {
    top: -39px;
}
.fact::after {
    bottom: -39px;
}
.fact__inner {
    position: relative;
    z-index: 2;
}
.fact__header {
    margin-bottom: var(--space-md);
    margin-top: -105px;
}
.fact__title {
    font-size: 48px;
    color: var(--color-primary);
    font-weight: bold;
    position: relative;
    margin-bottom: var(--space-sm);
    line-height: 1;
}
.fact__lead {
    font-size: 32px;
    font-weight: bold;
    color: var(--color-primary);
}
/* アイコングリッド（2列） */
.fact__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 12px;
    margin-bottom: var(--space-lg);
    max-width: 340px; /* アイコン2つ分が綺麗に並ぶ理想の幅。デザインに応じて320px〜360px辺りで微調整可 */
    margin-left: auto !important;  /* 左右中央寄せにする */
    margin-right: auto !important; /* 左右中央寄せにする */
    width: 100%;
}
.fact__item {
    text-align: center;
}
.fact__icon {
    background-color: #fff;
    border-radius: 50%;
    width: 130px;
    height: 130px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.fact__icon img {
    width: 50%;
    height: auto;
}
.fact__label {
    display: inline-block;
    background-color: var(--color-primary);
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    padding: 6px 16px;
    border-radius: 999px;
    margin-top: -16px;
    position: relative;
    z-index: 2;
    width: 136px;
}
.fact__desc {
    font-size: 18px;
    font-weight: bold;
    margin-top: var(--space-md);
    line-height: 1.8;
    white-space: nowrap;
}
.fact__desc .marker-yellow{
    font-size: 24px;
}
.fact__illust {
    margin: 0 auto;
}

/* =========================================
   煽り（Agitation）
========================================= */
.agitation {
    background-color: var(--bg-sub);
    text-align: center;
    position: relative;
    padding: var(--space-lg) var(--padding-sp);
}
.agitation::after {
    content: "";
    position: absolute;
    bottom: -39px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    background-color: transparent;
    border-style: solid;
    border-width: 40px 50vw 0 50vw;
    border-color: var(--bg-sub) transparent transparent transparent;
    filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.08));
    z-index: 1;
    clip-path: polygon(-10% 0, 110% 0, 110% 200%, -10% 200%);
}
/* 吹き出し */
.agitation__bubble {
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    border: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    border-radius: 100px;
    padding: var(--space-md) var(--space-lg);
    display: inline-block;
    position: relative;
    margin-bottom: var(--space-md);
    font-weight: bold;
    font-size: 28px;
    color: var(--color-primary);
    margin-top: -80px;
    z-index: 10;
    line-height: 1.2;
}
.agitation__bubble::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: #fafafa transparent transparent;
}
.agitation__illust {
    margin: 0 auto var(--space-lg);
}
.agitation__text {
    font-weight: bold;
    line-height: 1.6;
}
/* ちょっと待って！（テキスト回転と装飾） */
.agitation__alert {
    position: relative;
    display: inline-block;
    color: var(--color-accent);
    font-size: 28px;
    font-weight: bold;
    transform: rotate(-5deg);
    margin: var(--space-md) 0;
}
.agitation__alert::after {
    content: "";
    position: absolute;
    top: -15px;
    right: -25px;
    width: 40px;
    height: 40px;
    background: url('../img/agitation-path.webp') no-repeat center/cover;
}
.agitation__conclusion {
    margin-top: var(--space-md);
    font-size: 20px;
    line-height: 1.8;
}
.agitation__conclusion-text {
    font-weight: bold;
    color: var(--color-primary);
}

/* =========================================
   サービス概要（About）
========================================= */
.about {
    background: url('../img/about-bg.webp') no-repeat center top/cover;
    padding: var(--space-xl) var(--padding-sp);
    text-align: center;
}
.about__heaeder {
    text-align: center;
}
.about__lead {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: var(--space-xs);
}
.about__logo{
    display: inline-block;
}
.about__logo img {
    width: 300px;
    margin-bottom: var(--space-md);
}
.about__illust {
    margin-bottom: var(--space-md);
    position: relative;
}
.about__note {
    font-size: 12px;
    text-align: right;
    color: var(--text-muted);
    margin-top: 4px;
}
.about__text {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.8;
    margin-bottom: var(--space-md);
}

/* =========================================
   事例（Case）
========================================= */
.case {
    background-color: var(--bg-blue-light);
    padding: var(--space-xl) 0;
    text-align: center;
    overflow: hidden;
}
/* タイトル・ヘッダーまわり */
.case__header {
    margin-bottom: var(--space-lg);
    color: #fff;
    padding-left: var(--padding-sp);
    padding-right: var(--padding-sp);
}
.case__title-blocks {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: var(--space-sm);
}
.case__title-blocks span {
    background-color: var(--bg-highlight);
    color: var(--color-primary);
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36px;
    font-weight: bold;
    border-radius: 4px;
}
.case__title-text {
    font-size: 28px;
    line-height: 1.5;
}
.case__title-text span {
    font-size: 32px;
}
.case__note {
    text-align: right;
    color: #fff;
    font-size: 12px;
    position: relative;
    z-index: 3;
    padding: var(--padding-sp);
}
.splide__track {
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: -20px;
    margin-bottom: -20px;
}
.case__slider .splide__pagination {
    position: relative;
    bottom: 0;
    margin-top: var(--space-sm);
    gap: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.case__slider .splide__pagination li {
    margin: 0;
    display: inline-flex;
}
.case__slider .splide__pagination li .splide__pagination__page {
    width: 10px;
    height: 10px;
    background: #fff;
    opacity: 0.5;
    border-radius: 50%;
    border: none;
    padding: 0;
    transition: all 0.3s;
    cursor: pointer;
}
.case__slider .splide__pagination li .splide__pagination__page.is-active {
    background: var(--color-primary);
    opacity: 1;
    transform: scale(1.1);
}
/* 事例カード（Case Card）の中身 */
.case-card {
    background-color: #fff;
    border-radius: 12px;
    padding: var(--space-md);
    position: relative;
    text-align: left;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.case-card__badge {
    position: absolute;
    top: -20px;
    left: -15px;
    background-color: var(--color-primary);
    color: #fff;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.1;
    z-index: 2;
}
.case-card__badge .num {
    font-size: 28px;
}
.case-card__thumb {
    margin-bottom: var(--space-sm);
    border-radius: 8px;
    overflow: hidden;
    height: 40vw;
}
.case-card__title {
    font-size: 20px;
    color: var(--color-primary);
    font-weight: bold;
    text-align: center;
    margin-bottom: var(--space-sm);
    line-height: 1.4;
}
.case-card__bad{
    margin-top: var(--space-sm);
    margin-bottom: auto;
}
.case-card__good {
    margin-bottom: 0;
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px dashed var(--bg-base);
}
.case-card__subhead {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: var(--space-xs);
    position: relative;
    z-index: 2;
}
.case-card__bad .case-card__subhead::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: url('../img/case-bad.svg') no-repeat center center/contain;
    width: 50px;
    height: 50px;
    z-index: -1;
}
.case-card__good .case-card__subhead::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: url('../img/case-good.svg') no-repeat center center/contain;
    width: 50px;
    height: 50px;
    z-index: -1;
}
.case-card__desc {
    font-size: 16px;
    color: var(--text-main);
    margin-bottom: var(--space-xs);
}
.case-card__result {
    text-align: right;
    font-weight: bold;
    font-size: 16px;
}
.case-card__result .val {
    font-size: 24px;
    font-family: var(--font-family-en);
}
.case-card__result .highlight {
    color: var(--color-accent);
    font-size: 32px;
}

/* =========================================
   プラン（Plan）
========================================= */
.plan {
    background: url('../img/plan-bg.webp') no-repeat center top/cover;
    padding: var(--space-xl) var(--padding-sp);
    text-align: center;
}
.plan__header {
    margin-bottom: var(--space-md);
}
.plan__lead {
    font-size: 28px;
    font-weight: bold;
    color: var(--text-main);
    display: inline-block;
    padding: 0 0 var(--space-xs);
    margin: 0 0 var(--space-xs);
    border-bottom: 1px solid var(--text-main);
}
.plan__title {
    font-size: 36px;
    color: var(--color-primary);
    margin: var(--space-xs) 0;
    line-height: 1.4;
}
.plan__documents {
    border-radius: 12px;
    margin-bottom: var(--space-lg);
}
.plan-doc-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: var(--space-md);
}
.plan-doc-row--shared {
    display: block;
}
.plan-doc__bubble {
    background-color: #fff;
    border-radius: 20px;
    padding: 8px;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 8px;
    position: relative;
    border: 1px solid var(--text-main);
    color: var(--text-main);
}
.plan-doc__bubble::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 5px 0;
    border-style: solid;
    border-color: var(--text-main) transparent transparent;
}
.plan-doc__bubble--wide {
    margin-bottom: 16px;
}
.plan-doc__bubble--wide::before, .plan-doc__bubble--wide::after {
    content: "";
    position: absolute;
    bottom: -6px;
    border-width: 6px 5px 0;
    border-style: solid;
    border-color: var(--text-main) transparent transparent;
}
.plan-doc__bubble--wide::before { left: 25%; transform: translateX(-50%); }
.plan-doc__bubble--wide::after { left: 75%; transform: translateX(-50%); }
.plan-doc-row__cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.plan-doc__figure {
    position: relative;
    width: 80%;
    margin: 0 auto;
}
.plan-doc__label {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 132%;
    color: #fff;
    font-size: 13px;
    padding: 4px 0;
    clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);
}
.plan-doc__label--orange { background-color: #F89E34; }
.plan-doc__label--blue { background-color: #5D9CEC; }
.plan-doc__label--purple { background-color: #C092D2; }
.plan-doc__label--green { background-color: #79C2A0; }
.plan__checklist {
    text-align: left;
    margin: 0 auto var(--space-md);
    display: inline-block;
}
.plan__checklist li {
    color: var(--color-primary);
    position: relative;
    padding-left: 36px;
    margin-bottom: var(--space-xs);
    list-style: none;
    font-weight: bold;
    font-size: 20px;
    line-height: 24px;
}
.plan__checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    background-color: var(--color-primary);
    border-radius: 50%;
}
.plan__checklist li::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 4px;
    width: 6px;
    height: 12px;
    border-style: solid;
    border-width: 0 2px 2px 0;
    border-color: #fff;
    transform: rotate(45deg);
}
.plan__desc {
    font-weight: bold;
    line-height: 1.8;
    margin-bottom: var(--space-md);
    white-space: nowrap;
}
.plan__conclusion {
    margin-bottom: var(--space-sm);
}
.plan__conclusion-title {
    font-size: 40px;
    margin-bottom: var(--space-sm);
}
.plan__conclusion-text {
    font-weight: bold;
    line-height: 1.8;
}
.plan__conclusion-highlight {
    color: var(--color-primary-variant);
    font-size: 28px;
    white-space: nowrap;
    line-height: 1.5;
}
.plan__notes {
    font-size: 12px;
    color: var(--text-muted);
    text-align: right;
    margin-bottom: var(--space-md);
}

/* =========================================
   比較（Comparison）※SP版ベース設定（PCにも引き継がれます）
========================================= */
.comparison {
    background-color: var(--bg-sub);
    padding: var(--space-xl) var(--padding-sp) 0;
    text-align: center;
}
.comparison__inner {
    max-width: var(--content-width-pc);
    margin: 0 auto;
    background: #fff;
    padding: 10px;
    border-radius: 12px;
}
.comparison__header {
    margin-bottom: var(--space-lg);
}
.comparison__title {
    font-size: 32px;
    color: var(--color-primary);
    font-weight: bold;
    line-height: 1.4;
    margin-top: -40px;
}
.comparison__title span {
    font-size: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.comparison__title span::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 20px;
    background: url('../img/comparison-path-l.svg') no-repeat center/contain;
}
.comparison__title span::after {
    content: "";
    display: inline-block;
    width: 24px;
    height: 20px;
    background: url('../img/comparison-path-r.svg') no-repeat center/contain;
}
/* 比較テーブル */
.comparison-table {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: 1px solid #e1e8ed;
}
.comparison-table__row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    border-bottom: 1px solid #e1e8ed;
}
.comparison-table__row:last-child {
    border-bottom: none;
}

/* 💡 修正：セルの高さを100%持たせ、Grid内でも綺麗なFlexboxとして上下左右中央に揃えるベース設定 */
.comparison-table__cell {
    padding: var(--space-sm) 4px;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* 上下中央寄せ */
    align-items: center !important;    /* 左右中央寄せ */
    font-size: 10px;
    line-height: 1.3;
    color: var(--text-main);
    background-color: #fff;
    border-right: 1px solid #e1e8ed;
    height: 100% !important; /* 高さを親の行に100%同期 */
}
.comparison-table__cell:last-child {
    border-right: none;
}
.comparison-table__row--header .comparison-table__cell {
    font-weight: bold;
    font-size: 12px;
    padding: var(--space-sm) 2px;
}
.comparison-table__cell--label {
    font-weight: bold;
    background-color: #ffffff;
    align-items: center;
    text-align: center;
}
.comparison-table__cell--highlight {
    background-color: var(--bg-highlight);
    position: relative;
}
.comparison-table__logo {
    display: inline-block !important;
    width: 100% !important;             /* セルの幅いっぱいに広げる */
    max-width: 90px !important;         /* 👈 90px以上には大きくしない */
    height: auto !important;
    margin: 0 auto !important;          /* 中央寄せ */
    padding: 0 !important;
}

.comparison-table__logo img,
.comparison-table__logo source {
    display: block !important;
    width: 100% !important;             /* 👈 セル幅に合わせて伸縮させる */
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
}

.comparison-table__text {
    margin-top: 6px;
    text-align: center;
}
/* 〇・△・◎（記号パーツ） */
.comparison-table__symbol {
    display: inline-block;
    position: relative;
    flex-shrink: 0;
}
.comparison-table__symbol--circle {
    width: 32px;
    height: 32px;
    border: 3px solid #8296A2;
    border-radius: 50%;
}
.comparison-table__symbol--triangle {
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-bottom: 30px solid #8296A2;
}
.comparison-table__symbol--triangle::after {
    content: "";
    position: absolute;
    top: 4px;
    left: -14px;
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 23px solid #fff;
}
.comparison-table__symbol--double-circle {
    width: 34px;
    height: 34px;
    border: 4px solid var(--partner-realestate);
    border-radius: 50%;
}
.comparison-table__symbol--double-circle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border: 3px solid var(--partner-realestate);
    border-radius: 50%;
}
.comparison__note {
    font-size: 12px;
    color: var(--text-muted);
    text-align: right;
    margin-top: var(--space-xs);
}
.comparison__conclusion {
    margin-top: var(--space-lg);
    position: relative;
    padding-bottom: var(--space-xxl);
}
.comparison__conclusion-text {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.6;
    margin-bottom: var(--space-md);
    position: relative;
    z-index: 5;
    white-space: nowrap;
}
.comparison__conclusion-text span {
    display: inline-block;
}
.comparison__illust {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    height: 130px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;
}
.comparison__illust-img {
    height: 100%;
    width: auto;
}

/* =========================================
   実績（Record）
========================================= */
.record {
    background-color: var(--color-primary-variant);
    background-image: url('../img/record-bg.svg');
    padding: var(--space-xl) var(--padding-sp);
    text-align: center;
    color: #fff;
}
.record__title {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: var(--space-md);
}
.record__title-sub {
    font-size: 40px;
    font-weight: bold;
    margin-bottom: var(--space-sm);
    line-height: 1;
}
.record__badges {
    margin-bottom: var(--space-md);
}
.record__note {
    font-size: 12px;
    text-align: right;
    opacity: 0.8;
}

/* =========================================
   クライアント・専門家（Client）
========================================= */
.client {
    background-color: var(--bg-sub);
    padding: var(--space-xl) var(--padding-sp);
    text-align: center;
}
.client__title {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
    white-space: nowrap;
}
.client__title-blue {
    color: var(--color-primary-variant);
    font-size: 28px;
}
.client__number-block {
    display: inline-block;
    position: relative;
    padding: 0 40px;
    margin-bottom: var(--space-xs);
}
.client__number-block::before, .client__number-block::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
}
.client__number-block::before {
    left: 0;
    background-image: url('../img/client-path-l.svg');
}
.client__number-block::after {
    right: 0;
    background-image: url('../img/client-path-r.svg');
}
.client__number-text {
    font-size: 24px;
    font-weight: bold;
    color: var(--color-accent);
    display: inline-block;
    position: relative;
}
.client__number-val {
    font-size: 48px;
    font-family: var(--font-family-en);
}
.client__number-note {
    font-size: 12px;
    position: absolute;
    top: 20%;
    right: 0;
    line-height: 1;
}
.client__note {
    font-size: 12px;
    color: var(--text-muted);
    text-align: right;
}
.client__feature-title {
    font-size: 40px;
    margin-bottom: var(--space-xs);
}
.client__feature-text {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.6;
}
.client__feature-text span{
    font-size: 24px;
}

/* =========================================
   選べる理由（Selection）
========================================= */
.selection {
    background: url('../img/selection-bg.svg');
    background-size: 200% auto;
    background-repeat: repeat;
    padding: 200px var(--padding-sp) var(--space-xl);
    position: relative;
}
.selection__header {
    text-align: center;
    margin-bottom: var(--space-lg);
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translate(-50%);
    white-space: nowrap;
}
.selection__bubble {
    display: inline-block;
    border: 2px solid var(--color-primary);
    background-color: #fff;
    color: var(--color-primary);
    font-size: 40px;
    font-weight: bold;
    padding: 4px 24px;
    border-radius: 8px;
    position: relative;
    margin-bottom: 16px;
}
.selection__bubble::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px 6px 0;
    border-style: solid;
    border-color: var(--color-primary) transparent transparent;
}
.selection__title {
    font-size: 32px;
    color: var(--color-primary);
    line-height: 1.4;
}
.selection-case {
    position: relative;
    margin-bottom: 100px;
}
.selection-case__content {
    background-color: #fff;
    border-radius: 12px;
    padding: var(--space-lg) var(--space-sm) var(--space-xl);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    position: relative;
    z-index: 1;
}
.selection-case__num {
    font-size: 40px;
    color: var(--text-muted);
    font-weight: bold;
    margin-bottom: var(--space-xs);
    position: absolute;
    top: -1.5rem;
    line-height: 1;
}
.selection-case__num .num {
    font-size: 56px;
}
.selection-case__trouble {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.6;
    margin-bottom: var(--space-xs);
    white-space: nowrap;
}
.selection-case__flex-box {
    display: flex;
    flex-direction: column;
    align-items: normal;
    gap: var(--space-xs);
    width: 100%;
}
.selection-case__arrow {
    text-align: center;
    margin-bottom: var(--space-xs);
}
.selection-case__arrow img{
    margin: 0 auto;
}
.selection-case__labels {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: var(--space-xs);
    white-space: nowrap;
}
.selection-label {
    display: inline-block;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 16px;
}
.selection-label--realestate { background-color: var(--partner-realestate); }
.selection-label--tax { background-color: var(--partner-tax); }
.selection-label--judicial { background-color: var(--partner-judicial); }
.selection-label--admin { background-color: var(--partner-admin); }
.selection-case__desc {
    font-size: 16px;
    font-weight: medium;
}
.selection-case__desc-list dt {
    font-size: 16px;
    font-weight: bold;
    margin-top: 4px;
}
.selection-case__desc-list dd {
    font-size: 16px;
}
.selection-case__illust {
    position: absolute;
    bottom: -56px;
    left: 10px;
    z-index: 2;
    height: 130px;
}
.selection-case__illust img{
    height: 100%;
    width: auto;
}
.selection-case__illust--right {
    left: auto;
    right: 10px;
}
.selection__conclusion {
    text-align: center;
    margin-top: var(--space-lg);
}
.selection__conclusion-text {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.8;
    margin-bottom: var(--space-xs);
}
.selection__conclusion-text span{
    font-size: 28px;
    background-color: var(--partner-tax);
    color: #fff;
}
.selection__conclusion-lead {
    font-size: 32px;
    line-height: 1.4;
}

/* =========================================
   お客様の声（Voice） - Splide用
========================================= */
.voice {
    background-color: var(--bg-highlight);
    padding: var(--space-xl) 0 180px;
    overflow: hidden;
}
.voice__inner {
    max-width: var(--content-width-pc);
    margin: 0 auto;
}
.voice__header {
    text-align: center;
    margin-bottom: var(--space-md);
    padding: 0 var(--padding-sp);
}
.voice__title {
    font-size: 28px;
    line-height: 1.5;
}
.voice__title span {
    font-size: 20px;
}
/* Splideスライダー・UIの調整 */
.voice__slider {
    padding-top: 0;
    padding-bottom: 40px;
}
.voice__slider .splide__track {
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-top: -15px;
    margin-bottom: -15px;
}
.voice__slider .splide__pagination {
    position: relative;
    bottom: 0;
    margin-top: var(--space-md);
    gap: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.voice__slider .splide__pagination li {
    margin: 0;
    display: inline-flex;
}
.voice__slider .splide__pagination li .splide__pagination__page {
    width: 10px;
    height: 10px;
    background: var(--bg-blue-light);
    opacity: 0.5;
    border-radius: 50%;
    border: none;
    padding: 0;
    transition: all 0.3s;
    cursor: pointer;
}
.voice__slider .splide__pagination li .splide__pagination__page.is-active {
    background: var(--partner-tax);
    opacity: 1;
    transform: scale(1.1);
}
/* お客様の声 カード中身 */
.voice-card {
    background-color: #fff;
    border-radius: 12px;
    padding: var(--space-md);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    height: 100%;
}
.voice-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-sm);
}
.voice-card__profile {
    text-align: left;
}
.voice-card__title {
    font-size: 18px;
    line-height: 1.4;
    margin-bottom: 4px;
}
.voice-card__name {
    font-size: 16px;
    font-weight: bold;
    color: var(--text-main);
}
.voice-card__illust {
    height: 80px;
    flex-shrink: 0;
}
.voice-card__illust img{
    height: 100%;
    width: auto;
}
.voice-card__text {
    font-size: 16px;
    line-height: 1.6;
    text-align: justify;
}
.voice__note {
    font-size: 12px;
    text-align: right;
    padding: 0 var(--padding-sp);
    margin-top: var(--space-sm);
}

/* =========================================
   2大特典（Present）
========================================= */
.present {
    background-color: var(--bg-blue-light);
    padding: var(--space-lg) var(--padding-sp);
    text-align: center;
    position: relative;
    color: #fff;
}
.present__inner{
    border-radius: 12px;
    padding: 60px 0 var(--space-md);
    background: #fff;
    margin-top: -180px;
    margin-bottom: var(--space-lg);
    position: relative;
    z-index: 2;
}
.present__badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    z-index: 10;
}
.present__badge span {
    background-color: var(--color-primary-variant);
    color: #fff;
    font-weight: bold;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
}
.present__badge span:not(:first-child) {
    margin-left: -10px;
}
.present__header {
    margin-bottom: var(--space-md);
}
.present__lead {
    color: var(--color-accent);
    font-size: 24px;
    font-weight: bold;
    margin-bottom: var(--space-xs);
    display: inline-flex;
    align-items: end;
    justify-content: center;
    gap: 8px;
}
.present__lead::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 20px;
    background: url('../img/present-path-l.svg') no-repeat center/contain;
}
.present__lead::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 20px;
    background: url('../img/present-path-r.svg') no-repeat center/contain;
}
.present__title-image {
    max-width: 105%;
    width: 105%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 auto;
    display: block;
}
.present__title-image img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.present-item {
    background-color: #fff;
    color: var(--text-main);
    border-radius: 12px;
    padding: var(--space-sm);
    margin-bottom: var(--space-sm);
    text-align: left;
    display: flex;
    flex-direction: column;
}
.present-item__content {
    display: contents;
}
.present-item .present-item__header { order: 1; }
.present-item .present-item__illust { order: 2; margin: 16px auto; }
.present-item .present-item__text   { order: 3; }
.present-item__header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: var(--space-xs);
}
.present-item__num {
    color: var(--color-accent);
    font-size: 48px;
    font-family: var(--font-family-en);
    font-weight: bold;
    line-height: 1;
}
.present-item__title {
    font-size: 20px;
    color: var(--color-primary-variant);
    font-weight: bold;
    line-height: 1.4;
    white-space: nowrap;
}
.present-item__illust {
    max-width: 180px;
}
.present-item__text {
    font-size: 16px;
    line-height: 1.6;
    text-align: justify;
}
.present__note {
    font-size: 12px;
    text-align: center;
    margin-bottom: var(--space-md);
    color: var(--text-main);
}

/* =========================================
   Step & FAQ（共通ラッパー付き）
========================================= */
.step-faq-wrapper {
    background: url('../img/step-bg.webp') repeat;
}
/* =========================================
   ステップ（Step）ヘッダー回り
   ========================================= */
.step {
    padding: var(--space-lg) var(--padding-sp);
}
.step__header {
    text-align: center;
    margin-bottom: var(--space-xl);
}
.step__lead {
    font-size: 24px;
    font-weight: bold;
    color: var(--text-main);
}
.step__title {
    font-size: 32px;
    color: var(--color-primary);
    /* 💡 h2自体はテキストを中央に集めるためのflexを維持 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 💡 新設：テキストの文字幅ぴったりに縮む、新しい疑似要素の「基準の箱」 */
.step__title-inner {
    position: relative;
    display: inline-flex; /* 文字幅ぴったりに縮めつつ、中の数字の上下中央を揃える */
    align-items: center;
    padding-left: 20px; /* イラストが文字に被らないよう、左側に適度な余白を確保 */
}

.step__title-num {
    font-size: 56px;
    font-family: var(--font-family-en);
    padding: 0 4px;
}

/* 💡 核心：イラストをh2ではなく、新設したinnerの左上に固定 */
.step__title-inner:before {
    content: "";
    display: inline-block;
    width: 50px;
    height: 50px;
    background: url(../img/step-path.svg) no-repeat center / contain; /* 綺麗に収まるようcenter/containを推奨 */
    border-radius: 50%;
    position: absolute;
    left: -25px; /* 💡 テキストの左端を基準にして狙った位置に配置（適宜微調整してください） */
    top: -10px;  /* 💡 文字より少し上に飛び出るように（適宜微調整してください） */
}
/* 初心者マーク型ステップカード */
.step-card {
    position: relative;
    margin-bottom: 50px;
    padding-top: 40px;
    text-align: center;
}
.step-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(0 0, 50% 10%, 100% 0, 100% 88%, 50% 100%, 0 88%);
    z-index: 1;
}
.step-card:nth-child(1)::before { background-color: var(--bg-blue-light); }
.step-card:nth-child(2)::before { background-color: var(--partner-tax); }
.step-card:nth-child(3)::before { background-color: var(--color-primary-variant); }
.step-card__illust {
    max-width: var(--space-xxl);
    margin: 0 auto var(--space-sm);
    margin-top: -70px;
    position: relative;
    z-index: 5;
}
.step-card__num {
    font-family: var(--font-family-en);
    color: var(--color-primary);
    font-size: 72px;
    font-weight: bold;
    line-height: 1;
    text-align: left;
    text-shadow: 
        2px  2px 0 #fff,
       -2px  2px 0 #fff,
        2px -2px 0 #fff,
       -2px -2px 0 #fff,
        0px  2px 0 #fff,
        0px -2px 0 #fff,
        2px  0px 0 #fff,
       -2px  0px 0 #fff;
    position: absolute;
    top: 0;
    left: 4px;
    transform: translateY(-45%);
    z-index: 10;
}
.step-card__content {
    position: relative;
    z-index: 5;
    color: #fff;
    padding: 0 var(--space-md) 60px;
}
.step-card__title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: var(--space-xs);
}
.step-card__text {
    font-size: 16px;
    line-height: 1.5;
    text-align-last: left;
}
/* FAQ */
.faq {
    padding: 0 var(--padding-sp) var(--space-lg);
}
.faq__box {
    background-color: #fff;
    border: 3px solid var(--color-primary);
    border-radius: 12px;
    padding: var(--space-md);
}
.faq__header {
    text-align: center;
    margin-bottom: var(--space-md);
}
.faq__en {
    color: var(--text-muted);
    font-family: var(--font-family-en);
    font-weight: bold;
}
.faq__title {
    font-size: 24px;
    color: var(--color-primary);
    font-weight: bold;
}
.faq__item {
    margin-bottom: var(--space-md);
}
.faq__q {
    font-size: 18px;
    font-weight: bold;
    color: var(--color-primary);
    padding-left: 50px;
    position: relative;
    margin-bottom: var(--space-sm);
    line-height: 1.4;
}
.faq__q::before {
    content: "Q";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--color-primary);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-family: var(--font-family-en);
}
.faq__a {
    font-size: 16px;
    color: var(--text-main);
    line-height: 1.6;
}

/* =========================================
   最後の一押し（Push）
========================================= */
.push {
    background-color: var(--bg-highlight);
    padding: var(--space-lg) var(--padding-sp) 0;
    text-align: center;
}
.push__lead {
    font-weight: bold;
    line-height: 1.6;
    margin-bottom: var(--space-md);
}
.push__title {
    font-size: 22px;
    line-height: 1.5;
    margin-bottom: var(--space-lg);
}
.push .common-cta {
    margin-bottom: var(--space-md);
}
.push__illust img {
    margin: 20px auto -20px;
}

/* =========================================
   安心・信頼（Trust）
========================================= */
.trust {
    background-color: var(--bg-sub);
    padding: var(--space-lg) var(--padding-sp);
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: var(--space-md);
}
.trust-item:last-child {
    margin-bottom: 0;
}
.trust-item__logo {
    flex-shrink: 0;
    text-align: center;
    background-color: #fff;
}
.trust-item.ssl figure{
    width: 115px;
    min-width: 115px;
}
.trust-item.privacy figure{
    width: 75px;
    min-width: 75px;
}
.trust-item__text {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-main);
}

/* =========================================
   フッター（Footer）
========================================= */
.footer {
    background-color: var(--bg-blue-light);
    padding: var(--space-lg) var(--padding-sp) calc(var(--space-xl) + 20px);
    text-align: center;
    color: #fff;
}
.footer__nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: var(--space-lg);
    text-align: left;
    font-size: 12px;
}
.footer__nav a {
    color: #fff;
    text-decoration: none;
}
.footer__logo {
    margin-bottom: var(--space-md);
    display: inline;
}
.footer__logo img {
    width: 250px;
    margin: 0 auto;
    margin-bottom: var(--space-md);
}
.footer__copyright {
    font-size: 12px;
    font-family: var(--font-family-en);
    opacity: 0.8;
}
/* グローバルナビ */
.gn_item a img {
    display: inline-block!important
}

/* 1. デフォルト（〜479px スマホ時）の設定 */
.gn_button {
    box-sizing: border-box;
    position: fixed;
    left: 0;
    width: 55px;
    height: 70px;
    border-radius: 0 5px 0 0;
    background-color: rgba(255, 255, 255, 1);
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    z-index: 9999;
    cursor: pointer;

    /* 初期状態：左側に隠して透明にする */
    transform: translate(-100%, 0);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* JSで .show クラスがついた時（FV通過時）に表示 */
.gn_button.show {
    transform: translate(0, 0);
    opacity: 1;
}


/* =========================================
   Tablet
========================================= */
@media (min-width: 480px) {
    br.sp_only {
        display: none;
    }
    .common-cta{
        max-width: 480px;
    }
    .fv__inner{
        background: url('../img/fv-tb.webp') no-repeat center center/cover;
    }
    .fv__copy {
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        max-width: 360px;
        z-index: 5;
    }
    .selection-case__trouble{
        white-space: normal;
    }
    .gn_button {
        bottom: 0 !important;
        transform: translate(0, 0) !important;
        opacity: 1 !important;
    }
    .floating-cta{
        left: 50%;
        transform: translate(-50%, 0);
        cursor: pointer;
    }
}

/* =========================================
   PC
========================================= */
@media (min-width: 768px) {
    /* 共通ユーティリティ */
    br.pc_none {
        display: none !important;
    }
    .common-cta{
        max-width: 720px;
    }
    .floating-cta button, .common-cta button {
        display: inline-block; /* 💡 transitionやtransformを正常に効かせるために必須 */
        transition: transform 0.3s ease; /* 💡 0.3秒かけて滑らかに変化させる */
    }

    .floating-cta button:hover, .common-cta button:hover {
        transform: scale(1.05); /* 💡 ホバー時に元のサイズの1.05倍（5%）大きくする */
    }
    .gn_button{
        display: none;
    }
    /* 追従CTA（PC時は右端に固定） */
    .floating-cta {    
        left: auto;         
        right: 0;        
        transform: translateY(100%); 
        bottom: 0; 
    }
    .floating-cta.is-show {
        transform: translateY(0);
    }

    /* ヘッダー（Header） */
    .header__inner {
        max-width: var(--middle-width-pc);
        margin: 0 auto;
    }
    .header__logo img {
        height: 32px;
    }
    .header__banner img {
        height: 40px;
        width: auto;
    }

    /* =========================================
       ファーストビュー（FV）
       ========================================= */
    .fv {
        position: relative;
        width: 100%;
        background-color: var(--bg-sub);
    }

    .fv__inner {
        max-width: var(--max-width-pc); 
        margin: 0 auto;
        background: url('../img/fv-pc.webp') no-repeat right top/cover;
        aspect-ratio: 1000 / 515; 
        min-height: auto;
        padding: 0;
        position: relative; 
    }
    .fv__copy {
        position: absolute;
        top: 7%;
        left: 10%;
        transform: translate(0);
        width: 40%;
        max-width: none;
        z-index: 5;
    }

    .fv .common-cta {
        position: absolute;
        bottom: 0; 
        left: 50%;
        width: 50%;
        transform: translateX(-50%);
        margin: 0 !important;
        z-index: 10;
    }

    .fv__note {
        width: 100%;
        max-width: 1440px;
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
    }

    /* =========================================
       お悩み（Trouble）
       ========================================= */
    .trouble {
        padding: var(--space-xl) var(--space-sm) 280px;
    }

    .trouble__inner {
        max-width: 900px;
        margin: 0 auto;
    }

    .trouble__header {
        margin: 0 0 var(--space-lg);
    }

    .trouble-cards-wrapper {
        display: flex;
        flex-direction: column; 
        gap: 60px;              
        margin-top: 100px;
    }

    .trouble-card {
        display: flex;
        align-items: baseline;    
        gap: 40px;              
        background-color: transparent; 
        box-shadow: none;       
        padding: 0;
        margin-top: 0;
        width: 100%;
    }

    .trouble-card:nth-child(1) {
        margin-bottom: var(--space-xl);
        padding-right: var(--space-lg);
    }

    .trouble-card:nth-child(2) {
        flex-direction: row-reverse;
        padding-left: var(--space-lg);
    }

    .trouble-card__visual {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        flex-shrink: 0; 
    }

    .trouble-card__list {
        background-color: #fff;
        border-radius: 16px;
        padding: var(--space-lg);
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        position: relative; 
        width: 70%;
        max-width: 600px;
    }
    .trouble-card:nth-child(1) .trouble-card__list{
        margin-left: var(--space-xl);
    }
    .trouble-card:nth-child(2) .trouble-card__list{
        margin-right: var(--space-xl);
    }
    .trouble-card__list::before {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-style: solid;
        z-index: 2;
    }
    .trouble-card:nth-child(1) .trouble-card__list::before {
        left: -15px; 
        border-width: 12px 16px 12px 0;
        border-color: transparent #ffffff transparent transparent; 
    }
    .trouble-card:nth-child(2) .trouble-card__list::before {
        right: -15px; 
        border-width: 12px 0 12px 16px;
        border-color: transparent transparent transparent #ffffff; 
    }
    .trouble-card__circle{
        width: 180px;
        height: 180px;
    }
    .trouble-card__label{
        font-size: 24px;
    }
    .trouble-card__person{
        bottom: -80%;
        height: 214px;
        left: 100px;
    }

    /* =========================================
        事実（Fact）
       ========================================= */
    .fact {
        padding: var(--space-xl) 0;
    }
    .fact::before, .fact::after{
        height: 400px;
    }
    .fact::before{
        top: -95px;
    }
    .fact::after{
        bottom: -95px;
    }
    .fact__header{
        margin-top: -210px;
        margin-bottom: 60px;
    }
    .fact__title {
        font-size: 64px;
        margin-top: -140px;
    }
    .fact__lead{
        font-size: 40px;
    }
    .fact__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-md);
        max-width: 650px;
        margin: 0 auto var(--space-xl);
    }
    .fact__icon{
        width: 190px;
        height: 190px;
    }
    .fact__label{
        font-size: 24px;
        width: 160px;
    }
    .fact__bottom {
        max-width: var(--content-width-pc);
        margin: 0 auto;
    }
    .fact__desc{
        font-size: 20px;
    }
    .fact__desc .marker-yellow{
        font-size: 32px;
    }
    .fact__illust{
        width: 470px;
    }

    /* =========================================
        煽り（Agitation）
       ========================================= */
    .agitation {
        padding: var(--space-xl) 0 0;
    }
    .agitation__inner {
        max-width: var(--content-width-pc);
        margin: 0 auto;
    }
    .agitation__bubble {
        margin-top: -100px;
        font-size: 40px;
        padding: var(--space-lg);
    }
    .agitation__bubble::after{
        border-width: 50px 50px 0;
        bottom: -25px;
    }
    .agitation::after {
        border-width: var(--space-xxl) 50vw 0 50vw;
        bottom: -120px;
    }
    .agitation__illust{
        width: 450px;
    }
    .agitation__text{
        font-size: 20px;
        display: inline-block;
    }
    .agitation__alert{
        font-size: 36px;
    }
    .agitation__conclusion{
        font-size: 24px;
    }

    /* =========================================
        サービス概要（About）
       ========================================= */
    .about {
        padding: 200px var(--space-md) var(--space-xxl);
    }
    .about__inner {
        max-width: var(--content-width-pc);
        margin: 0 auto;
    }
    .about__lead{
        font-size: 48px;
    }
    .about__logo img{
        width: 540px;
        margin-bottom: var(--space-lg);
    }
    .about__text{
        font-size: 32px;
        margin-bottom: var(--space-lg);
    }

    /* =========================================
       事例（Case）
       ========================================= */
    .case {
        padding: var(--space-xxl) 0;
    }
    .case__inner {
        max-width: var(--middle-width-pc); 
        margin: 0 auto;
        padding: 0 var(--space-sm); 
        position: relative;
    }
    .case__title-blocks span, .case__title-text span{
        font-size: 40px;
    }
    .case__title-text{
        font-size: 36px;
    }
    
    .case__note {
        position: absolute;
        bottom: -44px;
        right: var(--space-sm); 
        padding: 0;
        z-index: 10;
    }
    
    .case__slider .splide__track {
        display: block !important;
        width: auto !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 20px calc(50vw - 50%) 20px !important;
        margin: 0 calc((50vw - 50%) * -1) !important;
        -webkit-overflow-scrolling: touch;
    }
    
    .case__slider .splide__track::-webkit-scrollbar {
        height: 8px; 
    }
    
    .case__slider .splide__track::-webkit-scrollbar-track {
        background: transparent; 
        border-left: calc(50vw - 50% + var(--space-sm)) solid transparent;
        border-right: calc(50vw - 50% + var(--space-sm)) solid transparent;
        background-clip: padding-box;
    }
    
    .case__slider .splide__track::-webkit-scrollbar-thumb {
        background: rgba(18, 43, 136, 0.3); 
        border-radius: 10px; 
        border-top: 1px solid transparent;
        border-bottom: 1px solid transparent;
        background-clip: padding-box;
    }
    
    .case__slider .splide__track::-webkit-scrollbar-thumb:hover {
        background: rgba(18, 43, 136, 0.6); 
    }

    .case__slider .splide__list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important; 
        width: 100% !important;
        max-width: 100% !important;
        gap: var(--space-md) !important;
        transform: none !important; 
    }
    .case-card__thumb {
        width: 100%;
        height: 170px;
        max-width: 100%;
    }
    
    @media (max-width: 1060px) {
        .case__slider .splide__list {
            justify-content: flex-start !important;
            width: max-content !important;
            padding-left: calc(50vw - 50% + var(--space-sm)) !important;
            padding-right: 0 !important; 
        }

        .case__slider .splide__list::after {
            content: "";
            display: block !important;
            width: calc(50vw - 50% + var(--space-sm)) !important; 
            height: 1px;
            flex-shrink: 0 !important; 
        }
    }
    
    .case__slider .splide__list .splide__slide {
        width: 310px !important; 
        min-width: 310px !important;
        max-width: 310px !important;
        flex-shrink: 0 !important;
        height: auto !important;
    }

    .case__slider .splide__pagination {
        display: none !important;
    }

    .case__slider .splide__slide--clone,
    .voice__slider .splide__slide--clone {
        display: none !important;
    }
    
    /* =========================================
       プラン（Plan）
       ========================================= */
    .plan {
        padding: var(--space-xl) var(--space-md);
    }
    .plan__inner {
        max-width: var(--middle-width-pc);
        margin: 0 auto;
    }
    .plan__header{
        margin-bottom: var(--space-lg);
    }
    .plan__title {
        font-size: 40px;
        margin-bottom: var(--space-sm);
    }
    
    /* 💡 親の箱を綺麗な4列のGridにするだけで、すべてのカードが均等に横並びになります */
    .plan__documents {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 20px !important;
        margin-bottom: var(--space-lg);
        align-items: end; /* 💡 下のリボンラインを綺麗に一直線に揃える */
    }
    
    /* 各カードの縦の並び設定 */
    .plan-doc {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        height: 100%;
        width: 100% !important;
    }
    
    .plan-doc__bubble {
        font-size: 16px !important; 
        line-height: 1.4 !important;
        padding: 12px 10px !important;
        text-align: center !important;
        margin-bottom: 24px !important;
        border-radius: 50px !important;
        border: 1px solid var(--text-main) !important;
        background-color: #fff !important;
        height: 70px !important; /* 💡 文字数が多くても破綻しない高さに固定 */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        box-sizing: border-box !important;
    }
    
    /* 資料画像とリボンラベルのサイズ調整 */
    .plan-doc__figure {
        margin: 0 auto !important;
        position: relative !important;
    }
    .plan-doc__figure img {
        width: 90% !important; 
        margin: 0 auto !important;
        display: block !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    }
    .plan-doc__label {
        font-size: clamp(11px, 1.4vw, 20px);
        bottom: -5px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        white-space: nowrap !important;
        width: 120%;
    }
    
    /* 下部のチェックリストをPC用に横並びに */
    .plan__checklist {
        display: flex !important;
        justify-content: center !important;
        gap: var(--space-md) !important;
        margin-bottom: var(--space-lg) !important;
    }
    .plan__checklist li {
        margin-bottom: 0 !important;
        font-size: 24px;;
    }
    .plan__desc, .plan__conclusion-text{
        font-size: 20px;
    }
    .plan__conclusion-highlight{
        font-size: 32px;
    }

    /* =========================================
       比較（Comparison）
       ========================================= */
    .comparison {
        padding: var(--space-xxl) var(--space-md) 0;
    }
    .comparison__inner{
        max-width: var(--middle-width-pc);
        padding: var(--space-md);
    }
    .comparison__title{
        font-size: 48px;
        margin-top: -100px;
    }
    .comparison__title span{
        font-size: 32px;
    }
    .comparison-table {
        max-width: var(--middle-width-pc);
        margin: 0 auto;
    }
    .comparison-table__row {
        grid-template-columns: 1fr 1fr 1fr 1fr; 
    }
    .comparison-table__cell {
        font-size: 16px;
        padding: var(--space-md) var(--space-sm);
    }
    .comparison-table__cell--label{
        font-size: 20px;
    }
    .comparison-table__row--header .comparison-table__cell {
        font-size: 16px;
    }
    .comparison-table__logo{
        display: inline-block !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .comparison-table__logo img,
    .comparison-table__logo source {
        display: block !important;
        width: 140px !important;     /* 💡 width: auto ではなく直接140pxで固定 */
        min-width: 140px !important;
        max-width: 140px !important;
        height: auto !important;
        margin: 0 auto !important;
    }
    .comparison__conclusion {
        max-width: var(--content-width-pc);
        margin: var(--space-xl) auto 0;
    }
    .comparison__conclusion-text{
        font-size: 24px;
    }
    .comparison__illust {
        height: 180px;
    }

    /* =========================================
       実績（Record）
       ========================================= */
    .record {
        padding: var(--space-xxl) 0;
    }
    .record__inner {
        max-width: 600px;
        margin: 0 auto;
    }
    .record__title{
        font-size: 36px;
    }
    .record__title-sub{
        font-size: 56px;

    }

    /* =========================================
       クライアント・専門家（Client）
       ========================================= */
    .client {
        padding: var(--space-xxl) 0 160px;
    }
    .client__inner {
        max-width: var(--content-width-pc);
        margin: 0 auto;
    }
    .client__title, .client__feature-text{
        font-size: 32px;
    }
    .client__title-blue, .client__feature-text span{
        font-size: 40px;
    }
    .client__feature-title{
        font-size: 56px;
    }

    /* =========================================
       選べる理由（Selection）
       ========================================= */
    .selection {
        padding: 280px var(--space-md) var(--space-xxl);
        background-size: 100%;
    }
    .selection__inner {
        max-width: var(--middle-width-pc);
        margin: 0 auto;
    }
    .selection__header{
        top: -56px;
    }
    .selection__bubble{
        font-size: 56px;
        margin-bottom: var(--space-lg);
        padding: var(--space-md) var(--space-lg);
    }
    .selection__title{
        font-size: 40px;
    }

    /* 各ケースを、イラストと白い箱が横に並ぶFlexコンテナ化（カンプ通り row-reverse が正解） */
    .selection-case {
        display: flex !important;
        align-items: center; 
        gap: 32px;          
        margin-bottom: 80px !important;
        position: relative;
        flex-direction: row-reverse !important; /* 💡 1・3枚目を「左：イラスト、右：箱」にする初期値 */
    }

    /* CASE 02（おじいさん）だけ反転させて「左：箱、右：イラスト」にする */
    .selection-case:nth-child(2) {
        flex-direction: row !important;
    }

    /* 白い箱（吹き出し本体）のスタイル調整 */
    .selection-case__content {
        background-color: #fff;
        border-radius: 12px;
        padding: var(--space-lg) !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        position: relative;
        flex: 1; 
        margin-bottom: 0 !important;
        width: 78%;
    }

    /* 💡 核心：新設した囲み枠をPC版で横並び（row）に変形させる */
    .selection-case__flex-box {
        display: flex !important;
        flex-direction: row !important; /* 💡 PC時は横並び */
        align-items: center !important;  /* 矢印と右側の解決策ブロックの上下中央を揃える */
        gap: 24px !important;
        margin-top: var(--space-sm);
        width: 100%;
    }

    /* 解決策ブロック自体の余計なマージンやFlex設定を綺麗に整える */
    .selection-case__solution {
        margin-top: 0 !important;
        flex: 1;
    }

    /* 矢印の調整 */
    .selection-case__arrow {
        margin-bottom: 0 !important;
        flex-shrink: 0; 
    }
    .selection-case__arrow img {
        transform: rotate(-90deg) !important; /* 💡 基本は下向きを「右向き」に変形 */
        display: block !important;
        margin: 0 auto;
    }

    /* イラスト（人物画像）の設定 */
    .selection-case__illust {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        height: 18vw !important;
        max-height: 180px;
        flex-shrink: 0;
    }
    .selection-case__illust img {
        height: 100%;
        width: auto;
    }

    /* 白い箱からイラストに向けた「吹き出しの三角（しっぽ）」を配置 */
    .selection-case__content::after {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-style: solid;
        z-index: 2;
    }

    /* 左側にイラストがある場合（CASE 01, 03）：箱の左側から左に向けて三角を出す */
    .selection-case:nth-child(1) .selection-case__content::after,
    .selection-case:nth-child(3) .selection-case__content::after {
        left: -15px;
        border-width: 12px 16px 12px 0;
        border-color: transparent #ffffff transparent transparent;
    }

    /* 右側にイラストがある場合（CASE 02）：箱の右側から右に向けて三角を出す */
    .selection-case:nth-child(2) .selection-case__content::after {
        right: -15px;
        border-width: 12px 0 12px 16px;
        border-color: transparent transparent transparent #ffffff;
    }

    /* その他、テキストやナンバリング位置の微調整 */
    .selection-case__num {
        position: relative !important;
        top: auto !important;
        margin-bottom: var(--space-sm) !important;
        margin-top: -70px;
    }
    .selection__conclusion {
        margin-top: var(--space-xl) !important;
    }
    .selection__conclusion-text span{
        font-size: 32px;
    }
    .selection__conclusion-text{
        font-size: 28px;
    }
    .selection__conclusion-lead{
        font-size: 36px;
    }

    /* =========================================
       お客様の声（Voice）※PC版・タブレット版設定
       ========================================= */
    .voice {
        padding: var(--space-xxl) 0 220px;
    }
    .voice__inner {
        max-width: var(--middle-width-pc); /* 見出しの最大幅の軸（800px）をキープ */
        margin: 0 auto;
        padding: 0 var(--space-sm); 
        position: relative;
    }
    .voice__title {
        font-size: 48px;
        line-height: 1.5;
    }
    .voice__title span {
        font-size: 32px;
    }
    .voice__note {
        padding: 0 var(--space-sm);
        margin-top: var(--space-sm);
    }
    
    /* 💡 caseと全く同じ：スクロールバーと移動中のカードを画面最端まで解放 */
    .voice__slider .splide__track {
        display: block !important;
        width: auto !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 20px calc(50vw - 50%) 20px !important;
        margin: 0 calc((50vw - 50%) * -1) !important;
        -webkit-overflow-scrolling: touch;
    }
    
    /* 💡 caseと全く同じ：スマートスクロールバーのサイズ指定 */
    .voice__slider .splide__track::-webkit-scrollbar {
        height: 8px; 
    }
    
    /* 💡 caseと全く同じ：透明な線でレールを縮める（画面パツパツ防止） */
    .voice__slider .splide__track::-webkit-scrollbar-track {
        background: transparent; 
        border-left: calc(50vw - 50% + var(--space-sm)) solid transparent;
        border-right: calc(50vw - 50% + var(--space-sm)) solid transparent;
        background-clip: padding-box;
    }
    
    /* 💡 つまみのデザイン：プライバシーマーク等のメインカラーに合わせて上品に調整 */
    .voice__slider .splide__track::-webkit-scrollbar-thumb {
        background: rgba(19, 43, 136, 0.3); /* プラン共通の濃い青（#132B88）の透明度30% */
        border-radius: 10px; 
        border-top: 1px solid transparent;
        border-bottom: 1px solid transparent;
        background-clip: padding-box;
    }
    
    .voice__slider .splide__track::-webkit-scrollbar-thumb:hover {
        background: rgba(19, 43, 136, 0.6); 
    }

    /* 💡 caseと全く同じ：Flexboxで横一列に並べ、自動計算によるスライド命令（transform）を完全停止 */
    .voice__slider .splide__list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important; /* 通常時は中央寄せ */
        width: 100% !important;
        max-width: 100% !important;
        gap: var(--space-md) !important;
        transform: none !important; 
    }
    
    /* 💡 caseと全く同じ：画面が縮んで収まらなくなったら左寄せにし、左右の静止クッションを出現させる */
    @media (max-width: 1060px) {
        .voice__slider .splide__list {
            justify-content: flex-start !important;
            width: max-content !important;
            padding-left: calc(50vw - 50% + var(--space-sm)) !important;
            padding-right: 0 !important; 
        }

        /* 💡 caseと全く同じ：右側ビタビタを防ぐための擬似要素クッション */
        .voice__slider .splide__list::after {
            content: "";
            display: block !important;
            width: calc(50vw - 50% + var(--space-sm)) !important; 
            height: 1px;
            flex-shrink: 0 !important; 
        }
    }
    
    /* 💡 caseと全く同じ：カード1枚ずつの横幅を固定 */
    .voice__slider .splide__list .splide__slide {
        width: 310px !important; 
        min-width: 310px !important;
        max-width: 310px !important;
        flex-shrink: 0 !important;
        height: auto !important;
    }

    /* 💡 下部のドット（インジケーター）を非表示 */
    .voice__slider .splide__pagination {
        display: none !important;
    }

    /* =========================================
       2大特典（Present）※PC版・タブレット版設定
       ========================================= */
    .present {
        padding: var(--space-xl) var(--space-md) var(--space-xxl);
    }
    .present__inner {
        max-width: var(--content-width-pc); /* 💡 特典カードを横並びでゆったり見せるため、content-width(800px)からmiddle-width(1100px)へ変更 */
        margin: -220px auto var(--space-xl);
        padding: 80px var(--space-xl) var(--space-md);
    }
    .present__badge span{
        font-size: 56px;
        width: 100px;
        height: 100px;
        align-items: initial;
    }
    .present__lead{
        font-size: 32px;
    }

    /* 💡 1. 核心：カード単体をFlexboxに変形させ、画像とテキストを横並び(row)にする */
    .present-item {
        flex: 1 !important;
        margin-bottom: 0 !important;
        display: flex !important;
        flex-direction: row !important; /* 横並び */
        align-items: center !important; /* 画像とテキストの上下中央を揃える */
        gap: var(--space-md) !important; /* 画像とテキストの間の隙間 */
        background-color: #fff;
        padding: var(--space-sm);
    }
    .present-item:nth-child(2){
        flex-direction: row-reverse !important;
    }

    /* 💡 2. 核心：SP版で設定されていた「表示順の入れ替え（order）」をPC版で完全リセット
       これで01も02も、カンプ通り「左に画像、右にテキスト」の美しいレイアウトに統一されます */
    .present-item:nth-child(1) .present-item__header,
    .present-item:nth-child(1) .present-item__illust,
    .present-item:nth-child(1) .present-item__text,
    .present-item:nth-child(2) .present-item__header,
    .present-item:nth-child(2) .present-item__illust,
    .present-item:nth-child(2) .present-item__text {
        order: initial !important; 
        margin: 0; /* SP用の個別マージンもリセット */
    }

    /* 💡 3. 画像ブロックの幅を固定して、4枚並んでも潰れないようにする */
    .present-item__illust {
        width: 140px !important; /* 💡 カンプに合わせた冊子画像の理想の横幅 */
        flex-shrink: 0 !important;
    }
    .present-item__illust img {
        width: 100% !important;
        height: auto !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    }
    /* 💡 核心：特典01（左側）の画像を左（反時計回り）に傾ける */
    .present-item:nth-child(1) .present-item__illust img {
        transform: rotate(-8deg) !important; /* -8度はカンプに合わせて適宜微調整してください */
    }

    /* 💡 核心：特典02（右側）の画像を右（時計回り）に傾ける */
    .present-item:nth-child(2) .present-item__illust img {
        transform: rotate(8deg) !important; /* 8度はカンプに合わせて適宜微調整してください */
    }

    /* 右側のテキスト部分をカードの残りの幅いっぱいに広げる */
    .present-item__content {
        flex: 1 !important;
        display: flex;
        flex-direction: column;
        text-align: left; /* 左揃え */
    }
    .present-item__header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: var(--space-sm) !important;
    }
    .present-item__num{
        font-size: 56px;
    }
    .present-item__title{
        font-size: 20px; /* 💡 2行に折れても綺麗に収まる文字サイズに調整 */
    }
    .present-item__text {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    .present__note{
        text-align: right;
        margin-top: var(--space-sm);
    }

    /* =========================================
       Step & FAQ
       ========================================= */
    .step {
        padding: var(--space-xxl) var(--space-md);
    }
    .step__inner {
        max-width: var(--middle-width-pc);
        margin: 0 auto;
    }
    .step__list{
        display: flex;
    }
    .step-cards-wrapper {
        display: flex;
        gap: 12px;
    }
    .step-card {
        flex: 1;
        margin-bottom: 0;
    }
    .step-card__illust{
        margin-top: -120px;
    }
    .step-card::before {
        clip-path: polygon(0 0, 10% 50%, 0 100%, 90% 100%, 100% 50%, 90% 0);
    }
    .step-card__content{
        padding: 0 var(--space-lg) var(--space-md);
    }
    .faq {
        padding: 0 var(--space-md) var(--space-xxl);
    }
    .faq__inner {
        max-width: var(--content-width-pc);
        margin: 0 auto;
    }
    .faq__box{
        padding: var(--space-xl);
    }
    .faq__en{
        font-size: 32px;
    }
    .faq__title{
        font-size: 40px;
    }
    .faq__item{
        margin-bottom: var(--space-lg);
    }

    /* =========================================
       最後の一押し（Push）
       ========================================= */
    .push {
        padding: var(--space-xxl) 0 0;
    }
    .push__inner {
        max-width: var(--content-width-pc);
        margin: 0 auto;
    }
    .push__lead{
        font-size: 24px;
    }
    .push__title{
        font-size: 32px;
    }
    .push__illust img{
        width: 700px;
        margin-bottom: -40px;;
    }

    /* =========================================
       安心・信頼（Trust）
       ========================================= */
    .trust {
        padding: var(--space-xl) var(--space-md);
    }
    .trust__inner {
        max-width: var(--middle-width-pc);
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        gap: var(--space-md);
    }
    .trust-item {
        flex: 1;
        margin-bottom: 0;
    }
    .trust-item__text{
        font-size: 16px;
    }

    /* =========================================
       フッター（Footer）
       ========================================= */
    .footer {
        padding: var(--space-xl) var(--space-md);
    }
    .footer__inner {
        max-width: var(--middle-width-pc);
        margin: 0 auto;
    }
    .footer__nav{
        font-size: 16px;
        grid-template-columns: repeat(4, 1fr);
    }
    
}