/* トップ */
.top-bg {
    background-color: #E6F5FC;
}
.procedure-text {
    font-size: 1rem;
}
.procedure-ul {
    padding-left: 0;
}
.procedure-ul>li {
    list-style-type: none;
}
.icon {
    width: 40px;
    height: 40px;
    margin: auto 10px auto 0;
}
.top-tel {
    font-family: "Hiragino Sans","ヒラギノ角ゴシック";
}
@media (min-width: 600px){
    .top-w {
        width: 750px;
    }
    .procedure-text {
        font-size: 1.25rem;
    }
    .procedure-ul {
        padding-left: 2rem;
    }
    .icon {
        width: 55px;
        height: 55px;
    }
}

/* --利用規約-- */
.tos-box {
    height: 400px;
}
.history-w {
    width: 100%;
}
@media (min-width: 600px) {
    .history-w {
        width: 80%;
    }
}

/* --ホーム-- */
/* テーブル */
.member-info-bg {
    background-color: #044D9B;
}
.member-table-layout {
    display: block;
}
.member-right-table-m {
    margin-bottom: 1rem;
}
.member-table {
    border: 1px solid #044D9B;
    border-collapse: separate;
    overflow: hidden;
    border-spacing: 0;
    border-radius: 10px;
    text-align: center;
    border: 1px solid #044D9B;
}
.member-table th, .member-table td {
    vertical-align: middle;
    border-right: 1px solid #044D9B;
    border-bottom: 1px solid #044D9B;
    background-color: #B1C8E0;

    &:last-child {
      border-right: none;
    }
}
.member-table th {
    min-width: 7rem;
    white-space: nowrap !important;
}
.member-table td {
    padding: .6em 1em;
    background-color: #FFFFFF;
    text-align: left !important;
}
.member-table tr {
    &:last-child {
      th, td {
        border-bottom: none;
      }
    }
}
@media (min-width: 600px) {
    .member-table-layout {
        display: flex;
        justify-content: space-between;
    }
    .member-table {
        max-width: 30rem;
    }
    .member-right-table-m {
        margin-right: 1rem;
        margin-bottom: 0;
    }
    .menber-table th {
        padding: .6em 1em;
    }
    .member-table td {
        padding: .6em 2em;
    }
}

/* 手続きボタン */
.procedure-w {
    width: 100%;
}
@media (min-width: 600px) {
    .procedure-w {
        width: 60%;
    }
}

/* メールアドレス登録 */
.mail-info-layout {
    color: #D24723;
    background-color: #F5F5F5;
    text-align: center;
}
@media (min-width: 600px) {
    .mail-info-layout {
        width: 52rem;
        text-align: start;
        display: flex;
        align-items: center;
    }
}

/* --手続き１-- */
/* 流れ */
.stepper-img-sp {
    display: flex;
}
.stepper-img-pc {
    display: none;
}
/* 検索 */
/* アコーディオン */
.search-bottom {
    background-image: url("../img/down.png");
    background-position: right;
    background-repeat: no-repeat;
    background-color: #606060;
}
.search-bottom::after {
    background-image: none;
}

.search-bottom:not(.collapsed) {
    background-image: url("../img/up.png");
    padding-right: 5px;
    background-color: #979797;
}
.search-bottom:not(.collapsed)::after {
    background-image: none;
}

/* 期間 */
.reduction-procedure-period {
    display: flex;
}
.period-layout {
    width: 47%;
}
.period-between-layout {
    text-align: start;
}
.period-between {
    padding: 5px 1px;
}
/* ステータス */
.reduction-procedure-status {
    display: block;
}
@media (min-width: 600px){
    /* 流れ */
    .stepper-img-sp {
        display: none;
    }
    .stepper-img-pc {
        display: block;
        width: 90%;
    }
    /* 期間 */
    .reduction-procedure-period {
        display: flex;
        justify-content: start;
    }
    .period-layout {
        width: 35%;
    }
    .period-between-layout {
        text-align: center;
    }
    .period-between {
        padding-top: 8px;
        width: 30px;
    }
    /* ステータス */
    .reduction-procedure-status {
        display: flex;
    }
}

/* --手続き２-- */
/* テーブル */
.step2-table-layout {
    display: block;
}
.step2-table {
    border: 1px solid #044D9B;
    border-collapse: separate;
    overflow: hidden;
    border-spacing: 0;
    text-align: center;
}
.step2-table-left th, .step2-table-left td {
    vertical-align: middle;
    border-right: 1px solid #044D9B;
    border-bottom: 1px solid #044D9B;
    background-color: #B1C8E0;

    &:last-child {
      border-right: none;
    }
}
.step2-table-right th, .step2-table-right td {
    vertical-align: middle;
    border-right: 1px solid #044D9B;
    background-color: #044D9B;

    &:last-child {
      border-right: none;
    }
}
.step2-table th {
    min-width: 7rem;
    white-space: nowrap !important;
}
.step2-table-right th {
    color: #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
}
.step2-table td {
    padding: .6em 1em;
    width: 13rem;
    height: 4rem;
    background-color: #E6EEF5;
    text-align: left !important;
}
.step2-table-right td {
    background-color: #FFFFFF;
    border-bottom: 1px solid #044D9B;
}
.step2-table tr {
    &:last-child {
      th, td {
        border-bottom: none;
      }
    }
}
.step2-info-layout {
    display: flex;
    justify-content: flex-end;
    width: 75.5%;
}
.step2-info-layout #message-span {
    width: 77%;
}
.speech-bubble {
    position: relative;
    background: #777;
    color: white;
    padding: 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.6;
    width: 100%;
    max-width: 35rem;
    word-break: break-word;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    box-sizing: border-box;
}

