/* ======================================================
   SERVICE Responsive
   レスポンシブ専用CSS
   ※PCデザインは変更しない
   ※@mediaのみで上書き
====================================================== */


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

    /* ==========================
       SERVICE Hero
    ========================== */

    .service-hero{
        padding:100px 20px 80px;                 /* 上・左右・下余白 */
    }

    .service-title{
        font-size:40px;                          /* タイトル文字サイズ */
    }

    .service-description{
        font-size:17px;                          /* 説明文文字サイズ */
        line-height:1.9;                         /* 行間 */
    }


    /* ==========================
       Service Section
    ========================== */

    .service-section{
        padding:80px 0;                          /* 上下余白 */
    }

    .service-container{
        width:92%;                               /* コンテンツ幅 */
        gap:50px;                                /* 要素間余白 */
    }

    .service-number{
        font-size:3.5rem;                        /* 番号サイズ */
    }

    .service-content h2{
        font-size:1.8rem;                        /* タイトルサイズ */
    }

    .service-content p{
        font-size:0.95rem;                       /* 説明文サイズ */
        line-height:1.9;                         /* 行間 */
    }

    .service-content ul li{
        font-size:0.95rem;                       /* リスト文字サイズ */
        line-height:1.8;                         /* 行間 */
    }


    /* ==========================
       CTA
    ========================== */

    .service-cta{
        padding:100px 20px;                      /* 上下・左右余白 */
    }

    .service-cta-title{
        font-size:24px;                          /* タイトルサイズ（縮小） */
    }

    .service-cta-text{
        font-size:17px;                          /* 説明文サイズ */
        margin:0 auto 40px;                      /* 下余白 */
    }

    .service-cta-button{
        min-width:280px;                         /* 最小横幅 */
        font-size:17px;                          /* 文字サイズ */
        padding:16px 36px;                       /* 内側余白 */
    }

}


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

    /* ==========================
       SERVICE Hero
    ========================== */

    .service-hero{
        padding:80px 20px 60px;                  /* 上・左右・下余白 */
    }

    .service-subtitle{
        font-size:15px;                          /* 英語タイトル */
        letter-spacing:3px;                      /* 文字間隔 */
    }

    .service-title{
        margin:12px 0 25px;                      /* 外側余白 */
        font-size:32px;                          /* タイトルサイズ */
        line-height:1.4;                         /* 行間 */
    }

    .service-description{
        font-size:16px;                          /* 説明文サイズ */
        line-height:1.8;                         /* 行間 */
    }


    /* ==========================
       Service Section
    ========================== */

    .service-section{
        padding:60px 0;                          /* 上下余白 */
    }

    .service-container{
        width:92%;                               /* コンテンツ幅 */
        flex-direction:column;                   /* 縦並び */
        gap:40px;                                /* 要素間余白 */
    }

    .service-container.reverse{
        flex-direction:column-reverse;           /* HTMLでは説明文が先だが、画像を上に表示するため順番を反転 */
    }

    .service-image{
        width:100%;                              /* 横幅いっぱい */
    }

    .service-content{
        width:100%;                              /* 横幅いっぱい */
    }

    .service-number{
        font-size:3rem;                          /* 番号サイズ */
    }

    .service-content h2{
        margin-bottom:20px;                      /* 下余白 */
        font-size:1.6rem;                        /* タイトルサイズ */
        line-height:1.5;                         /* 行間 */
    }

    .service-content p{
        margin-bottom:25px;                      /* 下余白 */
        font-size:16px;                          /* 説明文サイズ */
        line-height:1.9;                         /* 行間 */
    }

    .service-content ul{
        padding-left:18px;                       /* 左余白 */
    }

    .service-content ul li{
        margin-bottom:10px;                      /* 下余白 */
        font-size:15px;                          /* リスト文字サイズ */
        line-height:1.8;                         /* 行間 */
    }


    /* ==========================
       CTA
    ========================== */

    .service-cta{
        padding:80px 20px;                       /* 上下・左右余白 */
    }

    .service-cta-subtitle{
        font-size:15px;                          /* 英語タイトル */
        letter-spacing:3px;                      /* 文字間隔 */
    }

    .service-cta-title{
        font-size:18px;                          /* タイトルサイズ（style_Service_CTA.cssと統一） */
        line-height:1.65;                        /* 行間 */
    }

    .service-cta-text{
        font-size:16px;                          /* 説明文サイズ */
        line-height:1.9;                         /* 行間 */
        margin:0 auto 35px;                      /* 下余白 */
    }

    .service-cta-button{
        width:100%;                              /* 横幅いっぱい */
        max-width:320px;                         /* 最大横幅 */
        min-width:0;                             /* 最小横幅解除 */
        padding:16px 20px;                       /* 内側余白 */
        font-size:16px;                          /* 文字サイズ */
    }

}