@charset "UTF-8";

/*==============================================================================================
●共通
==============================================================================================*/
* {
    box-sizing: border-box;
}

* a {
    transition: all 0.2s ease-in-out;
}

* a:hover {
    transition: all 0.2s ease-in-out;
}

body {
    font-family: "m-plus-rounded-1c", sans-serif;
    font-weight: 700;
    font-style: normal;
}

:root {
    --color-black-1: #222222;
    --color-black-2: #444444;

    --color-gray-1: #f3f3f3;
    --color-gray-2: #ededed;

    --color-white-1: #ffffff;

    --color-blue-1: #90cbe9;
    --color-yellow-1: #fcee83;
    --color-yellow-2: #ffda2a;
    --color-red-1: #fa7e80;

    --width-pc: 1400px;
    --width-tb: 90%;
    --width-sp: 90%;

    --text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
    --text-gothic: Arial, Helvetica, sans-serif;
}

body {
    color: var(--color-black-1);
    background: var(--color-white-1);
    width: 100%;
}

::selection {
    color: var(--color-white-1);
    background-color: var(--color-black-1);
}

h1 {
    font-size: 2.1em;
}

h2 {
    font-size: 1.7em;
}

h3 {
    font-size: 1.5em;
}

h4 {
    font-size: 1.2em;
}

h5 {
    font-size: 1em;
}

h6 {
    font-size: 0.8em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 800;
    letter-spacing: 0.1rem;
}

a:link,
a:visited {
    color: var(--color-black-1);
}

a:hover {
    color: var(--color-red-1);
}


/*/////////////////////////ヘッダー///////////////////////*/
header {
    width: 100%;
    background-color: var(--color-yellow-1);
    background-position: center;
    background-repeat: repeat-x;
    position: relative;
}

.header-inner {
    margin-inline: auto;
    position: relative;
}

.header-title {
    position: absolute;
    left: 50%;
    max-width: none;
    z-index: 2;
}

.header-title img {
    width: 100%;
    height: auto;
    display: block;
}

.header-arrow {
    position: absolute;
    width: 152px;
    height: 151px;
    left: 50%;
    bottom: -151px;
    transform: translateX(-50%);
    z-index: 10;
    background-image: url("../img/crane/header-arrow.png");
    background-size: contain;
    background-repeat: no-repeat;
}


/*/////////////////////////フッター///////////////////////*/
footer {
    display: grid;
    place-items: center;
    padding: 50px 0;
}

.logo {
    width: 200px;
    height: auto;
    display: block;
    transition: all 0.2s ease-in-out;
}

.logo img {
    width: 100%;
    height: auto;
}

.logo:hover {
    opacity: 0.7;
}


/*/////////////////////////共通レイアウト///////////////////////*/

/*ボタン*/
.button {
    padding: 15px 40px;
    font-size: 0.7rem;
    line-height: 0.7rem;
    letter-spacing: 0.1rem;
    display: inline-block;
    border: 1px solid var(--color-gold-1);
    margin: 0 auto;
    border-radius: 5px;
}

.button:link,
.button:visited {
    color: var(--color-gold-1);
}

.button:hover {
    transition: all 0.2s ease-in-out;
    border: 1px solid var(--color-white-1);
    color: var(--color-white-1);
}




/*/////////////////////////トップページ///////////////////////*/
.about {
    margin: 0 auto;
    background-position: center top;
    background-repeat: repeat-y;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.about-top {
    position: relative;
    margin: 0 auto;
}

.about-1,
.about-2 {
    width: var(--about-box-w);
    height: auto;
    aspect-ratio: 1 / 1;
}

.about-1-inner,
.about-2-inner {
    background-color: var(--color-white-1);
    border: 3px solid var(--color-black-1);
    border-radius: 15px;
}

.about-1-inner,
.about-2-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.about-1:after,
.about-2:after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-image: url("../img/crane/about-shadow.png");
    background-repeat: repeat;
    background-position: center;
    z-index: -1;
}

.about-1:after {
    bottom: -100px;
    width: 200px;
    height: 21px;
}

.about-2:after {
    bottom: -10px;
    width: 360px;
    height: 21px;
}

.about-crane {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translate(-50%, -100%);
    width: 112px;
    height: 384px;
    z-index: 3;
}

.about-crane img {
    display: block;
    width: auto;
    max-width: 100%;
}

.about-1-1,
.about-2-1 {
    width: 100%;
    color: var(--color-white-1);
    background-color: var(--color-blue-1);
    margin: 30px 0;
    padding: 20px;
    text-align: center;
}

