/* ==========================================================================
   トップ新セクション・機能ページ用スタイル（20260930版資料対応）
   既存の style.css の変数・部品（.section-title / .btn など）を利用
   ========================================================================== */


/* ===== 仮画像（デザイナー差し替えまでの置き場所） ===== */
.ph-image {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: var(--spacing-md);
    background: repeating-linear-gradient(45deg, #f6f6f6, #f6f6f6 12px, #efefef 12px, #efefef 24px);
    border: 2px dashed #c9c9c9;
    border-radius: var(--radius-md);
    color: #888;
    font-size: 0.7rem;
    text-align: center;
    line-height: 1.6;
}

.ph-image--card { min-height: 160px; margin-block: var(--spacing-sm); }
.ph-image--hero { min-height: 320px; }
.ph-image--wide { min-height: 280px; margin-top: var(--spacing-lg); }


/* ===== 注記・開発中バッジ ===== */
.fp-note {
    margin-top: var(--spacing-md);
    font-size: 0.65rem;
    color: var(--color-text-sub);
    line-height: 1.7;
}

.badge-dev {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 100px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    vertical-align: middle;
}


/* ===== 3つの機能カード ===== */
.section-three {
    padding-block: var(--spacing-xxl);
    background-color: var(--color-section-alt-bg);
}

.three__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.three__grid--two {
    grid-template-columns: repeat(2, 1fr);
    max-width: 820px;
    margin-inline: auto;
}

.three__item {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md);
    background: #fff;
    border: 1px solid var(--color-border);
    border-top: 6px solid var(--color-accent);
    border-radius: var(--radius-lg);
    color: var(--color-text);
    text-decoration: none;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.three__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.three__num {
    align-self: flex-start;
    padding: 2px 14px;
    border-radius: 100px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
}

.three__catch {
    margin-top: var(--spacing-sm);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-sub);
}

.three__title {
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1.4;
}

.three__points {
    flex: 1;
    padding-left: 1.2em;
    font-size: 0.7rem;
    color: var(--color-text-sub);
    line-height: 1.8;
}

.three__points li + li {
    margin-top: 4px;
}

.three__points strong {
    color: var(--color-text);
    font-weight: 700;
}

.three__more {
    margin-top: var(--spacing-sm);
    font-size: 0.7rem;
    font-weight: 700;
    text-align: right;
}


/* ===== 導入事例（資料p17のレイアウト） ===== */
.section-case {
    padding-block: var(--spacing-xxl);
}

.case__more {
    margin-top: var(--spacing-lg);
    text-align: center;
}

.case__head {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-sm) var(--spacing-md);
    background: #fdfbe0;
    border: 2px solid var(--color-accent);
}

.case__company {
    font-size: 1rem;
    font-weight: 700;
}

.case__summary {
    font-size: 0.8rem;
    line-height: 1.6;
}

.case__body {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
    align-items: stretch;
}

.case__image {
    display: block;
    width: 100%;
    height: auto;
}

.case__block + .case__block {
    margin-top: var(--spacing-sm);
}

.case__label {
    width: 9em;
    margin-bottom: 8px;
    padding: 4px 0;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
}

.case__label--effect {
    background: var(--color-accent);
    color: var(--color-text);
}

/* 導入事例：右の課題〜成果と画像の上端・下端をそろえる
   PC（1221px以上）：文字間を詰めたうえで、残りの差は画像の左右を少しトリミングして吸収
   それより狭い幅：トリミングすると人物が切れるため、画像は元の比率のまま上下中央 */
.case__image-wrap {
    align-self: center;
}

@media (min-width: 1221px) {
    .case__image-wrap {
        position: relative;
        align-self: stretch;
    }

    .section-case .case__image {
        position: absolute;
        inset: 0;
        height: 100%;
        object-fit: cover;
        object-position: 30% center;
    }
}

.case__detail {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.case__detail .case__block + .case__block {
    margin-top: 8px;
}

.case__detail .case__label {
    margin-bottom: 4px;
    padding: 2px 0;
}

.section-case .case__block ul {
    line-height: 1.55;
}

.section-case .case__block li + li {
    margin-top: 2px;
}

/* ===== 箇条書き（導入事例・ロードマップ・機能ページ共通） ===== */
.case__block ul,
.roadmap__col ul,
.fp-compare__col ul,
.fp-list {
    padding-left: 1.2em;
    font-size: 0.7rem;
    line-height: 1.8;
    color: var(--color-text-sub);
}

.case__block li + li,
.roadmap__col li + li,
.fp-compare__col li + li,
.fp-list li + li {
    margin-top: 6px;
}

.case__block ul {
    color: var(--color-text);
}


/* ===== スモールスタート ===== */
.section-steps {
    padding-block: var(--spacing-xxl);
    background-color: #f3f3f3;
}

.steps__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.steps__item {
    position: relative;
    padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md);
    background: #fff;
    border-radius: var(--radius-lg);
}

.steps__item:not(:last-child)::after {
    content: "▶";
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
    color: var(--color-accent-hover);
    font-size: 0.8rem;
}

.steps__num {
    display: inline-block;
    padding: 2px 14px;
    border-radius: 100px;
    background: var(--color-accent);
    font-size: 0.6rem;
    font-weight: 900;
}

.steps__title {
    margin-block: var(--spacing-sm) 8px;
    font-size: 0.95rem;
    font-weight: 700;
}

.steps__item p {
    font-size: 0.7rem;
    color: var(--color-text-sub);
    line-height: 1.8;
}


/* ===== 進化し続けるプロダクト ===== */
.section-roadmap {
    padding-block: var(--spacing-xxl);
}

.roadmap__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.roadmap__col {
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.roadmap__col--dev {
    background: var(--color-section-alt-bg);
    border-style: dashed;
}

.roadmap__label {
    margin-bottom: var(--spacing-sm);
    font-size: 0.85rem;
    font-weight: 700;
}


/* ===== 機能ページ：上部 ===== */
.fp-hero {
    padding-block: var(--spacing-lg) var(--spacing-xxl);
    background-color: var(--color-hero-bg);
}

.fp-hero--simple {
    text-align: center;
}

.fp-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--spacing-lg);
    font-size: 0.6rem;
    color: var(--color-text-sub);
}

.fp-hero--simple .fp-breadcrumb {
    justify-content: flex-start;
}

.fp-breadcrumb a {
    color: inherit;
}

.fp-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: center;
}

.fp-hero__num {
    display: inline-block;
    padding: 2px 14px;
    border-radius: 100px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
}

.fp-hero__catch {
    margin-top: var(--spacing-sm);
    font-size: 0.9rem;
    font-weight: 700;
}

.fp-hero__title {
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 900;
    line-height: 1.3;
}

.fp-hero__lead {
    margin-top: var(--spacing-sm);
    font-size: 0.8rem;
    color: var(--color-hero-sub);
    line-height: 1.9;
}

.fp-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}


/* ===== 機能ページ：セクション・カード ===== */
.fp-section {
    padding-block: var(--spacing-xxl);
}

.fp-section--alt {
    background-color: var(--color-section-alt-bg);
}

.fp-cards {
    display: grid;
    gap: var(--spacing-md);
}

