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

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

.flow-hero{
    width:100%;                                           /* 幅を親要素いっぱいに */
    padding:100px 20px 10px;                              /* 上100px・左右20px・下20pxの余白 */

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

    text-align:left;                                      /* テキストを左寄せ */
    overflow:hidden;                                       /* はみ出し部分を非表示 */
}

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

.flow-hero-inner{
    max-width:1200px;      /* 最大幅 */
    margin:0 auto;         /* 中央配置 */
    padding-left:260px;    /* 数値で位置調整 */
    box-sizing:border-box; /* paddingを幅に含める */
}

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

.flow-subtitle{
    margin-top:40px;              /* 上に40pxの余白 */
    padding:0;                    /* 内側余白なし */
    text-align:left;              /* 左寄せ */
    color:#b30505;                /* 文字色(白に近いグレー) */
    font-size:18px;                /* 文字サイズ */
    font-weight:700;               /* 太字 */
    letter-spacing:4px;            /* 文字間隔を広げる */
    line-height:1.6;               /* 行間 */
    text-transform:uppercase;      /* 大文字に変換 */
}

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

.flow-title{
    width:100%;                                            /* 幅を親要素いっぱいに */
    max-width:900px;                                       /* 最大幅900px */
    margin-top:10px;                                       /* 上に10pxの余白 */
    margin-bottom:0;                                       /* 下余白なし */
    padding:0;                                             /* 内側余白なし */
    font-family:"Noto Sans JP","Noto Sans",Arial,sans-serif; /* フォント指定 */
    text-align:left;                                       /* 左寄せ */
    color:#b30505;                                         /* 文字色(白に近いグレー) */
    font-size:clamp(38px,4vw,48px);                        /* 画面幅に応じて可変(最小38px・最大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);                /* 文字に薄い影をつける */
}

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

.flow-description{
    width:100%;                                            /* 幅を親要素いっぱいに */
    max-width:900px;                                       /* 最大幅900px */
    margin-top:30px;                                       /* 上に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:#b30505;                                         /* 文字色(白に近いグレー) */
    font-size:18px;                                        /* 文字サイズ */
    font-weight:400;                                       /* 標準の太さ */
    line-height:1.9;                                       /* 行間を広めに */
    letter-spacing:0;                                      /* 文字間隔なし */
    word-spacing:0;                                        /* 単語間隔なし */
    word-break:normal;                                     /* 通常の改行ルール */
    overflow-wrap:anywhere;                                /* はみ出す場合はどこでも改行可 */
}

/* ==========================================================
   FLOW Hero スマホ対応
   SERVICE Heroと同じレイアウト
   ※PC表示には影響しない
========================================================== */

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

    .flow-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;
    }

    .flow-hero-inner{
        width:100%;
        max-width:none;
        margin:0;
        padding-left:0;                         /* PC用260pxを解除 */
        padding-right:0;
        box-sizing:border-box;
    }

    .flow-subtitle{
        margin-top:0;
        font-size:13px;
        letter-spacing:2px;
        line-height:1.4;
    }

    .flow-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;
    }

    .flow-description{
        width:100%;
        max-width:none;
        margin-top:12px;
        font-size:14px;
        line-height:1.6;
        word-break:normal;
        overflow-wrap:anywhere;
    }
}

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

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

    .flow-hero{
        margin-top:106px;                       /* 480px以下のヘッダー高さ(106px)に合わせる */
        padding:16px 15px 12px;
    }

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

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

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