/*--------------------------------------------------------------
Copyright WEB MAGIC.
http://www.webamgic.jp/
---------------------------------------------------------------*/

/* General Body Styles */
body {
    text-align: center;
    background-color: #f0f2f5; /* 全体の背景色を少し明るいグレーに */
    font-family: 'Inter', YuGothic, 'Yu Gothic', 'Hiragino Sans', 'ヒラギノ角ゴ ProN', sans-serif; /* 日本語フォントを優先 */
    font-size: 16px; /* ベースフォントサイズを読みやすく */
    line-height: 1.6; /* 行の高さを調整 */
    color: #333333; /* ベーステキスト色 */
    margin: 0; /* マージンをリセット */
    padding: 10px; /* 全体に少しパディングを減らす */
    box-sizing: border-box; /* Ensures padding/border are included in element's total width/height */
    overflow-y: auto; /* 画面スクロールが発生しても問題ないように */
}

/* Reset default margins and paddings for headings */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

p {
    margin: 0;
    padding: 0;
}

img {
    border: none;
    vertical-align: top;
    max-width: 100%; /* 画像が親要素を超えないように */
    height: auto;
}

table {
    border: none;
    border-collapse: collapse;
}

/* Main container styles */
#container {
    width: 100%;
    max-width: 1200px; /* 最大幅を広げて、より現代的なレイアウトに対応 */
    margin: 0 auto;
    text-align: left;
    padding: 20px; /* パディングを減らす */
    background-color: #ffffff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); /* よりはっきりした影 */
    border-radius: 12px; /* 丸みを少し大きく */
    box-sizing: border-box;
}

/* Header styles */
#header {
    margin-bottom: 20px; /* マージンを減らす */
    padding-bottom: 10px; /* パディングを減らす */
    border-bottom: 1px solid #e0e0e0;
    text-align: center;
}

#header h1 {
    font-size: 2.5em; /* 少し小さく */
    margin-bottom: 5px; /* マージンを減らす */
    color: #2c3e50; /* 濃い青みがかったグレー */
    font-weight: 700; /* 太字 */
}

#header h1 a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

#header h1 a:hover {
    color: #3498db; /* ホバーで少し明るい青に */
}

#header h2 {
    font-size: 1.2em; /* 少し小さく */
    color: #7f8c8d; /* 明るいグレー */
}

/* Navigation styles */
#navi {
    text-align: center;
    margin-bottom: 20px; /* マージンを減らす */
    padding: 10px 0; /* パディングを減らす */
    background-color: #ecf0f1; /* ナビゲーションの背景色を明るいグレーに */
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* 軽い影 */
}

#navi a {
    text-decoration: none;
    color: #3498db; /* 明るい青 */
    font-weight: bold;
    padding: 0 15px; /* パディングを減らす */
    transition: color 0.3s ease;
    position: relative; /* 下線アニメーション用 */
}

#navi a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #2980b9; /* ホバー時の下線の色 */
    transition: width 0.3s ease;
}

#navi a:hover {
    color: #2980b9;
}

#navi a:hover::after {
    width: 100%;
}

/* --- レイアウト変更: メインコンテンツエリア --- */
.main-content-area {
    display: flex; /* Flexboxを有効にして子要素を横並びにする */
    gap: 20px; /* 左メニューと右コンテンツの間のスペースを減らす */
    flex-wrap: nowrap; /* 折り返しなし */
}

.left-menu-column {
    flex: 0 0 220px; /* 左メニューの固定幅を少し減らす */
    min-width: 180px; /* 最小幅も調整 */
    box-sizing: border-box;
    border: 1px solid #e0e0e0; /* wakuクラスのボーダー */
    border-radius: 8px; /* wakuクラスの丸み */
    padding: 0; /* 既存のメニューのパディングは内部で調整 */
    background-color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.right-content-column {
    flex: 1; /* 右コンテンツは残りのスペースを全て使う */
    min-width: 300px; /* 最小幅 */
    box-sizing: border-box;
    display: flex; /* 右カラム内もFlexboxに */
    flex-direction: column; /* 縦並びのアイテム */
    gap: 20px; /* 各セクション間の縦方向スペースを減らす */
    width: 100%;
    max-width: 100%;
}

/* Left menu styles */
#menu {
    border: none;
    border-radius: 8px;
    padding: 10px; /* パディングを減らす */
    background-color: transparent;
    box-shadow: none;
}

#menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#menu li {
    padding: 6px 0; /* パディングを減らす */
    border-bottom: 1px dashed #e0e0e0;
    display: flex;
    align-items: center;
    font-size: 0.95em; /* 少し小さく */
}

#menu li:last-child {
    border-bottom: none;
}

#menu a {
    text-decoration: none;
    color: #333333; /* 通常時のリンク色 */
    display: flex;
    align-items: center;
    padding: 3px 0; /* パディングを減らす */
    flex-grow: 1;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-radius: 4px;
}

/* アクティブなメニュー項目のスタイル */
#menu a.active-link {
    background-color: #e0f0ff; /* アクティブなリンクの背景色 */
    color: #007bff; /* アクティブなリンクの文字色 */
    font-weight: bold;
}

#menu a:hover {
    background-color: #f5f5f5;
    color: #3498db;
}

.mark, .mark1 {
    font-size: 1.1em; /* 少し小さく */
    margin-right: 6px; /* スペースを減らす */
    line-height: 1;
    display: inline-block;
}

.mark {
    color: #27ae60;
}

.mark1 {
    color: #f39c12;
}

/* 訪問済みリンクのスタイル */
/* 左メニュー内の訪問済みリンク */
#menu a:visited {
    color: #333333; /* 訪問済みでも通常リンクと同じ濃い色に */
}

/* その他の場所（フッター、データアイテムなど）の訪問済みリンク */
/* data-item内のリンクの訪問済み色を調整 */
/* PDF/Excelリンクの訪問後/クリック後の色を統一 */
.data-item a:link, /* 未訪問のリンク */
.data-item a:visited, /* 訪問済みのリンク（ブラウザ履歴による） */
.data-item a.pdf-viewed, /* PDFクリック後のスタイル */
.data-item a.excel-downloaded /* Excelクリック後のスタイル */ {
    color: #3498db; /* 通常のリンク色 */
    text-decoration: none; /* 下線はデフォルトでなし */
    transition: color 0.3s ease;
}

/* ホバー時のスタイル */
.data-item a:hover {
    color: #2980b9;
    text-decoration: underline;
}

/* PDF/Excelクリック後のスタイル（より濃く、下線を表示） */
.data-item a.pdf-viewed,
.data-item a.excel-downloaded {
    color: #0056b3; /* 訪問済みを示す濃い青色 */
    text-decoration: underline; /* 下線を表示 */
}


/* --- 「お知らせ」バーの調整 --- */
.bar {
    background-color: #3498db;
    color: white;
    padding: 10px 15px; /* パディングを減らす */
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.2em; /* 少し小さく */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    box-sizing: border-box;
}

