/* ヘッダー・フッターのレイアウト */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main {
    flex: 1;
}
header .header-bar {
    border-bottom: 2px solid rgb(225, 0, 18);
    color: rgb(84, 81, 71);
    padding: 5px 0;
    margin: 0.5rem 2rem;
    font-size: xx-large;
    font-family: "ＭＳ Ｐゴシック", sans-serif;
    align-items: center;
}
.akaihane-logo {
    height: 77px;
    vertical-align: middle;
    padding: 0 1rem;
}
header .header-bar-admin {
    background-color: #0070C0;
    color: white;
    padding: 0.3rem;
    font-weight: bold;
}
header .header-menu {
    text-align: right;
    margin: 0.3rem 2rem 0 0;
}
header .test-env {
	font-weight: bold;
	font-size: large;
	padding: 0.3em;
	background-color: #f4a460;
}
footer .footer-content {
    background-color: #E0E0E0;
    text-align: center;
    color: #808080;
    padding: 0.3rem;
}
table {
    table-layout: fixed;
}

/* ヘッダーの警告・注意メッセージ */
header ul {
	list-style: none;
	padding: 0;
}

/* フッター リンク表示 */
footer .footer-link {
	font-size: 0.8rem;
	padding-bottom: 0.8rem;
}

/* ログイン・パスワード変更 */
.login-form {
    background-color: #F0F0F0;
    border-radius: 0.5rem;
    max-width: 960px;
    margin: 1.5rem auto;
}
.login-form form {
    padding: 1rem 2rem 1rem;
}
.login-form p {
    margin: 0;
}
.login-form input {
    width: calc(100% - 2rem);
    margin: 0.5rem;
}
.login-form label {
    font-weight: 600;
}

/* メニュー画面 */
.main-menu {
    margin: auto;
    text-align: center;
}
.main-menu button {
    width: 30rem;
    padding: 0.5rem 0;
}
.menu-button-wrapper {
    margin: 2rem;
}

/* 登録画面 */
.regist-form {
    background-color: #F0F0F0;
    border-radius: 0.5rem;
    max-width: 960px;
    margin: 1.5rem auto;
}
.regist-form form {
    padding: 1rem 2rem 1rem;
}
.regist-form label {
    font-weight: 600;
}
.regist-form p {
    margin: 0;
}
.regist-form input {
    width: calc(100% - 2rem);
    margin: 0.5rem;
}
.regist-form select {
    width: calc(100% - 2rem);
    margin: 0.5rem;
}
.regist-form textarea {
    width: calc(100% - 2rem);
    margin: 0.5rem;
    resize: none;
}
.regist-form .radio-group {
    width: 100%;
}
.regist-form .radio-group input {
    width: 2rem;
}
.regist-form .radio-group label {
    font-weight: normal;
}
.regist-form .checkbox-group input {
    width: 2rem;
}
.regist-form .checkbox-group label {
    width: 100%;
    font-weight: normal;
}

.regist-form label {
    line-height: 1.5;
}

.label-badge::after {
    vertical-align: middle;
    font-size: 80%;
    border-radius: 15%;
    margin-left: 0.4rem;
    padding: 0 0.2rem;
}
.label-badge.label-badge-required::after {
    content: "必須";
    color: #fff;
    background-color: #ff4500;
}
.label-badge.label-badge-optional::after {
    content: "任意";
    color: #fff;
    background-color: #007099;
}

/* 検索フォーム */
.search-form {
    background-color: #F0F0F0;
    border-radius: 0.5rem;
    max-width: 90%;
    margin: 1.5rem auto;
}
.search-form form {
    padding: 1rem 2rem 1rem;
}
.search-form .search-item {
    display: inline-block;
    margin: 0.5rem;
}
.search-form input {
    width: 15rem;
}
.search-form input[type="radio"] {
    width: 2rem;
}
.search-form input[type="checkbox"] {
    width: 2rem;
}
.search-form select {
    width: 15rem;
}

/* 検索結果テーブル */
.search-result {
    max-width: 90%;
    margin: 1.5rem auto;
}
.search-result table {
    width: 100%;
}
.search-result table tr{
    border: solid 1px #cbcbcb;
}
.search-result .pager {
    text-align: right;
    margin: 0 1rem 1rem 0;
}

/* 詳細表示テーブル */
.info-table {
    max-width: 90%;
    margin: 1.5rem auto;
}
.info-table table {
    width: 100%;
    word-break: break-word;
}
.info-table table tr{
    border: solid 1px #cbcbcb;
}
.info-table th {
    background-color: #e0e0e0;
    color: #000;
    text-align: left;
}
.info-table table col:nth-of-type(1) {
    width: 20rem;
}

/* 
  メッセージボックス
  https://www.cssportal.com/blog/css-notification-boxes/
  アイコン
  https://boxicons.com/
*/
.message-box {
    border-radius:10px;
    padding: 1.5rem 4rem;
    margin: 1rem 2rem;
}
.message-box.error {
    background:#ffecec url('/josei/img/error-icon.svg') no-repeat 1rem/2.5rem;
    border:1px solid #f5aca6;
}
.message-box.success {
    background: #e9ffd9 url('/josei/img/success-icon.svg') no-repeat 1rem/2.5rem;
    border:1px solid #a6ca8a;
}
.message-box.warning {
    background: #fff8c4 url('/josei/img/warning-icon.svg') no-repeat 1rem/2.5rem;
    border:1px solid #f2c779;
}
.message-box.info {
    background: #e3f7fc url('/josei/img/info-icon.svg') no-repeat 1rem/2.5rem;
    border:1px solid #8ed9f6;
}

/* ファイルアップロード */
.file-form {
	display: none;
}
.button-secondary {
    color: white;
    background: rgb(66, 184, 221);
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.file-upload button {
    margin: 0.5em 0 0.2em;
}
.file-upload input[type="file"] {
    display: none;
}
.file-upload label {
    font-weight: normal;
}
.file-upload .file-name {
    width: calc(100% - 15rem);
    min-width: 20rem;
}
.file-radio input[type="radio"] {
    width: 2rem;
}
.file-radio span {
    width: 10em;
    display: inline-block;
}

.file-status-message.warn {
	color: #07f;	
}
.file-status-message.error {
	color: #f00;	
}

/* ファイルダウンロード */
#fileDownloadForm {
	display: none;
}

/*メンテナンス通知メッセージ*/
div#notice-info {
	display: block; text-align: center; font-size:85%; color:#00b; margin-bottom: 1em;
}

/* 汎用 */
h1.page-title {
    padding: 0.3rem 2rem;
    font-size: 1.5rem;
}
h2.page-title {
    padding: 0.3rem 2rem;
}
.center-button {
    text-align: center;
    margin-top: 1rem;
}
.right-button {
    text-align: right;
    margin: 1rem 0;
}
.left-button {
    margin: 1rem 0;
}
.pure-button:focus {
	outline: 2px solid black;
}
.center-message {
    text-align: center;
}
.invalid-feedback {
	color: red;
	font-weight: bold;
}
.multi-lines {
	white-space: pre-wrap;
}
.warning-text {
	color: red;
	font-weight: bold;
}
