/* ==========================================
   Header（ヘッダー全体）
========================================== */

/*
【役割】
ホームページの最上部に常に表示されるエリアです。

表示内容
・ロゴ
・ナビゲーションメニュー
・Language切替
・CONTACTボタン

【影響範囲】
サイト全体

【注意】
height を変更した場合は、
.hero の top の値も同じ数値へ変更する必要があります。
*/

.site-header{
    position:fixed;                     /* ヘッダーを画面上部へ固定 */
    top:0;                              /* 上端に配置 */
    left:0;                             /* 左端に配置 */
    width:100%;                         /* 横幅いっぱい */
    height:130px;                       /* ヘッダーの高さ */
    background:#fff;                    /* 背景色（白） */
    box-shadow:0 2px 12px rgba(0,0,0,.08); /* 下側に影を付ける */
    z-index:1000;                       /* 他の要素より前面へ表示 */
}

/* ==========================================
   Header Layout
========================================== */

.header-inner{
    position:relative;                  /* Languageの基準位置にする */
    width:100%;                         /* ヘッダー全体 */
    height:130px;                       /* 高さ */
    padding:0 500px 0 20px;             /* CONTACT分を確保 */
    display:flex;                       /* 横並び */
    align-items:flex-start;             /* 上揃え */
}

/* ==========================================
   ロゴ
========================================== */

/*
【役割】
会社ロゴを表示します。
*/

.logo{
    margin-top:15px;                    /* ロゴ位置 */
    flex-shrink:0;                      /* 縮まない */
}

/*
【役割】
ロゴ画像のサイズ設定
*/

.logo img{
    height:110px;                       /* ロゴの高さ */
    width:auto;                         /* 縦横比を維持 */
    display:block;                      /* 下の余白を消す */
}

/* ==========================================
   Navigation（ナビゲーションメニュー）
========================================== */

/*
【役割】
ホーム・サービス・会社概要などの
メニュー全体を管理するエリアです。

【表示内容】
・日本語タイトル
・英語タイトル
・現在ページの赤線表示

【注意】
メニュー数を増やしても基本的にはここだけで対応できます。
*/

.global-nav{
    margin-left:auto;                   /* 右寄せ */
    margin-top: 50px;                    /* 開始位置 */
}

/*
【役割】
メニュー一覧（ul）の設定
*/

.global-nav ul{
    display:flex;                      /* メニューを横並びにする */
    list-style:none;                   /* ・（黒丸）を消す */
    gap:28px;                           /* メニュー間の余白 */
}

/*
【役割】
各メニュー（li）の設定
*/

.global-nav li{
    text-align:center;                 /* 日本語・英語を中央揃え */
}

/*
【役割】
メニューリンク全体 */
.global-nav a{
    font-family:"Noto Sans JP","Noto Sans",Arial,sans-serif; /* 多言語対応フォント */
    letter-spacing:0;                                        /* 文字間隔 */
    word-spacing:0;                                           /* 単語間隔 */
}

/*
【役割】
日本語（メインタイトル） */
.global-nav .jp{
    font-family:"Noto Sans JP","Noto Sans",Arial,sans-serif; /* 多言語対応フォント */
    letter-spacing:0;                                        /* 文字間隔 */
    word-spacing:0;                                          /* 単語間隔 */
    word-break:normal;                                       /* 通常改行 */
    overflow-wrap:anywhere;                                  /* 長い単語も折り返す */
}

/*
【役割】
英語（サブタイトル） */
.global-nav .en{
    font-family:"Noto Sans JP","Noto Sans",Arial,sans-serif; /* 多言語対応フォント */
    letter-spacing:0;                                        /* 文字間隔 */
    word-spacing:0;                                          /* 単語間隔 */
    word-break:normal;                                       /* 通常改行 */
    overflow-wrap:anywhere;                                  /* 長い単語も折り返す */
}

/*
【役割】
現在のページ・マウスを乗せた時の色変更
*/

.global-nav li.current-menu-item .jp,
.global-nav li.current-menu-item .en,
.global-nav a:hover .jp,
.global-nav a:hover .en{
    color:#d6001c;                     /* L-PLUSTブランドカラー（赤） */
}

/*
【役割】
現在表示中ページの赤いライン
*/

.global-nav li.current-menu-item::after{
    content:"";                        /* 疑似要素を生成 */
    display:block;                     /* ブロック要素 */
    width:42px;                        /* ラインの長さ */
    height:3px;                        /* ラインの太さ */
    background:#d6001c;                /* 赤色 */
    margin:8px auto 0;                /* 上余白・中央配置 */
}

/*
【役割】
日本語・英語共通設定
*/

.global-nav .jp,
.global-nav .en{
    letter-spacing:0 !important;       /* 文字間隔を固定 */
    white-space:normal;                /* 長い文字は折り返す */
    text-align:center;                 /* 中央揃え */
    line-height:1.2;                   /* 行間を調整 */
}

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

margin-top
→ メニュー全体の上下位置が変わります。

gap
→ メニュー同士の間隔が変わります。

font-size
→ 日本語・英語の文字サイズが変わります。

current-menu-item::after
→ 赤いラインの長さ・太さを変更できます。
*/

/* ==========================================
   Language（言語切替）
========================================== */

