/* =========================================================
   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: scroll;
    background-size: 100% auto;
}

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