.fp-cards--2 { grid-template-columns: repeat(2, 1fr); }
.fp-cards--3 { grid-template-columns: repeat(3, 1fr); }

.fp-card {
    padding: var(--spacing-md);
    background: #fff;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
}

.fp-card__label {
    display: inline-block;
    margin-bottom: 8px;
    padding: 2px 12px;
    border-radius: 100px;
    background: var(--color-accent);
    font-size: 0.6rem;
    font-weight: 700;
}

.fp-card__title {
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.5;
}

.fp-card p {
    font-size: 0.7rem;
    color: var(--color-text-sub);
    line-height: 1.8;
}


/* ===== 機能ページ：比較（これまで → シーラベルフォーム） ===== */
.fp-compare {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--spacing-md);
    align-items: stretch;
}

.fp-compare__col {
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    background: #fff;
    border: 1px solid var(--color-border);
}

.fp-compare__col--after {
    border: 2px solid var(--color-primary);
}

.fp-compare__col--after ul {
    color: var(--color-text);
}

.fp-compare__label {
    margin-bottom: var(--spacing-sm);
    font-size: 0.85rem;
    font-weight: 700;
}

.fp-compare__arrow {
    align-self: center;
    color: var(--color-accent-hover);
    font-size: 1rem;
}


/* ===== 機能ページ：2列（画像＋説明） ===== */
.fp-split {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

.fp-split__item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: #fff;
    border-radius: var(--radius-lg);
}

.fp-split__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 700;
}

.fp-split__title span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-accent);
    font-size: 0.7rem;
}


/* ===== レスポンシブ ===== */
@media (max-width: 1024px) {
    .fp-cards--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .three__grid,
    .three__grid--two,
    .case__body,
    .steps__grid,
    .roadmap__grid,
    .fp-hero__inner,
    .fp-cards--2,
    .fp-cards--3,
    .fp-split {
        grid-template-columns: 1fr;
    }

    .steps__item:not(:last-child)::after {
        content: "▼";
        top: auto;
        right: 50%;
        bottom: -22px;
        transform: translateX(50%);
    }

    .steps__grid { gap: var(--spacing-lg); }

    .fp-compare { grid-template-columns: 1fr; }
    .fp-compare__arrow { transform: rotate(90deg); justify-self: center; }

    .case__head,
    .roadmap__col { padding: var(--spacing-md); }

    .ph-image--hero { min-height: 220px; }
}


/* ===== 「シーラベルフォームとは？」概要図（HTML版） ===== */
.ov {
    display: grid;
    grid-template-columns: minmax(180px, 230px) minmax(0, 1fr) 56px minmax(150px, 190px);
    grid-template-rows: repeat(4, auto);
    column-gap: var(--spacing-md);
    row-gap: 12px;
    align-items: stretch;
    margin-top: var(--spacing-lg);
}

.ov-src {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: 1;
    min-height: 64px;
    padding: 10px 28px 10px 14px;
    background: #e8e8e8;
    border-radius: var(--radius-md);
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
    align-self: center;
}

.ov-src::after {
    content: "▶";
    position: absolute;
    right: -6px;
    font-size: 0.55rem;
}

.ov-src--1 { grid-row: 1; }
.ov-src--2 { grid-row: 2; }
.ov-src--3 { grid-row: 3; }
.ov-src--4 { grid-row: 4; }

.ov-fn {
    grid-column: 2;
    padding: 14px var(--spacing-md);
    background: #fff;
    border: 3px solid #d6d6d6;
    border-radius: var(--radius-sm);
}

.ov-fn--1 { grid-row: 1; }
.ov-fn--2 { grid-row: 2; }
.ov-fn--3 { grid-row: 3 / 5; }

.ov-fn__title {
    margin-bottom: 6px;
    font-size: 0.95rem;
    font-weight: 900;
    text-align: center;
}

.ov-fn__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
}

.ov-fn__row + .ov-fn__row {
    margin-top: 10px;
}

.ov-fn__list {
    list-style: none;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.6;
}

.ov-fn__list li::before {
    content: "・";
}

.ov-fn__text {
    min-width: 12em;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.6;
}

.ov-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    color: #3a3a3a;
}

.ov-arrow {
    grid-column: 3;
    align-self: center;
    justify-self: center;
    font-size: 1.6rem;
    line-height: 1;
}

.ov-arrow--1 { grid-row: 1; }
.ov-arrow--2 { grid-row: 2; }
.ov-arrow--3 { grid-row: 3 / 5; }

.ov-effect {
    grid-column: 4;
    grid-row: 1 / 5;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: var(--spacing-sm);
    background: var(--color-accent);
    border: 1px solid #b8b400;
}

.ov-effect__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-block: var(--spacing-sm);
    text-align: center;
}

.ov-effect__item + .ov-effect__item {
    border-top: 1px solid rgba(0, 0, 0, 0.35);
}

.ov-effect__item p {
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.4;
}

@media (max-width: 960px) {
    .ov {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;
        row-gap: 10px;
    }

    .ov-src,
    .ov-fn,
    .ov-effect {
        grid-column: auto;
        grid-row: auto;
    }

    .ov-src { padding-right: 14px; }
    .ov-src::after,
    .ov-arrow { display: none; }

    .ov-fn,
    .ov-effect { grid-column: 1 / -1; }

    .ov-fn--1 { margin-top: var(--spacing-sm); }

    .ov-effect {
        flex-direction: row;
        margin-top: var(--spacing-sm);
    }

    .ov-effect__item { flex: 1; }

    .ov-effect__item + .ov-effect__item {
        border-top: none;
        border-left: 1px solid rgba(0, 0, 0, 0.35);
    }
}


/* ===== スライドから切り出した画像 ===== */
.three__image {
    display: block;
    width: 100%;
    height: 170px;
    margin-block: var(--spacing-sm);
    object-fit: contain;
    background: #fafafa;
    border-radius: var(--radius-md);
}

.fp-hero__image {
    display: block;
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
    height: auto;
}

.fp-image {
    display: block;
    width: 100%;
    max-width: 720px;
    height: auto;
    margin: var(--spacing-lg) auto 0;
}

.fp-split__icon {
    display: block;
    width: 64px;
    height: 64px;
    margin: 4px auto;
}


/* ===== ヘッダーナビ（3項目のため文字を大きめに・折り返し防止） ===== */
.nav-menu {
    gap: var(--spacing-lg);
}

.nav-menu a {
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 1220px) {
    .nav-menu {
        gap: var(--spacing-md);
    }

    .nav-menu a {
        font-size: 0.9rem;
    }
}

@media (max-width: 1024px) {
    .nav-menu {
        gap: var(--spacing-sm);
    }

    .nav-menu a {
        font-size: 0.8rem;
    }
}

@media (max-width: 768px) {
    .site-header__nav .nav-menu a {
        font-size: 0.95rem;
    }
}


/* ===== ヘッダーナビ：「3つの機能」のホバーメニュー ===== */
.nav-menu__has-sub {
    position: relative;
}

.nav-menu__has-sub > a {
    cursor: default;
}

.nav-menu__has-sub > a::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
}

.nav-sub {
    position: absolute;
    top: 100%;
    left: 50%;
    min-width: 180px;
    margin-top: 20px;
    padding: 8px 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
    z-index: 110;
}

