/*nav.css*/
* {
    box-sizing: border-box;
  }

:root {
    --gnav-blue: #013a84;
    --gnav-blue-light: #1d7cff;
    --gnav-teal: #00a86b;
    --gnav-height: 3.5rem;
    --gnav-logo-scale: 0.5;
}

#gnav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(0.625rem);
    -webkit-backdrop-filter: blur(0.625rem);
    box-shadow: 0 0.125rem 0.75rem rgba(1, 58, 132, 0.08);
    transition: box-shadow 0.25s ease;
}

.gnav-inner {
    max-width: 75rem;
    margin: 0 auto;
    height: var(--gnav-height);
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* ロゴ */
.gnav-logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    text-decoration: none;
}

.gnav-logo .svg-container {
    width: calc(355px * var(--gnav-logo-scale));
    height: calc(95px * var(--gnav-logo-scale));
    margin: 0;
    position: relative;
    overflow: hidden;
}

.gnav-logo .company-title-svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 810px;
    height: 110px;
    transform-origin: 0 0;
    transform: scale(var(--gnav-logo-scale)) translate(-220px, -12px);
}

.gnav-logo .company-title-svg g {
    transform: translate(250px, 35px) scale(0.07);
}

.gnav-logo .company-title-svg .company-title-text {
    font-size: 2.5rem;
}

/* メニュー本体 */
.gnav-nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
}

.gnav-nav li {
    position: relative;
}

.gnav-nav li > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 2.25rem;
    padding: 0 0.9rem;
    border-radius: 62.5rem;
    color: var(--gnav-blue);
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.gnav-nav li > a::after {
    content: "";
    position: absolute;
    left: 0.9rem;
    right: 0.9rem;
    bottom: 0.25rem;
    height: 0.125rem;
    border-radius: 0.125rem;
    background: linear-gradient(90deg, var(--gnav-blue-light), var(--gnav-teal));
    transform: scaleX(0);
    transform-origin: center;
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.gnav-nav li > a:hover,
.gnav-nav li > a:focus-visible {
    background: rgba(29, 124, 255, 0.08);
    color: var(--gnav-blue-light);
}

.gnav-nav li > a:hover::after,
.gnav-nav li > a:focus-visible::after {
    transform: scaleX(1);
    opacity: 1;
}

.gnav-nav li > a.gnav-cta {
    margin-left: 0.5rem;
    color: #fff;
    background: linear-gradient(90deg, var(--gnav-blue-light), var(--gnav-teal));
}

.gnav-nav li > a.gnav-cta::after {
    display: none;
}

.gnav-nav li > a.gnav-cta:hover,
.gnav-nav li > a.gnav-cta:focus-visible {
    color: #fff;
    filter: brightness(1.08);
    box-shadow: 0 0.25rem 0.75rem rgba(1, 58, 132, 0.25);
}

/* ナビ(#gnav)は position:fixed のため、その直下に来る要素は
   ページごとに何であっても（.container / .page / main 等）、
   ナビとの余白がサイト全体で一定になるようにここで統一する。
   各ページ側CSSの margin-top はIDセレクタより詳細度が低いため上書きされる。
   navs.html が #gnav の直後に script タグ（column_back.js）を出力するため、
   実際にコンテンツ側の要素に効かせるには script を挟んだセレクタが必要。 */
#gnav + script + * {
    margin-top: 4rem;
}

#gnav + script + * > *:first-child {
    margin-top: 0;
}

#user-info {
    position: absolute;
    bottom: -1.6rem; /* ナビバーの下に位置を調整 */
    left: 0;
    margin-left: 4rem; /* 必要に応じて左マージンを調整 */
    background: rgba(212, 212, 212, 0.8); /* 半透明の背景色 */
    padding: 0.3rem;
    border-radius: 0.2rem;
}

#user-info a {
    font-size: 0.9rem;
    color: #818181;
    text-decoration: none;
}

/*ヘッダー（ページ内の独自 header 要素向け共通スタイル）*/
/* .page-header は各ツールが独自にタイトル+説明文のブロックレイアウトを定義するため対象外にする */
header:not(#gnav):not(.page-header) {
    width: 100%;
    padding: 0.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    -webkit-box-shadow: 0 0.3rem 1rem 0.2rem rgba(25, 26, 26, 0.2);
    box-shadow: 0 0.3rem 1rem 0.2rem rgba(25, 26, 26, 0.2);
}

header:not(#gnav):not(.page-header) h1 {
    margin: 0.5rem;
}

/*非アクティブ*/
.disabled {
    color: #ccc;
    pointer-events: none;
    cursor: default;
}

  /*ナビの管理用*/
  .disabled-link {
    color: #ccc !important; /* 薄いグレー色 */
    pointer-events: none !important; /* クリックイベントを無効にする */
    cursor: default !important; /* カーソルをデフォルト状態に保つ */
}

/* メッセージのスタイル設定 */
.messages .success {
    color: red; /* 成功メッセージを赤色で表示 */
}


/*フッター*/
#gnav_f {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3%;
    padding: 0;
    margin: 0;
    text-align: center;
    background-color: rgb(233, 237, 241);
    z-index: 1000;
    border-top: 0.01rem solid rgb(200, 206, 212);
}

#gnav_f p {
    padding: 0;
    margin: 0; /* マージンを0に設定 */
    font-size: 0.9rem;
}



/* レスポンシブデザイン */
.message-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.left-column,
.right-column {
    width: 48%; /* 2カラムのための幅設定 */
}

.right-column {
    order: 2; /* 右カラムを後に表示 */
}

.left-column {
    order: 1; /* 左カラムを先に表示 */
}

/* メディアクエリ: 画面幅が768px以下の場合 */
@media (max-width: 48rem) {
    :root {
        --gnav-height: auto;
        --gnav-logo-scale: 0.35;
    }

    .gnav-inner {
        height: auto;
        padding: 0.375rem 0.5rem;
        gap: 0.1rem;
    }

    .gnav-nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.2rem;
    }

    .gnav-nav li > a {
        height: 2rem;
        padding: 0 0.6rem;
        font-size: 0.8125rem;
    }

    .gnav-nav li > a.gnav-cta {
        margin-left: 0.2rem;
    }

    /* モバイルはナビの実際の高さ（ロゴ有無で変わる）に合わせて余白を出し分け、
       ナビ直下の見た目の隙間がどのページでも揃うようにする。 */
    #gnav:has(.gnav-logo) + script + * {
        margin-top: 6rem;
    }

    #gnav:not(:has(.gnav-logo)) + script + * {
        margin-top: 3.75rem;
    }
}