body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
    font-size: 16px;
}

.search-container {
    max-width: 960px;
    margin: 0 auto; /* 中央寄せ */
    padding: 0 20px; /* 左右のパディング */
    box-sizing: border-box;

}


/* ページタイトル */
.titlehead {
    font-size: 34px; /* 34px に変更 */
    text-align: center;
    font-weight: bold;
    margin-top: 84px;
    /* 上部要素からのマージン 84px - 32px (form-descriptionの上マージン) */
    margin-bottom: 32px; /* form-description との間のマージン 32px */
    color: #4461b1;
    
}

/* ページ内の情報テキスト */
.search_lh {
    padding: 5px 20px;
}

/* 水平線 */
hr {
    border: 0;
    height: 1px;
    background-color: #ccc;
    margin: 20px 0;
}

/* 検索フォーム全体 */
form[name="ksearch"] {
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin: 0 20px 20px 20px;
}

/* 検索式入力エリア */
.search_lh.nowrap {
    display: flex; /* Flexboxで要素を横並びに */
    align-items: center;
    gap: 10px; /* 要素間のスペース */

}

.search_lh.nowrap .bold {
    flex-shrink: 0; /* タイトルは縮小しない */
    font-weight: bold;
    color: #333;
}

/* 検索キーワード入力欄 */
.kskeyword {
    flex-grow: 1; /* 入力欄を最大限に広げる */
    padding: 10px 12px;
    border: 2px solid #ced4da;
    border-radius: 6px;
    font-size: 16px;
    min-width: 200px;
    transition: border-color 0.3s;
}

.kskeyword:focus {
    border-color: #4461b1;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* 検索ボタン */
.search_button {
    /* テキスト設定 */
    color: white; 
    font-size: 18px; 
    font-weight: bold; 
    
    /* 横長にするためのパディング */
    padding: 12px 60px; 
    
    border: none; 
    
    /* 角丸と影 */
    border-radius: 25px; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 

    /* グラデーションと色 */
    background: linear-gradient(to bottom, #7a9ce5, #4c6abf); 
    
    /* ホバー時のカーソル変更 (追加) */
    cursor: pointer; 
}



/* 検索方法リンク */
.link_style {
    color: #4461b1;
    text-decoration: underline;
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
}

/* 表示設定セレクトボックスエリア */
.search_lh:nth-of-type(2) {
    display: flex;
    flex-wrap: wrap; /* 狭い画面で折り返す */
    gap: 20px;
    align-items: center;
}

/* セレクトボックス */
.sel_style {
    min-width: 6rem; /* 今より広くする */
    width: auto; /* 自動調整 */
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
    background-color: #fff;
    cursor: pointer;
    margin-left: 5px; /* タイトルとセレクトボックスの間のスペース */
}

/* 検索結果セクション */
#help {
    padding: 20px;
    margin: 0 20px;
    background-color: #fff;
    border-radius: 8px;
}

#help h2 {
    font-size: 24px;
    color: #4461b1;
    border-bottom: 2px solid #4461b1;
    padding-bottom: 5px;
    margin-top: 0;
}

#help h3 {
    font-size: 18px;
    color: #343a40;
    margin-top: 20px;
    border-left: 5px solid #ffc107; /* 左側に黄色い線 */
    padding-left: 10px;
}

/* 検索ヘルプの説明文 */
#help p {
    margin: 5px 0 10px 0;
    padding-left: 15px;
    font-size: 15px;
}

.example {
    font-family: monospace;
    background-color: #e9ecef;
    padding: 8px 15px;
    border-radius: 4px;
    display: inline-block;
    color: #343a40; /* 例を強調 */
    font-weight: bold;
    margin-left: 15px;
}

.operator {
    font-weight: bold;
    color: #dc3545; /* 演算子を赤で強調 */
}

/* 検索結果表示部分 */
#help table {
    width: 100%;
    margin-top: 15px;
    border-collapse: separate;
    border-spacing: 0 10px; /* 行間にスペース */
}

#help table tr {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

#help table td {
    padding: 10px;
    vertical-align: top;
    border: none;
}