/* ナビ文字とメニューの間でホバーが切れないよう、上側にすき間を埋める領域を作る */
.nav-sub::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -24px;
    height: 24px;
}

.nav-menu__has-sub:hover > .nav-sub,
.nav-menu__has-sub:focus-within > .nav-sub {
    opacity: 1;
    visibility: visible;
}

.nav-sub a {
    display: block;
    padding: 10px 20px;
    font-size: 0.95rem;
    font-weight: 500;
}

.nav-sub a:hover {
    background: var(--color-section-alt-bg);
}

@media (max-width: 768px) {
    /* スマホのハンバーガーメニューでは、機能の3項目を常に表示（字下げ） */
    .nav-menu__has-sub > a::after {
        display: none;
    }

    .nav-sub {
        position: static;
        min-width: 0;
        margin-top: 0;
        padding: 0;
        border: none;
        box-shadow: none;
        transform: none;
        opacity: 1;
        visibility: visible;
    }

    .nav-sub::before {
        display: none;
    }

    .site-header__nav .nav-sub a {
        padding: 10px 0 10px 1.5em;
        font-size: 0.9rem;
    }
}


/* ===== 箇条書きの記号（style.css のリセットで消えているため明示） ===== */
.three__points,
.case__block ul,
.roadmap__col ul,
.fp-compare__col ul,
.fp-list {
    list-style: disc;
}


/* ==========================================================================
   機能ページ 改善（ファーストビューで機能概要まで見せる・アイコン・比較表・公開レベル）
   ========================================================================== */

/* ----- 上部をコンパクトに ----- */
.fp-hero {
    padding-block: var(--spacing-sm) var(--spacing-md);
}

.fp-breadcrumb {
    margin-bottom: var(--spacing-sm);
}

.fp-hero__inner {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--spacing-md);
}

.fp-hero__catch {
    margin-top: 0;
}

.fp-hero__image {
    max-height: 260px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.fp-hero + .fp-section {
    padding-top: var(--spacing-lg);
}

/* ----- カードのアイコン ----- */
.ic {
    display: block;
    width: 100%;
    height: 100%;
}

.fp-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.fp-card__head .fp-card__title {
    margin-bottom: 0;
}

.fp-card__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 9px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-text);
}

/* ----- 比較表（これまで / シーラベルフォーム） ----- */
.cmp {
    margin-inline: auto;
}

.cmp__row {
    display: grid;
    grid-template-columns: 170px 1fr 1fr;
    gap: 0 var(--spacing-sm);
}

.cmp__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: var(--spacing-sm) 8px;
    border-bottom: 1px dashed var(--color-border);
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.4;
}

.cmp__label .ic {
    width: 28px;
    height: 28px;
    color: var(--color-text-sub);
}

.cmp__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.72rem;
    line-height: 1.7;
    text-align: center;
}

.cmp__cell--before {
    background: #f1f1f1;
    color: var(--color-text-sub);
    border-bottom: 1px dashed #d5d5d5;
}

.cmp__cell--after {
    background: #fff;
    border-inline: 3px solid var(--color-primary);
    border-bottom: 1px dashed var(--color-border);
}

.cmp__cell--after strong {
    background: linear-gradient(transparent 60%, var(--color-accent) 60%);
}

.cmp__row:last-child .cmp__cell--before {
    border-bottom: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.cmp__row:last-child .cmp__cell--after {
    border-bottom: 3px solid var(--color-primary);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.cmp__row:last-child .cmp__label {
    border-bottom: none;
}

.cmp__row--head .cmp__label {
    border-bottom: none;
}

.cmp__row--head .cmp__cell {
    flex-direction: column;
    gap: 6px;
    padding-block: var(--spacing-md);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.cmp__row--head .cmp__cell--before {
    background: #8a8a8a;
    color: #fff;
    border-bottom: none;
}

.cmp__row--head .cmp__cell--after {
    background: var(--color-primary);
    color: #fff;
    border: 3px solid var(--color-primary);
    border-bottom: none;
}

.cmp__tag {
    padding: 2px 14px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.2);
    font-size: 0.6rem;
    font-weight: 700;
}

.cmp__cell--after .cmp__tag {
    background: var(--color-accent);
    color: var(--color-text);
}

.cmp__head-icon {
    width: 44px;
    height: 44px;
}

.cmp__head-title {
    font-size: 0.85rem;
    font-weight: 700;
}

/* ----- 公開範囲のレベル ----- */
.lv__scale {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-text-sub);
}

.lv__scale-bar {
    position: relative;
    flex: 1;
    height: 8px;
    border-radius: 100px;
    background: linear-gradient(90deg, var(--color-accent), #d6d6d6 50%, var(--color-primary));
}

.lv__scale-bar::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border: 8px solid transparent;
    border-left: 10px solid var(--color-primary);
    border-right: none;
}

.lv__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.lv__item {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-md);
    background: #fff;
    border: 1px solid var(--color-border);
    border-top: 6px solid var(--lv-color);
    border-radius: var(--radius-md);
}

.lv__item--1 { --lv-color: var(--color-accent); }
.lv__item--2 { --lv-color: #a7a7a7; }
.lv__item--3 { --lv-color: var(--color-primary); }

.lv__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lv__badge {
    padding: 2px 12px;
    border-radius: 100px;
    background: var(--lv-color);
    color: var(--color-text);
    font-size: 0.6rem;
    font-weight: 700;
}

.lv__item--3 .lv__badge {
    color: #fff;
}

.lv__icon {
    width: 56px;
    height: 56px;
    margin: var(--spacing-sm) auto 8px;
    color: var(--color-text);
}

.lv__title {
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
}

.lv__desc {
    margin-top: 6px;
    font-size: 0.7rem;
    color: var(--color-text-sub);
    line-height: 1.7;
    text-align: center;
}

.lv__spec {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px dashed var(--color-border);
    font-size: 0.68rem;
    line-height: 1.6;
}

.lv__spec dt {
    font-weight: 700;
}

.lv__spec dt::before {
    content: "■ ";
    color: var(--lv-color);
}

.lv__item--1 .lv__spec dt::before {
    color: var(--color-accent-hover);
}

.lv__spec dd {
    margin: 0 0 8px;
    color: var(--color-text-sub);
}

@media (max-width: 768px) {
    .fp-hero__image { max-height: 200px; margin-inline: auto; }

    .cmp__row { grid-template-columns: 1fr 1fr; gap: 0 8px; }
    .cmp__label {
        grid-column: 1 / -1;
        flex-direction: row;
        padding: var(--spacing-sm) 0 6px;
        border-bottom: none;
    }
    .cmp__row--head .cmp__label { display: none; }
    .cmp__cell { padding: var(--spacing-sm); font-size: 0.68rem; }

    .lv__grid { grid-template-columns: 1fr; }
}


/* ===== 機能概要：本番トップ「できること」と同じ横並び（見出し → アイコン → 説明） ===== */
.fp-what {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), 1fr);
    gap: var(--spacing-md);
}

.fp-what__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.fp-what__header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 64px;
    padding: 10px var(--spacing-sm);
    background-color: var(--color-accent);
    color: var(--color-logo-dark);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.4;
}

.fp-what__header .badge-dev {
    margin-left: 4px;
}