.about-1-1 span,
.about-2-1 span {
    font-size: 2em;
    color: var(--color-black-1);
    background-color: var(--color-yellow-1);
    margin-right: 5px;
    letter-spacing: 0.2em;
}

.about-1-2 {
    width: 80%;
    margin: 30px auto;
}

.about-2-2 {
    width: 50%;
    margin: 30px auto;
}

.about-1-2 img,
.about-2-2 img {
    width: 100%;
    height: auto;
}

.about-bottom {
    position: relative;
    background-color: var(--color-white-1);
    border: 3px solid var(--color-black-1);
    border-radius: 6px;
    display: flex;
    align-items: center;
}

/* 水色の影（右下） */
.about-bottom::after {
    content: "";
    position: absolute;
    right: -16px;
    bottom: -16px;
    width: 100%;
    height: 100%;
    background-color: var(--color-blue-1);
    opacity: 0;
    z-index: -1;
    pointer-events: none;
}

/* 左の水色ボックス */
.about-bottom h3 {
    position: absolute;
    width: 200px;
    aspect-ratio: 1/1;
    padding: 20px;
    color: var(--color-yellow-1);
    background-color: var(--color-blue-1);
    line-height: 1.4;
    font-size: 2em;
    display: grid;
    place-items: center;
}

/* 内側白線 */
.about-bottom h3::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 2px solid var(--color-white-1);
    pointer-events: none;
}

/* 3行固定：縦並び */
.about-bottom h3 .line {
    display: block;
    width: 100%;
    text-align: center;
}

/* 1文字アニメ用（行内で横並びにする） */
.about-bottom h3 .char {
    display: inline-block;
    margin: 0 0.08em;
}


/* 右側のリスト */
.about-bottom ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 40px;
    width: 100%;
}

.about-bottom li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-weight: bold;
}

/* アイコン画像 */
.about-bottom li img {
    width: 150px;
    /* ← ここでサイズ調整 */
    height: auto;
    margin-bottom: 12px;
}

/* テキスト */
.about-bottom li span {
    font-size: 1rem;
}


