/* styles.css */

.custom-background .site {
    background-image: url("https://2ko-works.net/wp-content/uploads/2018/02/1d38416f76dd497f45be72f37405db4a_l.jpg");
    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat;
    background-attachment: scroll;
}
.career {
    line-height: 1.6;
}
.gei {
    border-collapse: collapse;
    width: 100%;
    font-size: 14px;
}
.gei th {
    padding: 2px 3px;
    border: solid 1px #cccccc;
    font-weight: bold;
}
.gei td {
    padding: 2px 3px;
    border: solid 1px #cccccc;
}
.gei td:nth-child(5) {
    font-size: 10px;
}
.titleH2 {
    font-weight: bold;
    margin-bottom: 20px;
    font-size: 16px;
}
.fontSize08 {
    font-size: 8px;
}
.etcList li {
    list-style-type: square;
    list-style-position: inside;
}

@media screen and (max-width: 640px) {
.gei {
    font-size: 12px;
}
}


/* --- ページ全体の設定 --- */
/* ぬるっとスクロールを有効にする */
html {
    scroll-behavior: smooth;
}

/* 検索結果をハイライトするスタイル */
.highlight {
    background-color: yellow; /* 黄色の背景色 */
    font-weight: bold;        /* 太字 */
}

/* --- 検索ボックス本体のスタイル (#search-container) --- */
#search-container {
    /* 画面上部に固定 (sticky) はそのまま残します */
    position: sticky; 
    top: 0;
    
    /* 💡 paddingを削除すると上下のマージンも消えるため、上下のマージンは残すため padding は維持します */
    padding-top: 10px;    
    padding-bottom: 10px;
    padding-left: 0;
    padding-right: 0;
    
    /* 💡 背景色を透明（削除）にします */
    background-color: transparent; 
    
    /* 下の境界線も不要であれば削除または transparent にします */
    border-bottom: none; /* または border-bottom: 1px solid transparent; */

    z-index: 1000;

    /* 中央揃えとマージン設定 */
    max-width: 600px; 
    margin: 30px auto; 
    
    /* 要素内のアイテム（inputとbutton）を中央に配置 */
    display: flex;
    justify-content: center;
    gap: 10px; 
}

/* --- 入力窓 (#search-input) のスタイル --- */
#search-input {
    /* サイズ調整 */
    padding: 10px 15px;
    width: 300px;
    
    /* 装飾 */
    border: 2px solid #007bff; /* 青色の枠線 */
    border-radius: 20px;       /* 角を丸くする */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 軽い影 */
    transition: border-color 0.3s; /* ホバー時の変化を滑らかに */
    
    /* その他 */
    outline: none; /* デフォルトの枠線を消す */
}

/* 検索窓にカーソルが当たった時 */
#search-input:focus {
    border-color: #0056b3; 
}

/* --- ボタン (button) のスタイル --- */
#search-container button {
    /* サイズ調整 */
    padding: 10px 20px;
    
    /* 装飾 */
    background-color: #007bff; 
    color: white;              
    border: none;
    border-radius: 20px;       
    cursor: pointer;           
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, transform 0.1s; 
}

/* ボタンにカーソルが当たった時 */
#search-container button:hover {
    background-color: #0056b3; 
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

/* ボタンがクリックされた瞬間 */
#search-container button:active {
    transform: translateY(1px); 
}