/* プロジェクト管理方法：基本設定 */
.ae-management-page {
    --management-blue: #064bfa;
    color: #080b20;
    font-family: var(--font-family-base);
    line-height: 1.8;
    background-color: #deecff;
    background-image: radial-gradient(
    circle,
    #fff 1.5px,
    transparent 1.5px
);
    background-size: 24px 24px;
    background-attachment: fixed;
}

.ae-management-page *,
.ae-management-page *::before,
.ae-management-page *::after {
    box-sizing: border-box;
}

.ae-management {
    width: calc(100% - 80px);
    max-width: 1280px;
    margin: 0 auto;
    padding: 64px 0;
}

.ae-management a:focus-visible {
    outline: 3px solid var(--management-blue);
    outline-offset: 5px;
}

/* ページ見出し */
.ae-management__header {
    margin-bottom: 48px;
}

.ae-management__eyebrow {
    margin: 0 0 24px;
    font: 700 12px/1.6 "Courier New", monospace;
    letter-spacing: 0.08em;
}

.ae-management__english {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(44px, 5vw, 80px);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.06em;
}

.ae-management-page .ae-management__header h1 {
    margin: 24px 0;
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 700;
    line-height: 1.5;
}

.ae-management__intro {
    margin: 0;
    font-size: 16px;
    line-height: 1.9;
}

/* 中央の線 */
.ae-management__timeline {
    position: relative;
    --line-progress: 1;
}

.ae-management__spine {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 1px);
    width: 2px;
    background: #c8dfff;
    pointer-events: none;
}

.ae-management__spine-fill {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--management-blue);
    transform: scaleY(var(--line-progress));
    transform-origin: top;
}

.ae-management__start,
.ae-management__goal {
    position: absolute;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);
    border-radius: 20px;
    padding: 4px 16px;
    background: var(--management-blue);
    color: #fff;
    font: 700 13px/1.5 "Courier New", monospace;
    letter-spacing: 0.06em;
}

.ae-management__start {
    top: -12px;
}

.ae-management__goal {
    bottom: -12px;
}

/* 左右交互の工程 */
.ae-management__steps {
    display: grid;
    gap: 24px;
    margin: 0;
    padding: 40px 0;
    list-style: none;
}

.ae-management__step {
    position: relative;
    display: grid;
    min-height: 240px;
    grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr);
    align-items: start;
    scroll-margin-top: 56px;
}

/* 最後の工程は短い文章に合わせる */
.ae-management__step:last-child {
    min-height: 110px;
}

.ae-management__number {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--management-blue);
    color: #fff;
    box-shadow: 0 0 0 1px #96bdff;
    font: 700 21px/1 "Courier New", monospace;
}

.ae-management-page .ae-management__content {
    --card-rotate-x: 0deg;
    --card-rotate-y: 0deg;
    --card-move-x: 0px;
    --card-move-y: 0px;
    --card-lift: 0px;

    grid-column: 3;
    grid-row: 1;
    position: relative;
    min-width: 0;
    border: 1px solid #739eff;
    border-radius: 12px;
    padding: 16px 24px 24px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(6, 75, 250, 0.16);
    overflow: visible;

    transform:
        perspective(1000px)
        translate(
            var(--card-move-x),
            calc(var(--card-move-y) + var(--card-lift))
        )
        rotateX(var(--card-rotate-x))
        rotateY(var(--card-rotate-y));
    transform-origin: center;
    transition:
        transform 240ms ease,
        box-shadow 240ms ease,
        border-color 240ms ease;
}

@media (hover: hover) and (pointer: fine)
       and (prefers-reduced-motion: no-preference) {
    .ae-management-page .ae-management__content:hover {
        --card-lift: -4px;
        border-color: var(--management-blue);
        box-shadow: 0 12px 28px rgba(6, 75, 250, 0.2);
    }
}
.ae-management__step:nth-child(even) .ae-management__content {
    grid-column: 1;
}

.ae-management__content::before {
    content: "";
    position: absolute;
    top: 24px;
    left: -40px;
    width: 40px;
    border-top: 2px solid var(--management-blue);
}

.ae-management__step:nth-child(even) .ae-management__content::before {
    right: -40px;
    left: auto;
}

.ae-management-page .ae-management__content h2 {
    margin: 0 0 12px;
    color: var(--management-blue);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    text-wrap: pretty;
}

.ae-management__lead {
    margin: 0;
    color: #515c75;
    font-size: 16px;
    line-height: 1.85;
    text-wrap: pretty;
}

/* 挿絵の基本位置 */
.ae-management__figure {
    position: absolute;
    top: -220px;
    right: 12px;
    left: auto;
    display: block;
    width: 220px;
    height: 200px;
    margin: 0;
    object-fit: contain;
}