.compatibility {
    width: 100%;
    height: auto;
    background-color: var(--color-yellow-1);
    background-image: url("../img/crane/compatibility-bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.compatibility::after {
    content: "";
    position: absolute;
    background-image: url("../img/crane/compatibility-bg2.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    aspect-ratio: 1399/366;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 3;
}


.compatibility-inner {
    margin: 0 auto;
    position: relative;
}

.compatibility-crane {
    position: absolute;
    aspect-ratio: 112/410;
    top: 0px;
    z-index: 3;
}

.compatibility-crane img {
    display: block;
    width: auto;
    max-width: 100%;
}

.compatibility-main {
    display: grid;
    place-items: center;
}


.setup {
    width: 100%;
    height: auto;
    min-height: 1000px;
    background-image: url("../img/crane/setup-bg.png");
    background-repeat: repeat;
}

.setup-inner {
    margin: 0 auto;
    padding: 100px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 100px;
}

.setup-title {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    font-size: 2em;
    line-height: 1em;
}

.setup-title>div:last-child {
    display: flex;
    gap: 20px;
}

.setup-title>div:last-child>span {
    display: grid;
    place-items: center;
    width: 2.5em;
    height: auto;
    aspect-ratio: 1/1;
    font-size: 2.5rem;
    line-height: 1em;
    background-color: var(--color-red-1);
    border: 2px solid var(--color-black-1);
    position: relative;
}

.setup-title>div:last-child>span::after {
    content: "";
    position: absolute;
    inset: 0px;
    border: 10px solid var(--color-white-1);
    pointer-events: none;
}

.setup-2 {
    display: flex;
    justify-content: space-around;
}

.setup-2-inner {
    aspect-ratio: 1/1;
    padding: 0;
    border: 2px solid var(--color-black-1);
    background-color: var(--color-white-1);
    position: relative;
}

/* 共通 */
.inner-corner {
    position: absolute;
    width: 24px;
    height: 24px;
    pointer-events: none;
}

/* 左上 */
.inner-corner.tl {
    top: 16px;
    left: 16px;
    border-top: 2px solid var(--color-black-1);
    border-left: 2px solid var(--color-black-1);
}

/* 右下 */
.inner-corner.br {
    bottom: 16px;
    right: 16px;
    border-bottom: 2px solid var(--color-black-1);
    border-right: 2px solid var(--color-black-1);
}

.setup-2-inner__content {
    height: 100%;
    padding: 30px 20px;
    box-sizing: border-box;
}

.setup-2-inner-number {
    position: absolute;
    top: calc(0.5em * -1 + -20px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    background: var(--color-white-1);
    border: 2px solid var(--color-black-1);
    box-shadow:
        5px 5px 0 -2px var(--color-red-1),
        5px 5px 0 0 var(--color-black-1);
}

.setup-2-inner-txt {
    display: grid;
    justify-items: center;
    padding-bottom: 50px;
}

.setup-2-inner-txt>div {
    font-size: 1.5rem;
    line-height: 1.8em;
    display: inline-block;
    margin: 0 auto;
}

.setup-2-inner-txt>div>span {
    font-size: 1.5em;
    background-color: var(--color-red-1);
}

.setup-2-inner-txt p {
    font-size: 0.8em;
    margin-top: 5px;
}

.setup-2-inner img {
    position: absolute;
    width: 90%;
    height: auto;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

.setup-3 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.setup-3-1 {
    font-size: 0.8em;
    border: 2px solid var(--color-black-1);
    padding: 20px 20px 20px 70px;
    background-color: var(--color-white-1);
    background-image: url("../img/crane/setup_arrow.png");
    background-position: 15px center;
    background-repeat: no-repeat;
    box-shadow: 5px 5px 0 0 var(--color-black-1);
}

.setup-3-1 span,
.setup-3-2-title span {
    font-size: 26px;
    line-height: 1em;
    background-color: var(--color-red-1);
    display: inline-block;
    margin-top: 5px;
}

.setup-3-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}

.setup-3-2-title {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 20px;
}

.setup-3-2-title::before,
.setup-3-2-title::after {
    content: "";
    display: inline-block;
    width: 15px;
    height: 50px;
    background-image: url("../img/crane/setup_brackets.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.setup-3-2-title::after {
    transform: rotate(180deg);
}

.setup-3-2 img {
    max-width: 250px;
    height: auto;
}

.flow {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

/* 背景粒子レイヤー */
.flow-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    height: 100%;
    width: 100%;
}

.flow-bg .bg-dot svg {
    width: 100%;
    height: 100%;
    display: block;
}


/* flowの中身を背景より上に */
.flow>*:not(.flow-bg) {
    position: relative;
    z-index: 1;
}

.flow-bg .bg-dot {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
    opacity: 0;
}

.flow-inner {
    margin: 100px auto;
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: center;
}

.flow-title {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.8);
}

.flow-title h4 {
    font-size: 3rem;
    line-height: 1em;
}

.yellow-bar {
    position: relative;
    width: 100%;
    max-width: 920px;
    /* SVGの 918.93px 相当 */
    height: 18px;
    /* 全体の高さ（ズレ分込み） */
}

/* 上のバー（不透明） */
.yellow-bar::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 13px;
    /* SVG: 12.94px */
    background: #ffda2a;
}

/* 下のバー（半透明・ずらし） */
.yellow-bar::after {
    content: "";
    position: absolute;
    left: 39px;
    /* SVG: x="38.88" */
    top: 5px;
    /* SVG: y="5.18" */

    width: 100%;
    height: 13px;
    background: #ffda2a;

    opacity: 0.5;
    /* SVG: opacity:.5 */
    mix-blend-mode: multiply;
}





.flow-steps {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin: 50px 0;
}

.flow-step {
    display: flex;
    align-items: center;
}

/* 実体の線 */
.flow-line {
    width: 72px;
    height: 3px;
    background: var(--color-black-1);
    display: block;
    transform-origin: left center;
}


/* ===== 丸本体 ===== */
.step-circle {
    --d: 180px;
    position: relative;
    width: var(--d);
    height: var(--d);
    border-radius: 50%;
    background: var(--color-gray-2);
    border: 3px solid var(--color-black-1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
}

/* 内側の白リング */
.step-circle::before {
    content: "";
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 8px solid var(--color-white-1);
    pointer-events: none;
}

/* アイコン */
.step-circle img {
    width: 44px;
    height: auto;
    margin-bottom: 8px;
}

.step-circle p {
    margin: 0;
    line-height: 1.35;
    text-align: center;
}

/* ===== 右上バッジ(step-num) ===== */
.step-num {
    position: absolute;
    top: -10px;
    right: 5px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-black-1);
    color: var(--color-yellow-1);
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

/* =========================================================
   ✅ 円の縁の「小丸（起点）」と「斜め棒」
   → あなたの <i class="step-dot"></i> を使う
========================================================= */
.step-dot {
    position: absolute;
    z-index: 2;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-black-1);
    /* 画像の位置に寄せた “縁の点” の座標（ここが基準） */
    top: 39px;
    right: 39px;
}

/* 斜め棒（小丸から外へ） */
.step-dot::after {
    content: "";
    position: absolute;

    width: 34px;
    /* ← 棒の長さ */
    height: 1px;
    /* ← 棒の太さ */
    background: var(--color-black-1);

    left: 3px;
    /* 小丸の外からスタート */
    top: 3px;
    /* 小丸中心付近 */
    transform-origin: left center;
    transform: rotate(-45deg);
    /* 画像の角度 */
}


.flow-contact {
    container-type: inline-size;
    aspect-ratio: 490/103;
    width: min(100%, 350px);
    max-width: 350px;
    background-image: url("../img/crane/contact.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding:
        clamp(14px, 6.57cqw, 23px) clamp(18px, 8.57cqw, 30px) clamp(6px, 2.86cqw, 10px) clamp(24px, 11.43cqw, 40px);
    font-size: clamp(14px, 5.7cqw, 20px);
    display: grid;
    place-items: center;
}




























/*==============================================================================================
●PCサイズ
==============================================================================================*/

@media screen and (min-width: 1280px) {

    .sp {
        display: none !important;
    }

    .pc {
        display: block !important;
    }

    /*/////////////////////////ヘッダー///////////////////////*/
    header {
        background-image: url("../img/crane/header-bg.png");
        background-size: contain;
    }

    .header-inner {
        width: min(1400px, 100%);
        aspect-ratio: 1400 / 557;
    }

    .header-title {
        top: 55%;
        width: 77.85%;
        transform: translate(-50%, -50%) translateX(10%);
    }

    /*/////////////////////////フッター///////////////////////*/




    /*/////////////////////////共通レイアウト///////////////////////*/


    /*/////////////////////////トップページ///////////////////////*/
    .about {
        width: var(--width-pc);
        padding: 250px 0;
        background-image: url("../img/crane/about-bg.png");
    }

    .about-top {
        width: 100%;
        height: calc(var(--about-box-w) * 1.5 + 100px);
    }

    :root {
        --about-box-w: 380px;
    }

    .about-1,
    .about-2 {
        position: absolute;
    }

    .about-1 {
        top: 100px;
        left: 50%;
        transform: translateX(-100%) translateX(-20px);
    }

    .about-2 {
        top: calc(var(--about-box-w) / 2);
        left: calc(50% + 20px);
    }

    .about-bottom {
        position: relative;
        width: 80%;
        max-width: 800px;
        margin: 120px auto 0;
        padding: 60px 60px 60px 160px;
        gap: 40px;
    }

    /* 左の水色ボックス */
    .about-bottom h3 {
        left: -100px;
        top: 50%;
        transform: translateY(-50%);
    }

    .about-bottom ul {
        grid-template-columns: repeat(3, 1fr);
    }

    .compatibility-inner {
        width: 800px;
    }

    .compatibility-crane {
        right: 0px;
        width: 112px;
        height: 410px;
    }

    .compatibility-main {
        padding: 150px 0 300px 0;
    }

    .setup-inner,
    .flow-inner {
        width: var(--width-pc);
    }

    .setup-2 {
        gap: 40px;
    }

    .setup-2-inner {
        min-width: 300px;
    }

    .setup-2-inner:nth-child(2) {
        transform: translateY(30%);
    }

    .setup-3 {
        gap: 20px;
        margin-top: 150px;
    }

    .setup-3-1,
    .setup-3-2 {
        width: 40%;
    }

}


/*==============================================================================================
●タブレットサイズ
==============================================================================================*/

@media screen and (min-width: 490px) and (max-width: 1279px) {

    .sp {
        display: none !important;
    }

    .pc {
        display: block !important;
    }

    /*/////////////////////////ヘッダー///////////////////////*/
    header {
        background-image: url("../img/crane/header-bg.png");
        background-size: contain;
    }

    .header-inner {
        width: min(1400px, 100%);
        aspect-ratio: 1400 / 557;
    }

    .header-title {
        top: 55%;
        width: 77.85%;
        transform: translate(-50%, -50%) translateX(10%);
    }

    /*/////////////////////////スマホメニュー///////////////////////*/


    /*/////////////////////////フッター///////////////////////*/


    /*/////////////////////////共通レイアウト///////////////////////*/




    /*/////////////////////////トップページ///////////////////////*/
    .about {
        width: 100%;
        padding: 400px 0;
        background-image: url("../img/crane/about-bg.png");
        background-size: 100% auto;
    }

    :root {
        --about-box-w: 380px;
    }

    .about-top {
        width: 100%;
        height: calc(var(--about-box-w) * 2 + 100px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .about-bottom {
        position: relative;
        width: 80%;
        max-width: var(--about-box-w);
        margin: 200px auto 0;
        padding: 130px 60px 60px 60px;
        gap: 40px;
    }

    /* 左の水色ボックス */
    .about-bottom h3 {
        top: -100px;
        left: 50%;
        transform: translateX(-50%);
    }

    .about-bottom ul {
        grid-template-columns: 1fr;
    }

    .compatibility-inner {
        width: 90%;
        max-width: 800px;
    }

    .compatibility-crane {
        left: min(90%, 800px);
        width: clamp(64px, 12vw, 112px);
        height: auto;
    }

    .compatibility-main {
        padding-top: clamp(50px, 15vh, 150px);
        padding-bottom: clamp(100px, 30vh, 300px);
    }

    .setup-inner,
    .flow-inner {
        width: var(--width-tb);
    }

    .setup-2 {
        flex-direction: column;
        gap: 150px;
        width: 100%;
        max-width: 300px;
    }

    .setup-2-inner {
        width: 100%;
    }

    .setup-3 {
        flex-direction: column;
        gap: 100px;
    }

    .setup-3-1,
    .setup-3-2 {
        width: 100%;
        max-width: 350px;
    }

    .flow-steps {
        flex-direction: column;
        align-items: center;
        margin: 30px 0;
    }

    .flow-steps {
        flex-direction: column;
        align-items: center;
        margin: 30px 0;
    }

    .flow-line {
        width: 3px;
        height: 60px;
        transform-origin: center top;
    }

    /* 丸を少し小さく（任意） */
    .step-circle {
        --d: 160px;
    }


}



/*==============================================================================================
●スマホサイズ
==============================================================================================*/

@media screen and (max-width: 489px) {
    img {
        max-width: 100%;
        height: auto;
    }

    .sp {
        display: block !important;
    }

    .pc {
        display: none !important;
    }

    /*/////////////////////////ヘッダー///////////////////////*/
    header {
        background-image: url("../img/crane/header-bg2.png");
        background-size: 97%;
    }

    .header-inner {
        width: min(450px, 100%);
        aspect-ratio: 450 / 676;
    }

    .header-title {
        top: 45%;
        width: 80%;
        transform: translate(-50%, -50%);
    }


    /*/////////////////////////スマホメニュー///////////////////////*/


    /*/////////////////////////フッター///////////////////////*/


    /*/////////////////////////共通レイアウト///////////////////////*/


    /*/////////////////////////トップページ///////////////////////*/
    .about {
        width: 100%;
        padding: 400px 0;
        background-image: url("../img/crane/about-bg2.png");
    }

    :root {
        --about-box-w: 100%;
    }

    .about-top {
        width: 90%;
        height: calc(var(--about-box-w) * 2 + 100px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .about-bottom {
        position: relative;
        width: 90%;
        max-width: var(--about-box-w);
        margin: 200px auto 0;
        padding: 130px 60px 60px 60px;
        gap: 40px;
    }

    /* 左の水色ボックス */
    .about-bottom h3 {
        top: -100px;
        left: 50%;
        transform: translateX(-50%);
    }

    .about-bottom ul {
        grid-template-columns: 1fr;
    }

    .compatibility-inner {
        width: 90%;
        max-width: 800px;
    }

    .compatibility-crane {
        left: 75%;
        width: clamp(64px, 12vw, 112px);
        height: auto;
    }

    .compatibility-main {
        padding-top: clamp(50px, 15vh, 100px);
        padding-bottom: clamp(100px, 30vh, 200px);
    }

    .setup-inner,
    .flow-inner {
        width: var(--width-sp);
    }

    .setup-2 {
        flex-direction: column;
        gap: 150px;
        width: 100%;
    }

    .setup-2-inner {
        width: 100%;
    }

    .setup-3 {
        flex-direction: column;
        gap: 100px;
    }

    .setup-3-1,
    .setup-3-2 {
        width: 100%;
    }

    .flow-steps {
        flex-direction: column;
        align-items: center;
        margin: 30px 0;
    }

    .flow-steps {
        flex-direction: column;
        align-items: center;
        margin: 30px 0;
    }

    .flow-line {
        width: 3px;
        height: 60px;
        transform-origin: center top;
    }

    /* 丸を少し小さく（任意） */
    .step-circle {
        --d: 160px;
    }

}