/*
【役割】
GTranslate Popup の表示位置を調整します。

Popup の動作は header.php の構造で維持し、
このCSSでは表示位置のみ調整します。

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

right
→ 左右位置

top
→ 上下位置

z-index
→ 前後関係
*/

.header-language{
    position:absolute;                  /* Header内で絶対配置 */
    right:40px;                        /* CONTACT左側へ配置 */
    top:15px;                           /* Header上部へ配置 */
    display:flex;                       /* Flexレイアウト */
    flex-direction:column;              /* 縦並び */
    align-items:center;                 /* 中央揃え */
    z-index:1100;                       /* CONTACTより前面 */
}

.header-language .gtranslate_wrapper{
    display:flex;                       /* Flexレイアウト */
    align-items:center;                 /* 縦中央 */
    width:100%;
    /*justify-content:center;             横中央 */
}

.language-title{
    margin-top:6px;                     /* Popupとの余白 */
    font-size:11px;                     /* 文字サイズ */
    font-weight:700;                    /* 太字 */
    color:#777;                         /* グレー */
    letter-spacing:.15em;               /* 文字間隔 */
    text-transform:uppercase;           /* 大文字表示 */
}

/* ==========================================
   Language リンク文字色
========================================== */

/*
【役割】
ヘッダーに表示される現在の言語のみ
白文字で表示します。

Popup一覧の文字色には影響しません。
*/

.header-language > .gtranslate_wrapper > a,
.header-language > .gtranslate_wrapper > a:visited,
.header-language > .gtranslate_wrapper > a:hover,
.header-language > .gtranslate_wrapper > a:active{
    color:#ffffff !important;
}


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

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

    .site-header{
        height:118px;                    /* メインヘッダー90px + Language帯28px */
    }

    .header-inner{
        height:90px;
        padding:0 175px 0 15px;         /* CONTACT分のみ確保（Languageは上に重ねるため） */
        align-items:flex-start;
    }

    .logo{
        margin-top:10px;
    }

    .logo img{
        height:70px;
        width:auto;
    }

    .global-nav{
        margin-top:24px;
        margin-left:auto;
        min-width:0;
    }

    .global-nav ul{
        gap:8px;
        flex-wrap:nowrap;
        overflow-x:auto;                /* 収まりきらない場合は横スクロールで対応 */
        -webkit-overflow-scrolling:touch;
    }

    .global-nav li{
        min-width:0;
        flex:0 0 auto;                  /* 縮められて文字が潰れないように */
    }

    .global-nav a{
        font-size:10px;
    }

    .global-nav .jp,
    .global-nav .en{
        font-size:10px;
        line-height:1.15;
        white-space:nowrap;             /* 単語の途中で改行させない */
        overflow-wrap:normal;           /* 「れ」だけ2行目に落ちるのを防止 */
    }

    .global-nav li.current-menu-item::after{
        width:28px;
        height:2px;
        margin:5px auto 0;
    }

    .header-language{
        position:absolute;              /* Header全体を基準に配置 */
        top:90px;                       /* メインヘッダーの下から開始 */
        left:0;
        right:0;
        width:100%;
        height:28px;
        flex-direction:row;             /* 縦並びをやめて横並びに */
        align-items:center;
        justify-content:flex-end;       /* 右寄せ */
        gap:4px;
        padding-right:5px;
        background:#f5f5f5;             /* メインヘッダーと区別するための背景色 */
        z-index:1050;
    }

    .language-title{
        display:none;                   /* 狭い画面ではLANGUAGE文字を省略 */
    }

    .header-language .gtranslate_wrapper{
        display:flex;                    /* 元のflex指定を維持 */
        justify-content:flex-end !important; /* wrapper自身が幅100%のため、ここで右寄せを指定 */
        margin:0 !important;             /* プラグイン側の中央寄せ(margin:auto)を上書き */
        transform:scale(0.8);           /* Popup全体を少し縮小 */
        transform-origin:right center;
    }

    .header-language > .gtranslate_wrapper > a,
    .header-language > .gtranslate_wrapper > a:visited,
    .header-language > .gtranslate_wrapper > a:hover,
    .header-language > .gtranslate_wrapper > a:active{
        color:#333333 !important;       /* 薄いグレー背景の上なので濃い文字色に */
    }
}

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

    .site-header{
        height:106px;                    /* メインヘッダー80px + Language帯26px */
    }

    .header-inner{
        padding:0 95px 0 10px;          /* CONTACTボタン縮小に合わせて調整 */
    }

    .logo img{
        height:62px;
    }

    .logo{
        margin-top:12px;
    }

    .global-nav{
        margin-top:22px;
    }

    .global-nav ul{
        gap:5px;
    }

    .global-nav a,
    .global-nav .jp,
    .global-nav .en{
        font-size:8px;
    }

    .global-nav li.current-menu-item::after{
        width:22px;
        height:2px;
        margin-top:4px;
    }

    .header-language{
        top:80px;                        /* 縮小したメインヘッダー(80px)の下から */
        height:26px;
        padding-right:3px;
    }

    .header-language .gtranslate_wrapper{
        justify-content:flex-end !important;
        margin:0 !important;
        transform:scale(0.7);           /* さらに縮小 */
    }
}