/* --- 「使い方」と画像の新しいコンテナ --- */
.guidance-and-image-section {
    display: flex;
    gap: 15px; /* スペースを減らす */
    align-items: flex-start;
    flex-wrap: wrap;
    background-color: #ffffff;
    padding: 15px; /* パディングを減らす */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 「使い方」テキストセクション */
.guidance-section {
    flex: 1;
    min-width: 280px; /* 最小幅を調整 */
}

/* STAR OF LIFE 画像ラッパー */
.star-of-life-image-wrapper {
    flex-shrink: 0;
    width: 150px; /* 画像サイズを少し小さく */
    height: 140px; /* 画像サイズを少し小さく */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Font Awesome アイコンのスタイル (PNGの代替) */
.star-of-life-icon {
    font-size: 100px; /* アイコンサイズ */
    color: #3498db; /* アイコン色 */
}

/* --- 「使い方」の見出しスタイル --- */
.guidance-title {
    font-size: 1.1em; /* 少し小さく */
    font-weight: bold;
    color: #3498db;
    margin-bottom: 8px; /* マージンを減らす */
    text-align: left;
}

/* --- 番号付きリストのスタイル --- */
.guidance-list {
    padding-left: 20px; /* パディングを調整 */
    margin: 0;
}

.instruction-item {
    margin-bottom: 3px; /* 間隔を減らす */
    text-align: left;
    font-size: 0.9em; /* 少し小さく */
    color: #555;
    list-style-type: decimal;
    list-style-position: outside;
}

/* ポータルページの注意書きPタグ */
.important-note {
    background-color: #fff3cd; /* 薄い黄色背景 */
    border: 1px solid #ffeeba; /* 薄い黄色枠線 */
    border-radius: 8px;
    padding: 10px 15px;
    margin-top: 10px; /* 上の要素との間隔を減らす */
    margin-bottom: 10px; /* 下の要素との間隔を減らす */
    display: block;
    text-align: left;
    font-size: 1.1em !important; /* 目立つようにフォントサイズを大きく、!importantで強制 */
    line-height: 1.5;
    color: #dc3545 !important; /* 文字色を赤色に、!importantで強制 */
    font-weight: bold !important; /* 太字に、!importantで強制 */
    width: 100%; /* 親の幅いっぱいに広げる */
    box-sizing: border-box;
}

/* 注意書き内の「※」マークのスタイル */
.important-note-marker {
    color: #dc3545 !important; /* 赤色に、!importantで強制 */
    font-weight: bold !important; /* 太字に、!importantで強制 */
    margin-right: 5px;
}


/* 赤字のテキストに適用するクラス (portal_content.html と result_form.php の両方に適用) */
.red-underline-text {
    color: #e74c3c;
    text-decoration: underline;
    text-decoration-color: #e74c3c;
    font-weight: bold;
}

.red-text {
    color: #dc3545 !important; /* 赤色を強制 */
    /* font-weight: bold !important; */
}


/* Info box styles (3つのブロックの幅調整) */
.info-box-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 10px; /* 上の要素との間隔を減らす */
    align-items: stretch;
    overflow-x: hidden;
    padding-bottom: 0;
    width: 100%;
    box-sizing: border-box;
}

.info-box-item {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-width: 200px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    background-color: #ffffff;
}

.info-box-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.box-title {
    background-color: #3498db;
    color: white;
    font-weight: bold;
    padding: 12px 15px;
    border-radius: 8px 8px 0 0;
    text-align: center;
    font-size: 1.2em;
}

.info-box-item .box1.box-title {
    background-color: #28a745; 
}

.info-box-item .box2.box-title {
    background-color: #ffc107;
    color: #333 !important;
}

.box-content {
    text-align: left;
    font-size: 0.95em;
    line-height: 1.6;
    padding: 15px;
    flex-grow: 1;
    overflow-wrap: break-word;
    word-break: break-word;
}

.box-content > div,
.box-content > span,
.box-content > a {
    margin-bottom: 8px;
}
.box-content > div:last-child,
.box-content > span:last-child,
.box-content > a:last-child {
    margin-bottom: 0;
}


/* Common box styles (waku) */
.waku {
    padding: 0;
    overflow: hidden;
}


/* --- 個別ページ内のデータ表示 Grid スタイル (dr*.html用) --- */
.monthly-data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
    margin-top: 15px;
    background-color: #f8f8f8; /* 濃淡のために少し明るいグレーに変更 */
    border: 1px solid #e0e0e0; /* 濃淡に合わせて少し濃いめのボーダー */
    border-radius: 12px; /* 少し大きめの角丸 */
    padding: 15px;
    padding-bottom: 35px; /* 下の余白をさらに増やす */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* 少し濃いめの影 */
    align-items: stretch; /* グリッドアイテムの高さを揃える */
}

.month-column {
    display: flex; /* Flexboxを維持して内部のdata-itemの配置を制御 */
    flex-direction: column; /* 縦並びを維持 */
    padding: 10px;
    padding-bottom: 0; /* data-itemのpadding-bottomで調整するため、month-columnでは0 */
    border: 1px solid #eee;
    border-radius: 6px;
    background-color: #ffffff; /* 各月の背景色を白に戻し、コントラストを出す */
    box-shadow: inset 0 0 5px rgba(0,0,0,0.02);
    height: 100%; /* 親のグリッド行の高さを占める */
}

.month-title {
    font-weight: bold;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
    margin-bottom: 8px;
    font-size: 1.05em;
    color: #34495e;
    flex-shrink: 0; /* タイトルは縮まない */
}