.ae-management__step:nth-child(even) .ae-management__figure {
    right: auto;
    left: 12px;
}

/* 01：ページ上部 */
.ae-management__step:first-child .ae-management__figure {
    top: -260px;
    right: 12px;
    left: auto;
    width: 260px;
    height: 240px;
}

/* 03〜06：後半の挿絵を大きくする */
.ae-management__step:nth-child(n + 3) .ae-management__figure {
    top: -260px;
    width: 300px;
    height: 240px;
}

/* 02：電卓を右へ。高さは維持 */
.ae-management__step:nth-child(2) .ae-management__figure {
    right: 12px;
    left: auto;
}

/* 04：番号のすぐ左へ。高さは維持 */
.ae-management__step:nth-child(4) .ae-management__figure {
    top: -220px;
    right: 0;
    left: auto;
    height: 200px;
}

/* マウスを合わせると一度だけ軽く震える */
@keyframes ae-management-image-shake {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    20% { transform: translate(-2px, 1px) rotate(-1deg); }
    40% { transform: translate(2px, -1px) rotate(1deg); }
    60% { transform: translate(-2px, 0) rotate(-1deg); }
    80% { transform: translate(1px, 0) rotate(0.5deg); }
}

@media (hover: hover) and (pointer: fine) {
    .ae-management__figure:hover {
        animation: ae-management-image-shake 400ms linear;
    }
}
/* 挿絵と工程名 */
.ae-management__figure > .ae-management__illustration {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 具体的な取り組み */
.ae-management__items {
    display: grid;
    gap: 12px;
    margin-top: 20px;
}

.ae-management__item {
    border-left: 3px solid #90bdff;
    border-radius: 0 6px 6px 0;
    padding: 14px 18px;
    background: rgba(238, 248, 255, 0.9);
}

.ae-management-page .ae-management__item h3 {
    margin: 0 0 8px;
    color: #1648a6;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
}

.ae-management__item p {
    margin: 0;
    color: #080b20;
    font-size: 16px;
    line-height: 1.85;
    text-wrap: pretty;
}

.ae-management__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.ae-management__tags li {
    border: 1px solid #c2dcff;
    border-radius: 5px;
    padding: 5px 10px;
    background: #fff;
    color: #1648a6;
    font-size: 13px;
}

/* 番号とカードに到達したときの動き */
.ae-management__number.is-arriving {
    animation: ae-management-arrive 1.8s ease;
}

@keyframes ae-management-arrive {
    0%, 100% {
        transform: scale(1);
    }

    20%, 70% {
        transform: scale(1.25);
    }
}

/* 青い反射光。文字の操作を妨げない */
.ae-management__content::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background-image: linear-gradient(
        110deg,
        transparent 38%,
        rgba(6, 75, 250, 0.06) 43%,
        rgba(87, 170, 255, 0.32) 48%,
        rgba(211, 241, 255, 0.65) 50%,
        rgba(87, 170, 255, 0.26) 52%,
        transparent 60%
    );
    background-size: 250% 100%;
    background-position: 100% 0;
}

/* マウスの傾きとは別に、少し浮かせる */
.ae-management__content.is-arriving {
    animation: ae-management-card-arrive 1s ease-out;
}

.ae-management__content.is-arriving::after {
    animation: ae-management-card-shine 1s ease-out;
}

@keyframes ae-management-card-arrive {
    0%, 100% {
        translate: 0 0;
        border-color: #739eff;
        box-shadow: 0 8px 24px rgba(6, 75, 250, 0.16);
    }

    30% {
        translate: 0 -3px;
        border-color: #5287ff;
        box-shadow:
            0 10px 26px rgba(6, 75, 250, 0.18),
            0 0 10px rgba(70, 153, 255, 0.1);
    }

    65% {
        translate: 0 -1px;
        border-color: #6595ff;
        box-shadow: 0 9px 25px rgba(6, 75, 250, 0.17);
    }
}

@keyframes ae-management-card-shine {
    0% {
        opacity: 0;
        background-position: 100% 0;
    }

    20% {
        opacity: 0.35;
    }

    65% {
        opacity: 0.35;
    }

    100% {
        opacity: 0;
        background-position: 0% 0;
    }
}

/* 動きを抑える設定を使っている場合 */
@media (prefers-reduced-motion: reduce) {
    .ae-management-page .ae-management__content {
        transform: none;
        transition: none;
    }

    .ae-management__number.is-arriving,
    .ae-management__content.is-arriving,
    .ae-management__content.is-arriving::after,
    .ae-management__figure:hover {
        animation: none;
    }
}

