/* Multi-step form styles */
.main-content {
    max-width: 100%;
    margin: 0 auto;
}

.form-root .c-title {
    background: #22aaff;
    color: #FFFFFF;
    padding: 10px 0px 4px 15px;
    font-size: 24px;
    height: 50px;
}

.form-root .c-section {
    padding: 10px 0px 10px 50px;
    max-width: 100%;
}

.form-root .c-section .c-form-row {
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
}

.form-root .c-section .c-form-row .c-label {
    display: inline-block;
    width: 110px;
    font-size: 20px;
}

.form-root .c-section .c-form-row .c-required {
    display: inline-block;
    width: 24px;
    font-size: 20px;
    font-weight: bold;
    color: red;
}

.form-root .c-section .c-form-row .c-note {
    font-size: 15px;
    margin-left: 12px;
    margin-top: 6px;
    color: #000;
}

.form-root .c-warning {
    font-size: 20px;
    padding: 10px 0 10px 40px;
    display: flex;gap: 25px;
    flex-direction: column;
    border-bottom: 1px solid #00000078
}

.form-root .c-section .c-form-row .c-ateji {
    width: 27px;
    height: 29px;
}

.form-root .c-section .c-form-panel {
    padding: 12px 0 18px 0;
}

.form-root .c-section .c-form-panel .panel-title {
    font-size: 20px;
    font-weight: bold;
    color: #000;
    margin-bottom: 8px;
}

.form-root .c-section .c-form-panel .panel-title span {
    font-size: 20px;
    color: #000;
    font-weight: bold;
}

.form-root .c-section .c-form-panel .panel-body {
    padding-left: 24px;
}

.form-root .c-section .c-form-panel .panel-body .c-form-row {
    display: flex;
    gap: 8px
}

.form-root .c-section .c-form-panel .panel-body .c-form-row .c-row {
    display: flex;
    flex-direction: column;
    min-width: 240px;
    gap: 14px;
    /* max-width: 420px; */
    margin-top: 32px;
}

.form-root .c-section .c-form-index {
    margin-bottom: 18px;
    display: flex;
    gap: 6px;
}

.form-root .c-section .c-form-index .c-panel-body {
    width: 18px;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    top: -5px;
}


.form-root .c-box {
    display: flex;
    flex-direction: column;
    min-width: 240px;
    gap: 13px;
    max-width: 414px;
    margin-top: 32px;
}

.form-root .c-section .c-form-end {
    display: flex;
    gap: 110px;
    margin-bottom: 30px;
}


.form-root .c-btn {
    display: flex;
    justify-content: flex-end;
    gap: 32px;
    margin: 12px 0 24px 0;
}

.form-root .c-btn .c-btn-secondary {
    width: 182px;
    height: 41px;
    background: #999;
    border: none;
    color: #fff;
    font-size: 24px;
    border-radius: 24px;
    margin: 0;
    cursor: pointer;
}

.form-root .c-btn .c-btn-secondary:hover {
    background: #777;
}

.form-root .c-btn .c-btn-primary {
    width: 182px;
    height: 41px;
    background: #22aaff;
    border: none;
    color: #fff;
    font-size: 24px;
    border-radius: 24px;
    margin: 0;
    cursor: pointer;
}

.form-root .c-btn .c-btn-primary:hover {
    background: #1a8fcc;
}

/* Document table styles */
.document-table {
    border: 1px solid #000;
    background: white;
    border-bottom: none;
}

.document-row {
    display: flex;
    border-bottom: 1px solid #ccc;
}

.document-row:last-child {
    border-bottom: none;
}

.document-cell {
    flex: 1;
    padding: 20px 16px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    background: #fff;
    font-size: 20px;
    line-height: 1.4;
}

.document-cell-content {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
}

.document-checkbox {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #000;
    background: white;
}

.doc-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.count-input {
    width: 57px;
    height: 34px;
    border: 1px solid #000;
    text-align: center;
    font-size: 20px;
}

.content-textarea {
    flex: 1;
    width: 250px;
    height: 110px;
    border: 1px solid #000;
    padding: 8px;
    font-size: 20px;
}