/* 吹き出しの三角形 */
.speech-bubble::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 1.5rem; /* px指定で画面幅に依存しない */
    border-width: 0 10px 10px 10px;
    border-style: solid;
    border-color: transparent transparent #777 transparent;
}
@media (min-width: 600px) {
    .step2-table-layout {
        display: flex;
        justify-content: center;
        width: 90%;
    }
    .step2-table-left {
        width: 30rem;
    }
    .step2-table-right {
        width: 35rem;
    }
    .step2-right-table-m {
        margin-right: 1rem;
        margin-bottom: 0;
    }
    .step2-table th {
        padding: .6em 1em;
    }
    .step2-table td {
        padding: .6em 2em;
        width: 27rem;
    }
    .step2-table-layout {
        display: flex;
        justify-content: start;
        width: 85%;
    }
}
@media (min-width: 768px) and (max-width: 1399px) {
    .step2-info-layout {
        width: 84%;
    }
    .step2-info-layout #message-span {
        width: 86%;
    }
}
@media (min-width: 600px) and (max-width: 767px) {
    .step2-info-layout {
        width: 85%;
    }
    .step2-info-layout #message-span {
        width: 100%;
    }
}
@media (max-width: 599px) {
    .step2-info-layout {
        width: 100%;
    }
    .step2-info-layout #message-span {
        display: none;
    }
}

/* --手続き３-- */
.step3-table-sp {
    display: block;
}
.step3-table-pc {
    display: none;
}
.step3-table-layout {
    display: block;
}
.step3-table {
    border: 1px solid #1F8AAC;
    border-collapse: separate;
    overflow: hidden;
    border-spacing: 0;
    text-align: center;
}
.step3-table th, .step3-table td {
    vertical-align: middle;
    border-right: 1px solid #1F8AAC;
    border-bottom: 1px solid #1F8AAC;
    background-color: #1F8AAC;

    &:last-child {
        border-right: none;
    }
}
.step3-table th {
    white-space: nowrap !important;
    color: #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
}
.step3-table td {
    width: 13rem;
    padding: .6em 1em;
    background-color: #FFFFFF;
    text-align: left !important;
}
.step3-table tr {
    &:last-child {
      th, td {
        border-bottom: none;
      }
    }
}
.step3-info-layout {
    color: #D24723;
    text-align: start;
    display: flex;
    align-items: center;
}
.checkbox-lg {
    width: 1.5em;
    height: 1.5em;
    margin-top: 0; /* ラベルとの縦位置微調整 */
    border-color: #a1b2c3;
}
@media (min-width: 600px) {
    .step3-table-sp {
        display: none;
    }
    .step3-table-pc {
        display: block;
    }
    .step3-table-layout {
        display: flex;
        justify-content: start;
        width: 85%;
    }
    .step3-table {
        width: 35rem;
    }
    .step3-table th {
        padding: .6em 1em;
    }
    .step3-table td {
        padding: .6em 2em;
        width: 22rem;
    }
    .step3-check-w {
        width: 75%;
    }
    .border-t {
        border-top: 1px solid #1F8AAC !important;
    }
}

/* 手続き４ */
.step4-text {
    color: #FE4931;
}
.btn-info {
    --bs-btn-bg: #02BC9A !important;
    --bs-btn-border-color: #02BC9A !important;
    --bs-btn-hover-bg: #009A7E !important;
    --bs-btn-hover-border-color: #009A7E !important;
    --bs-btn-active-bg: #009A7E !important;
    --bs-btn-active-border-color: #009A7E !important;
}
.step4-accordion-w {
    width: 100%;
}
@media (min-width: 600px) {
    .step4-accordion-w {
        width: 75%;
    }
}

/* 届出書作成履歴 */
.history-w {
    width: 100%;
}
@media (min-width: 600px) {
    .history-w {
        width: 50%;
    }
    .history-member-info {
        display: flex;
        justify-content: center;
    }
}

/* 被保険者検索結果欄 */
.table-wrapper {
    max-height: 365px;  /* 6件以上ならスクロールバー */
    overflow-y: auto;   /* 縦スクロールを有効にする */
    border: 1px solid #ddd; /* ボーダーで枠をつける */
}

input[type="checkbox"]:disabled {
    background-color: #ccc !important; /* 明るめグレー */
    border-color: #bbb !important;
    opacity: 1 !important;
}

/* 被保険者検索条件クリアボタン */
.custom-clear-btn {
    background-color: #ffffff; /* 白背景 */
    color: #000000 !important; /* 黒文字 */
    border-color: #044D9B !important; /* 指定の枠線色 */
}

.custom-clear-btn:hover {
    background-color: #044D9B !important; /* ホバー時：濃い青 */
    color: #ffffff !important; /* ホバー時：白文字 */
}

.numbered-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1em;
}

.numbered-item .num {
    width: 1.5em; /* 必要に応じて調整 */
    flex-shrink: 0;
    font-weight: bold;
}

.numbered-item .text {
    flex: 1;
}