/* =========================================================
   AT&G 共通CSS
   - ブレイクポイント
     - 〜767px:  スマホ
     - 768px〜1023px: タブレット
     - 1024px〜: PC
   ========================================================= */

* { box-sizing: border-box; }

html {
    min-height: 100vh;
    background-color: #ececec;
    background-image: url("/images/back_color.jpg");
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: fixed;
    background-size: cover;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

body {
    font-family: "Meiryo", "Yu Gothic", sans-serif;
    color: #111;
    background: transparent;  /* htmlの背景を透過させる */
}

/* サブページも共通でhtmlの背景を使う */
body.subpage {
    background: transparent;
}

a { color: inherit; }

img { max-width: 100%; height: auto; display: block; }

/* =========================================================
   サイトヘッダー（全ページ共通）
   ========================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.site-header-inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: center;  /* 中央寄せ */
    gap: 20px;
    flex-wrap: nowrap;
}

.site-logo {
    flex: 0 0 auto;  /* 絶対に縮まない */
    display: block;
    line-height: 0;
}

.site-logo img.logo-mark {
    width: 120px;
    height: auto;
    display: block;
}

/* ロゴの右側の2段エリア（上:ADVANCED.gif / 下:メニュー） */
.header-right {
    flex: 0 0 auto;  /* 内容のサイズに合わせる（画面幅いっぱいに広がらない） */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    padding: 2px 0;
    gap: 6px;
}

/* ADVANCED.gif の行 */
.site-tagline {
    flex-shrink: 0;
    line-height: 0;
}

.site-tagline img {
    height: 22px;
    width: auto;
    display: block;
}

/* ナビゲーション（PC用） */
.site-nav {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.site-nav a {
    text-decoration: none;
    display: inline-block;
}

.site-nav a img {
    display: block;
    width: 100px;
    height: auto;
    transition: opacity 0.2s;
}

.site-nav a:hover img {
    opacity: 0.7;
}

/* ハンバーガーボタン（スマホ用・デフォルト非表示） */
.hamburger {
    display: none;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
    position: relative;
    flex-shrink: 0;
    margin-left: auto;
}

.hamburger span {
    position: absolute;
    left: 10px;
    width: 24px;
    height: 2px;
    background: #2f5597;
    transition: transform 0.25s, top 0.25s, opacity 0.25s;
}

.hamburger span:nth-child(1) { top: 14px; }
.hamburger span:nth-child(2) { top: 21px; }
.hamburger span:nth-child(3) { top: 28px; }

.hamburger.is-open span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* =========================================================
   レスポンシブ — タブレット〜スマホ（1030px以下）
   メニューが入りきらないサイズになったらハンバーガーに切り替え
   ADVANCED.gifもこのタイミングで非表示
   ========================================================= */
@media (max-width: 1030px) {
    .site-header-inner {
        padding: 10px 20px;
        justify-content: space-between;  /* ロゴ左・ハンバーガー右 */
    }

    /* ADVANCEDも非表示に */
    .site-tagline {
        display: none;
    }

    /* ハンバーガー表示 */
    .hamburger {
        display: block;
    }

    /* 右エリア（タグライン＋メニュー）をドロップダウン化 */
    .header-right {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
        padding: 0;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        align-self: auto;
    }

    .header-right.is-open {
        max-height: 600px;
    }

    /* ドロップダウン内ではメニューを縦並び */
    .site-nav {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    .site-nav a {
        width: 100%;
        padding: 10px 20px;
        border-bottom: 1px solid rgba(47, 85, 151, 0.08);
    }

    .site-nav a:last-child {
        border-bottom: 0;
    }

    .site-nav a img {
        width: 120px;
        margin: 0 auto;
    }
}

/* =========================================================
   レスポンシブ — スマホ（767px以下）: さらにコンパクトに
   ========================================================= */
@media (max-width: 767px) {
    .site-header-inner {
        padding: 10px 14px;
    }

    .site-logo img.logo-mark {
        width: 88px;
    }
}

/* =========================================================
   サブページのタイトル画像（side-title）共通サイズ
   ---------------------------------------------------------
   ■ 概要
   各サブページ（CONTACT / FIELD / MISSION / NEWS / OUTLINE /
   PROFILE / RECRUIT）の左上に表示するページタイトル画像の
   サイズと表示切替を、このセクションで一括管理しています。

   ■ HTML側のお約束（各サブページに共通の書き方）
       <div class="side-title">
           <img class="pc-ttl" src="../images/ttl_xxx_V.png" alt="...">  ← 縦画像（PC用）
           <img class="sp-ttl" src="../images/ttl_xxx_H.png" alt="...">  ← 横画像（タブレット・スマホ用）
       </div>

   ■ 表示の切替ルール
       - PC（1031px〜）        : 縦画像（pc-ttl）を 140px で表示
       - タブレット〜スマホ（〜1030px）: 横画像（sp-ttl）を 240px で表示
                                         （pc-ttl は非表示にする）

   ■ 切替タイミングについて
   横幅 1030px は、ヘッダーのメニューがハンバーガーメニューに
   切り替わるタイミングと同じです。ヘッダーがハンバーガーに
   なるのと同時に、タイトル画像も縦から横に切り替わります。
   （メニュー側のブレイクポイントもこのファイル内で定義しています）

   ■ 修正したい場合
   ページごとに違うサイズにしたい場合を除き、
   サイズ変更は必ずこのセクション内で行ってください。
   各サブページの <style> 内には書かないこと（管理が大変になります）。
   ========================================================= */

/* --- デフォルト（PC表示）：縦画像を表示する --- */
.side-title img {
    max-width: 100px;   /* タイトル画像の最大幅 */
    width: 100%;        /* 親要素に合わせて伸縮 */
    height: auto;       /* 縦横比を保つ */
}

/* PCでは縦画像を表示し、横画像は隠す */
.side-title .pc-ttl { display: block; }
.side-title .sp-ttl { display: none; }


/* --- タブレット〜スマホ（〜1030px）：縦画像を隠して横画像を表示する ---
   ※ ヘッダーがハンバーガーメニューに切り替わるタイミングと同じ */
@media (max-width: 1030px) {
    .side-title .pc-ttl { display: none; }   /* 縦画像を非表示 */
    .side-title .sp-ttl {
        display: block;     /* 横画像を表示 */
        max-width: 240px;   /* タブレット・スマホ用のタイトル画像サイズ */
        width: 100%;
        height: auto;
    }
}