/* 相談ページへの戻り口 */
.ae-management__back {
    margin-top: 28px;
    text-align: center;
}

/* 間隔は外側の配置枠で管理し、外観は共通設定を使う */
.ae-management__back > .ae-page-return {
    --ae-return-gap: 0px;
    --ae-return-bottom-gap: 0px;
}

/* 小さい画面 */
@media (max-width: 780px) {
    .ae-management {
        width: calc(100% - 32px);
        padding: 24px 0 40px;
    }

    /* タイトルと説明 */
    .ae-management__header {
        margin-bottom: 30px;
    }

    .ae-management__eyebrow {
        margin-bottom: 16px;
        font-size: 10px;
        letter-spacing: 0.04em;
    }

    .ae-management__english {
        font-size: clamp(28px, 7.5vw, 40px);
        line-height: 1.05;
        letter-spacing: -0.06em;
    }

    .ae-management-page .ae-management__header h1 {
        margin: 16px 0 12px;
        font-size: 18px;
        line-height: 1.5;
    }
    @media (max-width: 650px) {
        .ae-management-page .ae-management__header h1 {
            margin: 4px 0;
        }
    }

.ae-management__intro {
    font-size: 11px;
    line-height: 1.75;
    line-break: strict;
    text-wrap: pretty;
}

    .ae-management__intro br {
        display: none;
    }

    /* 左側の線と番号 */
    .ae-management__spine {
        left: 19px;
    }

    .ae-management__start,
    .ae-management__goal {
        left: 20px;
        padding: 3px 7px;
        font-size: 10px;
    }

    .ae-management__steps {
        gap: 18px;
        padding: 32px 0 28px;
    }

    .ae-management__step,
    .ae-management__step:last-child {
        min-height: 0;
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .ae-management__number {
        grid-column: 1;
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    /* 工程カード */
    .ae-management-page .ae-management__content,
    .ae-management__step:nth-child(even) .ae-management__content {
        grid-column: 2;
        margin-left: 8px;
        padding: 12px 12px 14px;
        border-radius: 10px;
    }

    .ae-management__content::before,
    .ae-management__step:nth-child(even) .ae-management__content::before {
        top: 18px;
        right: auto;
        left: -28px;
        width: 28px;
    }

    .ae-management-page .ae-management__content h2 {
        margin-bottom: 8px;
        font-size: 18px;
        line-height: 1.5;
        line-break: strict;
        text-wrap: pretty;
    }

.ae-management__lead {
    font-size: 11px;
    line-height: 1.7;
}

    /* 挿絵を小さくして縦の長さを抑える */
    .ae-management__figure,
    .ae-management__step:nth-child(even) .ae-management__figure,
    .ae-management__step:first-child .ae-management__figure,
    .ae-management__step:nth-child(n + 3) .ae-management__figure,
    .ae-management__step:nth-child(2) .ae-management__figure,
    .ae-management__step:nth-child(4) .ae-management__figure {
        position: static;
        width: min(45%, 120px);
        height: auto;
        aspect-ratio: auto;
        margin: 8px auto;
    }

    .ae-management__figure > .ae-management__illustration {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        object-fit: contain;
    }

    /* 水色の詳細説明 */
    .ae-management__items {
        gap: 8px;
        margin-top: 10px;
    }

    .ae-management__item {
        padding: 10px 12px;
    }

    .ae-management-page .ae-management__item h3 {
        margin-bottom: 6px;
        font-size: 16px;
        line-height: 1.5;
    }

    .ae-management__item p {
    font-size: 13px;
    line-height: 1.8;
    line-break: strict;
    text-wrap: pretty;
}
    .ae-management__tags {
        gap: 6px;
        margin-top: 10px;
    }

    .ae-management__tags li {
        padding: 4px 7px;
        font-size: 11px;
        line-height: 1.5;
    }

    /* 戻るボタン */
    .ae-management__back {
        margin-top: 24px;
    }

}
/* 選択画面の文字を読みやすく */
.ae-management-page .ae-management-view-choice {
    font-family: "Yu Gothic", Meiryo, sans-serif;
}

.ae-management-page .ae-management-view-choice p {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.8;
    color: #24344b;
}

.ae-management-page .ae-management-view-options strong {
    font-size: 17px;
}

.ae-management-page .ae-management-view-options .ae-view-description {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.8;
    opacity: 1;
    color: #24344b;
}

.ae-management-page .ae-management-view-options
button:first-child .ae-view-description {
    color: #fff;
}

.ae-management-page .ae-management-view-choice .ae-management-view-note {
    font-size: 14px;
    line-height: 1.9;
    color: #24344b;
}
/* 表示方法の選択画面：右上の戻る操作 */
.ae-management-page .ae-view-window-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ae-management-page .ae-view-close {
    appearance: none;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #ffffff80;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font: 700 20px/1 Arial, sans-serif;
    cursor: pointer;
}

.ae-management-page .ae-view-close[hidden] {
    display: none;
}

.ae-management-page .ae-view-close:hover {
    background: #ffffff30;
}

.ae-management-page .ae-view-close:active {
    background: #ffffff50;
}

.ae-management-page .ae-management-view-choice .ae-view-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
/* スマホ：戻るボタンと固定の自動表示ボタンの重なりを解消 */
@media (max-width: 780px) {
    body.ae-management-page .ae-management {
        padding-bottom: calc(
            120px + env(safe-area-inset-bottom, 0px)
        );
    }

    body.ae-management-page .ae-management__back {
        margin-top: 16px;
    }
}
/* 項目内本文：他ページの16px本文に合わせる */
body.ae-management-page .ae-management__item p {
    font-size: 16px;
}

/* 本文の出し分け */
.ae-management__text-mobile {
    display: none;
}

/* 上部右側：既存の共通戻り先処理を利用 */
.ae-management__return-top {
    margin: 0 0 20px;
    text-align: right;
}

.ae-management__return-top a {
    display: inline-block;
    max-width: 100%;
    padding-block: 8px;
    color: var(--management-blue);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;
    text-decoration: underline;
    text-underline-offset: 5px;
}

@media (max-width: 650px) {
    .ae-management__text-full {
        display: none;
    }

    .ae-management__text-mobile {
        display: inline;
    }

    .ae-management__return-top {
        margin-bottom: 12px;
    }

    .ae-management__return-top a {
        font-size: 13px;
    }

    /* 表示方法の小窓 */
    body.ae-management-page .ae-management-view-choice {
        width: min(400px, calc(100% - 24px));
        padding: 4px 16px 16px;
    }

    body.ae-management-page
    .ae-management-view-choice .ae-view-window-bar {
        margin: 0 -12px 14px;
        padding: 6px 10px;
        gap: 8px;
        font-size: 10px;
    }

    body.ae-management-page
    .ae-management-view-choice .ae-view-eyebrow {
        margin-bottom: 6px;
    }

    body.ae-management-page .ae-management-view-choice h2 {
        margin-bottom: 8px;
        font-size: 18px;
    }

    body.ae-management-page .ae-management-view-choice p {
        margin-bottom: 12px;
        font-size: 14px;
        line-height: 1.65;
    }

    body.ae-management-page .ae-management-view-options {
        gap: 10px;
    }

    body.ae-management-page .ae-management-view-options button {
        min-height: 64px;
        padding: 10px;
        gap: 8px;
        grid-template-columns: 30px minmax(0, 1fr) 14px;
    }

    body.ae-management-page .ae-view-icon {
        width: 30px;
        height: 30px;
    }

    body.ae-management-page .ae-view-copy {
        gap: 3px;
    }

    body.ae-management-page .ae-management-view-options strong {
        font-size: 15px;
    }

    body.ae-management-page
    .ae-management-view-options .ae-view-description {
        font-size: 13px;
        line-height: 1.6;
    }

    body.ae-management-page
    .ae-management-view-choice .ae-management-view-note {
        margin: 12px 0 0;
        font-size: 13px;
        line-height: 1.65;
    }
}
/* スマホ：黄色マーカー対象の本文を冒頭説明と同じサイズに */
@media (max-width: 650px) {
    /* 01〜06の各カード内の項目本文 */
    body.ae-management-page .ae-management__item p,

    /* 表示方法の小窓：選択肢の上の説明 */
    body.ae-management-page
    .ae-management-view-choice #ae-management-view-description,

    /* 表示方法の小窓：下部の操作上の注意 */
    body.ae-management-page
    .ae-management-view-choice .ae-management-view-note {
        font-size: 11px;
        line-height: 1.75;
    }
}
@media (max-width: 650px) {
    /* 下部の空白を少し削る：120px → 88px */
    body.ae-management-page .ae-management {
        padding-bottom: calc(
            88px + env(safe-area-inset-bottom, 0px)
        );
    }

    /* 01〜06の工程タイトル：18px → 16px */
    body.ae-management-page .ae-management__content h2 {
        font-size: 16px;
        line-height: 1.5;
    }
}
/* スマホ：01〜06内の小見出しを16pxから14pxへ */
@media (max-width: 650px) {
    body.ae-management-page .ae-management__item h3 {
        font-size: 14px;
        line-height: 1.5;
    }
}