/* Error styles */
.error-container {
    background: #fff2f2;
    border: 2px solid #ff4444;
    border-radius: 4px;
    margin: 20px 44px;
    padding: 16px;
    box-shadow: 0 2px 4px rgba(255, 68, 68, 0.1);
    display: none;
}

.error-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.error-icon {
    color: #ff4444;
    font-size: 20px;
    font-weight: bold;
}

.error-title {
    color: #d32f2f;
    font-size: 20px;
    font-weight: bold;
}

.error-messages-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 
    Styles
*/

.text-00000078 {
    color: #00000078;
}

.text-right {
    text-align: right;
}

.text-end {
    text-align: end;
}

.pb-8 {
    padding-bottom: 8px;
}

.pb-12 {
    padding-bottom: 12px;
}

.pl-15 {
    padding-left: 15px !important;
}

.pl-45 {
    padding-left: 45px;
}

.d-none {
    display: none;
}

.d-flex {
    display: flex;
}

/* Flex */
.flex-row {
    flex-direction: row;
}

.flex-col {
    flex-direction: column;
}

.flex-1 {
    flex: 1;
}

.flex-1_5 {
    flex: 1.5;
}

.flex-2 {
    flex: 2;
}

.item-center {
    align-items: center !important;
}

.item-end {
    align-items: end;
}

.item-flex-start {
    align-items: flex-start !important;
}