.data-item {
    text-align: center;
    padding-top: 8px; /* 上パディング */
    padding-bottom: 8px; /* 下パディング */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* コンテンツを上部に詰める */
    align-items: center;
    font-size: 0.9em;
    flex-grow: 1; /* 残りのスペースを埋めるようにする */
    border-bottom: 1px solid #e0e0e0; /* 区切り線は常に表示 */
    margin-bottom: 0; /* マージンをリセット */
    height: auto; /* ここでは高さを明示的に指定しない */
    box-sizing: border-box; /* paddingとborderを高さに含める */
}

/* month-columnの最後のdata-item（それがemptyであってもなくても）はborder-bottomなし */
.month-column .data-item:last-child {
    border-bottom: none;
    /* padding-bottom: 0; /* 最後のアイテムの下パディングもなし - これはflex-growで調整されるはずなので削除 */
}

/* emptyのdata-itemのスタイル */
.data-item.data-item-empty { /* クラス名を変更 */
    visibility: hidden; /* 中身は非表示に */
    flex-grow: 1; /* 空の要素もスペースを占めるように */
    border-bottom: 1px solid #e0e0e0; /* 見えないけどボーダーは維持 */
    /* height: auto; /* ここでは高さを明示的に指定しない */
}
.data-item.data-item-empty:last-child { /* 空の最後の要素もボーダーなし */
    border-bottom: none;
}


.file-links {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3px;
}


/* --- アクションボタンのスタイル --- */
.action-buttons {
    text-align: center;
    margin-top: 25px;
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.button-link {
    display: inline-block;
    padding: 12px 25px;
    border: none;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    min-width: 150px;
    text-align: center;
    color: white !important;
}

.button-link:hover {
    color: white !important;
}

.button-link.primary-button {
    background-color: #28a745;
}

.button-link.primary-button:hover {
    background-color: #218838;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.button-link.secondary-button {
    background-color: #6c757d;
}

.button-link.secondary-button:hover {
    background-color: #5a6268;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}


/* --- result_form.php のフォーム固有のスタイル --- */
#formWrap {
    width: 100%;
    max-width: 900px;
    margin: 20px auto;
    padding: 25px;
    color: #555;
    line-height: 1.6;
    font-size: 16px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

#formWrap h3 {
    font-size: 1.8em;
    margin-bottom: 15px;
}

#formWrap p {
    margin-bottom: 20px;
    font-size: 0.95em;
}

table.formTable{
    width:100%;
    margin:0 auto;
    border-collapse:collapse;
    border-radius: 8px;
    overflow: hidden;
}

table.formTable td,table.formTable th{
    border:1px solid #ccc;
    padding:12px;
    vertical-align: middle;
}

table.formTable th{
    width:30%;
    font-weight:bold;
    background:#eef1f5;
    text-align:left;
    color: #444;
    font-size: 0.95em;
}

/* Input field styles for result_form.php */
table.formTable input[type="text"],
table.formTable input[type="email"],
table.formTable input[type="date"],
table.formTable select,
table.formTable textarea {
    width: calc(100% - 20px);
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 0.95rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

table.formTable input[type="text"]:focus,
table.formTable input[type="email"]:focus,
table.formTable input[type="date"]:focus,
table.formTable select:focus,
table.formTable textarea:focus {
    border-color: #3498db;
    outline: none;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
}

/* ラジオボタンとラベルのスタイル調整 */
table.formTable td {
    text-align: left; /* ラジオボタンのセルを左寄せに */
}

/* ラジオボタンの縦並びとテキストの折り返しを改善 */
table.formTable td input[type="radio"] {
    margin-right: 6px;
    margin-top: 0;
    vertical-align: middle; /* ラジオボタンの縦位置を調整 */
}

table.formTable td label {
    display: inline-block; /* インラインブロックにして、幅が内容に合わせられるように */
    margin-right: 15px; /* ラジオボタン間の余白 */
    white-space: normal; /* 折り返しを許可 */
    line-height: 1.6; /* 行の高さを調整し、テキストが読みやすく */
    vertical-align: middle; /* ラベルの縦位置を調整 */
}


/* Submit and Reset buttons for result_form.php */
table.formTable input[type="submit"],
table.formTable input[type="reset"] {
    background-color: #28a745;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    margin: 10px 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

table.formTable input[type="reset"] {
    background-color: #6c757d;
}

table.formTable input[type="submit"]:hover,
table.formTable input[type="reset"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

table.formTable input[type="submit"]:hover {
    background-color: #218838;
}

table.formTable input[type="reset"]:hover {
    background-color: #5a6268;
}

/* Footer styles (Common) */
#copyright {
    text-align: center;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #e0e0e0;
    font-size: 0.85em;
    color: #7f8c8d;
}

#copyright a {
    color: #3498db;
    text-decoration: none;
    transition: color 0.3s ease;
}

#copyright a:hover {
    color: #2980b9;
    text-decoration: underline;
}

