/* ==========================================
   Hero（メインビジュアル）
========================================== */

/*
【役割】
ホームページを開いた時に最初に表示されるエリアです。

【表示内容】
・背景画像
・赤いパネル
・会社名
・キャッチコピー
・説明文
・ボタン

【注意】
Headerの高さ（170px）に合わせて
top:170px; に設定しています。

Headerの高さを変更した場合は、
ここも同じ数値へ変更してください。
*/

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

.hero{
    position:fixed;                         /* Heroを画面へ固定 */
    top:130px;                              /* Headerの下から開始 */
    right:0;                                /* 右端 */
    bottom:0;                               /* 下端 */
    left:0;                                 /* 左端 */
    overflow:hidden;                        /* はみ出した部分を非表示 */
}

/* ==========================================
   背景画像
========================================== */

/*
【役割】
Heroの背景画像です。

【変更方法】
assets/images/hero.png
を差し替えるだけで変更できます。
*/

.hero-image{
    position:absolute;                                                          /* Hero全体へ配置 */
    inset:0;                                                                    /* 四方向すべて0 */
    background:url("assets/images/hero.png") center center / cover no-repeat;   /* 背景画像を中央表示 */
    z-index:1;                                                                  /* 背景レイヤー */
}

/* ==========================================
   赤いパネル
========================================== */

/*
【役割】
キャッチコピーを表示する赤いエリアです。

【ポイント】
clip-pathで斜めデザインを作っています。
*/

.hero-panel{
    position:absolute;                              /* Hero上へ配置 */
    top:0;                                          /* 上端 */
    left:0;                                         /* 左端 */
    width:38%;                                      /* 横幅 */
    height:100%;                                    /* 高さいっぱい */
    background:rgba(126,0,18,.92);                /* 半透明の赤 */
    clip-path:polygon(0 0,60% 0,100% 100%,0 100%);  /* 斜めデザイン */
    display:flex;                                   /* Flexレイアウト */
    align-items:center;                             /* 縦中央 */
    z-index:2;                                      /* 背景より前 */
}

/* ==========================================
   Hero文字エリア
========================================== */

.hero-content{
    position:absolute;                   /* Hero内で位置を固定 */
    top:100px;                            /* ← この数値で上下位置を調整 */
    left:50px;                           /* 左から70px */
    width:72%;                           /* 文字エリア幅 */
    color:#fff;                          /* 文字色 */
    z-index:3;                           /* 赤パネルより前面 */
}

/* ==========================================
   会社名
========================================== */

/*.company{*/
    /*font-size:18px;                          文字サイズ */
    /*font-weight:700;                         太字 */
    /*letter-spacing:.15em;                    文字間隔 */
    /*color:#ffffff;                           白文字 */
    /*margin-bottom:25px;                      下余白 */
/*}*/

/* ==========================================
   Heroタイトル
========================================== */

/*
【現在採用】

Plus for
Your Challenge

【構成】

hero-plus
↓
Plus

hero-for
↓
for

hero-challenge
↓
Your Challenge
*/

.hero h1{
    font-family:"M PLUS Rounded 1c",sans-serif;
    font-weight:800;
    line-height:1.1;
    color:#fff;
}

/* Plus専用 */

.italic{
    color:#c40018;                                                    /* ブランドカラー */
    font-style:italic;                                                  /* イタリック */
    text-shadow:8px 8px 0 #fff,12px 12px 18px rgba(0,0,0,.25);      /* 立体感 */
}

.hero-plus{
    display:inline-block;                   /* インライン表示 */
    font-size:150px;                        /* 最大サイズ */
    color:#c40018;                          /* 赤 */
    font-style:italic;                      /* イタリック */
    text-shadow:8px 8px 0 #fff,12px 12px 18px rgba(0,0,0,.25);
    margin-left:-20px;                      /* 左へ少し移動 */
}

/* for */

.hero-for{
    display:inline-block;                   /* 横並び */
    font-size:40px;                         /* サイズ */
    color:#fff;                             /* 白 */
    margin-left:60px;                       /* 左余白 */
}

/* Your Challenge */

.hero-challenge{
    display:block;                          /* 改行 */
    font-size:40px;                         /* サイズ */
    color:#fff;                             /* 白 */
    margin-left:60px;                       /* 左余白 */
}

/* ==========================================
   キャッチコピー説明文
========================================== */

/*
【役割】
Hero内の説明文を表示します。

【対応内容】
・多言語でも読みやすい表示
・長い文章でも自然に折り返し
・日本語・英語・欧州言語へ対応

【変更すると影響する項目】

width
→ 説明文の横幅

font-size
→ 文字サイズ

line-height
→ 行間

letter-spacing
→ 文字間隔

overflow-wrap
→ 長い単語の折り返し
*/