.fp-what__icon {
    width: 64px;
    height: 64px;
    margin-block: var(--spacing-md) var(--spacing-sm);
    color: var(--color-text);
}

.fp-what__desc {
    padding: 0 var(--spacing-sm) var(--spacing-md);
    font-size: 0.68rem;
    line-height: 1.7;
    color: var(--color-text-sub);
    text-align: left;
}

@media (max-width: 1024px) {
    .fp-what { grid-template-columns: repeat(min(var(--cols, 4), 3), 1fr); }
}

@media (max-width: 768px) {
    .fp-what { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .fp-what { grid-template-columns: 1fr; }
}


/* ===== 比較表：「これまで」の文字を読みやすく ===== */
.cmp__cell--before {
    background: #ececec;
    color: #3f3f3f;
    font-weight: 500;
}


/* ===== 公開範囲：3つのカードの各行（説明・閲覧できる人・向いている資料）の高さを揃える ===== */
.lv__grid {
    grid-template-rows: repeat(6, auto);
    row-gap: 0;
}

.lv__item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 6;
    align-content: start;
}

.lv__spec--sub {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

@media (max-width: 768px) {
    .lv__grid { grid-template-rows: none; row-gap: var(--spacing-md); }
    .lv__item { display: flex; grid-row: auto; }
}

/* 機能概要：見出し・アイコン・説明の高さを横で揃え、単語の途中で改行しない */
.fp-what {
    grid-template-rows: repeat(3, auto);
}

.fp-what__item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    justify-items: center;
}

.fp-what__header,
.fp-what__desc {
    word-break: auto-phrase;
    text-wrap: balance;
}

.fp-what__desc {
    text-wrap: pretty;
}

@media (max-width: 1024px) {
    .fp-what { grid-template-rows: none; }
    .fp-what__item { grid-row: span 3; }
}

.fp-what__item {
    align-items: start;
}

.fp-what__header {
    align-self: stretch;
}

.fp-what__desc {
    word-break: normal;
    text-wrap: pretty;
    justify-self: stretch;
}


/* ===== 改行位置の調整：PCのみ改行（スマホは自然に折り返す） ===== */
@media (max-width: 768px) {
    .br-pc { display: none; }
}


/* ===== 機能ページ上部：リード文をPCで1行に収める ===== */
.fp-hero__inner {
    grid-template-columns: 1.35fr 1fr;
}

.fp-hero__lead {
    font-size: 0.74rem;
}

@media (min-width: 1025px) {
    .fp-hero__lead { white-space: nowrap; }
}


/* ===== 製品サイト：サイト作成でできること（画像付きカード） ===== */
.site-groups {
    display: grid;
    gap: var(--spacing-lg);
}

.site-group__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--spacing-sm);
    padding-bottom: 10px;
    border-bottom: 3px solid var(--color-accent);
    font-size: 1rem;
    font-weight: 700;
}

.site-group__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.75rem;
}

.site-group__icon {
    width: 32px;
    height: 32px;
}

.site-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.site-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.site-card__image {
    display: flex;
    width: 100%;
    aspect-ratio: 16 / 8;
    min-height: 0;
    object-fit: cover;
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
}

.site-card__title {
    padding: var(--spacing-sm) var(--spacing-sm) 4px;
    font-size: 0.8rem;
    font-weight: 700;
}

.site-card__title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 0.9em;
    margin-right: 8px;
    background: var(--color-accent);
    vertical-align: -1px;
}

.site-card__text {
    padding: 0 var(--spacing-sm) var(--spacing-md);
    font-size: 0.68rem;
    line-height: 1.7;
    color: var(--color-text-sub);
}

@media (max-width: 768px) {
    .site-cards { grid-template-columns: 1fr; }
}


/* ===== フォーム・CTA設置：設置の流れ（作成 → コピー → 貼るだけ） ===== */
.embed-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.embed-flow__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 220px;
    padding: var(--spacing-sm) var(--spacing-md);
    background: #fff;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}

.embed-flow__step .ic {
    width: 36px;
    height: 36px;
}

.embed-flow__step--code {
    background: var(--color-primary);
    color: #fff;
}

.embed-flow__step code {
    display: block;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-accent);
    font-family: Consolas, Menlo, monospace;
    font-size: 0.65rem;
}

.embed-flow__arrow {
    color: var(--color-accent-hover);
    font-size: 1rem;
}


/* ===== 画像付きカード：横並び（画像左・本文右）2列 ===== */
.site-cards--2 {
    grid-template-columns: repeat(2, 1fr);
}

/* 実際の画像（スクリーンショット）は縦横比がまちまちなため、切らずに枠の中に全体を表示 */
img.site-card__image {
    object-fit: contain;
    padding: 12px;
    box-sizing: border-box;
    background: var(--color-section-alt-bg);
}

.site-card--side {
    flex-direction: row;
    align-items: stretch;
}

.site-card--side .site-card__image {
    flex: 0 0 44%;
    width: 44%;
    aspect-ratio: 4 / 3;
    border-bottom: none;
    border-right: 1px solid var(--color-border);
}

.site-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.site-card__title--icon {
    display: flex;
    align-items: center;
    gap: 8px;
}

.site-card__title--icon::before {
    content: none;
}

.site-card__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 6px;
    border-radius: 50%;
    background: var(--color-accent);
}


/* 問い合わせフォームの作成：画像のかわりのイラスト */
.site-card__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: var(--color-section-alt-bg);
}

.site-card__visual svg {
    width: 100%;
    max-width: 200px;
    height: auto;
}

/* 製品検索フォームの画像：縦横比が違っても白地の枠に収める */
img.zig__image {
    padding: 16px;
    box-sizing: border-box;
    background: #fff;
}


/* ===== 製品検索フォーム：左にアイコン付き2×2、右に画像 ===== */
.search-layout {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--spacing-lg);
    align-items: center;
}

.search-layout__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
}

.search-layout__image {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 1024px) {
    .embed-flow { flex-wrap: wrap; }
    .embed-flow__step { min-width: 0; flex: 1 1 200px; }
    .search-layout { grid-template-columns: 1fr; }
    .search-layout__image { max-width: 560px; margin-inline: auto; }
}

@media (max-width: 768px) {
    .embed-flow { flex-direction: column; }
    .embed-flow__step { width: 100%; }
    .embed-flow__arrow { transform: rotate(90deg); }
    .site-cards--2 { grid-template-columns: 1fr; }
    .site-card--side { flex-direction: column; }
    .site-card--side .site-card__image { width: 100%; flex-basis: auto; border-right: none; border-bottom: 1px solid var(--color-border); }
    .search-layout__cards { grid-template-columns: 1fr; }
}

/* カード見出しを単語の途中で改行しない */
.fp-card__title,
.site-card__title {
    word-break: auto-phrase;
    text-wrap: balance;
}

.search-layout__image {
    padding: var(--spacing-sm);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}


/* ===== 設置の流れ（STEP 1〜3）：下のカードと同じ3列・同じ形にそろえる ===== */
.embed-flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    justify-content: stretch;
    margin: 0 0 var(--spacing-lg);
    padding: 0;
    list-style: none;
}

.embed-flow__step {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    background: #fff;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    text-align: left;
}

