body {
   background: #f8f9fa;
   font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
   font-size: 14px;
   color: #333;
 }

 .sidebar {
   height: 100vh;
   background: white;
   border-right: 1px solid #dee2e6;
   padding: 20px;
   position: fixed;
   width: 280px;
   display: flex;
   flex-direction: column;
   top: 0;
   left: 0;
   z-index: 100;
 }

 .main-content {
   margin-left: 280px;
   padding: 30px 40px;
   background: #f8f9fa;
   min-height: 100vh;
 }

 .card-list-area {
   flex-grow: 1;
   overflow-y: auto;
 }

 .card-item {
   cursor: pointer;
   padding: 10px 12px;
   border: 1px solid #e0e0e0;
   transition: 0.2s;
   background: white;
   border-radius: 6px;
   margin-bottom: 8px;
   position: relative;
 }

 .card-item:hover {
   background: #f0f7ff;
 }

 .active-card {
   background: #e7f3ff !important;
   border-color: #007bff;
   font-weight: bold;
   color: #007bff;
 }

 .section-title {
   border-left: 4px solid #007bff;
   padding-left: 10px;
   margin: 25px 0 15px 0;
   font-weight: bold;
   color: #333;
   font-size: 1.1rem;
 }

 .form-label {
   font-weight: 600;
   color: #444;
   font-size: 0.9rem;
 }

 .form-section {
   background: white;
   padding: 20px 25px;
   border-radius: 8px;
   border: 1px solid #e0e0e0;
   margin-bottom: 20px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
 }

 .task-block {
   background: #f8f9fa;
   border: 1px solid #cce5ff;
   border-radius: 6px;
   padding: 15px;
   margin-bottom: 15px;
   position: relative;
 }

 .license-card {
   background: #fff;
   border: 1px solid #007bff;
   border-left: 5px solid #007bff;
   border-radius: 4px;
   padding: 10px 15px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 8px;
 }

 #toast-notification {
   position: fixed;
   top: 20px;
   right: 20px;
   z-index: 9999;
   display: none;
 }

 #pdf-preview-area {
   display: none;
   background: white;
   padding: 40px 50px;
   border: 1px solid #ddd;
   border-radius: 4px;
   max-width: 800px;
   margin: 0 auto;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
   line-height: 1.6;
 }

 .doc-title {
   text-align: center;
   font-size: 22px;
   font-weight: bold;
   letter-spacing: 6px;
   margin-bottom: 20px;
   border-bottom: 2px solid #333;
   padding-bottom: 10px;
 }

 .doc-meta {
   text-align: right;
   font-size: 12px;
   margin-bottom: 25px;
 }

 .doc-section-title {
   font-size: 15px;
   font-weight: bold;
   border-bottom: 1px solid #333;
   padding-bottom: 3px;
   margin: 25px 0 12px 0;
 }

 .doc-item-title {
   font-size: 14px;
   font-weight: bold;
   margin-bottom: 4px;
 }

 .doc-sub-text {
   font-size: 13px;
   color: #444;
   margin-bottom: 8px;
   padding-left: 10px;
 }

 @media print {

   html,
   body {
     margin: 0 !important;
     padding: 0 !important;
     width: 100% !important;
     height: auto !important;
   }

   body {
     background: white !important;
     font-size: 11pt;
     color: #000;
   }

   .no-print,
   .sidebar,
   .btn,
   #toast-notification {
     display: none !important;
   }

   .main-content {
     margin-left: 0 !important;
     margin: 0 !important;
     padding: 0 !important;
     width: 100% !important;
     min-height: 0 !important;
     height: auto !important;
     background: white !important;
   }

   #pdf-preview-area {
     display: block !important;
     border: none !important;
     box-shadow: none !important;
     padding: 0 !important;
     margin: 0 !important;
     width: 100% !important;
     max-width: none !important;
     min-height: 0 !important;
     height: auto !important;
   }

   #input-form-area {
     display: none !important;
   }

   .doc-section-title {
     break-after: avoid;
     page-break-after: avoid;
   }

   .doc-block {
     break-inside: auto;
     page-break-inside: auto;
     margin-bottom: 14px;
   }

   .doc-item-title {
     break-after: avoid;
     page-break-after: avoid;
   }

 }

 /* ========================================
   スマートフォン表示
   ======================================== */
 @media screen and (max-width: 768px) {

   body {
     font-size: 14px;
     overflow-x: hidden;
   }

   /* サイドバーを画面上部へ */
   .sidebar {
     position: static !important;
     width: 100% !important;
     height: auto !important;
     border-right: none !important;
     border-bottom: 1px solid #dee2e6;
     padding: 12px !important;
     display: block !important;
   }

   /* 職歴リスト */
   .card-list-area {
     overflow-y: visible !important;
     max-height: none !important;
   }

   /* メイン入力エリアを全幅に */
   .main-content {
     margin-left: 0 !important;
     padding: 12px !important;
     width: 100% !important;
     min-width: 0 !important;
   }

   /* 入力カード */
   .form-section {
     padding: 14px !important;
   }

   .task-block {
     padding: 12px !important;
   }

   /* Bootstrapの横並びをスマホでは縦並びに */
   .row>[class*="col-"] {
     width: 100% !important;
     max-width: 100% !important;
     flex: 0 0 100% !important;
   }

   /* 入力欄・選択欄 */
   input,
   select,
   textarea {
     width: 100%;
     max-width: 100%;
   }

   /* ボタンは押しやすく */
   .sidebar .btn {
     width: 100%;
     margin-bottom: 8px;
   }

   /* PDFプレビュー */
   #pdf-preview-area {
     width: 100% !important;
     max-width: 100% !important;
     padding: 15px !important;
     margin: 0 auto;
   }


   /* 担当職種・業務内容の見出しと追加ボタンを縦並び */
   .form-section>.d-flex.justify-content-between {
     flex-direction: column;
     align-items: stretch !important;
     gap: 10px;
   }

   .form-section>.d-flex.justify-content-between .btn {
     width: 100%;
   }

   /* 完成プレビュー上部のボタンを縦並び */
   #pdf-preview-area>.d-flex.justify-content-between {
     flex-direction: column;
     align-items: stretch !important;
     gap: 10px;
   }

   #pdf-preview-area>.d-flex.justify-content-between .btn {
     width: 100%;
   }

 }