.lead{
    position:absolute;                                /* 説明文の位置を固定 */
    top:320px;                                        /* タイトルからの位置 */
    left:0;                                           /* hero-contentに合わせる */

    width:100%;                                       /* 横幅いっぱい */
    max-width:420px;                                  /* 最大横幅 */

    font-family:"Noto Sans JP","Noto Sans",Arial,sans-serif; /* 多言語対応フォント */

    font-size:clamp(14px,1.3vw,22px);                 /* 自動調整 */
    font-weight:400;                                  /* 標準 */
    line-height:1.8;                                  /* 行間 */
    color:#ffffff;                                    /* 白文字 */

    letter-spacing:0;                                 /* 文字間隔 */
    word-spacing:0;                                   /* 単語間隔 */

    text-align:left;                                  /* 左揃え */
    word-break:normal;                                /* 通常改行 */
    overflow-wrap:anywhere;                           /* 長い単語も折り返す */
    text-wrap:pretty;                                 /* 自然な改行（対応ブラウザ） */
}

/* ==========================================
   TOPページのみスクロール禁止
========================================== */

body.home{
    overflow:hidden;                          /* TOPページのみ縦スクロール禁止 */
    height:100vh;                             /* 画面いっぱい */
}

/*
================================================

【変更すると影響する場所】

top
→ Headerとの位置関係

width:38%
→ 赤いパネルの幅

margin-left
→ 文字全体の位置

font-size
→ Heroタイトル全体

hero-plus
→ Plusだけ大きさ変更可能

lead
→ 翻訳時の折り返しにも影響

================================================
*/

/* ==========================================================
   TOP Hero スマホ対応
   ※PC表示には影響しない
========================================================== */

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

    /* Headerの高さが90pxに変わるため、
       スクロール固定をやめて通常の流れに変更する */
    body.home{
        overflow:auto;                          /* スクロール禁止を解除 */
        height:auto;                            /* 高さ固定を解除 */
    }

    .hero{
        position:relative;                      /* 画面固定をやめる */
        top:0;                                  /* Header直下から開始 */
        margin-top:118px;                       /* 固定ヘッダー(118px：メイン90px+Language帯28px)の分だけ下へ空ける */
        min-height:calc(100vh - 118px);         /* Header分を引いた高さを確保 */
        height:auto;                            /* 中身に応じて伸びる */
    }

    .hero-panel{
        position:relative;                      /* Hero内で通常配置 */
        width:100%;                             /* 赤パネルを全幅に */
        height:auto;                            /* 中身に応じて伸びる */
        min-height:0;                           /* 文字量に応じて高さを自動調整（余白まで赤くならないように） */
        background:rgba(126,0,18,.4);           /* 透明度をさらに下げ、太陽がはっきり見えるように */
        clip-path:none;                         /* 斜めデザインは狭い画面では潰れるため解除 */
        padding:50px 20px 25px;                 /* 内側余白（下側を短縮し、太陽の部分まで赤みが伸びないように） */
        align-items:flex-start;                 /* 上揃え */
    }

    .hero-content{
        position:relative;                      /* 絶対配置をやめる */
        top:0;                                  /* 位置調整不要に */
        left:0;                                 /* 左端から */
        width:100%;                             /* 幅いっぱい */
        padding:0 10px;                         /* 左右余白 */
    }

    .hero-image{
        background-size:cover;
        background-position:center 0%;         /* 写真の下寄り（朝日の部分）が見えるように調整 */
    }

    .hero-plus{
        font-size:70px;                         /* PCの150pxから縮小 */
        margin-left:0;                          /* 左移動を解除 */
    }

    .hero-for,
    .hero-challenge{
        font-size:22px;                         /* PCの40pxから縮小 */
        margin-left:10px;                       /* 余白を縮小 */
        text-shadow:0 2px 6px rgba(0,0,0,.5);   /* パネルを薄くした分、視認性確保のため影を追加 */
    }

    .lead{
        position:relative;                      /* 絶対配置をやめてタイトルと重ならないように */
        top:20px;                               /* タイトルとの間隔 */
        left:0;                                 /* 左端から */
        width:100%;                             /* 幅いっぱい */
        max-width:100%;                         /* 最大幅制限を解除 */
        text-shadow:0 2px 6px rgba(0,0,0,.5);   /* パネルを薄くした分、視認性確保のため影を追加 */
    }
}

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

    .hero{
        margin-top:106px;                       /* 480px以下のヘッダー高さ(106px)に合わせる */
        min-height:calc(100vh - 106px);
    }

    .hero-plus{
        font-size:54px;                         /* さらに小さい画面向けに縮小 */
    }

    .hero-for,
    .hero-challenge{
        font-size:18px;                         /* さらに小さい画面向けに縮小 */
        margin-left:8px;
    }

    .hero-panel{
        min-height:0;                           /* 文字量に応じて高さを自動調整 */
        padding:40px 15px 50px;                 /* 余白を少し詰める */
    }

    .hero-content{
        padding:0 5px;                          /* 余白を少し詰める */
    }
}