.embed-flow__step:not(:last-child)::after {
    content: "▶";
    position: absolute;
    top: 50%;
    right: calc(-1 * var(--spacing-md) / 2 - 7px);
    transform: translateY(-50%);
    color: var(--color-accent-hover);
    font-size: 0.7rem;
}

.embed-flow__num {
    position: absolute;
    top: -12px;
    left: var(--spacing-md);
    padding: 1px 12px;
    border-radius: 100px;
    background: var(--color-accent);
    font-size: 0.55rem;
    font-weight: 900;
}

.embed-flow__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    padding: 10px;
    border-radius: 50%;
    background: var(--color-section-alt-bg);
    border: 1px solid var(--color-border);
}

.embed-flow__step p {
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .embed-flow { grid-template-columns: 1fr; gap: var(--spacing-md); }
    .embed-flow__step:not(:last-child)::after {
        content: "▼";
        top: auto;
        right: 50%;
        bottom: -22px;
        transform: translateX(50%);
    }
}


/* ===== 製品検索フォームの作成：テキストと画像を左右交互に（ジグザグ） ===== */
.zig {
    display: grid;
    gap: var(--spacing-xxl);
    max-width: 1080px;
    margin-inline: auto;
}

.zig__row {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: var(--spacing-lg);
    align-items: center;
}

.zig__row:nth-child(even) .zig__text {
    order: 2;
}

.zig__badge,
.site-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 16px 4px 6px;
    border-radius: 100px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.05em;
}

.zig__badge-icon,
.site-card__badge-icon {
    width: 28px;
    height: 28px;
    padding: 5px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-text);
}

.zig__title {
    margin-top: var(--spacing-sm);
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1.5;
    word-break: auto-phrase;
}

.zig__desc {
    margin-top: var(--spacing-sm);
    font-size: 0.75rem;
    line-height: 1.9;
    color: var(--color-text-sub);
}

.zig__image {
    display: flex;
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.ph-image.zig__image {
    box-shadow: none;
}

@media (max-width: 768px) {
    .zig { gap: var(--spacing-xl); }
    .zig__row { grid-template-columns: 1fr; gap: var(--spacing-md); }
    .zig__row:nth-child(even) .zig__text { order: 0; }
}

/* 見出し2つ＋画像1枚の2段構成 */
.zig {
    gap: var(--spacing-xl);
}

.zig__text {
    display: grid;
    gap: var(--spacing-md);
}

.zig__point + .zig__point {
    padding-top: var(--spacing-md);
    border-top: 1px dashed var(--color-border);
}

.zig__title {
    margin-top: 10px;
    font-size: 1rem;
}

.zig__desc {
    margin-top: 6px;
    font-size: 0.72rem;
    line-height: 1.8;
}


/* ==========================================================================
   事例（一覧 archive-case.php ／ 詳細 single-case.php）
   ========================================================================== */

/* ----- 一覧 ----- */
.case-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.case-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: inherit;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.case-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.case-card__image {
    aspect-ratio: 3 / 2;
    background: var(--color-bg-gray);
    overflow: hidden;
}

.case-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.case-card__body {
    padding: var(--spacing-sm);
}

.case-card__company {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-text-sub);
}

.case-card__title {
    margin-top: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.6;
}

.case-card__tags {
    margin-top: var(--spacing-xs);
}

.case-card__tags span {
    display: inline-block;
    padding: 2px 10px;
    background: var(--color-section-alt-bg);
    border: 1px solid var(--color-accent);
    font-size: 0.6rem;
}

.case-empty {
    text-align: center;
    color: var(--color-text-sub);
}

/* ----- 詳細 ----- */
.fp-hero--crumb {
    padding-block: var(--spacing-md) 0;
}

.fp-hero--crumb .fp-breadcrumb {
    margin-bottom: 0;
}

.case-article {
    padding-block: var(--spacing-lg) var(--spacing-xxl);
}

.case-article__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--spacing-lg);
    align-items: start;
}

.case-article__company {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-sub);
}

.case-article__title {
    margin-top: 8px;
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 900;
    line-height: 1.5;
}

.case-article__eyecatch {
    margin-top: var(--spacing-md);
}

.case-article__eyecatch img {
    display: block;
    width: 100%;
    height: auto;
}

.case-article__summary {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-section-alt-bg);
    border: 2px solid var(--color-accent);
}

.case-article__summary-row + .case-article__summary-row {
    margin-top: var(--spacing-sm);
}

.case-article__summary-text {
    font-size: 0.75rem;
    line-height: 1.8;
}

.case-article__summary-text ul {
    padding-left: 1.2em;
    list-style: disc;
}

.case-article__summary-text li + li {
    margin-top: 4px;
}

/* 本文（管理画面のエディタで入力した見出し・段落・画像） */
.case-article__content {
    margin-top: var(--spacing-lg);
    font-size: 0.8rem;
    line-height: 2;
}

.case-article__content > * + * {
    margin-top: 1.4em;
}

.case-article__content h2 {
    margin-top: 2.6em;
    padding: 12px 16px;
    background: var(--color-primary);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1.6;
}

.case-article__content h3 {
    margin-top: 2em;
    padding-left: 12px;
    border-left: 5px solid var(--color-accent);
    font-size: 0.95rem;
    line-height: 1.6;
}

.case-article__content img {
    max-width: 100%;
    height: auto;
}

.case-article__content figure {
    margin-inline: 0;
}

.case-article__content figure img {
    display: block;
    width: 100%;
}

.case-article__content figcaption {
    margin-top: 6px;
    font-size: 0.65rem;
    color: var(--color-text-sub);
    text-align: center;
}

.case-article__content ul,
.case-article__content ol {
    padding-left: 1.4em;
    list-style: disc;
}

.case-article__content a {
    text-decoration: underline;
}

/* 話し手の名前（本文で <strong> を使う） */
.case-article__content p > strong:first-child {
    margin-right: 0.3em;
}

/* 本文内の部品：インタビュアー紹介・画像2枚並び・コンサルタントから・企業紹介 */
.case-interviewer {
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-start;
    padding: var(--spacing-sm);
    border: 1px solid var(--color-border);
    font-size: 0.7rem;
    line-height: 1.8;
}

.case-interviewer > img {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
}

.case-interviewer > div > * + * {
    margin-top: 0.8em;
}

.case-interviewer__name {
    font-weight: 700;
}

.case-figures {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
    align-items: center;
}

.case-figures figure {
    margin: 0;
}

.case-figures img {
    display: block;
    border: 1px solid var(--color-border);
}

.case-message {
    padding: var(--spacing-md);
    background: var(--color-section-alt-bg);
}

.case-message .case-interviewer {
    padding: 0;
    border: none;
    font-size: 0.75rem;
}

.case-message__title,
.case-company__title {
    margin-bottom: var(--spacing-sm);
    font-weight: 700;
}

.case-company {
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    font-size: 0.75rem;
}

.case-company dl {
    display: grid;
    grid-template-columns: 6em 1fr;
    gap: 8px 12px;
    line-height: 1.7;
}

.case-company dt {
    font-weight: 700;
}

.case-company dd {
    margin: 0;
}

/* サイド：会社情報・CTA（スクロールしても追従） */
.case-article__aside {
    position: sticky;
    top: 96px;
}

