/* ======================================================
   FLOW Responsive
   SERVICE / COMPANY Responsiveと同じレイアウト
   ※PCデザインは変更しない
   ※@mediaのみで上書き
====================================================== */


/* ======================================================
   タブレット
   1024px以下
====================================================== */
@media screen and (max-width:1024px){

    /* ==========================
       FLOW Hero
       SERVICEと同じ設定
    ========================== */

    .flow-hero{
        padding:100px 20px 80px;
    }

    .flow-title{
        font-size:40px;
    }

    .flow-description{
        font-size:17px;
        line-height:1.9;
    }

    /* ==========================
       FLOW Section
       SERVICE / COMPANYと同じ設定
    ========================== */

    .flow-section{
        padding:80px 0;
    }

    .flow-container{
        width:92%;
        gap:50px;
    }

    .flow-number{
        font-size:3.5rem;
    }

    .flow-content h2{
        font-size:1.8rem;
    }

    .flow-content p{
        font-size:0.95rem;
        line-height:1.9;
    }

    .flow-content li{
        font-size:0.95rem;
        line-height:1.8;
    }
}


/* ======================================================
   スマホ
   768px以下
====================================================== */
@media screen and (max-width:768px){

    /* ==========================
       FLOW Section
       SERVICE / COMPANYと同じ縦並び
    ========================== */

    .flow-section{
        padding:60px 0;
    }

    .flow-container{
        width:92%;
        flex-direction:column;
        gap:40px;
    }

    /*
    HTML内の順番（.reverseかどうか）に関わらず、
    orderで確実に「画像→文章」の順に表示する。
    （COMPANYと同じ考え方）
    */
    .flow-container.reverse{
        flex-direction:column;
    }

    .flow-image{
        width:100%;
        order:1;                 /* 常に画像を上に */
    }

    .flow-image img{
        width:100%;
        height:auto;
        display:block;
        object-fit:cover;
        border-radius:12px;
    }

    .flow-content{
        width:100%;
        order:2;                 /* 常に文章を下に */
    }

    .flow-number{
        font-size:3rem;
    }

    .flow-content h2{
        margin-bottom:20px;
        font-size:1.6rem;
        line-height:1.5;
    }

    .flow-content p{
        margin-bottom:25px;
        font-size:16px;
        line-height:1.9;
    }

    .flow-content ul{
        padding-left:18px;
    }

    .flow-content li{
        margin-bottom:10px;
        font-size:15px;
        line-height:1.8;
    }
}