.item-flex-end {
    align-items: flex-end !important;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-end {
    justify-content: end;
}

.gap-0 {
    gap: 0px !important;
}

.gap-6 {
    gap: 6px !important;
}

.gap-8 {
    gap: 8px;
}

/* Width */
.w-full {
    width: 100% !important;
}

.w-55 {
    width: 55px;
}

.w-137 {
    width: 137px !important;
}

.w-174 {
    width: 174px !important;
}

.w-120 {
    width: 120px !important;
}

.w-90 {
    width: 90px !important;
}

.w-100 {
    width: 100px !important;
}

.w-152 {
    width: 152px;
}

.w-170 {
    width: 170px !important;
}

.w-209 {
    width: 209px !important;
}

.w-223 {
    width: 223px !important;
}

.w-231 {
    width: 230px !important;
}

.w-240 {
    width: 240px !important;
}

.w-245 {
    width: 245px !important;
}

.w-57 {
    width: 57px !important;
}

.w-86 {
    width: 86px !important;
}

.w-255 {
    width: 255px !important;
}

.w-290 {
    width: 290px;
}

.w-404 {
    width: 404px;
}

.w-409 {
    width: 409px;
}

.w-459 {
    width: 459px;
}

.w-189 {
    width: 189px;
}

.w-463 {
    width: 463px;
}

.w-630 {
    width: 630px;
}

.w-820 {
    width: 820px;
}

.w-860 {
    width: 860px;
}

.w-1050 {
    width: 1050px;
}

.w-1180 {
    width: 1180px;
}


.h-37 {
    height: 37px;
}

.h-39 {
    height: 37px;
}

.h-54 {
    height: 54px !important;
}

.h-62 {
    height: 62px;
}

.h-80 {
    height: 80px;
}

.h-102 {
    height: 102px;
}

.h-128 {
    height: 128px;
}

.min-h-140 {
    min-height: 140px;
}


/* Margin */
.m-0 {
    margin: 0px !important;
}

.mt-0 {
    margin-top: 0px !important;
}

.mt-0 {
    margin-top: 0;
}

.mt-2 {
    margin-top: 2px;
}

.mt-13 {
    margin-top: 13px;
}

.mt-17 {
    margin-top: 17px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-50 {
    margin-top: 50px;
}

.mt-4 {
    margin-top: 4px;
}

.ml-5 {
    margin-left: 5px;
}

.ml-10 {
    margin-left: 10px;
}

.ml-20 {
    margin-left: 20px;
}

.ml-30 {
    margin-left: 30px;
}

.ml-50 {
    margin-left: 50px;
}

.ml-105 {
    margin-left: 105px;
}

.ml-120 {
    margin-left: 120px;
}

.ml-140 {
    margin-left: 140px;
}

.mb-0 {
    margin-bottom: 0px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-2 {
    margin-bottom: 2px !important;
}

.ml-40 {
    margin-left: 40px;
}

.ml-132 {
    margin-left: 132px;
}

.mr-10 {
    margin-right: 10px;
}

.mr-16 {
    margin-right: 16px;
}

.mr-25 {
    margin-right: 25px;
}

.mr-60 {
    margin-right: 60px;
}

.mr-70 {
    margin-right: 70px;
}

.border-1 {
    border: 1px solid #000;
}

.cursor-pointer {
    cursor: pointer;
}

.size-14 {
    font-size: 14px;
}

.size-15 {
    font-size: 15px;
}

.size-19 {
    font-size: 19px;
}

.size-20 {
    font-size: 20px;
}

.t-20-negative {
    top: -20px;
}

.bg-f5f5f5 {
    background-color: #f5f5f5;
}

.bg-f90e0e {
    background-color: #f90e0e !important;
}

.bg-size-12-100 {
    background-size: 12px 100% !important;
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.fw-bold {
    font-weight: bold;
}

input, select, textarea {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
}

input[type="text"] {
    height: 34px;
    font-size: 20px;
    border: 1px solid;
    border-radius: 1px;
    padding: 8px 16px;
    box-sizing: border-box;
}

input[type="url"] {
    height: 34px;
    font-size: 20px;
    border: 1px solid;
    border-radius: 1px;
    padding: 8px 16px;
    box-sizing: border-box;
}

input[type="email"] {
    height: 34px;
    font-size: 20px;
    border: 1px solid;
    border-radius: 1px;
    padding: 8px 16px;
    box-sizing: border-box;
}

input[type="password"] {
    height: 34px;
    font-size: 20px;
    border: 1px solid;
    border-radius: 1px;
    padding: 8px 16px;
    box-sizing: border-box;
}

select {
    height: 34px;
    font-size: 20px;
    border: 1px solid;
    border-radius: 1px;
    padding: 4px 30px 0px 12px;
    background-color: white;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url(/assets/common/bg-select.png);
    background-repeat: no-repeat;
    background-position: right 1px top 1px;
    background-size: 12px;

}

select::-ms-expand {
    display: none;
}

select[disabled] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background: #c8c9c9;
    border-color: #e3e3e3;
    cursor: not-allowed;
    color: light-dark(rgb(84, 84, 84), rgb(170, 170, 170));
    opacity: 1;
}

/* Placeholder/empty option text color */
select option[value=""] {
    color: #00000078;
}

/* Regular options remain black */
select option:not([value=""]) {
    color: #000;
}

/* Style select element when placeholder option is selected */
select:invalid {
    color: #00000078;
}

/* Style select element when valid option is selected */
select:valid {
    color: #000;
}

.readonly-select {
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: #c8c9c9;
    border-color: 1px solid #e3e3e3;
    font-size: 20px;
    cursor: not-allowed;
    white-space: normal;
    line-height: 1.4;
    word-break: break-word;
    border-radius: 1px;
    box-sizing: border-box;
}

.readonly-select p {
    line-height: 1.2;
    color: light-dark(rgb(84, 84, 84), rgb(170, 170, 170));
    cursor: not-allowed;
    white-space: normal;
    width: 100%;
    border-radius: 1px;
    box-sizing: border-box;
}

textarea {
    font-size: 20px;
    border: 1px solid;
    border-radius: 1px;
    padding: 8px 16px;
    resize: none;
    box-sizing: border-box;
}

.ssg020-copy-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 0px 8px 0px 8px;
    font-size: 20px;
    background: #fff;
    border-radius: 16px;
    color: #00000096;
    cursor: pointer;
    font-weight: 400;
}

.bg-size-4_5 {
    background-size: 4.5%;
}

.bg-size-8_7 {
    background-size: 8.7%;
}

.bg-size-9_7 {
    background-size: 9.7%;
}

.bg-textarea {
    background-image: url(/assets/common/bg-select.png);
    background-repeat: no-repeat;
    background-position: right 2px top 2px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.bg-textarea::-webkit-scrollbar {
    display: none;
}

.w-99 {
    width: 99px !important;
}

.ssg020-suffix-text {
    font-size: 20px;
    margin-left: 12px;
    margin-top: 2px;
}

.line-height-100 {
    line-height: 100%;
}

.line-height-1_2 {
    line-height: 1.2;
}

.nowrap {
    text-wrap: nowrap;
}

.word-break-all {
    word-break: break-all;
}

.justify-content-center {
    justify-content: center;
}
.support-register {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
}

.support-register a {
    text-decoration: unset;
}

.w-space-normal {
    white-space: normal;
}

.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overflow-hidden {
    overflow: hidden;
}

.text-left {
    text-align: left !important;
}

.c-red {
    color: red;
}

/* ssg010: 審査結果通知書 (col 8) - left-align and wrap */
.table-auto tbody td:nth-child(8) {
    text-align: left !important;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="url"],
input[type="datetime"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
.form-select,
textarea,
select {
    font-size: 13px;
}

.btn {
    font-size: 18px;
}

.ttl-2 h2 {
    font-size: 14px;
}

.input-block h3 {
    font-size: 14px;
}

.lst-ftr [data-class*="unit-txt"], .form-ftr [data-class*="unit-txt"], .complete-box [data-class*="unit-txt"], .select-option [data-class*="unit-form-btn"] [data-class*="unit-txt"] {
    font-size: 14px;
}

table[data-class*="type-hrz"] {
    font-size: 12px;
}

#validation-errors {
    padding: 10px 10px 10px 30px;
}

.validation-errors {
}

.validation-errors li {
    color: #FF0000;
}


@page {
  size: A4 portrait;
  margin: 0mm;
}

.page {
  box-sizing: border-box;
  padding: 10mm 20mm 20mm 20mm;
  margin: auto;
  font-family: "ＭＳ 明朝";
  font-size: 16px;
  width: 895px;
}

table.lists {
  border-width: 1px;
  border-style: solid;
  border-color: black;
  border-collapse: collapse;
  font-family: "ＭＳ 明朝";
  font-size: 16.0px;
  border-collapse: collapse;
  table-layout: fixed;
  word-wrap: break-word;
}

table.layout {
  border-collapse: collapse;
  font-family: "ＭＳ 明朝";
  font-size: 16.0px;
  border-collapse: collapse;
  table-layout: fixed;
  word-wrap: break-word;
}

/* New CSS classes for inline styles */
.font-size-16 {
  font-size: 16px;
}

.header-title {
  font-size: 20px;
  text-align: center;
  margin: 10px 0;
}

.header-container {
  width: 100%;
  margin: 10px 0 20px 0;
}

.header-date {
  font-size: 16px;
  float: right;
}

.layout-table {
  table-layout: fixed;
  margin: auto;
}

.cell-left-middle {
  text-align: left;
  vertical-align: middle;
  width: 125px;
}

.cell-left-middle-no-width {
  font-size: 14px;
  text-align: left;
  vertical-align: middle;
}

.form-field-text {
  margin: 2px 0;
  font-size: 14px;
}

.application-info {
  margin: 10px 0 20px 0;
}

.flex-container {
  display: flex;
  width: 100%;
}

.lists-table {
  table-layout: fixed;
}

.cell-center-middle-relative {
  text-align: center;
  vertical-align: middle;
  position: relative;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle-option {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle-option-selected {
  border: 1px solid black;
}

.note-position {
  font-size: 14px;
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  text-align: center;
}

.flex-column-end {
  font-size: 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  margin-bottom: 4px;
  margin-left: 10px;
}

.note-section {
  font-size: 14px;
  margin: 6px 0 20px 0;
}

.lists-table-wide {
  table-layout: fixed;
  width: 744px;
}

.cell-center-middle {
  font-size: 14px;
  text-align: center;
  vertical-align: middle;
}

.cell-center-middle-header {
  text-align: center;
  vertical-align: middle;
}

.cell-center-middle-height {
  text-align: center;
  vertical-align: middle;
  height: 80px;
}

.number-circle {
  border-radius: 50%;
  border: 1px solid black;
  padding: 1px;
  font-size: 15px;
}

.layout-table-full {
  table-layout: fixed;
  width: 100%;
}

.final-note {
  margin: 10px 0 10px 0;
  font-size: 14px;
}

.py-10 {
  padding: 10px 0;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *




 */