#help table td.right.top {
    width: 30px;
    text-align: right;
    font-weight: bold;
    color: #6c757d;
}

#help table td.left a {
    color: #4461b1;
    text-decoration: none;
    font-weight: bold;
}

#help table td.left a:hover {
    text-decoration: underline;
}

/* スニペット（抜粋） */
#help table tr:nth-child(2) td.left {
    font-size: 14px;
    color: #555;
    padding-top: 0;
}

/* ページャリンク */
.nowrap:last-child {
    text-align: center;
    padding: 20px 0;
}

/* フッター（Powered by） */
.power {
    display: block;
    text-align: center;
    font-size: 12px;
    color: #6c757d;
    margin-top: 20px;
    margin-bottom: 5px;
}

.power + img {
    display: block;
    margin: 0 auto 30px auto;
}

/* ===========================
   モバイル対応 (max-width: 767px)
=========================== */
@media screen and (max-width: 767px) {

    /* 検索フォーム全体 */
    form[name="ksearch"] {
        padding: 15px;
        margin: 0 10px 20px 10px;
        box-sizing: border-box;
    }

    /* ページタイトル */
    .titlehead {
        font-size: 24px;
        margin-top: 50px;
        margin-bottom: 20px;
    }

    /* 検索式入力欄を縦並び、枠内に収める */
    .search_lh.nowrap {
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
    }

    .search_lh.nowrap .bold {
        flex-shrink: 0;
        margin-bottom: 2px;
        text-align: left;
    }

    .kskeyword {
        width: 100%;
        min-width: unset;
        font-size: 14px;
        padding: 8px;
        box-sizing: border-box;
    }

    /* 検索設定（表示件数・表示形式・ソート） */
    .search_lh:nth-of-type(2) {
        flex-direction: column;
        align-items: flex-start; /* 左寄せ */
        gap: 8px;
    }

    .search_lh:nth-of-type(2) .bold {
        margin-bottom: 2px;
        text-align: left;
    }

    .sel_style {
        width: 100%;
        min-width: unset;
        margin-left: 0;
        font-size: 14px;
        padding: 8px 10px;
        box-sizing: border-box;
    }

    /* 検索ボタンは設定欄の下に */
    .search_button {
        width: 100%;
        padding: 10px 0;
        font-size: 16px;
        margin-top: 10px;
        box-sizing: border-box;
    }

    /* 検索方法リンク */
    .link_style {
        font-size: 13px;
        text-align: left;
    }

    /* 検索結果エリア */
    #help {
        padding: 0px;
        margin: 0 10px;
        box-sizing: border-box;
    }

    /* 検索結果テーブルを横幅100% */
    #help table {
        width: 100%;
        table-layout: fixed; /* 列幅を固定 */
        border-collapse: collapse;
    }

    /* 左側の番号セル */
    #help table td.right.top {
        width: 40px; /* 必要に応じて */
        text-align: right;
        white-space: nowrap; /* 数字は折り返さない */
    }

    /* 左セル（リンクやタイトル） */
    #help table td.left {
        max-width: calc(100% - 50px); /* 親幅から番号セルを引いた幅 */
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* リンクも折り返す */
    #help table td.left a {
        word-wrap: break-word;
        overflow-wrap: break-word;
        display: inline-block;
    }

    /* スニペット（抜粋） */
    #help table td.left.snippet {
        font-size: 13px;
        color: #555;
    }

    /* 行間スペース */
    #help table tr {
        margin-bottom: 10px;
        box-shadow: none;
        background-color: transparent;
    }

    /* テーブル行の余白を確保 */
    #help table tr {
        margin-bottom: 15px;
        box-shadow: none;
        background-color: transparent;
    }

    /* ページャリンク */
    .nowrap:last-child {
        text-align: center;
        padding: 15px 0;
    }

    /* Powered by フッター */
    .power {
        font-size: 12px;
        margin-top: 15px;
        margin-bottom: 5px;
    }

    .power + img {
        width: 120px;
        height: auto;
        margin-bottom: 20px;
    }
}