/* --- ログインフォームのスタイル（既存を改善） --- */
.login-body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #e9ecef;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.login-container {
    max-width: 450px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-box {
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: 40px;
    box-sizing: border-box;
    position: relative;
    z-index: 1001;
}

.login-box h1 {
    font-size: 2em;
    margin-bottom: 20px;
}

.login-box p {
    font-size: 1em;
    margin-bottom: 25px;
}

.input-group {
    margin-bottom: 20px;
}

.input-group label {
    font-size: 0.95em;
    margin-bottom: 8px;
    display: block;
    text-align: left;
}

.input-field {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid #ced4da;
    font-size: 1.1em;
    box-sizing: border-box;
}

.input-field:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
    outline: none;
}

.login-button {
    background-color: #3498db;
    padding: 15px 30px;
    border-radius: 8px;
    font-size: 1.2em;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    width: 100%;
}

.login-button:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.error-message {
    color: #dc3545;
    font-weight: bold;
    margin-bottom: 15px;
    border: 1px solid #dc3545;
    padding: 8px;
    border-radius: 8px;
    background-color: #f8d7da;
    font-size: 0.9em;
}
/* --- ログインフォームのスタイルここまで --- */

/* --- レスポンシブデザインの調整 --- */
/* 1200px以下の調整 */
@media (max-width: 1200px) {
    #container {
        padding: 15px;
    }
    .main-content-area {
        gap: 15px;
    }
    .left-menu-column {
        flex: 0 0 200px;
        min-width: 160px;
    }
    .right-content-column {
        gap: 15px;
    }
    .monthly-data-grid {
        gap: 8px;
        padding: 10px;
        padding-bottom: 18px; /* 調整 */
    }
    .month-column {
        padding: 5px;
    }
    .data-item {
        font-size: 0.85em;
    }
    .file-links {
        padding-top: 3px;
        margin-top: 3px;
    }
}

