@charset "UTF-8";
:root{
    --d: 26px;
    --bw: 2px;
    --line: 60px;
    --dot: 6px;
    --gap: 12px;
    --color: #fff;
/* 追加：丸と線の基準 */
    --step-size: 95px;
    --line-h: 2px;
}

/* 全体 */
.flow-item {
    display: flex;
    align-items: flex-start;
    padding-bottom: 40px;
}

/*#realestate-sec01 .flow-item {
    align-items: center;
}*/

/* 円＋数字 */
.step {
    width: var(--step-size);
    height: var(--step-size);
    flex: 0 0 var(--step-size); /* 潰さない＆固定幅 */
    position: relative;
}

.step .circle {
    position: absolute;
    inset: 0;
    border: var(--bw) solid var(--color);
    border-radius: 50%;
}

.step .num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(24px, 3.33vw, 48px);
    font-weight: 600;
}

/* ライン（横線） */
/*#realestate-sec01 .line {
    position: relative;
    flex: none;
    width: 130px;
    height: 2px;
    background: var(--color);
    align-self: center;
    flex: 0 0 auto;
}*/

#merit-sec01 .line {
    position: relative;
    width: 130px;
    height: 2px;
    background: var(--color);
    flex: 0 0 auto; /* 伸び縮みしない */
    margin-top: calc(95px / 2 - 1px); 
    /* ↑ stepの高さ95pxの半分(47.5) - 線の半分の高さ(1px) = だいたいど真ん中 */
    /* align-self: center; は消してOK */
}






/* 点（右端） */
.line::after {
    content:"";
    position:absolute;
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);
    width: var(--dot);
    height: var(--dot);
    background: var(--color);
    border-radius: 50%;
}

/* タイトル＋説明文まとめて縦並びにする */
.flow-item .texts {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 4px; /* タイトルと説明の間の余白 */
    padding-left: 30px; /* ← ここが PC で .text と揃えるポイント */
    margin-top: 2.4em;
}

.flow-item .texts .text {
    padding: 0;
}

.flow-item .text {
    font-size: clamp(16px, 1.67vw, 24px);
    padding-left: 30px;
}

.flow-item .desc {
    font-size: clamp(14px, 1.39vw, 20px);
    padding-top: 40px;
}

.banner-container {
    flex-direction: column;
    gap: 40px;
    padding-top: 80px;
}

.banner-inner {
    background: rgba(255, 255, 255, 0.8);
    border: 2px solid #75BCC7;
    border-radius: 10px;
    padding: 55px;
}

.banner-inner:last-of-type {
    border: 2px solid #178C9E;
}

.banner-inner div {
    position: relative;
}

.banner-inner h6 {
    color: #75BCC7;
    font-size: clamp(18px, 2.5vw, 36px);
    font-weight: 600;
    padding-bottom: 40px;
}

.banner-inner:last-of-type h6 {
    color: #178C9E;
}

.banner-inner p {
    color: #000;
    font-size: clamp(14px, 1.11vw, 16px);
}

.banner-inner button {
    position: absolute;
    right: 0;
    bottom: 0;
}

/*#merit-sec01.under-content,*/
#merit-sec01 h5 {
    padding-top: 0;
}


/************************************
** max-width: 768px
************************************/
@media screen and (max-width: 768px) {
    .sp-none {
        display: none;
    }

    .flow-item {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding-bottom: 20px;
    }

    /* ●01 の丸 */
    .step {
        width: 55px;
        height: 55px;
        flex: 0 0 auto; /* サイズ固定で縮ませない */
    }

    /* 横線：step の右側の余った横幅いっぱいに伸ばす */
    .line {
        flex: 1 1 auto !important; /* 残り幅を全部使う */
        min-width: 0;
        height: 2px;
        background: var(--color);
        position: relative;
        /*margin-right: 0;*/
        margin: 0;
    }

    #merit-sec01 .line {
        margin: 0;
    }

    .line::after {
        right: 0;
    }

    .flow-item .texts {
        padding-left: 0; /* スマホは左に詰める */
        flex: 0 0 100%; /* step + line の次の行へ落とす */
        padding-left: 55px;
        margin-top: 8px;
    }

    /* テキストは必ず次の行で幅100%にする */
    .flow-item .text {
        flex: 0 0 100%;
        padding-left: 66px;
        margin-top: 8px;
    }


    .flow-item .desc {
        padding-top: 20px;
    }




    .banner-inner {
        padding: 25px;
    }

    .banner-inner h6 {
        padding-bottom: 20px;
    }

    .banner-inner button {
        position: relative;
        margin-top: 15px;
    }






}