body {
    overflow-x: hidden;
    font-family: "Helvetica Neue",
        Arial,
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        "Noto Sans JP",
        sans-serif;
}

.pc {
    display: block;
}

.sp {
    display: none;
}

.pc-inline {
    display: inline-block;
}

.sp-inline {
    display: none;
}

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

    .sp {
        display: block;
    }

    .pc-inline {
        display: none;
    }

    .sp-inline {
        display: inline-block;
    }
}

/* ヘッダー */
header>div {
    max-width: 1140px;
    margin: 0 auto;
    padding: 16px 32px;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.title-area {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

/* ヘッダーロゴ */
.logo {
    display: flex;
    align-items: end;
}

.catch {
    font-size: 10.5px;
}

.company-logo {
    width: 340px;
}

.company-logo img {
    width: 100%;
}

.parent {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.parent p {
    font-size: 11px;
}

.parent-logo {
    width: 100px;
}

.parent-logo img {
    width: 100%;
}

/* ヘッダー電話番号 */
.contact-info {
    overflow: hidden;
    border-radius: 4px;
    width: 250px;
    /* box-shadow: 0 4px 4px #0003; */
}

.contact-info .title {
    padding: 4px 8px;
    font-size: 11px;
    background-color: #FFE100;
}

.contact-info .info {
    padding: 8px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 0.25rem;
}

.contact-info .info p {
    font-size: calc((100vw - 60px) * 0.04);
    text-align: center;
}

.contact-info .tel-box {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.contact-info .phone-number {
    font-size: 2em;
    font-weight: bold;
    line-height: 1;
}

.contact-info .phone-number a {
    text-decoration: none;
    color: #000;
}

.contact-info .rest-day {
    color: #D7141A;
    font-size: .625em;
    line-height: 1;
}

@media screen and (max-width: 768px) {
    header>div {
        padding: 4px 8px;
    }

    .title-area {
        gap: 0;
    }

    .company-logo {
        width: 65%;
    }

    .parent {
        width: 35%;
    }

    .parent p {
        font-size: 2.5vw;
    }

    .parent-logo {
        width: 60%;
    }
}

/* メイン */
main div.contents>div {
    width: 1140px;
    display: flex;
    margin: 0 auto;
    padding: 4rem 2rem;
    gap: 3rem;
}
main div.contents.mv-contents>div{
    padding: 4rem 2rem;
    /* padding: 0 2rem 4rem 2rem; */
}
main div.contents.example>div{
    padding: 2rem;
    gap:1.5rem;
}

div.contents.mv-contents {
    background-color: #f6f6f6;
}

div.contents.example {
    background-color: #E3F0F8;
}

div.contents.step {
    background-color: #0068B1;
    color: #fff;
}

/* メインビジュアル */
.mv {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* padding-top:4rem; */
    align-self: center;
}

.mv-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

.mv-image {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 32px;
}

.mv-image-inner {
    flex: 1;
}

.mv-image-inner img {
    width: 100%;
    transform: translate(0, -12px) scale(1.1);
}

.catch {
    font-weight: bold;
    display: inline-block;
}

.catch1-sub {
    font-size: 46px;
    background: linear-gradient(transparent 70%, #ff0 70%);
}
.catch1-sub span {
    font-style: italic;
}

.catch1-main1 {
    /* font-size: 36px; */
    display: flex;
    align-items: center;
    flex-direction: column;
}
.catch1-main1 p:nth-child(1){
    font-size: 28px;
}
.catch1-main1 p:nth-child(2){
    font-size: 55px;
}
.catch1-main2 p:nth-child(1){
    font-size: 18px;
    padding: 8px 24px;
    background-color: #FFE30B;
    border-radius: 100px;
    width: max-content;
    margin: 0 auto;
}
.catch1-main2 p:nth-child(2){
    font-size: 58px;
    color: #D7141A;
}

.catch1-main1 span {
    font-size: 60px;
    color: #D7141A;
}

.catch1-main2 {
    font-size: 30px;
}

.catch1-main2 span {
    font-style: italic;
}

.catch2-main {
    font-size: 32px;
    font-weight: bold;
    padding: 8px;
    text-align: center;
    background-color: #0068B1;
    color: #fff;
}

.catch2-sub {
    font-size: 21px;
    padding: 8px;
    text-align: center;
    background-color: #0184E0;
    color: #fff;
}

.gift-ticket {
    /* padding: 4px;
    background-color: #FFE100; */
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

.gift-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #1675BD;
    padding:12px 0;
    text-align: center;
    line-height: 1;
}
.gift-info {
    background-color: #fff;
    padding: 1rem 0;
    border-radius: 4px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    line-height: 1;
}

.gift-info p:nth-child(1) {
    font-size: 36px;
    font-weight: bold;
    color: #D7141A;
    -webkit-text-stroke: 2px #FFD343;
    text-stroke: 2px #FFD343;
    paint-order: stroke;
    text-shadow: 0 4px 4px #ccc;
    letter-spacing: .1rem;
}

.gift-info p:nth-child(1) span {
    font-size: 28px;
}

.gift-info p:nth-child(2) {
    font-size: .75rem;
}

/* フォーム */
.form {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: calc(25px + 2rem);
    justify-content: center;
}

.form-title {
    padding: 44px 0 16px;
    background-color: #3D8DE8;
    color: #fff;
    font-weight: bold;
    border-radius: 8px 8px 0 0;
    position: relative;
    text-align: center;
}

.icon-10sec {
    position: absolute;
    align-items: baseline;
    line-height: 1;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    background-color: #fff;
    color: #D7141A;
    border-radius: 2rem;
    margin: 0 auto;
    white-space: nowrap;
    border: 2px solid #D7141A;
    display: flex;
    gap: .25rem;
}

.icon-10sec span {
    font-size: 2em;
    font-family: "Arial";
    line-height: 0.8;
    transform: translateY(1px);
    letter-spacing: -0.075rem;
}

.form-title p.title-main {
    font-size: 24px;
}

.form-contents {
    padding: 40px 32px 32px;
    background-color: #fff;
    border-radius: 0 0 8px 8px;
}

.form-contents form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    line-height: 1;
}

.form-group div.required-info {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.form-group div.group-car,
.form-group div.group-customer {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}


/*.form-contents label {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}*/

.label-custom {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

span.title-in {
    width: calc(4em + 34px + .5rem);
    display: flex;
    gap: .5rem;
    align-items: center;
}


/*.form-contents label>span {
    width: calc(4em + 34px + .5rem);
    display: flex;
    gap: .5rem;
    align-items: center;
}*/
.form-contents .label-custom div {
    flex: 1;
}

/*.form-contents label div {
    flex: 1;
}*/

.supple {
    font-size: 10px;
    display: inline-block;
    margin-top: .25rem;
    line-height: 1.4;
}

.form-contents label div select,
.form-contents label div input {
    width: 100%;
    height: 35px;

}

/* フォーム（予算） */
.form-contents .label-custom div select,
.form-contents .label-custom div input {
    width: 100%;
    height: 35px;
}

.form-contents .label-custom div.budget {
    display: flex;
    gap: .5rem;
    align-items: center;
}

/*.form-contents label div.budget {
    display: flex;
    gap: .5rem;
    align-items: center;
}*/

/* .form-contents label div.budget select{
    flex:1;
} */

/* フォーム（お名前） */
.form-contents label div.name {
    display: flex;
    gap: .5rem;
}

.form-contents label div.name input {
    /* flex:1; */
    width: 100%;
}

/* フォーム（お名前） */
.form-contents .label-custom div.contact-infos {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/*.form-contents label div.contact-infos {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}*/

span.required {
    display: inline-block;
    font-size: 11px;
    background-color: #D7141A;
    color: #fff;
    border-radius: 2px;
    padding: 6px;
    height: fit-content;
}

.cta-button {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.cta-button button {
    width: 100%;
    border: 2px solid #b5191e;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: .5rem;
    gap: .25rem;
    background-image: linear-gradient(#ef0008, #a70000);
    color: #fff;
    font-weight: bold;
    box-shadow: 0px 4px 0 #710000;
    margin-bottom: 4px;
}

.cta-button button .sub-text {
    font-size: 10px;
    text-align: center;
}

.cta-button button .main-text {
    font-size: 24px;
    text-align: center;
}

.cta-button div {
    font-size: 12px;
    text-align: center;
}

.cta-button div a {
    color: #333;
}

.mv-contents .contact-info {
    width: 100%;
    background-color: #fff;
}

.mv-contents .contact-info .tel-box {
    flex-direction: unset;
    align-items: baseline;
    font-size: calc((100vw - 60px) * 0.05);
    justify-content: center;
}

/* 実績 */
div.contents.example .swiper {
    /* overflow: visible; */
}

div.contents.example>div {
    /* flex-direction: column; */
    max-width: 1140px;
    /* 2026/02/24追加 */
    gap: 2rem;
}

div.contents.example .label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    /* 2026/02/24追加 */
    width: 200px;
}

div.contents.example .label-main {
    font-size: 2.25rem;
    font-weight: bold;
    color: #D7141A;
}

div.contents.example .label-sub {
    padding: .5rem 1.5rem;
    font-size: 16px;
    font-weight: bold;
    background-color: #FFE100;
    border-radius: 8px;
    text-align:center;
}

div.contents.example .exslider-contents {
    flex: 1;
    max-width: calc(1140px - 296px);
}

@media (min-width: 768px) {
    .form {
        width: 37%;
    }
}

@media screen and (max-width: 768px) {
    .mv {
        padding-top: unset;
    }
    .mv-label {
        gap:1rem;
    }
    main div.contents>div {
        padding: 2.5rem 1.25rem;
        gap: 2rem;
        flex-direction: column;
        width: 100%;
    }
    main div.contents.mv-contents>div {
        padding: 2.5rem 1.25rem;
        gap: 0;
    }

    .mv-image {
        padding: 32px 0 0;
    }

    .mv-image-inner img {
        width: 100%;
        transform: translate(-10px, -10px) scale(1.05);
    }

    .catch1-sub {
        font-size: calc((100vw - 56px) * 0.07);
    }

    .catch1-main1 {
        /* font-size: calc((100vw - 56px) * 0.06); */
    }

    .catch1-main1 p:nth-child(1){
        font-size: calc((100vw - 56px) * 0.04);
    }
    .catch1-main1 p:nth-child(2){
        font-size: calc((100vw - 56px) * 0.09);
    }

    .catch1-main1 span {
        font-size: calc((100vw - 56px) * 0.12);
    }

    .catch1-main2 {
        display:flex;
        flex-direction: column;
        gap: .5rem;
    }

    .catch1-main2 p:nth-child(1){
        font-size: calc((100vw - 56px) * 0.035);
        padding: 8px 16px;
    }
    .catch1-main2 p:nth-child(2){
        font-size: calc((100vw - 56px) * 0.1);
    }

    .catch2-main {
        font-size: calc((100vw - 56px) * 0.0625);
    }

    .catch2-sub {
        font-size: calc((100vw - 56px) * 0.0425);
    }

    .form {
        max-width: unset;
        width: 100%;
    }

    .form-title-inner {
        flex: 1;
    }

    .form-title-inner p:nth-child(1) {
        font-size: calc((100vw - 40px) * 0.065);
    }

    .form-title-inner p:nth-child(2) {
        font-size: calc((100vw - 156px) * 0.07);
    }

    .icon-10sec {
        padding: 2.5% 5%;
        font-size: calc((100vw - 4px) * 0.045);
    }


    .form-contents {
        padding: 30px 20px 20px;
    }

    .form-contents label {
        gap: 1rem;
    }

    .form-group {
        font-size: .875rem;
    }

    span.required {
        font-size: 0.625rem;
    }

    .form-contents label>span {
        width: calc(4em + 32px + .5rem);
    }

    .form-title {
        padding: 10% 0 2.5%;
    }

    .icon-30sec {
        width: 80px;
        transform: translateY(-40px);
    }

    .label-custom {
        gap: 1rem;
    }
    .gift-ticket {
        border-radius: 8px;
    }
}

/* フッター */
.footer-inner {
    max-width: 1140px;
    margin: 0 auto;
}

#group {
    text-align: center;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    padding: 2.5rem 2rem;
}

#group .group_logo {
    width: 333px;
}

#group .group_logo img {
    width: 100%;
}

#group .m_box_fixed {
    width: unset;
    margin: unset;
    line-height: 1.5;
    text-align: left;
}

#group h3 {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 1.5rem;
}

#group p {
    font-size: 0.75rem;
}

.copyright {
    background-color: #353535;
    color: #fff;
    font-size: 0.875rem;
}

.copyright div {
    max-width: 1140px;
    margin: 0 auto;
    text-align: center;
    padding: 1.5rem 2rem;
}

@media screen and (max-width: 768px) {
    #group {
        flex-direction: column;
        gap: 2rem;
    }

    #group p,
    #group h3 {
        text-align: center;
    }

    #group h3 {
        font-size: calc((100vw - 64px) * 0.06);
    }

    #group .group_logo {
        width: 80%;
    }
}