/* 992px以下の調整 (タブレット表示時) */
@media (max-width: 992px) {
    .main-content-area {
        flex-direction: column;
        gap: 15px;
    }
    .left-menu-column {
        flex: 0 0 100%;
        min-width: unset;
    }
    .right-content-column {
        flex: 1;
        min-width: unset;
        gap: 15px;
    }
    .guidance-and-image-section {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 10px;
    }
    .star-of-life-image-wrapper {
        margin-top: 8px;
        width: 120px;
        height: 110px;
    }
    .info-box-container {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .info-box-item {
        min-width: unset;
        max-width: unset;
    }
    .monthly-data-grid {
        grid-template-columns: 1fr; /* タブレット以下では1列にする */
        padding: 10px;
        padding-bottom: 18px; /* 調整 */
        gap: 8px;
    }
    .month-column {
        padding: 5px;
        min-height: unset; /* コンテンツに合わせて高さを自動調整 */
        height: auto; /* ここでautoに戻す */
    }
    .data-item {
        font-size: 0.8em;
    }
    .file-links {
        padding-top: 3px;
        margin-top: 3px;
    }
    .action-buttons {
        gap: 15px;
    }
    .button-link {
        padding: 10px 20px;
        font-size: 1em;
        min-width: 120px;
    }
    table.formTable th,
    table.formTable td {
        padding: 6px 0;
    }
    table.formTable input[type="text"],
    table.formTable input[type="email"],
    table.formTable input[type="date"],
    table.formTable select,
    table.formTable textarea {
        padding: 6px;
    }
    table.formTable input[type="submit"],
    table.formTable input[type="reset"] {
        padding: 8px 15px;
        font-size: 0.9em;
        margin: 8px 5px;
    }
}

/* 768px以下の調整 (スマートフォン表示) */
@media (max-width: 768px) {
    body {
        padding: 5px;
        font-size: 14px;
    }
    #container {
        padding: 10px;
        border-radius: 8px;
    }
    #header h1 {
        font-size: 1.8em;
    }
    #header h2 {
        font-size: 0.9em;
    }
    #navi a {
        padding: 0 8px;
        font-size: 0.9em;
    }
    .login-box {
        padding: 25px;
        border-radius: 8px;
    }
    .login-box h1 {
        font-size: 1.5em;
    }
    .login-button {
        padding: 12px 20px;
        font-size: 1em;
    }
    .info-box-container {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .info-box-item {
        max-width: 350px;
        margin: 0 auto;
    }
    .guidance-section {
        min-width: unset;
    }
    .monthly-data-grid {
        grid-template-columns: 1fr;
        padding: 8px;
        padding-bottom: 18px; /* 調整 */
        gap: 6px;
    }
    .month-column {
        padding: 6px;
        min-height: unset; /* スマホでは特にmin-heightをなくし、コンテンツに合わせる */
        height: auto; /* ここでautoに戻す */
    }
    .data-item {
        font-size: 0.75em;
        min-height: 35px; /* データアイテムの最低限の高さは維持 */
    }
    .file-links {
        padding-top: 3px;
        margin-top: 3px;
    }
    .action-buttons {
        flex-direction: column;
        gap: 10px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .button-link {
        width: 80%;
        max-width: 250px;
        margin: 0 auto;
        padding: 10px 15px;
        font-size: 1em;
    }
    table.formTable th,
    table.formTable td {
        /* スマートフォン表示時のフォーム固有のスタイル */
        display: block; /* セルをブロック要素にして縦並びに */
        width: 100%; /* フル幅に */
        padding: 8px 0; /* パディングを調整 */
    }
    table.formTable td { /* スマートフォン表示時も左寄せに */
        text-align: left;
    }
    table.formTable th {
        text-align: left; /* スマホでも左寄せ */
        background: none; /* 背景色をなくす */
        border-bottom: none; /* 下線も消す */
        padding-bottom: 0; /* パディングを調整 */
    }
    table.formTable tr {
        border-bottom: 1px solid #eee; /* 行間の区切り線を維持 */
        padding-bottom: 15px; /* 行の底にスペース */
        margin-bottom: 15px; /* 行の間にスペース */
    }
    table.formTable tr:last-child {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    table.formTable input[type="text"],
    table.formTable input[type="email"],
    table.formTable input[type="date"],
    table.formTable select,
    table.formTable textarea {
        width: 100%; /* フォーム要素をフル幅に */
        padding: 8px; /* パディングを調整 */
    }
}

/* 確認画面用のスタイル */
.confirm-table {
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f9f9f9;
}
.confirm-table th, .confirm-table td {
    border: 1px solid #ccc;
    padding: 12px;
    vertical-align: top;
    text-align: left;
}
.confirm-table th {
    width: 30%;
    font-weight: bold;
    background: #eef1f5;
    color: #444;
    font-size: 0.95em;
}
.confirm-actions {
    text-align: center;
    margin-top: 20px;
}
.confirm-actions button {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    margin: 0 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    
    /* ③ボタンのセンタリングのための追加スタイル */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.confirm-actions button.submit-button {
    background-color: #28a745;
    color: white;
}
.confirm-actions button.submit-button:hover {
    background-color: #218838;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.confirm-actions button.back-button {
    background-color: #6c757d;
    color: white;
}
.confirm-actions button.back-button:hover {
    background-color: #5a6268;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* カスタムダイアログのスタイル */
.custom-dialog {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    z-index: 9999; /* 他の要素より手前に表示されるようにz-indexを高く設定 */
    text-align: center;
    position: fixed; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0; /* 初期は非表示 */
    visibility: hidden; /* 初期は非表示 */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.custom-dialog.show {
    opacity: 1;
    visibility: visible;
}
.dialog-buttons button {
    margin: 0 10px; 
    padding: 10px 20px; 
    border-radius: 5px; 
    cursor: pointer;
}
.dialog-buttons button:hover {
    opacity: 0.8;
}
.custom-dialog p {
    margin-bottom: 20px;
}