@charset "UTF-8";

.main1 {
    padding-top: 134px;
    overflow: auto;
}

.main2 {
    padding-top: 170px;
    overflow: auto;
}

.main3 {
    padding-top: 140px;
    overflow: auto;
}

input[type="text"].himoku-text {
    width: 18em;
}

/* テーブルのタイトル行固定 */
.table-container1 {
    height: 500px;
    overflow-y: auto;
    border: 1px solid #ccc;
    margin-top: 0px;
}
.table-container2 {
    height: 300px;
    overflow-y: auto;
    border: 1px solid #ccc;
    margin-top: 0px;
}

.table-container1 table,
.table-container2 table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.table-container1 thead,
.table-container2 thead {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #f2f2f2;
}
.table-container1 th,
.table-container2 th {
    position: relative;
}

/* テーブルのタイトル行非固定 */
.table-scroll thead {
    position: static !important;
}

.mini-input {
    width: 75px;
    text-align: right;
}

.mid-input {
    width: 100px;
    text-align: right;
}

th,
td {
    height: 20px;
    border: 1px solid #ddd;
}

td {
  padding: 0; /* 余白ゼロ */
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
textarea,
select {
    background-color: #fff;       /* ボタンと同じ背景色 */
    border: 1px solid #912D1E;    /* ボタンと同じ枠線 */
    border-radius: 1mm;             /* ボタンと同じ角丸 */
    padding: 4px 8px;                 /* 内側余白 */
    box-shadow: none;               /* 初期状態では影なし */
    transition: all 0.3s ease;      /* アニメーション */
    font-size: 0.9rem;             /* フォントサイズ */
}

td input[type="text"],
td input[type="number"],
td input[type="email"],
td input[type="password"],
td textarea,
td select {
    box-sizing: border-box; /* 枠線込みでセルにフィット */
    width: 98%;
    display: block;          /* marginを効かせるためにblock化 */
    margin: 0 auto;          /* 左右中央寄せ */
}
input {
    box-shadow: none;
    outline: none;
}

.search-text {
    width: 140px;
}

/* 候補選択後（autofill適用時） */
input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px #f9e8e6 inset !important; /* 背景を強制的に塗りつぶし */
    transition: background-color 5000s ease-in-out 0s;   /* 色が一瞬残るのを防ぐ */
}
/* フォーカス時も同じテーマカラー */
input:-webkit-autofill:focus {
    box-shadow: 0 0 0px 1000px #f9e8e6 inset !important;
}

/* チェックボックス・ラジオボタンの共通スタイル */
input[type="checkbox"],
input[type="radio"] {
    appearance: none; /* 標準の見た目を消す */
    -webkit-appearance: none;
    margin: 0;
    cursor: pointer;
    width: 18px;
    height: 18px;
    border: 1px solid #555;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    transition: all 0.2s ease;
}

/* チェックボックス */
input[type="checkbox"]:checked {
    background-color: #4caf50;
    border-color: #4caf50;
}
input[type="checkbox"]:checked::after {
    content: "✔";
    color: #fff;
    font-size: 12px;
    position: absolute;
    top: 0;
    left: 3px;
}

/* ラジオボタン */
input[type="radio"] {
    border-radius: 50%;
}
input[type="radio"]:checked {
    border-color: #000;
    background-color: #fff;
}
input[type="radio"]:checked::after {
    content: "";
    width: 10px;
    height: 10px;
    background: #912D1E;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
}

/* ホバー効果 */
input[type="checkbox"]:hover,
input[type="radio"]:hover {
    border-color: #000;
    transform: scale(1.1);
}

