/* システム開発ページ固有のレイアウト。
   DX・AI導入支援ページの余白と画像構成を踏襲し、
   画像が決まるまでは無地のプレースホルダーを表示する。 */

/* コンテンツ幅は共通の1180pxより広めに取り、画像コンポジションは
   ビューポート幅基準(--detail-bleed)でさらに大きくスケールさせる。
   上限1600pxは元画像の解像度(1440px)と16:9の高さが画面に収まる範囲から */
.system-page .detail-shell {
    width: min(100%, 1320px);
}

.system-visual-sticky,
.system-visual-frame--portrait {
    --detail-gutter: clamp(24px, 6vw, 80px);
    --detail-bleed: min(calc(100vw - 2 * var(--detail-gutter)), 1600px);
}

.system-page .detail-hero--cinematic + .detail-shell {
    padding-block-start: clamp(190px, 22vw, 300px);
}

.system-page .detail-blocks {
    gap: clamp(160px, 22vh, 260px);
    padding-bottom: clamp(130px, 18vh, 200px);
}

.system-visual-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(247, 251, 255, 0.04);
}

/* 番号付き説明: 横長と縦長の空ブロックを重ね、コピーを左右交互に置く */
.system-visual-sticky {
    position: relative;
    width: 100%;
    margin-top: 0;
    isolation: isolate;
}

.system-visual-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(247, 251, 255, 0.16);
    background: var(--detail-navy-soft);
    box-shadow: 0 24px 58px rgba(2, 10, 23, 0.32);
}

.system-visual-frame--wide {
    /* 画面が広いほど大きく動かす(シフト量 range/2 は picture のはみ出し15%以内) */
    --visual-range: min(-100px, calc(var(--detail-bleed) * -0.08));
    width: var(--detail-bleed);
    margin-inline: calc(50% - var(--detail-bleed) / 2);
    aspect-ratio: 16 / 9;
    z-index: 1;
}

.system-visual-frame--portrait {
    --visual-range: min(-130px, calc(var(--detail-bleed) * -0.106));
    position: relative;
    float: left;
    width: calc(var(--detail-bleed) * 0.31);
    margin: calc(var(--detail-bleed) * -0.2194) calc(var(--detail-bleed) * 0.03) 0 calc(50% - var(--detail-bleed) / 2 + var(--detail-bleed) * 0.11);
    aspect-ratio: 2 / 3;
    z-index: 2;
}

.system-visual-frame--portrait-right {
    float: right;
    margin-right: calc(50% - var(--detail-bleed) / 2 + var(--detail-bleed) * 0.11);
    margin-left: calc(var(--detail-bleed) * 0.03);
}

.system-visual-copy {
    width: 55%;
    margin-top: clamp(18px, 2.4vw, 30px);
    margin-left: auto;
}

.system-visual-copy--left {
    margin-right: auto;
    margin-left: 0;
}

.system-visual-copy::after {
    content: '';
    display: table;
    clear: both;
}

.system-visual-copy > .detail-eyebrow,
.system-visual-copy > .detail-section-title {
    width: 100%;
}

.system-visual-copy .detail-block__body {
    max-width: none;
    display: block;
}

.system-visual-copy .detail-block__body p {
    max-width: 760px;
    margin-left: auto;
}

.system-visual-frame--wide picture,
.system-visual-frame--portrait picture,
.system-visual-frame--wide img,
.system-visual-frame--portrait img {
    display: block;
    width: 100%;
}

/* はみ出し余白はシフト量(range の半分)を吸収できる 15% を確保する */
.system-visual-frame--wide picture,
.system-visual-frame--portrait picture {
    position: absolute;
    inset: -15% 0 auto;
    height: 130%;
}

.system-visual-frame--wide img,
.system-visual-frame--portrait img {
    height: 100%;
    object-fit: cover;
    filter: saturate(0.82) brightness(0.9) contrast(0.98);
}

.system-visual-frame--wide::after,
.system-visual-frame--portrait::after {
    background: linear-gradient(180deg, rgba(7, 26, 52, 0.02), rgba(7, 26, 52, 0.2));
}

.detail-motion-ready [data-detail-section] .system-visual-frame--wide picture,
.detail-motion-ready [data-detail-section] .system-visual-frame--portrait picture,
.detail-motion-ready [data-detail-section] .system-field-frame picture {
    transform: translate3d(
        0,
        calc((var(--section-progress, 0.5) - 0.5) * var(--visual-range, 0px)),
        0
    );
    will-change: transform;
}

/* 説明文は段落間の余白を設けず、連続した文章として見せる */
.system-page .detail-block--essay .detail-block__body {
    gap: 0;
}

.system-page .detail-block--essay .detail-block__body p + p {
    margin-top: 0;
}

/* 費用の目安: DXページの料金プランと同じカード構成を2列で表示する */
.system-plan-grid {
    margin-top: clamp(34px, 5vh, 52px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 1.7vw, 24px);
}

