/* 検索ボックス関連設定 */
.search-box {
    position: relative;
    height:30px;
    width:700px;
    border: 2px solid;
    border-color: #1847C7;
    border-radius: 2px;
    background-color: #f4f8fa;
    LEFT: 2px;
    display: flex;
}

.search-box input[type=text] {
    padding: 6px;
    font-size: 14px;
    font-COLOR: #333333;
    background-color: #FFFFFFF;
    width:540px;
    margin: 0 0 0 auto;
    border: none; /* ボーダーを非表示にする */
    outline: none; /* フォーカス時のアウトラインも非表示にする */
    LEFT: 0px;
    border-radius: 2px;
}

/* Dafault.ASP用 */
.search-box [name="LibClsID"] {
    padding: 6px;
    font-size: 14px;
    font-COLOR: #333333;
    position: absolute;
    width:160px;
    border: none; /* ボーダーを非表示にする */
    outline: none; /* フォーカス時のアウトラインも非表示にする */
    top: 0;
    LEFT: 0;
    --background: none;
    background-color: #F6F8FC;
    border-radius: 2px;
    cursor: pointer;
}

.search-box [name="LibClsID"] option {
    background-color: #F6F8FC; /* 各オプションの背景色を水色に設定 */
}
.search-box [name="LibClsID"] option:hover {
    background-color: #ffff99; /* ホバー時の背景色を黄色に設定 */
}


/* View.ASP用 */
.search-box [name="LibClsIDv"] {
    padding: 6px;
    font-size: 14px;
    font-COLOR: #333333;
    position: absolute;
    width:160px;
    border: none; /* ボーダーを非表示にする */
    outline: none; /* フォーカス時のアウトラインも非表示にする */
    top: 0;
    LEFT: 0;
    --background: none;
    background-color: #F6F8FC;
    border-radius: 2px;
    cursor: pointer;
}

.search-box [name="bt"] {
    padding: 6px 10px;
    font-size: 14px;
    position: absolute;
    border: none;
    --border: 1px;
    top: 0;
    right: 0px;
    background: none;
    --background-color: #f4f8fa;
    cursor: pointer;
    color:#1847C7;
    transform: scale(1.2);
}

//.search-box [name="bt"]:hover {
//  background: #92dbff;/*背景カラー変更*/
//}

.search-box [name="bt"]:hover {
    //opacity:0.99;
    filter:brightness(1.5); /* ホバー時に明るくする */
    transition:0.3s;
}

select option[selected] {
    background-color: #D3D3D3;
}

.image-JPEN:hover {
    //opacity:0.99;
    filter:brightness(1.5); /* ホバー時に明るくする */
    transition:0.3s;
}
p a img:hover{
    //opacity:0.99;
    filter:brightness(1.5); /* ホバー時に明るくする */
    transition:0.3s;
}

.Headder {
    display: flex;
    align-items: flex-end; /* コンテナ全体の配置を下詰めにする */
}
.Headder img {
    margin-right: 10px; /* 要素間のスペースを調整 */
    margin-top: 20px; /* 下から20pxに設定 */
    margin-bottom: 20px; /* 下から20pxに設定 */
}
.Headder p {
    font-size: 32px; /* 文字サイズを32pxに設定 */
    color: #1847C7; /* 文字色を#1847C7に設定 */
    padding: 0px; /* テキストの位置を上から30pxに設定 */
    white-space: nowrap; /* 改行なしにする */
    line-height: 0; /* 行間を無くす */
    font-family: 'Noto Sans JP', sans-serif; /* フォントをメイリオに設定 */
    --font-weight: bold; /* 太字に設定 */
    margin-bottom:37px; /* 文字列の下に37pxの余白を取る */
}

