/* ==========================================================
   SERVICE Hero
   ページタイトルエリア
========================================================== */

/* ==========================================================
   Hero全体
========================================================== */

.service-hero{
    width:100%;
    padding:100px 20px 20px;

    background-image:url("assets/images/service-hero-map.png"); /* 背景画像 */
    background-repeat:no-repeat;                                /* 繰り返しなし */
    background-position:center top;                             /* 中央上配置 */
    background-size:cover;                                      /* Hero全体に表示 */

    text-align:left;
    overflow:hidden;
    box-sizing:border-box;
}

/* ==========================================================
   Hero内コンテンツ
========================================================== */

.service-hero-inner{
    width:100%;
    max-width:1200px;      /* 最大幅 */
    margin:0 auto;         /* 中央配置 */
    padding-left:260px;    /* PCでの位置調整 */
    box-sizing:border-box;
}

/* ==========================================================
   英語タイトル
========================================================== */

.service-subtitle{
    margin-top:40px;                   /* 上から40px下げる */
    padding:0;                         /* 内側余白なし */
    text-align:left;                   /* 左寄せ */
    color:#f1efef;                     /* 文字色 */
    font-size:18px;                    /* 文字サイズ */
    font-weight:700;                   /* 太字 */
    letter-spacing:4px;                /* 文字間隔 */
    line-height:1.6;                   /* 行間 */
    text-transform:uppercase;          /* 英字を大文字表示 */
}

/* ==========================================================
   日本語タイトル
========================================================== */

.service-title{
    width:100%;                                        /* 横幅いっぱい */
    max-width:900px;                                  /* 最大横幅 */
    margin-top:10px;                                  /* SERVICEとの間隔 */
    margin-bottom:0;                                  /* 下余白なし */
    padding:0;                                        /* 内側余白なし */
    font-family:"Noto Sans JP","Noto Sans",Arial,sans-serif; /* 多言語対応フォント */
    text-align:left;                                  /* 左寄せ */
    color:#f5f1f1;                                    /* 文字色 */
    font-size:clamp(38px,4vw,48px);                   /* 可変文字サイズ */
    font-weight:700;                                  /* 太字 */
    line-height:1.4;                                  /* 行間 */
    letter-spacing:0;                                 /* 文字間隔 */
    word-spacing:0;                                   /* 単語間隔 */
    word-break:normal;                                /* 通常改行 */
    overflow-wrap:anywhere;                           /* 長い単語も折り返す */
    text-shadow:0 2px 4px rgba(0,0,0,0.15);           /* 文字に影 */
}

/* ==========================================================
   ページ説明文
========================================================== */

.service-description{
    width:100%;                                       /* 横幅いっぱい */
    max-width:900px;                                  /* 最大横幅 */
    margin-top:30px;                                  /* タイトルとの余白 */
    margin-bottom:0;                                  /* 下余白なし */
    margin-left:0;                                    /* 左寄せ */
    margin-right:0;                                   /* 左寄せ */
    padding:0;                                        /* 内側余白なし */
    font-family:"Noto Sans JP","Noto Sans",Arial,sans-serif; /* 多言語対応フォント */
    text-align:left;                                  /* 左寄せ */
    color:#eeebeb;                                    /* 文字色 */
    font-size:18px;                                   /* 文字サイズ */
    font-weight:400;                                  /* 標準 */
    line-height:1.9;                                  /* 行間 */
    letter-spacing:0;                                 /* 文字間隔 */
    word-spacing:0;                                   /* 単語間隔 */
    word-break:normal;                                /* 通常改行 */
    overflow-wrap:anywhere;                           /* 長い単語も折り返す */
}

/* ==========================================================
   SERVICE Hero スマホ対応
   PCのデザインには影響しない
========================================================== */

@media screen and (max-width:768px){

    .service-hero{
        position:relative;
        margin-top:118px;                             /* 固定ヘッダー(118px：メイン90px+Language帯28px)の分だけ下へ空ける */
        padding:20px 20px 16px;                       /* スマホ用の上下余白（さらに縮小） */
        box-sizing: border-box;
        background-position:center top;               /* 背景位置 */
        background-size:cover;                        /* 横向きでも左右に余白を作らない */
        box-sizing:border-box;
    }

    .service-hero-inner{
        /*width:100%;*/
        /*max-width:none;                              スマホでは最大幅を解除 */
        /*margin:0;*/
        padding-left:0;                               /* PC用260pxを解除 */
        padding-right:0;
        /*box-sizing:border-box;*/
    }

    .service-subtitle{
        margin-top:0;                                 /* 上余白をさらに縮小 */
        font-size:13px;                               /* スマホ用 */
        letter-spacing:2px;                           /* 文字間隔を縮小 */
        line-height:1.4;
    }

    .service-title{
        width:100%;
        max-width:none;                               /* 横幅制限を解除 */
        margin-top:6px;
        font-size:clamp(24px,7vw,32px);               /* 画面幅に合わせて自動調整（縮小） */
        line-height:1.3;
        word-break:normal;
        overflow-wrap:anywhere;
    }

    .service-description{
        width:100%;
        max-width:none;                               /* 横幅制限を解除 */
        margin-top:12px;
        font-size:14px;                               /* スマホ用 */
        line-height:1.6;
        word-break:normal;
        overflow-wrap:anywhere;
    }
}

/* ==========================================================
   SERVICE Hero 小型スマホ対応
========================================================== */

@media screen and (max-width:480px){

    .service-hero{
        margin-top:106px;                             /* 480px以下のヘッダー高さ(106px)に合わせる */
        padding:16px 15px 12px;                       /* 小型スマホ用にさらに縮小 */
        /*background-position:center top;*/
        /*background-size:cover;*/
    }

    .service-subtitle{
        margin-top:0;
        font-size:11px;
        letter-spacing:1.5px;
        line-height:1.4;
    }

    .service-title{
        margin-top:4px;
        font-size:clamp(22px,7vw,28px);
        line-height:1.25;
    }

    .service-description{
        margin-top:10px;
        font-size:13px;
        line-height:1.6;
    }
}