.exslider .swiper-wrapper {
    transition-timing-function: linear;
}

.exslider .swiper-slide {
    padding: 0.75rem;
    background-color: rgb(255, 255, 255);
    border-radius: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.exslider a.swiper-slide {
    color:#000;
    text-decoration: none;
}

.car-info {
    display: flex;
    gap: .75rem;
}

.car-image {
    width: 120px;
}

.car-image img {
    width: 100%;
}

.car-details {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.car-details p:not(.price) {
    font-size: 11px;
}

.car-details p.price {
    line-height: 1;
}

span.price-label {
    font-size: 10px;
}

span.font-rd {
    color: #D7141A;
}

span.font-20 {
    font-size: 1.25rem;
}

span.font-32 {
    font-size: 2rem;
}

span.font-b {
    font-weight: bold;
}

@media screen and (max-width: 768px) {
    div.contents.example>div {
        overflow: hidden;
    }

    div.contents.example .label {
        flex-direction: unset;
        width: unset;
        margin: 0 auto;
    }

    div.contents.example .label-main {
        font-size: calc((100vw - 88px) * 0.1);
    }

    div.contents.example .label-sub {
        padding: .5rem 1rem;
        font-size: calc((100vw - 88px) * 0.05);
    }

    .car-info {
        /* flex-direction: column; */
    }

    .car-image {
        /* width: 100%; */
    }

    p.model-year,
    p.mileage,
    p.price {
        display: flex;
        justify-content: space-between;
        align-items: baseline;

    }

    span.font-20 {
        font-size: 1rem;
    }

    span.font-32 {
        font-size: 1.5rem;
    }

    .select-pull {
        position: relative;
    }

    .select-pull select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 4px;
        color: #666;
    }

    .select-pull::after {
        position: absolute;
        content: '▼';
        top: 50%;
        transform: translateY(-50%);
        right: .5rem;
        color: #333;
        pointer-events: none;
        font-size: .625rem;
    }

    input {
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 4px;
        color: #ccc;
    }

    .car-details p.price {
        flex-direction: column;
        line-height: 1.25;
    }

    .car-details p.price span:nth-child(2) {
        text-align: right;
        width: 100%;
    }

    div.contents.example .swiper {
        overflow: visible;
    }
}

.car-title span {
    font-size: .75rem;
    padding: .25rem .5rem;
    background-color: #3D8DE8;
    color: #fff;
}

.car-title:has(> span) {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.point {
    margin: 0 auto;
}

.point-inner {
    display: inline-flex;
    gap: 2rem;
    background-color: #fff;
    border-radius: 0.5rem;
    padding: 1rem 2rem;
}

.point-inner div {
    display: flex;
    gap: .75rem;
    align-items: center;
}

.point-inner div:not(:last-child) {
    padding-right: 2rem;
    border-right: 1px solid #3D8DE8;
}

.point-inner p {
    font-size: 20px;
    text-align: center;
    font-weight: bold;
}

.point-inner p span {
    font-style: italic;
}

.point-inner img {
    width: 48px;
}

@media screen and (max-width: 768px) {
    .point {
        width: 100%;
        padding: 0 1.25rem;
    }

    .point-inner {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    .point-inner div:not(:last-child) {
        padding-right: unset;
        border-right: unset;
    }

    .point-inner p {
        text-align: unset;
        font-size: calc((100vw - 136px) * 0.08);
    }
    .car-title span {
        font-size: .625rem;
    }
}

.fixed-cta {
    display: none;
    position: fixed;
    bottom: 0;
    padding: .75rem;
    gap: .75rem;
    width: 100%;
    background-color: #0068B1;
    z-index: 1;
    transform: translateY(100%);
    transition: transform .3s ease;
}

.fixed-cta.show {
    transform: translateY(0);
}

.fixed-cta a {
    flex: 1;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: .5rem;
    gap: .25rem;
    font-weight: bold;
    margin-bottom: 4px;
    align-items: center;
    text-decoration: none;
}

a.fixed-cta-form {
    border: 2px solid #b5191e;
    background-image: linear-gradient(#ef0008, #a70000);
    color: #fff;
    box-shadow: 0px 4px 0 #710000;
}

a.fixed-cta-phone {
    border: 2px solid #e4c900;
    background-image: linear-gradient(#FFE100, #dbc200);
    color: #333;
    box-shadow: 0px 4px 0 #b8a200;
}

.fixed-cta p {
    font-size: clamp(0.625rem, 2.75vw, 1rem);
}

.fixed-cta span {
    font-size: clamp(0.875rem, 4vw, 2rem);
}

@media screen and (max-width: 768px) {
    .fixed-cta {
        display: flex;
    }
}

span.wpcf7-not-valid-tip {
    font-size: 12px;
    margin-top: 5px;
}

.wpcf7-response-output {
    display: none;
}

/*span.wpcf7-not-valid-tip {
    display: none;
}*/

.peace-of-mind{
    background-color:#eee;
}
.peace-of-mind>div {
    flex-direction: column;
}
.pom01 {
    display: flex;
}
.pom01 div{
    flex:1;
    text-align:center;
    height:64px;
    color:#fff;
    font-size:28px;
    font-weight:bold;
    align-content: center;
}
.pom01 div:nth-child(1){
    background-color:#0068B1;
}
.pom01 div:nth-child(2){
    background-color:#0184E0;
}
.pom02{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pom02 div.pom02-title{
    color: #fff;
    font-size: 28px;
    font-weight: bold;
    padding: 0 40px;
    background-color: #0068B1;
    border-radius: 40px;
    margin-bottom: -32px;
    height: 64px;
    align-content: center;
    position: relative;
    z-index: 1;
    width: fit-content;
}
.pom02 div.pom02-sub{
    padding: 72px 48px 48px;
    background-color: #fff;
    border: 4px solid #0068B1;
    border-radius: 1rem;
    width: fit-content;
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.pom02 div.pom02-sub div{
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
    width: fit-content;
    background: linear-gradient(transparent 60%, #ff6 60%);
    
}
.pom03{
    width: 770px;
    margin: 0 auto;
}
.pom03 img{
    width: 100%;
}

@media screen and (max-width: 768px) {
    .pom01 {
        flex-direction: column;
    }
    .pom01 div {
        height: unset;
        font-size: calc((100vw - 40px) * 0.07);
        padding: 8px 0;
    }
    .pom02{
        margin-top: calc((100vw) * -0.05);
    }
    .pom02 div.pom02-title{
        font-size: calc((100vw - 72px) * 0.05);
        transform: translateY(calc(50% - -2px));
        padding: 8px 16px;
        margin-bottom: 0;
        height: unset;
    }
    .pom02 div.pom02-sub {
        padding: calc(5% + 20px) 0 20px;
        gap: 1rem;
        width: 100%;
    }
    .pom02 div.pom02-sub div{
        font-size: calc((100vw - 88px) * 0.055);
    }
    .pom03 {
        width:100%;
    }
}
main div.contents.flow{
    background-color:#1675BD;
}
main div.contents.flow>div{
    flex-direction: column;
}

div.flow-label{
    font-size: 40px;
    color: #fff;
    font-weight: bold;
    margin: 0 auto;
}
div.schedule{
    display:flex;
    gap: 1.5rem;
}
div.schedule div.step{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
div.step-label{
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
div.circle{
    width:24px;
    height:24px;
    background-color:#FFE100;
    border-radius: 12px;
    margin: 0 auto;
}
div.number{
    font-size:24px;
    color:#FFE100;
    font-weight:bold;
    line-height: 1;
    text-align: center;
}
div.number span{
    font-size:32px;
}
div.step-inner {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
div.step-title{
    height: 120px;
    background-color: #FFE100;
    font-weight:bold;
    align-content: center;
    text-align: center;
    font-size:20px;
    border-radius:0.5rem;
}
div.step-text{
    font-size:0.875rem;
    color:#fff;
}

.flow-line{
    position: absolute;
    top: 0;
    height:24px;
    width: 77.5%;
    left: 50%;
    transform: translateX(-50%);
    display:flex;   
    align-items: center;
}
.flow-line hr:nth-child(1){
    width: 64.5%;
    border: #FFE100 1px solid;
    margin-right:auto;
}
.flow-line hr:nth-child(2){
    width: 35.5%;
    border: #FFE100 1px dashed;
    margin-left:auto;
}
.separate{
    width: 1px;
    height: 244.5px;
    border: #FFE100 1px solid;
    margin-top: auto;
}
@media screen and (max-width: 768px) {
    div.flow-label{
        font-size: calc((100vw - 40px) * 0.1);
    }
    div.schedule {
        flex-direction: column;
    }
    div.circle {
        margin: unset;
    }
    div.step-label {
        flex-direction: unset;
        align-items: center;
        gap: .5rem;
    }
    .separate{
        width: calc(100% - 32px);
        margin-left: auto;
        height: unset;
    }
    div.step-inner:not(.complete) {
        width: calc(100% - 32px);
        margin-left: auto;
    }
    .flow-line{
        width: 24px;
        height: 76%;
        margin-top: auto;
        top: 1rem;
        left: 0;
        transform: unset;
        flex-direction: column;
    }
    .flow-line hr:nth-child(1){
        width: 1px;
        height: 64.5%;
        margin-bottom: auto;
        margin-right:unset;
    }
    .flow-line hr:nth-child(2){
        width: 1px;
        height: 35.5%;
        margin-top: auto;
        margin-left:unset;
    }
}