.Headder_ENG {
    display: flex;
    align-items: flex-end; /* コンテナ全体の配置を下詰めにする */
}
.Headder_ENG img {
    margin-right: 10px; /* 要素間のスペースを調整 */
    margin-top: 20px; /* 下から20pxに設定 */
    margin-bottom: 20px; /* 下から20pxに設定 */
}
.Headder_ENG p {
    font-size: 28px; /* 文字サイズを30pxに設定 */
    color: #1847C7; /* 文字色を#1847C7に設定 */
    padding: 0px; /* テキストの位置を上から30pxに設定 */
    white-space: nowrap; /* 改行なしにする */
    line-height: 0; /* 行間を無くす */
    --font-family: 'Microsoft JhengHei', sans-serif; /* フォントを設定 */
    font-family: 'Noto Sans JP', sans-serif; /* フォントを設定 */
    font-weight: bold; /* 太字に設定 */
    margin-bottom: 34px; /* 下から20pxに設定 */
}

a {
    font-weight: normal; /* リンクの文字を太字にしない */
    text-decoration: none; /* 下線を消す */
    color: #1847C7; /* 未閲覧のリンクの色 */
    transition: color 0.3s ease; /* 色の変化を滑らかにする */
}
a:visited {
    font-weight: normal; /* リンクの文字を太字にしない */
    text-decoration: none; /* 下線を消す */
    color: #C4CAF2; /* 閲覧済みのリンクの色 */
    transition: color 0.3s ease; /* 色の変化を滑らかにする */
}
a:hover {
    font-weight: normal; /* リンクの文字を太字にしない */
    text-decoration: none; /* 下線を消す */
    color: #001D9D; /* ホバー時のリンクの色 #4D6AD9 */
    transition: color 0.3s ease; /* 色の変化を滑らかにする */
}
a:active {
    font-weight: normal; /* リンクの文字を太字にしない */
    text-decoration: none; /* 下線を消す */
    color: #C4CAF2; /* クリック時のリンクの色 */
    transition: color 0.3s ease; /* 色の変化を滑らかにする */
}

<style>
    .btn-menu {
        color: inherit;
        --display: flex;
        --gap: 0px; /* ボタン間のスペース */
        --justify-content: space-between; /* ボタン間のスペースを均等にする */
        --width: 700px; /* コンテナの幅を設定 */ */
    }

    .custom-btn {
        background-color: transpant;
        font-color: #1847C7;
        border: none;
        border-radius: 4px;
        font-size: 16px;
        padding: 10px 24px;
        text-decoration: none;
        text-align: right;
        cursor: pointer;
        font-family: 'Noto Sans JP', sans-serif; /* ボタンの文字にフォントを適用 */
        width: 30px; /* ボタンの横サイズを30pxに設定 */
        font-weight: bold; /* ボタンの文字を太字にする */
    }
    .custom-btn-in {
        background-color: transpant;
        font-color: #D3D3D3;
        border: none;
        border-radius: 4px;
        font-size: 16px;
        padding: 10px 24px;
        text-decoration: none;
        text-align: right;
        cursor: pointer;
        font-family: 'Noto Sans JP', sans-serif; /* ボタンの文字にフォントを適用 */
        width: 30px; /* ボタンの横サイズを30pxに設定 */
        font-weight: bold; /* ボタンの文字を太字にする */
    }

    .btn-menu-e {
        color: inherit;
        --display: flex;
        --gap: 0px; /* ボタン間のスペース */
        --justify-content: space-between; /* ボタン間のスペースを均等にする */
        --width: 700px; /* コンテナの幅を設定 */ */
    }
    .custom-btn-e {
        background-color: transpant;
        font-color: #1847C7;
        border: none;
        border-radius: 4px;
        font-size: 16px;
        padding: 10px 14px;
        text-decoration: none;
        text-align: right;
        cursor: pointer;
        font-family: 'Noto Sans JP', sans-serif; /* ボタンの文字にフォントを適用 */
        width: 30px; /* ボタンの横サイズを30pxに設定 */
        font-weight: bold; /* ボタンの文字を太字にする */
    }
    .custom-btn-e-in {
        background-color: transpant;
        font-color: #D3D3D3;
        border: none;
        border-radius: 4px;
        font-size: 16px;
        padding: 10px 14px;
        text-decoration: none;
        text-align: right;
        cursor: pointer;
        font-family: 'Noto Sans JP', sans-serif; /* ボタンの文字にフォントを適用 */
        width: 30px; /* ボタンの横サイズを30pxに設定 */
        font-weight: bold; /* ボタンの文字を太字にする */
    }

    .custom-btn:hover {
        //opacity:0.99;
        background-color: transpant;
        filter:brightness(1.5); /* ホバー時に明るくする */
        transition:0.3s;
        //background-color: blue;
        //color: white;
    }
    .custom-btn-e:hover {
        //opacity:0.99;
        background-color: transpant;
        filter:brightness(1.5); /* ホバー時に明るくする */
        transition:0.3s;
        //background-color: blue;
        //color: white;
    }
    .small-font {
        font-size: 11px; /* 特定の文字のフォントサイズ */
    }

