/* ==========================================================
   COMPANY Hero
   ページタイトルエリア
   ※SERVICE Heroと同じレイアウトに統一
   ※背景画像・COMPANYの文章・色は変更しない
========================================================== */

/*
【今回の変更】
・SERVICE Heroと同じコンテンツ位置
・SERVICE Heroと同じPCレイアウト
・SERVICE Heroと同じスマホレイアウト
・SERVICE Heroと同じ小型スマホレイアウト

【変更していないもの】
・COMPANY背景画像
・COMPANYの文章
・COMPANYの文字色
*/

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

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

    /* 写真の上に暗いグラデーションを重ね、文字を読みやすくする */
    background-image:
        linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.55)),
        url("assets/images/company-hero-osaka.png");
    background-repeat:no-repeat;

    /* 背景画像の位置・サイズはCOMPANYの既存設定を維持 */
    background-position:center 45%;
    background-size:cover;

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

/* ==========================================================
   Hero内コンテンツ
   SERVICEと同じレイアウト
========================================================== */

.company-hero-inner{
    width:100%;
    max-width:1200px;
    margin:0 auto;

    /* SERVICEと同じ左位置 */
    padding-left:260px;

    box-sizing:border-box;
}

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

.company-subtitle{
    margin-top:40px;
    padding:0;

    text-align:left;

    color:#f1efef;
    font-size:18px;
    font-weight:700;
    letter-spacing:4px;
    line-height:1.6;

    text-transform:uppercase;
}

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

.company-title{
    width:100%;
    max-width:900px;

    margin-top:10px;
    margin-bottom:0;

    padding:0;

    font-family:"Noto Sans JP","Noto Sans",Arial,sans-serif;

    text-align:left;

    /* COMPANYの既存色を維持 */
    color:#fff;
    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;

    /* COMPANYの既存設定を維持 */
    text-shadow:0 2px 8px rgba(0,0,0,.6);
}

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

.company-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;

    /* COMPANYの既存色を維持 */
    color:#fff;
    font-size:18px;
    font-weight:400;
    line-height:1.9;

    letter-spacing:0;
    word-spacing:0;

    word-break:normal;
    overflow-wrap:anywhere;

    /* COMPANYの既存設定を維持 */
    text-shadow:0 1px 6px rgba(0,0,0,.5);
}


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

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

    .company-hero{
        position:relative;

        /* SERVICEと同じ */
        margin-top:118px;                             /* 固定ヘッダー(118px：メイン90px+Language帯28px)の分だけ下へ空ける */
        padding:20px 20px 16px;

        box-sizing:border-box;

        /* 背景画像はCOMPANYの位置を維持 */
        background-position:center 45%;
        background-size:cover;
    }

    .company-hero-inner{
        width:100%;
        max-width:none;
        margin:0;

        /* SERVICEと同じくPCの260pxを解除 */
        padding-left:0;
        padding-right:0;

        box-sizing:border-box;
    }

    .company-subtitle{
        /* SERVICEと同じ */
        margin-top:0;

        font-size:13px;
        letter-spacing:2px;
        line-height:1.4;
    }

    .company-title{
        width:100%;
        max-width:none;

        margin-top:6px;

        /* SERVICEと同じ */
        font-size:clamp(24px,7vw,32px);
        line-height:1.3;

        word-break:normal;
        overflow-wrap:anywhere;
    }

    .company-description{
        width:100%;
        max-width:none;

        /* SERVICEと同じ */
        margin-top:12px;

        font-size:14px;
        line-height:1.6;

        word-break:normal;
        overflow-wrap:anywhere;
    }
}


/* ==========================================================
   COMPANY Hero 小型スマホ対応
   SERVICE Heroと同じレイアウト
========================================================== */

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

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

        /* 背景画像の位置はCOMPANYの設定を維持 */
        background-position:center 45%;
        background-size:cover;
    }

    .company-subtitle{
        /* SERVICEと同じ */
        margin-top:0;

        font-size:11px;
        letter-spacing:1.5px;
        line-height:1.4;
    }

    .company-title{
        /* SERVICEと同じ */
        margin-top:4px;
        font-size:clamp(22px,7vw,28px);
        line-height:1.25;
    }

    .company-description{
        /* SERVICEと同じ */
        margin-top:10px;
        font-size:13px;
        line-height:1.6;
    }
}