.case-profile {
    padding: var(--spacing-sm);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
}

.case-profile__logo {
    margin-bottom: var(--spacing-sm);
    text-align: center;
}

.case-profile__logo img {
    max-width: 100%;
    max-height: 80px;
}

.case-profile dl {
    font-size: 0.7rem;
    line-height: 1.6;
}

.case-profile dt {
    font-weight: 700;
    color: var(--color-text-sub);
}

.case-profile dd {
    margin: 2px 0 0;
}

.case-profile dd + dt {
    margin-top: 10px;
}

.case-aside-cta {
    display: grid;
    gap: 10px;
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--color-section-alt-bg);
    text-align: center;
}

.case-aside-cta__title {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.6;
}

.case-aside-cta .btn {
    max-width: none;
    padding: 12px;
    font-size: 0.8rem;
}

.case-article__back {
    margin-top: var(--spacing-lg);
    font-size: 0.75rem;
}

@media (max-width: 1024px) {
    .case-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .case-article__layout {
        grid-template-columns: 1fr;
    }

    .case-article__aside {
        position: static;
    }
}

@media (max-width: 600px) {
    .case-list,
    .case-figures {
        grid-template-columns: 1fr;
    }

    .case-company dl {
        grid-template-columns: 1fr;
    }
}

/* ===== アンカーリンク（/#pricing など）で移動したとき、見出しが固定ヘッダーに隠れないようにする ===== */
/* --header-h は main.js がヘッダーの実際の高さを設定 */
main section[id] {
    scroll-margin-top: var(--header-h, 72px);
}

/* ===== スマホ表示の修正（2026-10-08） ===== */
@media (max-width: 768px) {
    /* トップFVの見出し：1行に収まるよう文字を小さく（44px固定だと画面からはみ出す） */
    .hero__title {
        font-size: clamp(28px, 8vw, 44px);
    }

    /* 機能ページ上部：2列のままで見出し・ボタンが途中で折り返していたため、縦に並べる */
    .fp-hero__inner {
        grid-template-columns: 1fr;
    }

    /* フッター：リンク列の上の余白（PC用の46px）で空白ができていたため詰める */
    .site-footer__links {
        padding-top: 0;
    }

    /* 機能ページ上部のボタン：「無料で使ってみる」「資料請求」を横に並べられる大きさに */
    .fp-hero__cta {
        flex-wrap: nowrap;
        gap: 10px;
    }

    .fp-hero__cta .btn {
        flex: 1 1 0;
        min-width: 0;
        padding: 12px 6px;
        font-size: 0.75rem;
        letter-spacing: 0.02em;
        text-align: center;
        white-space: nowrap;
    }

    /* 料金表：左の項目名の列を固定し、プランの列だけ横スクロール */
    .pricing__table {
        min-width: 520px;
    }

    .pricing__th-blank,
    .pricing__row-label {
        position: sticky;
        left: 0;
        z-index: 2;
        /* 表の罫線は固定列と一緒に動かないため、右端の線と影を固定列側に付ける */
        box-shadow: inset -1px 0 0 #aaa, 3px 0 6px rgba(0, 0, 0, 0.08);
    }

    .pricing__th-blank {
        width: 25%;
        background: #f8f8f6;
    }

    .pricing__row-label {
        padding: 10px 8px;
    }

    .pricing__table tbody tr:hover .pricing__row-label {
        background-color: #f8f8f6;
    }
}

/* ================================================
   機能ページ ヒーローのレイヤー表現（電子ブック）
   パーツを％で重ね、マウスで視差（パララックス）を付ける。
   JS が --mx / --my（-1〜1）を更新し、各レイヤーの --d で移動量が決まる。
================================================ */
.fp-hero__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 892 / 650; /* デザイン案のアートワーク全体の比率 */
    perspective: 1200px;
    overflow: visible;
}

.fp-hero__layer {
    position: absolute;
    animation: fp-hero-float 9s ease-in-out infinite;
}