.custom-btn-in {
    color: #D3D3D3; /* 通常時の色 */
    font-weight: normal; /* リンクの文字を太字にしない */
}
.custom-btn-in:visited {
    color: #D3D3D3; /* 通常時の色 */
    font-weight: normal; /* リンクの文字を太字にしない */
}
.custom-btn-in:hover {
    --color: #D3D3D3; /* ホバー時の色 */
    --font-weight: normal; /* リンクの文字を太字にしない */
    filter:brightness(1.5); /* ホバー時に明るくする */
    transition:0.3s;
}
.custom-btn-in:active {
    color: #1847C7; /* アクティブ時の色 */
    font-weight: normal; /* リンクの文字を太字にしない */
}

.custom-btn {
    color: #1847C7; /* 通常時の色 */
    font-weight: normal; /* リンクの文字を太字にしない */
}
.custom-btn:visited {
    color: #1847C7; /* 通常時の色 */
    font-weight: normal; /* リンクの文字を太字にしない */
}
.custom-btn:hover {
    --color: #1847C7; /* ホバー時の色 */
    --font-weight: normal; /* リンクの文字を太字にしない */
    filter:brightness(1.5); /* ホバー時に明るくする */
    transition:0.3s;
}
.custom-btn:active {
    color: #1847C7; /* アクティブ時の色 */
    font-weight: normal; /* リンクの文字を太字にしない */
}


.custom-btn-e-in {
    color: #D3D3D3; /* 通常時の色 */
    font-weight: bold; /* リンクの文字を太字にする */
}
.custom-btn-e-in:visited {
    color: #D3D3D3; /* 通常時の色 */
    font-weight: bold; /* リンクの文字を太字にする */
}
.custom-btn-e-in:hover {
    --color: #D3D3D3; /* ホバー時の色 */
    font-weight: bold; /* リンクの文字を太字にする */
    filter:brightness(1.5); /* ホバー時に明るくする */
    transition:0.3s;
}
.custom-btn-e-in:active {
    color: #1847C7; /* アクティブ時の色 */
    font-weight: bold; /* リンクの文字を太字にする */
}

.custom-btn-e {
    color: #1847C7; /* 通常時の色 */
    font-weight: bold; /* リンクの文字を太字にする */
}
.custom-btn-e:visited {
    color: #1847C7; /* 通常時の色 */
    font-weight: bold; /* リンクの文字を太字にする */
}
.custom-btn-e:hover {
    --color: #1847C7; /* ホバー時の色 */
    font-weight: bold; /* リンクの文字を太字にする */
    filter:brightness(1.5); /* ホバー時に明るくする */
    transition:0.3s;
}
.custom-btn-e:active {
    color: #1847C7; /* アクティブ時の色 */
    font-weight: bold; /* リンクの文字を太字にする */
}

</style>