.system-plan {
    padding: clamp(26px, 2.4vw, 34px) clamp(20px, 1.9vw, 28px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid var(--detail-line);
    background: var(--detail-navy-soft);
}

.system-plan__name {
    color: rgba(247, 251, 255, 0.92);
    font-size: 0.94rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.system-plan__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 6px;
    color: rgba(247, 251, 255, 0.92);
}

.system-plan__price-num {
    font-family: 'Inter', sans-serif;
    font-size: clamp(2rem, 2.9vw, 2.6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
}

.system-plan__price-yen {
    font-size: 1rem;
    font-weight: 600;
}

.system-plan__summary {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--detail-line);
    color: rgba(247, 251, 255, 0.86);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.55;
}

.system-plan__features {
    gap: 10px;
}

.system-plan__features li {
    padding-left: 24px;
    font-size: 0.82rem;
    line-height: 1.65;
}

.system-plan__features li::before {
    top: 0.55em;
    left: 2px;
    width: 9px;
    height: 5px;
}

.system-plan__fit {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(247, 251, 255, 0.12);
    color: rgba(247, 251, 255, 0.76);
    font-size: 0.8rem;
    line-height: 1.65;
}

.system-plan__fit-label {
    display: block;
    margin-bottom: 6px;
    color: var(--detail-faint);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.06em;
}

.system-plan-notes {
    max-width: 760px;
    line-height: 1.7;
}

.system-plan-notes p + p {
    margin-top: 0;
}

/* FIELD 01/02: 縦長画像とテキストの2カラム */
.system-field-split {
    display: grid;
    grid-template-columns: minmax(0, 40%) minmax(0, 54%);
    justify-content: space-between;
    align-items: center;
}

/* 画像右配置でも画像側を40%に保つため、トラック幅も入れ替える */
.system-field-split--image-right {
    grid-template-columns: minmax(0, 54%) minmax(0, 40%);
}

.system-field-split--image-right .system-field-frame { order: 2; }
.system-field-split--image-right .system-field-copy { order: 1; }

.system-field-frame {
    --visual-range: -110px;
    margin: 0;
    aspect-ratio: 2 / 3;
}

.system-field-frame picture,
.system-field-frame img {
    display: block;
    width: 100%;
}

/* はみ出し余白はシフト量(range の半分)を吸収できる 15% を確保する */
.system-field-frame picture {
    position: absolute;
    inset: -15% 0 auto;
    height: 130%;
}

.system-field-frame img {
    height: 100%;
    object-fit: cover;
    filter: saturate(0.82) brightness(0.9) contrast(0.98);
}

.system-field-frame::after {
    background: linear-gradient(180deg, rgba(7, 26, 52, 0.02), rgba(7, 26, 52, 0.2));
}

.system-field-copy .detail-block__body {
    max-width: none;
}

.system-related-link {
    width: fit-content;
    max-width: 100%;
    justify-self: start;
}

/* DXページと同じ、早めで軽いスクロール連動 */
@media (min-width: 901px) {
    .detail-motion-ready .system-page [data-detail-section] .system-visual-frame {
        --visual-progress: clamp(0, calc((var(--section-progress) - var(--visual-delay, 0.04)) * 4), 1);
        opacity: var(--visual-progress);
        transform: translate3d(0, calc((1 - var(--visual-progress)) * 18px), 0);
    }

    .detail-motion-ready .system-page [data-detail-section] .system-visual-frame--portrait {
        --visual-delay: 0.12;
    }

    .detail-motion-ready .system-page [data-detail-section] .detail-section-title h2 {
        --title-progress: clamp(0, calc((var(--section-progress) - 0.03) * 4), 1);
    }

    .detail-motion-ready .system-page [data-detail-section] .detail-section-title__line {
        --line-progress: clamp(0, calc((var(--section-progress) - 0.12) * 4), 1);
    }

    .detail-motion-ready .system-page [data-detail-section] .detail-eyebrow,
    .detail-motion-ready .system-page [data-detail-section] .detail-block__body,
    .detail-motion-ready .system-page [data-detail-section] .detail-faq__list,
    .detail-motion-ready .system-page .detail-contact__inner > * {
        --reveal-progress: clamp(0, calc((var(--section-progress) - var(--reveal-delay, 0)) * 3.5), 1);
    }

    .detail-motion-ready .system-page [data-detail-section] .detail-block__body,
    .detail-motion-ready .system-page [data-detail-section] .detail-faq__list {
        --reveal-delay: 0.16;
    }

    .detail-motion-ready .system-page [data-detail-section] .system-plan {
        --reveal-progress: clamp(0, calc((var(--section-progress) - var(--reveal-delay, 0.14)) * 5), 1);
        opacity: var(--reveal-progress);
        transform: translate3d(0, calc((1 - var(--reveal-progress)) * 20px), 0);
    }

    .detail-motion-ready .system-page [data-detail-section] .system-plan:nth-child(2) {
        --reveal-delay: 0.18;
    }
}

@media (max-width: 900px) {
    .system-page .detail-hero--cinematic + .detail-shell {
        padding-block-start: clamp(150px, 26vw, 220px);
    }

    .system-page .detail-blocks {
        gap: clamp(96px, 14vh, 140px);
        padding-bottom: clamp(96px, 14vh, 140px);
    }

    .system-visual-frame--portrait {
        width: 42%;
        margin-top: -21.94%;
        margin-right: 2%;
        margin-left: 8%;
    }

    .system-visual-frame--portrait-right {
        margin-right: 8%;
        margin-left: 2%;
    }

    .system-visual-copy {
        width: 48%;
        margin-top: clamp(14px, 4vw, 24px);
    }

    .system-visual-copy--left {
        margin-right: auto;
        margin-left: 0;
    }

    .detail-motion-ready .system-page [data-detail-section] .system-visual-frame {
        opacity: 0;
        transform: translate3d(0, var(--challenge-base-y, 0px), 0);
        transition: opacity 1s var(--ease-slow) var(--visual-lag, 0.2s);
    }

    .detail-motion-ready .system-page [data-detail-section] .system-visual-frame--portrait { --visual-lag: 0.3s; }

    /* モバイルはフレームが小さく、picture のはみ出し余白を超えないよう
       パララックスのシフト量(range の半分)を縮小する */
    .system-visual-frame--wide { --visual-range: -56px; }
    .system-visual-frame--portrait { --visual-range: -88px; }
    .system-field-frame { --visual-range: -56px; }

    .detail-motion-ready .system-page [data-detail-section].is-visible .system-visual-frame {
        opacity: 1;
        transform: translate3d(0, var(--challenge-base-y, 0px), 0);
    }

    .detail-motion-ready .system-page [data-detail-section] .detail-section-title h2 {
        transition-duration: 1s;
    }

    .detail-motion-ready .system-page [data-detail-section] .detail-section-title__line {
        transition-duration: 1.1s;
        transition-delay: 0.18s;
    }

    .detail-motion-ready .system-page [data-detail-section].is-visible [data-detail-title-reveal]:not(.is-title-visible) h2 {
        transform: translateY(102%);
    }

    .detail-motion-ready .system-page [data-detail-section].is-visible [data-detail-title-reveal]:not(.is-title-visible) .detail-section-title__line {
        transform: scaleX(0);
    }

    .detail-motion-ready .system-page [data-detail-title-reveal].is-title-visible h2 {
        transform: translateY(0);
    }

    .detail-motion-ready .system-page [data-detail-title-reveal].is-title-visible .detail-section-title__line {
        transform: scaleX(1);
    }

    .detail-motion-ready .system-page [data-detail-section] .detail-eyebrow {
        transition-duration: 0.85s;
    }

    .detail-motion-ready .system-page [data-detail-section] .detail-block__body,
    .detail-motion-ready .system-page [data-detail-section] .detail-faq__list,
    .detail-motion-ready .system-page [data-detail-section] .detail-contact__inner > * {
        transition-duration: 1s;
        transition-delay: 0.25s;
    }

    .detail-motion-ready .system-page [data-detail-section] .system-plan {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity 1s var(--ease-slow) var(--reveal-lag, 0.1s),
                    transform 1s var(--ease-slow) var(--reveal-lag, 0.1s);
    }

    .detail-motion-ready .system-page [data-detail-section] .system-plan:nth-child(2) {
        --reveal-lag: 0.16s;
    }

    .detail-motion-ready .system-page [data-detail-section].is-visible .system-plan {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 600px) {
    /* 縦長は横長の下辺に少しだけ重ねる */
    .system-visual-frame--portrait {
        float: none;
        width: 68%;
        margin: calc(var(--detail-bleed) * -0.09) auto 0;
        margin-inline: auto;
    }

    .system-visual-frame--portrait-right {
        margin-inline: auto;
    }

    .system-visual-copy {
        width: 100%;
        margin-top: clamp(28px, 8vw, 40px);
    }

    .system-visual-copy .detail-block__body {
        margin-top: 18px;
    }

    .system-visual-copy .detail-block__body p {
        margin-left: 0;
    }

    .system-plan-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    /* FIELD 01/02は縦積みにし、画像を常に上に置く */
    .system-field-split,
    .system-field-split--image-right {
        grid-template-columns: minmax(0, 1fr);
        row-gap: clamp(24px, 7vw, 36px);
    }

    .system-field-split--image-right .system-field-frame { order: 0; }
    .system-field-split--image-right .system-field-copy { order: 0; }

    .system-field-frame {
        width: 68%;
        margin-inline: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .system-visual-frame,
    .system-plan {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .system-visual-frame picture {
        transform: none !important;
    }
}