.fp-hero__layer img {
    display: block;
    width: 100%;
    height: auto;
    /* PNGの透過形状に沿った影（box-shadowだと四角い枠に影が出てしまう） */
    filter: drop-shadow(var(--sh, 0 0 0 transparent));
    transform: translate3d(
        calc(var(--mx, 0) * var(--d, 0) * 1px),
        calc(var(--my, 0) * var(--d, 0) * 0.6px),
        0
    );
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

@keyframes fp-hero-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* アートワークを大きく見せるため、画像側のカラムを広く取り、
   デザイン案と同じく右側はコンテナからはみ出させる */
/* FV背景のスプラッタ（back_splash.png）。
   疑似要素で敷き、z-index:-1 で中身より後ろへ。isolation で他セクションに影響させない。 */
.fp-hero--stage {
    position: relative;
    isolation: isolate;
    overflow-x: clip; /* はみ出しで横スクロールが出ないように */
}

.fp-hero--stage::before {
    content: "";
    position: absolute;
    top: 4%;
    right: -8%;
    width: 80%;
    aspect-ratio: 1800 / 683;
    background: url('../images/features/back_splash.png') no-repeat center center / contain;
    opacity: .55; /* 前面のUI画像を邪魔しない濃度に */
    z-index: -1;
    pointer-events: none;
}

@media (max-width: 768px) {
    .fp-hero--stage::before {
        top: auto;
        bottom: 0;
        right: -14%;
        width: 118%;
    }
}

@media (min-width: 769px) {
    .fp-hero__inner--stage {
        grid-template-columns: 1fr 1.45fr;
        align-items: center;
    }

    /* width が 100% で入っているため、負マージンではなく calc で外側へ広げる */
    .fp-hero__inner--stage .fp-hero__stage {
        width: calc(100% + 60px);
    }

    /* テキスト側は上下中央ではなく上寄せ */
    .fp-hero__inner--stage .fp-hero__text {
        align-self: start;
        margin-top: 2em;
    }

    /* リード文はPCで2行に分ける（br-pc）ため、1行固定を解除する */
    .fp-hero__inner--stage .fp-hero__lead {
        font-size: .9rem;
        white-space: normal;
    }

    /* CTAはPCでは必ず横並び（カラムが狭くなっても縦積みにしない） */
    .fp-hero__inner--stage .fp-hero__cta {
        flex-wrap: nowrap;
    }

    .fp-hero__inner--stage .fp-hero__cta .btn {
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    .fp-hero__stage {
        max-width: 460px;
        margin-inline: auto;
        /* レイヤーの高さは「幅×元画像の比率」で決まり、ステージの高さには連動しない。
           PC用の比率のままだと絵の下に大きな余白ができるため、SPでは箱を低くする */
        aspect-ratio: 892 / 440;
    }

    /* スマホでは画像を見出しより上に出す（マークアップ順は変えずに order で入れ替え）。
       下の間隔は .fp-hero__inner のグリッド行間が持つので、ここでは足さない */
    .fp-hero__inner--stage .fp-hero__stage {
        order: -1;
    }
}

/* OS側で「視差効果を減らす」が有効なときは動かさない */
@media (prefers-reduced-motion: reduce) {
    .fp-hero__layer { animation: none; }
    .fp-hero__layer img { transform: none; transition: none; }
}

/* ===== 機能ページ上部：見出しまわりの文字サイズ ===== */
.fp-hero__catch {
    font-size: 1.2rem;
}

.fp-hero__title {
    font-size: clamp(40px, 5vw, 54px);
}

/* ================================================
   機能概要カード：黄色の見出し帯をやめ、
   アイコン → 見出し → 説明 の白カードに変更
================================================ */
.fp-what__item {
    padding: 28px 20px 24px;
    background: #fff;
    border: 1px solid #ededed;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

/* マークアップ（見出し→アイコン→説明）は変えずに、表示順だけアイコンを先頭へ */
.fp-what__icon {
    order: -1;
    width: 56px;
    height: 56px;
    margin-block: 0 18px;
    color: var(--color-text);
}

.fp-what__header {
    /* flex のままだと <br> が独立したフレックスアイテムになり改行が効かないため block にする */
    display: block;
    min-height: 0;
    padding: 0;
    margin-bottom: 12px;
    background: none;
    color: var(--color-text);
    font-size: .95rem;
    text-align: center;
}

/* 「開発中」バッジは見出しの横ではなく下に置く */
.fp-what__header .badge-dev {
    display: block;
    width: fit-content;
    margin: 8px auto 0;
}

.fp-what__desc {
    padding: 0;
    font-size: 0.7rem;
}

.section-desc {
    font-size: 1rem;
}

.cmp__cell {
    font-size: 0.85rem;
}

/* ================================================
   AI検索（AIO）・SEO対策の比較表
   ・左のラベル列（検索エンジン／AI検索／新規顧客との接点）を廃止し2カラムに
   ・2枚の独立したカードに見せ、その間に▶を置く
   ・右カードは黒→黄色（アクセント）основ に変更
================================================ */
.cmp {
    position: relative;
    --cmp-label-w: 170px;
    --cmp-gap: 64px;
}

@media (min-width: 769px) {
    .cmp__row {
        grid-template-columns: var(--cmp-label-w) 1fr 1fr;
        gap: 0 var(--cmp-gap); /* 中央の▶のぶんを空ける */
    }

    /* ラベル列はカードの外なので罫線は引かない */
    .cmp__label {
        border-bottom: none;
    }

    /* 2枚のカードのちょうど中間に▶を置く
       = ラベル幅 + 余白1.5個分 + カード1枚の幅の半分 */
    .cmp::after {
        content: "";
        position: absolute;
        top: 50%;
        left: calc(
            var(--cmp-label-w) + var(--cmp-gap) * 1.5
            + (100% - var(--cmp-label-w) - var(--cmp-gap) * 2) / 2
        );
        transform: translate(-50%, -50%);
        width: 0;
        height: 0;
        border-left: 14px solid var(--color-text);
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
    }
}

/* ----- ヘッダー ----- */
.cmp__head-icon {
    display: none; /* アイコンは出さない */
}

.cmp__row--head .cmp__cell {
    padding-block: 20px;
    border-radius: 16px 16px 0 0;
}

.cmp__row--head .cmp__cell--before {
    background: #7f7f7f;
}

.cmp__row--head .cmp__cell--after {
    background: var(--color-accent);
    color: var(--color-text);
    border: 2px solid var(--color-accent);
    border-bottom: none;
}

.cmp__tag {
    padding: 3px 16px;
    background: #fff;
    color: #666;
    font-size: 0.68rem;
}

.cmp__cell--after .cmp__tag {
    background: #fff;
    color: var(--color-text);
    border: 1px solid var(--color-text);
}

.cmp__head-title {
    font-size: 1rem;
}

/* ----- 本文 ----- */
.cmp__cell {
    padding-block: 24px;
}

.cmp__cell--before {
    border-bottom: 1px solid #e4e4e4;
}

.cmp__cell--after {
    border-inline: 2px solid var(--color-accent);
    border-bottom: 1px solid #efefef;
}

.cmp__row:last-child .cmp__cell {
    border-radius: 0 0 16px 16px;
}

.cmp__row:last-child .cmp__cell--before {
    border-bottom: none;
}

.cmp__row:last-child .cmp__cell--after {
    border-bottom: 2px solid var(--color-accent);
}

/* 強調はマーカー風に全高を塗る */
.cmp__cell--after strong {
    background: linear-gradient(transparent 12%, var(--color-accent) 12%);
}

@media (max-width: 768px) {
    .cmp__row { gap: 0 10px; }

    /* ラベルは行の上に1行で出す。区切りとして下罫線を引く */
    .cmp__label {
        background-color: #fff;
        grid-column: 1 / -1;
        flex-direction: row;
        padding: var(--spacing-sm) 0 6px;
        border-bottom: 1px solid grey;
        margin-bottom: 8px;
        margin-top: 12px;
    }
}

@media (max-width: 768px) {
    .section-desc {
        font-size: .75rem;
    }
}

/* ===== スマホのみ改行（br-pc の逆。PCでは改行しない） ===== */
@media (min-width: 769px) {
    .br-sp { display: none; }
}

@media (max-width: 768px) {
    .cmp__head-title {
        font-size: .8rem;
    }

    .cmp__cell {
        font-size: 0.75rem;
    }
}

/* ================================================
   公開範囲の制御：カード上部の色帯とメーターを廃止し、
   機能概要カード（.fp-what__item）と同じ見た目に揃える
================================================ */
.lv__item {
    padding: 28px 20px 24px;
    background: #fff;
    border: 1px solid #ededed; /* 6px の --lv-color 帯をやめる */
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

/* ================================================
   こんなシーンで活用できます（.uc）
   カードの見た目は .fp-what__item / .lv__item と統一
================================================ */
.uc {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    align-items: start;
}

.uc__item {
    padding: 20px;
    background: #fff;
    border: 1px solid #ededed;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

.uc__thumb {
    padding: 14px;
    margin-bottom: 18px;
    background: #f6f6f7;
    border-radius: 12px;
}

.uc__thumb img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2; /* 画像ごとに縦横比が違っても高さをそろえる */
    object-fit: contain;
    border-radius: 6px;
}

.uc__title {
    margin-bottom: 14px;
    font-size: 0.95rem;
    font-weight: 700;
}

.uc__list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.uc__list li {
    position: relative;
    padding-left: 28px;
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--color-text-sub);
}

/* 黄色の角丸バッジ＋白抜きのチェック（画像を使わずCSSで描く） */
.uc__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.05em;
    width: 19px;
    height: 19px;
    border-radius: 5px;
    background: var(--color-accent);
}

.uc__list li::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 0.38em;
    width: 9px;
    height: 5px;
    border-left: 2px solid var(--color-text);
    border-bottom: 2px solid var(--color-text);
    transform: rotate(-45deg);
}

@media (max-width: 1024px) {
    .uc { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}

/* ================================================
   2機能を左右に並べる比較レイアウト（.split）
   PC: 2カラム ／ 768px以下: 上下
================================================ */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: start;
    /* 背景パネル（z-index:-1）がセクションの背景色の裏に回らないようにする */
    isolation: isolate;
}

.split__title {
    margin-bottom: 6px;
    font-size: 1.15rem;
    font-weight: 700;
    text-align: center;
}

.split__desc {
    margin-bottom: var(--spacing-md);
    font-size: 0.78rem;
    line-height: 1.8;
    color: var(--color-text-sub);
    text-align: center;
}

/* 中に入る既存レイアウトは、カラム幅に合わせて1列に落とす */
.split .site-cards {
    grid-template-columns: 1fr;
}

.split .zig {
    max-width: none;
    gap: var(--spacing-lg);
}

.split .zig__row {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

/* 偶数行でテキストを右に回す指定は、1列では不要 */
.split .zig__row:nth-child(even) .zig__text {
    order: 0;
}

/* 背景色を画面の端まで伸ばすため、はみ出しはこのセクションで止める。
   下パディングは入れず、背景パネルを直下のCTAに接させる */
/* 背景パネルを画面端まで伸ばすセクションに付ける（横スクロール防止） */
.fp-section--bleed {
    overflow-x: clip;
}

.fp-section--split {
    padding-bottom: 0;
}

/* --- 右カラムに背景パネルを敷くバリエーション（.split--panel） ---
   幅計算に依存しないよう、疑似要素を画面外まで伸ばす */
.split--panel .split__col + .split__col {
    position: relative;
}

.split--panel .split__col + .split__col::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -100vw; /* 右端まで。はみ出しは .fp-section--split で切る */
    background-color: #dfdfdf;
    z-index: -1;
}

@media (min-width: 769px) {
    .split {
        column-gap: var(--spacing-xl);
    }

    /* 見出しの高さを揃えるため、上下の余白は両カラムに入れる */
    .split__col {
        padding-block: var(--spacing-lg);
    }

    .split--panel .split__col + .split__col {
        padding-left: var(--spacing-xl);
    }
}

@media (max-width: 768px) {
    .split {
        grid-template-columns: 1fr;
        row-gap: var(--spacing-lg);
    }

    .split--panel .split__col + .split__col {
        padding: var(--spacing-lg) 0;
    }

    .split__title {
        font-size: 1rem;
    }

    /* スマホでは左右どちらも画面端まで伸ばす */
    .split--panel .split__col + .split__col::before {
        left: -100vw;
    }
}

/* 背景パネルを敷くセクションの説明文の下に区切り線。
   線と背景パネルを密着させるため、下マージンは0にする
   （カラム側に padding-block があるので中身は詰まらない） */
.fp-section--bleed .section-desc {
    margin-bottom: 0;
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid #e0e0e0;
}

/* カード用イラストをSVGファイルに差し替えたため、img にもサイズ指定を効かせる */
.site-card__visual img {
    width: auto;
    max-width: 120px;
    max-height: 100%;
    height: auto;
    object-fit: contain;
}

/* ================================================
   カードの見た目を .fp-what__item に統一
   （Split内の問い合わせフォーム4枚と、製品検索フォームの01〜04）
================================================ */
.site-card--side {
    border: 1px solid #ededed;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

.zig__point {
    padding: 28px 20px 24px;
    background: #fff;
    border: 1px solid #ededed;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

/* カード化したので、02以降の上の破線区切りは不要 */
.zig__point + .zig__point {
    margin-top: var(--spacing-md);
    padding-top: 28px;
    border-top: 1px solid #ededed;
}

.zig__title {
    margin-top: 10px;
}

/* バッジはカード本文の左上に、中身の幅ぶんだけ置く
   （.site-card__body が flex column のため、指定しないと横いっぱいに伸びる） */
.site-card__badge {
    align-self: flex-start;
    margin: var(--spacing-sm) var(--spacing-sm) 0;
}

/* バッジ直下の見出し：上の余白を詰め、縦棒の装飾は出さない（zig と同じ見え方に） */
.site-card__badge + .site-card__title {
    padding-top: 10px;
}

.site-card__badge + .site-card__title::before {
    content: none;
}

/* ================================================
   問い合わせフォーム側のカード：
   イラスト → バッジ → 見出し → 本文 の縦積みにし、
   余白・文字サイズは製品検索フォーム側（.zig__point）と揃える
================================================ */
.site-card--side {
    flex-direction: column; /* 横並び（画像左・本文右）をやめる */
}

/* 画像は本文の上に全幅で置く */
.site-card--side .site-card__image {
    display: flex;
    flex: 0 0 auto;
    width: 100%;
    margin-bottom: 18px;
    aspect-ratio: 16 / 4;
    border: none;
    border-radius: 12px;
}

.site-card--side {
    padding: 28px 20px 24px;
    background: #fff;
}

/* 内側の余白はカード側で持つため、各パーツの padding は外す */
.site-card--side .site-card__badge {
    margin: 0;
}

.site-card--side .site-card__title {
    padding: 10px 0 0;
    font-size: 1rem;
}

.site-card--side .site-card__text {
    padding: 0;
    font-size: 0.78rem;
}

/* 製品検索フォーム側：画像をカード内の先頭（画像→バッジ→見出し→本文）に置く */
.zig__point .zig__image {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 18px;
    padding: 0;
    border-radius: 12px;
}

/* ================================================
   機能概要カードの順次表示（左→右）
   data-reveal はJSが付与する。JSが動かない環境では
   この指定自体が当たらないため、カードは普通に表示される。
================================================ */
.fp-what[data-reveal] > .fp-what__item {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}

.fp-what[data-reveal] > .fp-what__item.is-visible {
    opacity: 1;
    transform: none;
}

/* パネルを敷く場合は左右のカラムを同じ高さに伸ばす。
   短いほうのカラムの下に背景の帯だけが残るのを防ぐ */
.split--panel,
.split--panel-left {
    align-items: stretch;
}

/* --- 左カラムに背景パネルを敷くバリエーション（.split--panel-left） ---
   .split--panel と左右対称。疑似要素を画面左外まで伸ばす */
.split--panel-left .split__col:first-child {
    position: relative;
}

.split--panel-left .split__col:first-child::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: -100vw; /* 左端まで。はみ出しは .fp-section--bleed で切る */
    background-color: #fff;
    z-index: -1;
}

@media (min-width: 769px) {
    .split--panel-left .split__col:first-child {
        padding-right: var(--spacing-xl);
    }
}

@media (max-width: 768px) {
    .split--panel-left .split__col:first-child {
        padding: var(--spacing-lg) 0;
    }

    /* スマホでは左右どちらも画面端まで伸ばす */
    .split--panel-left .split__col:first-child::before {
        right: -100vw;
    }
}

/* 「サイト作成でできること」：白パネルの右端に区切り線 */
.split__col.site-group:first-child {
    border-right: 1px solid #e0e0e0;
}

/* Splitセクションの下端に区切り線（PCのみ） */
@media (min-width: 769px) {
    .fp-section--split {
        border-bottom: 1px solid #e0e0e0;
    }
}

/* ================================================
   「サイト作成でできること」のカードを、
   form-cta の .site-card--side と同じ見た目に揃える
================================================ */
.site-group .site-card {
    padding: 24px 20px;
    border: 1px solid #ededed;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

.site-group .site-card .site-card__image {
    margin-bottom: 18px;
    border: none;
    border-radius: 12px;
}

.site-group .site-card__title {
    padding: 0;
    font-size: 1rem;
}

.site-group .site-card__text {
    padding: 8px 0 0;
    font-size: 0.78rem;
}