@charset "UTF-8";

/* -----------------------------------
   全体の基本設定（背景色・文字色・フォントなど）
------------------------------------ */
body {
    background-color: #121212; /* 背景をダークグレーに設定 */
    color: #e0f7ff; /* 明るい水色の文字色 */
    font-family: 'Segoe UI', 'Roboto', sans-serif; /* 近代的なフォント */
    margin: 0;
    padding: 0;
}

/* -----------------------------------
   リンクスタイル（通常・ホバー時）
------------------------------------ */
/* 通常リンク（メニュー以外）に下線と明るさ強調のホバー効果を適用 */
a {
    color: #7cdcff; /* 通常時の水色リンク */
    text-decoration: none;
    position: relative; /* 擬似要素配置のため */
    transition: all 0.3s ease;
}

a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0%;
    height: 2px;
    background: linear-gradient(to right, #00e6ff, #0077ff); /* 水色〜青色グラデーションの下線 */
    transition: width 0.3s ease;
}

a:hover {
    filter: brightness(1.3); /* 明るさアップで強調 */
}

a:hover::after {
    width: 100%; /* 下線を表示 */
}

/* -----------------------------------
   ハンバーガーメニューのヘッダー
------------------------------------ */
.menu-header {
    background-color: #1e1e1e; /* ヘッダー背景色 */
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5); /* 下に影をつける */
}

/* メニューアイコン（三本線） */
.menu-icon {
    font-size: 24px;
    cursor: pointer;
    color: #00cfff; /* 明るい青色 */
}

/* -----------------------------------
   メニューの本体（開閉式）
------------------------------------ */
.menu {
    background-color: #1a1a1a; /* メニュー背景色 */
    max-width: 20%; /* 幅を20%に制限 */
    display: none; /* 初期状態では非表示 */
}

/* メニューが開かれたときのスタイル */
.menu.show-menu {
    display: block;
}

/* メニュー内のリンクスタイル */
.menu a {
    display: flex;
    align-items: center; /* ロゴとテキストを縦中央揃え */
    padding: 10px;
    color: #aeeeff; /* 明るい水色の文字色 */
    border-bottom: 1px solid #2e2e2e; /* 下線 */
}

.menu a:hover {
    background-color: #2c2c2c; /* ホバー時の背景 */
}

/* メニュー内のロゴ画像 */
#logo img {
    width: 75px;
    height: 75px;
    margin-bottom: 5px;
    border-radius: 50% 50% 50% 50%; /* 完全な円形に */
}

/* -----------------------------------
   検索入力欄のスタイル
------------------------------------ */
#Group5 input.txt1 {
    padding: 12px;
    width: 60%;
    border-radius: 8px;
    border: 1px solid #00c9ff; /* 水色の枠線 */
    background-color: #1e1e1e; /* 暗い背景 */
    color: #ffffff; /* 文字色は白 */
    font-size: 16px;
    transition: border 0.3s ease; /* アニメーション効果 */
}

/* フォーカス（クリック）時のスタイル */
#Group5 input.txt1:focus {
    border: 1px solid #00c9ff;
    outline: none;
    box-shadow: 0 0 10px #00c9ff; /* フォーカス時に光るように */
}

/* -----------------------------------
   検索ボタンのスタイル
------------------------------------ */
.ButtonC {
    background: linear-gradient(to right, #00d4ff, #0077ff); /* 青系グラデーション */
    border: none;
    color: white;
    padding: 12px 24px;
    margin-left: 10px;
    font-size: 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

.ButtonC:hover {
    background: linear-gradient(to right, #00aaff, #0055ff); /* ホバー時のグラデーション変化 */
    transform: scale(1.05); /* ホバー時に少し大きく */
}

/* -----------------------------------
   古いfontタグのsize指定への対応（非推奨）
------------------------------------ */
font[size="7"] {
    font-size: 2.5rem;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(0,255,255,0.5); /* 水色の光彩効果 */
}

/* -----------------------------------
   「SCG Search」のタイトルスタイル
------------------------------------ */
/* スマホでも折り返されずに中央揃え＆サイズ調整 */
.logo-title {
    font-size: clamp(1.5rem, 5vw, 2.8rem); /* ビューポート幅に応じて可変サイズに */
    font-weight: bold;
    color: #00bfff;
    text-shadow: 0 0 8px rgba(0, 191, 255, 0.6);
    white-space: nowrap; /* 折り返さないように */
    overflow: hidden;
    text-align: center;
    padding: 0 10px; /* 左右に余白を持たせてはみ出しを防ぐ */
    box-sizing: border-box;
}

/* タイトル内の文字ごとのエフェクト */
.logo-title span {
    display: inline-block;
    transition: transform 0.2s; /* ホバー時に拡大アニメーション */
}

.logo-title span:hover {
    transform: scale(1.1); /* 少し大きく */
}