/* スマホ：流れる画像の表示範囲を画面の左右端まで広げる */
@media (max-width: 700px) {
    .ae-ai > .ae-ai__flow {
        width: calc(100% + 32px);
        max-width: none;
        margin-inline: -16px;
    }
}

/* 区画の間を流れる画像：大きさと高さの調整 */

/* 上側：鉛筆削りを少し小さく */
.ae-ai__flow--record .ae-works-flow__item:nth-child(4n + 1) img {
    transform: scale(0.88);
}

/* 上側：スポンジを大きくして、少し上へ */
.ae-ai__flow--record .ae-works-flow__item:nth-child(4n + 2) img {
    transform: translateY(-8px) scale(1.15);
}

/* 上側：シリカゲルを小さく */
.ae-ai__flow--record .ae-works-flow__item:nth-child(4n + 3) img {
    transform: translateY(-4px) rotate(-8deg) scale(0.82);
}

/* 上側：カメを少し小さくして、中央に配置 */
.ae-ai__flow--record .ae-works-flow__item:nth-child(4n) img {
    transform: scale(0.90);
}

/* 下側：クリップと惑星は85％ */
.ae-ai__flow--reverse .ae-works-flow__item:nth-child(4n + 1) img,
.ae-ai__flow--reverse .ae-works-flow__item:nth-child(4n + 2) img {
    width: 85%;
    height: 85%;
}

/* 下側：マカロンと星は75％ */
.ae-ai__flow--reverse .ae-works-flow__item:nth-child(4n + 3) img,
.ae-ai__flow--reverse .ae-works-flow__item:nth-child(4n) img {
    width: 75%;
    height: 75%;
}

/* 下側：左から右へ流す */
.ae-ai__flow--reverse .ae-works-flow__track {
    animation-direction: reverse;
}

/* 01と02の間：画像の間隔を少し詰める */
.ae-ai__flow--experiment {
    --flow-gap: clamp(12px, 2vw, 28px);
}

/* 画像の中心の高さをそろえる */
.ae-ai__flow--experiment .ae-works-flow__item img {
    transform: none;
}

/* 牛乳パックを少し小さくする */
.ae-ai__flow--experiment .ae-works-flow__item:nth-child(4n + 2) img {
    width: 72%;
    height: 72%;
}

/* 最後のご相談案内：開発相談ページと同じデザイン */
.ae-ai__talk {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: center;
    column-gap: 32px;
    margin-top: 40px;
    margin-bottom: 64px;
    border: 2px solid var(--ai-blue);
    border-radius: 8px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow:
        4px 4px 0 #62caff,
        8px 8px 0 rgba(6, 75, 250, 0.08);
    font-family: var(--font-family-base);
    line-height: 1.8;
}

.ae-ai__talk-heading {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    margin-bottom: 24px;
}

.ae-ai .ae-ai__talk-eyebrow {
    margin: 0 0 12px;
    color: var(--ai-ink);
    font: 700 12px/1.6 "Courier New", monospace;
    letter-spacing: 0.08em;
}

.ae-ai .ae-ai__talk-en {
    margin: 0;
    color: var(--ai-ink);
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(44px, 5vw, 80px);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.06em;
    overflow-wrap: normal;
    word-break: normal;
}

.ae-ai .ae-ai__talk-heading h2 {
    margin: 24px 0 0;
    color: var(--ai-ink);
    font-size: clamp(19px, 2vw, 28px);
    font-weight: 700;
    line-height: 1.5;
}

.ae-ai__talk-intro {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 36px;
}

.ae-ai__talk-copy p {
    max-width: none;
    margin: 0;
    font-size: 16px;
    line-height: 1.9;
    white-space: normal;
}

.ae-ai__talk-copy p + p {
    margin-top: 4px;
}

.ae-ai__talk-disks {
    position: static;
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0;
    pointer-events: none;
}

/* 光沢のある吹き出し */
.ae-ai__talk-chat {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 14px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.ae-ai__talk-chat li {
    position: relative;
    isolation: isolate;
    border: 1px solid #78b5ff;
    border-radius: 28px;
    padding: 16px 20px;
    background: linear-gradient(
        180deg,
        #fff 0%,
        #f3fbff 35%,
        #dcefff 75%,
        #c8e5ff 100%
    );
    color: #080b20;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.95),
        inset 0 -3px 5px rgba(67, 145, 255, 0.12),
        0 5px 0 #b8d9ff,
        0 9px 15px rgba(6, 75, 250, 0.12);
    transition:
        transform 240ms ease,
        box-shadow 240ms ease;
}

.ae-ai__talk-chat li::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 5px;
    right: 14px;
    left: 14px;
    height: 40%;
    border-radius: 24px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.9),
        rgba(255, 255, 255, 0)
    );
    pointer-events: none;
}

.ae-ai__talk-chat li::after {
    content: "";
    position: absolute;
    left: 26px;
    bottom: -6px;
    width: 10px;
    height: 10px;
    border-right: 1px solid #78b5ff;
    border-bottom: 1px solid #78b5ff;
    border-bottom-right-radius: 3px;
    background: #c8e5ff;
    transform: rotate(45deg);
}

/* お問い合わせボタン */
.ae-ai__talk-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
    min-height: 52px;
    border: 2px solid var(--ai-blue);
    padding: 12px 25px;
    background: #fff;
    color: var(--ai-blue);
    box-shadow: 3px 3px 0 #a9cdff;
    font-weight: 700;
    text-decoration: none;
}

.ae-ai__talk-button:hover {
    background: #edf5ff;
}

.ae-ai__talk-pending {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border: 1px solid #80afff;
    padding: 16px 28px;
    background: #fff;
    color: #515c75;
    font-size: 17px;
}

.ae-ai__talk-pending small {
    font-size: 13px;
}

/* ページ末尾：元の画面へ戻る */
.ae-ai__bottom-nav {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    max-width: 1280px;
    margin: 32px auto 0;
    padding-bottom: 0;
}

@media (min-width: 1000px) {
    .ae-ai__bottom-nav {
        width: calc(100% - 80px);
    }
}

/* 間隔は外側で管理し、画面下端の安全余白は共通設定に任せる */
.ae-ai__bottom-nav > .ae-page-return {
    --ae-return-gap: 0px;
    --ae-return-bottom-gap: 0px;
}

/* マウスを合わせたときの動き */
@keyframes ae-ai-talk-hop {
    0%, 100% { transform: translateY(0); }
    40% { transform: translateY(-6px); }
    70% { transform: translateY(-2px); }
}

@media (hover: hover) and (pointer: fine) {
    .ae-ai__talk-button:hover {
        animation: ae-ai-talk-hop 420ms ease;
    }

    .ae-ai__talk-chat li:hover {
        transform: translateY(-5px) rotate(-1deg);
        box-shadow:
            inset 0 2px 3px rgba(255, 255, 255, 0.95),
            inset 0 -3px 5px rgba(67, 145, 255, 0.12),
            0 5px 0 #b8d9ff,
            0 14px 22px rgba(6, 75, 250, 0.18);
    }

    .ae-ai__talk-chat li:nth-child(2):hover {
        transform: translateY(-5px) rotate(1deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ae-ai__talk-chat li {
        transition: none;
    }

    .ae-ai__talk-button:hover {
        animation: none;
    }

    .ae-ai__talk-chat li:hover,
    .ae-ai__talk-chat li:nth-child(2):hover {
        transform: none;
    }
}