.input-with-error {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.input-with-error2 {
    width: 210px;
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.password-input-container {
    position: relative;
    width: 100%;          /* 他のテキストボックスと同じ幅に揃える */
    margin: 0 auto;      /* セル中央に配置 */
    box-sizing: border-box;
}

.password-input-container input {
    width: 100%;         /* コンテナ幅いっぱいに広げる */
    padding-right: 36px; /* アイコン分の余白は残す */
    box-sizing: border-box;
}

.password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.field-error {
    font-size: 0.9em;
    color: red;
    white-space: nowrap;
}

.password-hint {
    font-size: 0.9em;
    color: #333;
    transition: color 0.2s ease;
}

.eye-icon {
    width: 20px;
    height: 20px;
    fill: #333;
}

.password-hint.valid {
    color: green;
}

.password-hint.invalid {
    color: red;
}

/*-------------------------------------------
Button
-------------------------------------------*/
/* ボタンの基本スタイル */
button,
.custom-file-button {
    background-color: #f9e8e6;  /* 薄井茶色の背景 */
    color: black;               /* 黒い文字 */
    border: 1px solid #912D1E;  /* 枠線の太さ・スタイル・色（赤） */
    border-radius: 1mm;         /* 半径2mmの角丸 */
    padding: 1px 15px 3px;      /* 内側の余白 */
    font-size: 0.9rem;          /* 文字サイズ */
    cursor: pointer;            /* ポインター表示 */
    transition: all 0.3s ease;  /* ホバー時のアニメーション */
    box-shadow: none;           /* 初期状態では影なし */
    margin-top: 2px;            /* ボタン間の余白 */
    margin-bottom: 2px;         /* ボタン間の余白 */
}

/* ボタン風 <input type="file"> */
.custom-file-button {
    display: inline-block;  /* ラベルをボタン風に見せる */
}

/* ホバー時の効果 */
button:hover:not(.password-toggle),
.custom-file-button:hover {
    color: white;               /* 白い文字 */
    background-color: #912D1E;  /* ボタン色に変化 */
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);     /* 右下にぼやけた影を落とす */
}

/*-------------------------------------------
トップページ
-------------------------------------------*/
.top-page {
    display: flex;
    background-color: #fff;
    width: 700px;
    padding: 0;
}

.side-menu {
    display: block;
    background-color: #fff;
    width: 180px;
    padding: 10px 10px 10px;
}
.side-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.side-menu li {
    width: 100%;          /* liを親幅いっぱいに */
}
.side-menu button {
    width: 100%;
    padding: 2px 5px 4px;   /* 内側の余白 */
}

.article-menu {
    display: block;
    background-color: #fff;
    width: 520px;
    padding: 10px 20px 10px;
}
.article-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.article-menu li {
    width: 100%;          /* liを親幅いっぱいに */
}
.article-menu li a {
    width: 100%;
    color: #912D1E;
    text-decoration: underline;
    font-size: 1.3rem;
    line-height: 1.8;
}
.article-menu li a:visited {
    color: #6B2016;       /* 訪問済みリンクの色 */
}

/*-------------------------------------------
Select
-------------------------------------------*/
/* ドロップダウンメニューの基本スタイル */
select {
    background-color: #fff;       /* ボタンと同じ背景色 */
    border: 1px solid #912D1E;    /* ボタンと同じ枠線 */
    border-radius: 1mm;             /* ボタンと同じ角丸 */
    padding: 4px 0;                 /* 内側余白 */
    box-shadow: none;               /* 初期状態では影なし */
    transition: all 0.3s ease;      /* アニメーション */
    font-size: 0.9rem;             /* フォントサイズ */
}

/*-------------------------------------------
textarea
-------------------------------------------*/
textarea {
    font-size: 0.9rem;             /* フォントサイズ */
}

/*-------------------------------------------
Header
-------------------------------------------*/
#header {
    flex-direction: column;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 0 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
}

#header .logo {
    width: 100%;
    max-width: 400px;
    line-height: 0;
    display: flex;
    align-items: flex-end; /* 下端を揃える */
    gap: 0.8em; /* 横の間隔 */
}

.logo-main {
    margin-left: 30px;
    font-size: 2rem;
    font-weight: bold;
    text-decoration: none;
    color: #333;
    line-height: 1; /* 高さを詰める */
}

.logo-main img {
    height: 36px;
    width: auto;
    vertical-align: bottom;
}

.logo-sub {
    font-size: 1rem;
    color: #666;
    position: relative;
    top: -0.60rem; /* 少し上にずらす */
    white-space: nowrap;
}

.title1 {
    display: flex;
    height: 60px;
    background-color: #fff;
    z-index: 20;
    width: 100%;
    border-bottom: 1px solid #ccc;
    align-items: flex-end; /* 下端を揃える */
    justify-content: flex-start;
}

.title2 {
    display: flex;
    height: 100px;
    background-color: #fff;
    z-index: 20;
    width: 100%;
    border-bottom: 1px solid #ccc;
    align-items: flex-end; /* 下端を揃える */
    justify-content: flex-start;
}

.himoku-select,
select#himoku,
select#himoku1,
select#himoku2 {
    width: 140px;
}
.kamoku-select, 
select#kamoku {
    width: 130px;
}

#header h3 {
    position: relative;
    background-color: #fff;
    z-index: 20;
    padding: 0 20px 3px 20px;
    display: flex;
}

.form-bar {
    display: block;
    position: relative;
    background-color: #fff;
    z-index: 20;
    padding: 0 20px 20px 50px;
}

#header .navi1 {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    margin-left: 20px;
    font-size: 16px;
    background-color: #fff;
    opacity: 1;
}

/* メニューリスト */
.nav-menu {
    list-style: none;
    display: flex;
    margin-right: 50px;
    padding: 0;
}

/* メニュー項目 */
.nav-menu>li {
    position: relative;
}

/* メニューリンク */
.nav-menu>li>a {
    position: relative;
    display: inline-block;
    padding: 5px 10px;
    color: black;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* 擬似要素で横棒を作成 */
.nav-menu>li>a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    width: 90%;
    height: 2px;
    background-color: #912D1E;  /* お好みの色に変更可能 */
    transition: transform 0.3s ease;
}

/* ホバー時に横棒を表示 */
.nav-menu>li>a:hover::after {
    transform: translateX(-50%) scaleX(1);
}

.nav-menu>li>a:hover {
    opacity: 1;
    /* 色が薄くならないように */
}

.nav-menu>li.dropdown {
    position: relative;
    padding-bottom: 10px;
    /* hover領域を広げる */
}

/* ドロップダウンメニュー（アニメーション付き） */
.dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, transform 0.3s ease;
    position: absolute;
    top: 100%;
    right: -20px;
    transform: translateY(-30%);
    list-style: none;   /* ← これで●マーカーを消します */
    padding: 0;
    margin: 0;
    background-color: white;
    min-width: 160px;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0,0,0,0.25); /* 下に影を付ける */
}

.nav-menu .greeting a {
    position: relative;
    padding: 5px 10px;
}

/* ドロップダウン項目 */
.dropdown-menu li a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    text-indent: 0;     /* ← 親リンクの padding-left に合わせる */
    line-height: 2.0;   /* ← 行間も広げて読みやすく */
    background-color: transparent;
    transition: background-color 0.3s ease;
    color: #1f1f1f;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* ドロップダウン項目ホバー */
.dropdown-menu li a:hover {
    background-color: #eee;
}

/* ホバーでドロップダウン表示（アニメーション発火） */
.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ナビゲーションバー内の挨拶部分を小さく */
.nav-menu .greeting a {
    position: relative;
    display: inline-block;      /* 他のメニューと揃える */
    white-space: nowrap;
    vertical-align: middle;     /* 縦方向の揃えを補正 */
    letter-spacing: -0.03em;    /* ← 全体の文字間を少し詰める */
}

.nav-menu>li.dropdown.greeting {
    margin-top: -6px;   /* ← 上に少しずらす（調整値はお好みで） */
}

.greeting-block {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.greeting-small {
    font-size: 0.75em;
    margin-bottom: 0.2em;
}

.nickname {
    font-size: 1em;
}