body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #F8FBFB;
    /* 背景色を変更 */
    color: #333;
    line-height: 1.6;
    padding: 0;
    /* bodyのpaddingを削除 */
    margin: 0;
}

header {
    /* background-color: #ffffff;
    padding: 20px 30px; */
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    /* --- ▼ ここから追加 ▼ --- */
    position: sticky;
    top: 0;
    z-index: 10;
    /* --- ▲ ここまで追加 ▲ --- */
    padding: 12px;
    background: #192A62;
}

header h1 {
    /* margin: 0;
    text-align: center;
    color: #2c3e50;
    font-size: 24px; */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

/*
.contact-banner {
    background-color: #232F6A;
    padding: 10px 30px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 16px;
}*/

/*黄色バナー*/
/*
.contact-banner.contact-banner--yellow{
    background-color: #FFA300;
}

.contact-banner p {
    margin: 0;
    text-align: center;
    color: #ffffff;
    font-size: 18px;
    text-decoration: none;
}

.contact-banner .contact-banner-btn {
    padding: 0 12px;
    margin: 0;
    text-align: center;
    color: #ffffff;
    font-size: 18px;
    text-decoration: none;
    border: solid #ffffff 2px;
    border-radius: 8px;
}*/


.container {
    /* max-width: 830px; */
    margin: 20px auto 40px;
    /* 上下のmarginを調整 */
    padding: 30px;
    border-radius: 8px;
    /* max-width: 890px; */
    max-width: 790px;
    padding: 30px 8px;
}

/* h1の個別スタイルはheader h1に統合されたため不要 */

.form-group {
    margin-bottom: 25px;
}

.form-group.bb-step-group{
    background-color: #FFFFFF;
    padding: 15px 14px;
    border-radius: 8px;
    /*border: 1px solid #e9e9e9;*/
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.25);
}

label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}

.form-group>label,
.form-label label {
    font-size: 20px;
    /*color: #232F6A;*/
    color:#333;
}

.section-title {
    font-size: 24px!important;
    text-align: center;
    margin-bottom: 8px;
}

.section-title img{
    max-width: 45px;
    display: block;
    place-self: center;
    margin: 13px auto 0;
}

.section-title h2{
    margin: 0;
    font-size: 28px!important;
    text-align: center;
    color: #232F6A;
}

.section-title .form-label-step{
    place-self: center;
    font-weight: bold;
    font-size: 24px;
    padding: 0 24px;
    margin: 8px 0;
}

.bb-step-section .section-title{
    margin:0;
}
.bb-step-section .section-title .form-label-step{
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 0;
    margin: 0;
    background:#333333;
    color:#fff;
    line-height:1.2;
    border-radius: 8px 8px 0 0;
}
.bb-step-section .section-title .form-label-step:after{
    content: "";
    position: absolute;
    background:#333333;
    width:100%;
    height:100%;
    left:0;
    right:0;
    bottom:-10px;
    z-index: -1;
}
.bb-step-section .section-title .form-label-step span{
    font-size:48px;
}

.required {
    color: #e74c3c;
    font-weight: normal;
}

input[type="text"] {
    width: 100%;
    padding: 12px;
    /*border: 1px solid #ccc;*/
    border: 2px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 16px;
    transition: border-color 0.2s;
}

input[type="text"]:focus {
    border-color: #3498db;
    outline: none;
}

.hidden {
    display: none !important;
}

/*　初期状態で非表示のグループ　*/
.Initially-hidden-groups {
    display: none;
}

button {
    width: 100%;
    padding: 15px;
    font-size: 17px;
    font-weight: bold;
    color: #fff;
    background-color: #3498db;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s, opacity 0.3s;
}

button:hover:not(:disabled) {
    background-color: #2980b9;
}

button:disabled {
    background-color: #bdc3c7;
    cursor: not-allowed;
    opacity: 0.7;
}

.plan-buttons-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.plan-buttons-group-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;    /* 残りのスペースを均等に分割する。*/
    gap: 10px;
    background-color: #FFFFFF;
    padding: 35px 14px 35px 14px;
    border-radius: 8px;
    border: 1px solid #e9e9e9;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.plan-button-label {
    cursor: pointer;
}

.plan-button-fullwidth {
    flex-basis: 100%;
}

.hidden-radio {
    display: none;
}

.plan-button-text {
    display: block;
    padding: 12px 10px;
    border: 2px solid #514C53;
    background-color: #EAEEF5;
    color: #514C53;
    border-radius: 8px;
    text-align: center;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}


.plan-table {
    width: 100%;
    margin-top: 5px;
    font-size: 12px;
    border-collapse: collapse;
}

.plan-table td {
    padding: 2px 0;
    border: 1px solid #514C53;
    text-align: center;
    width: 20%;
}

.plan-button-text b {
    display: block;
    margin-bottom: 5px;
}

.plan-button-label input[type="radio"]:checked+.plan-button-text {
    background-color: #2F446D;
    border-color: #2F446D;
    color: #FFFFFF;
}

.plan-button-label input[type="radio"]:checked+.plan-button-text::before {
    content: '✓';
    font-weight: bold;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.plan-button-label input[type="radio"]:checked+.plan-button-text .plan-table td,
.plan-button-label input[type="radio"]:checked+.plan-button-text b {
    color: #FFFFFF;
    border-color: #FFFFFF;
}

/* ページ内リンク　先頭がヘッダーに隠れないように調整 */
#customization-section {
    scroll-margin-top: 90px;
}

.skyper-link-container {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.skyper-button {
    display: inline-block;
    padding: 10px 15px;
    font-size: 14px;
    text-decoration: none;
    color: #fff;
    background-color: #007bff;
    border-radius: 4px;
    text-align: center;
    margin-top: 10px;
}

.skyper-button:hover {
    background-color: #0056b3;
}

#skyper-qr-code {
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    padding: 5px;
}

.step-label ,p , label{
    font-size: 18px;
}

.note {
    color: #e74c3c;
    font-size: 16px;
    margin-top: 5px;
    margin-bottom: 15px;
}

#modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
}

.modal-window {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    z-index: 101;
    width: 90%;
    max-width: 500px;
}

.modal-content {
    text-align: center;
}

.modal-title {
    font-size: 24px;
    margin-bottom: 20px;
}

.modal-description {
    font-size: 14px;
    color: #333;
    margin-bottom: 20px;
    text-align: start;
}

.modal-form-group {
    margin-bottom: 20px;
    text-align: left;
}

.tel-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tel-input {
    width: auto;
    flex-grow: 1;
    padding: 8px;
    text-align: center;
}

.tel-input-group span {
    font-weight: bold;
}

.modal-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.red-bold {
    color: #e74c3c;
    font-weight: bold;
}

#search-id-button,
#close-tel-modal-button,
#close-result-modal-button,
#close-confirm-modal-button,
#confirm-id-button {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#search-id-button,
#confirm-id-button {
    background-color: #3498db;
    color: #fff;
}

#search-id-button:disabled,
#confirm-id-button:disabled {
    background-color: #bdc3c7;
    cursor: not-allowed;
}

#close-tel-modal-button,
#close-result-modal-button,
#close-confirm-modal-button {
    background-color: #e74c3c;
    color: #fff;
}

#back-to-tel-modal-button,
#back-to-tel-modal-button-2,
#back-to-tel-modal-button-3,
#back-to-result-modal-button {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: #ccc;
    color: #333;
}

.search-result-box {
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 4px;
    background-color: #f9f9f9;
    text-align: left;
    margin-bottom: 20px;
}

.search-result-item {
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background-color: #e9ecef;
}

.search-result-box p {
    margin: 0;
}

.highlighted-block {
    background-color: #EAEEF5;
    border-radius: 8px;
    padding: 25px 30px;
    /* margin: 0 -30px 8px -30px; */
    margin: 0 auto 8px auto;
}

.highlighted-block .form-group {
    /*margin-bottom: 0;*/
    /*padding-bottom: 25px;*/
}

.highlighted-block .form-group:last-child {
    border-bottom: none;
    /*padding-bottom: 0;*/
}

.customize-plan-title {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-top: 40px;
    margin-bottom: 20px;
    color: #2c3e50;
}

.btn-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.btn-radio-label {
    flex: 1;
    min-width: 120px;
    cursor: pointer;
    font-weight: normal;
}

.btn-radio-input {
    display: none;
}

.btn-radio-text {
    /*display: block;*/
    padding: 12px 10px;
    border: 2px solid #514C53;
    background-color: #EAEEF5;
    color: #514C53;
    border-radius: 8px;
    text-align: center;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 18px;
}

.btn-radio-input:checked+.btn-radio-text {
    background-color: #2F446D;
    border-color: #2F446D;
    color: #FFFFFF;
    font-weight: bold;
}

.btn-radio-input:checked+.btn-radio-text::before {
    content: '✓';
    font-weight: bold;
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
}

.btn-radio-input:checked+.btn-radio-text .sub-text {
    /*color: #FFFFFF;*/
}

.btn-radio-text .sub-text {
    display: block;
    font-size: 14px;
    font-weight: normal;
    margin-top: 4px;
    line-height: 1.2;
}

/* カード本体 */
.btn-radio-group.bb-radio-group .btn-radio-text,
.btn-radio-group-vertical.bb-radio-group .btn-radio-text,
.plan-buttons-group.plan-buttons-group .plan-button-text{
    background-color: #fff;
    border: 2px solid transparent;
    color: #514C53;
    font-weight:500;
    font-size:16px;
    box-shadow: 0 0px 5px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
}

/* 未選択の○ */
.btn-radio-group.bb-radio-group .btn-radio-text::before,
.btn-radio-group-vertical.bb-radio-group .btn-radio-text:before,
.plan-buttons-group.plan-buttons-group .plan-button-text:before{
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #CFCFCF;
    background: #fff;
    box-sizing: border-box;
}

.btn-radio-group.bb-radio-group .btn-radio-input:checked + .btn-radio-text,
.btn-radio-group-vertical.bb-radio-group .btn-radio-input:checked + .btn-radio-text,
.plan-buttons-group.plan-buttons-group .plan-button-label input[type="radio"]:checked+.plan-button-text{
    background-color: #E9EFFF;
    border-color: #556DB0;
    color: #333;
    /*font-weight: 700;*/
}

/* 選択時の「✓」を無効化して、○を塗りつぶしに変更 */
.btn-radio-group.bb-radio-group .btn-radio-input:checked + .btn-radio-text::before,
.btn-radio-group-vertical.bb-radio-group .btn-radio-input:checked + .btn-radio-text::before,
.plan-buttons-group.plan-buttons-group .plan-button-label input[type="radio"]:checked+.plan-button-text::before{
    content: "";
    border-color: #FFFFFF;
    background: #556DB0;
    /*box-shadow: inset 0 0 0 4px #fff;*/
    border: 4px solid #fff;
}

.btn-radio-group-vertical {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

.btn-radio-group-vertical .btn-radio-label {
    min-width: 100%;
}

/*集合住宅（分譲）、集合住宅（賃貸）だけ*/
.btn-radio-group.bb-radio-group .btn-radio-text.btn-radio-text--apartment{
    padding-left: 35px;
    padding-right: 8px;
}

.form-block {
    /*background-color: #FFFFFF;*/
    /*padding: 25px;*/
    /*border-radius: 8px;*/
    /*border: 1px solid #e9e9e9;*/
    /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);*/
}

.form-block-bottom {
    /*background-color: #FFFFFF;*/
    /*padding: 25px;*/
    /*border-radius: 8px;*/
    /*border: 1px solid #e9e9e9;*/
    /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);*/
    display: flex;
    align-items: center;
    /*gap: 30px;*/
    gap:14px;
}

#shopCodeText {
    width: 200px;
    font-size: 24px;
    font-weight: 600;
}

#personCode{
    font-size: 24px;
    font-weight: 600;

}

.manual-plan-block {
    margin-bottom: 20px;
}

.form-row {
    display: flex;
    gap: 20px;
}

.form-row .form-group {
    flex: 1;
}

.info-block {
    background-color: #EAEEF5;
    padding: 25px 30px 5px 30px;
    border-radius: 8px;
    /* margin: 0 -30px; */
    margin: 0 auto;
}

.bb-step-body{
    background:#F2F2F2;
    padding: 18px 0 18px 0;
    border-radius: 8px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}
.form-group.bb-step-section .info-block{
    padding: 18px 11px 0 11px;
    background:none;
}

/*.info-block .form-group {*/
/*    margin-bottom: 20px;*/
/*}*/

.plan-group-title {
    text-align: center;
    font-weight: bold;
    color: #333;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 16px;
}

.manual-plan-block .plan-button-label {
    margin-bottom: 0;
}

.manual-plan-block .plan-button-text {
    padding: 12px 10px;
    font-size: 16px;
}

.manual-plan-block .plan-button-label input[type="radio"]:checked+.plan-button-text {
    font-weight: bold;
}

#niftyTV-options .btn-radio-label {
    flex-basis: calc((100% - 20px) / 3);
    flex-grow: 1;
    min-width: 0;
}

.btn-radio-group-grid .btn-radio-label {
    flex-basis: calc(50% - 5px);
    flex-grow: 0;
}

.plan-button-new {
    border-radius: 8px;
    padding: 8px 8px 8px 28px;
    color: #333;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    position: relative;
    background-color: #EAEEF5;
    border: 2px solid #514C53;
}

.plan-title {
    text-align: center;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 16px;
}

.plan-grid {
    display: flex;
    justify-content: space-around;
    padding-top: 15px;
    border-top: 1px solid #2F446D;
}

.plan-grid-item {
    text-align: center;
}

.plan-grid-header {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #514C53;
    margin-bottom: 5px;
}

.plan-grid-header img {
    width: 16px;
    height: 16px;
    margin-right: 2px;
}

.plan-grid-data {
    font-size: 14px;
    font-weight: bold;
}

.plan-button-label input[type="radio"]:checked+.plan-button-new {
    background-color: #2F446D;
    border-color: #2F446D;
    color: #FFFFFF;
}

.plan-button-label input[type="radio"]:checked+.plan-button-new .plan-grid {
    /*border-top-color: #FFFFFF;*/
}

.plan-button-label input[type="radio"]:checked+.plan-button-new .plan-grid-header {
    /*color: #FFFFFF;*/
}

.plan-button-label input[type="radio"]:checked+.plan-button-new .plan-grid-header img {
    /*filter: brightness(0) invert(1);*/
}

.plan-button-label input[type="radio"]:checked+.plan-button-new::before {
    /*content: '✓';*/
    /*font-weight: bold;*/
    /*color: #FFFFFF;*/
    /*position: absolute;*/
    /*font-size: 20px;*/
    /*left: 4px;*/
    /*top: 50%;*/
    /*transform: translateY(-50%);*/
}

.plan-button-new{
    background-color: #fff;
    border: 2px solid #CFCFCF;
    color: #514C53;
    font-weight: 500;
    font-size: 16px;
}
.plan-button-new:before{
    content: "";
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #CFCFCF;
    background: #fff;
    box-sizing: border-box;
}
.plan-button-new{
    border: 2px solid transparent;
    box-shadow: 0 0px 5px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
}
.plan-button-label input[type="radio"]:checked+.plan-button-new{
    background-color: #E9EFFF;
    border-color: #556DB0;
    color: #333;
}
.plan-button-label input[type="radio"]:checked+.plan-button-new::before{
    content: "";
    border-color: #FFFFFF;
    background: #556DB0;
    /* box-shadow: inset 0 0 0 4px #fff; */
    border: 4px solid #fff;
}

.simulation-grid-container {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    gap: 2px;
}

.sim-grid-header,
.sim-grid-row,
.sim-grid-total-row {
    display: flex;
    border-bottom: none;
}

.sim-grid-header {
    font-weight: bold;
    border-bottom: none;
}

.initial-costs-container .sim-grid-row,
.initial-costs-container .sim-grid-total-row,
.simulation-grid-container .sim-grid-header,
.simulation-grid-container .sim-grid-row,
.simulation-grid-container .sim-grid-total-row {
    background-color: #f8f9fa;
    border-radius: 4px;
    padding: 0 10px;
}

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

.sim-grid-cell {
    flex: 1;
    padding: 8px 5px;
    text-align: right;
    white-space: nowrap;
}

.sim-grid-cell.item-name {
    flex: 2.5;
    text-align: left;
    font-weight: normal;
    white-space: normal;
}

.sim-grid-total-row {
    font-weight: bold;
    font-size: 14px;
    margin-top: 5px;
    padding-top: 5px;
    color: #e74c3c;
    border-bottom: none;
    border-top: 2px solid #333;
}

.simulation-controls {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

#initial-simulation-controls {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.hidden-checkbox {
    display: none;
}

.toggle-switch-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    color: #514C53;
}

.toggle-switch-label span:first-child {
    margin-right: 10px;
}

.toggle-switch-slider {
    position: relative;
    width: 44px;
    height: 24px;
    background-color: #bdc3c7;
    border-radius: 12px;
    transition: background-color 0.2s;
    flex-shrink: 0;
}

.toggle-switch-slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: white;
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
}

.hidden-checkbox:checked+.toggle-switch-slider {
    background-color: #2F446D;
}

.hidden-checkbox:checked+.toggle-switch-slider::before {
    transform: translateX(20px);
}

.initial-costs-container {
    font-size: 12px;
}

.initial-costs-header {
    font-weight: bold;
    font-size: 16px;
    color: #2c3e50;
    text-align: center;
    padding: 10px;
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 10px;
}

.initial-costs-subheader {
    font-weight: bold;
    color: #495057;
    margin-top: 15px;
    margin-bottom: 5px;
    padding-left: 5px;
}

#initial-costs-toggles-container .toggle-switch-label {
    justify-content: space-between;
    width: 100%;
    font-size: 12px;
    font-weight: normal;
    padding: 4px 0;
}

.dimmed-option {
    opacity: 0.4;
    cursor: not-allowed;
}

.form-actions-group {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

/* --- ▼ ボタン幅を調整 ▼ --- */
#manualInputButton {
    flex: 1;
}

#submitButton {
    flex: 1.2;
}


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

.btn-secondary:hover:not(:disabled) {
    background-color: #5a6268;
}

#manual-input-modal .modal-buttons button {
    width: auto;
    /* ボタンの幅を自動調整 */
    flex-grow: 1;
    /* ボタンが均等にスペースを分け合う */
}

/* --- ▼ ポップアップのボタン配色を逆に ▼ --- */
#manual-input-modal .modal-buttons button:first-child {
    /*background-color: #3498db;*/
    background-color: #6c757d;
    color: #fff;
}

#manual-input-modal .modal-buttons button:last-child {
    /*background-color: #6c757d;*/
    background-color: #3498db;
    color: #fff;
}

/* ▼ スマホで手続きを開始モーダル内のスタイル調整 ▼ */
#qrScanSubmitProgress {
    margin-bottom: 8px!important;
    display: inline-block;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
    color: #fff;
    padding: 8px 15px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    background-color: #326CAB;
    text-align: center;
    vertical-align: middle;
    border: none;
    border-radius: 4px;
    transition: background-color 0.3s, opacity 0.3s;
    box-shadow: 0 4px 0 #002E61;
}

#qrScanSubmitProgress:hover {
    opacity: .9;
}

#qrScanSubmitIpad {
    margin-bottom: 8px!important;
    display: inline-block;
    text-decoration: none;
    width: 300px;
    box-sizing: border-box;
    color: #fff;
    padding: 8px 15px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    background-color: #326CAB;
    text-align: center;
    vertical-align: middle;
    border: none;
    border-radius: 4px;
    transition: background-color 0.3s, opacity 0.3s;
    box-shadow: 0 4px 0 #002E61;
}

#qrScanSubmitIpad:hover {
    opacity: .9;
}

.qr-scan-back-button {
    margin-bottom: 8px;
    background-color: #6F6D6D;
    width: 150px;
    box-shadow: 0 4px 0 #3C3C3C;
}

.qr-scan-back-button:hover {
    background-color: #6F6D6D!important;
    opacity: .9;
}


/* ▼ 転用/事変時のTV工事不要ボタンのスタイル調整 ▼ */
.btn-radio-group-grid .full-width-grid-item {
    flex-basis: 100%;
}

.full-width-grid-item .btn-radio-text {
    /* テキストが長くなるため、折り返して中央揃えになるよう調整 */
    flex-direction: column;
}

.full-width-grid-item .sub-text {
    display: inline;
    /* 改行させず、横並びにする */
    font-size: inherit;
    /* 親要素のフォントサイズを継承する */
    margin-top: 0;
    font-weight: inherit;
    /* 親要素の太さを継承する */
}

/*ラベル　1/14等*/
.form-label {
    display: flex;
    gap: 8px;
    align-items: center;
}

.form-label-step {
    padding: 4px 12px;
    color: #FFF;
    background-color: #556EB1;
    border-radius: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    font-size: 18px;
    max-width: 80px;
}

select#shopCode {
    height: 56px!important;
    padding: 12px !important;
    width: 100%;
    border-radius: 4px;
    border: 1px solid #ccc;
    /*background-color: #FFF !important;*/
    border:1px solid #A8A8A8;
    color: #333;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 30px !important;
    background-image:
        url("../../input/img/icon_select_arrow.svg"),
        linear-gradient(to bottom, #ffffff 0%, #DADADA 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: right 11px center, 0 0;
    background-size: 13px 16px, 100% 100%;
    background-color: #fff;
}


/*modal内の閉じるボタン非表示*/
#close-tel-modal-button,
#close-confirm-modal-button,
#close-result-modal-button {
    display: none !important;
}


/* ===============================
   ×閉じるボタン専用（他と干渉しない）
================================= */
.close-cross-button {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 0;
    color: #222;
    font-size: 26px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.close-cross-button:hover {
    background-color: #fff !important;
}
/*セレクトボックス文字サイズ*/
select ,
select option{
    font-size: 16px;
}
@media (min-width: 768px) {
    label[for="shopCode-count"],
    label[for="personCode"]{
        white-space: nowrap;
    }
}
@media (max-width: 768px) {
    label[for="shopCode-count"],
    label[for="personCode"]{
        display: flex;
        flex-direction: column;
    }
}
.plan-button-block{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    background-color: #FFFFFF;
    padding: 20px 14px 35px 14px;
    border-radius: 8px;
    border: 1px solid #e9e9e9;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.plan-button-block div{
    height: 105px;
}


/* 金剛登録ボタン */
.kongo-register-btn{

}

.kongo-register-btn a{
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 500px;
    padding: 25px 15px;
    margin: 0 auto;
    /* font-size: 18px; */
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    background-color: #3498db;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s, opacity 0.3s;
    box-sizing: border-box;
}

.kongo-register-btn a:hover{
    background-color: #2980b9;
}



/*追加セクション css*/

.bb-container .info-block{
    padding: 14px 9px;
}

.bb-subtitle{
    font-size: 32px;
    text-align: center;
    margin: 0 0 23px 0;
    padding: 0;
}

.mode-tabs {
  display: flex;
  padding: 5px 5px;
  margin-bottom: 20px;
  border-radius: 5px;
  border: 2px solid #556DB0;
}

.mode-tab {
  flex: 1;
  border-radius: 5px;
  /* border: 2px solid #556DB0; */
  padding: 6px 4px;
  font-size: 24px;
  text-align: center;
  background: #fff;
  color: #556EB1;
    font-weight: 600;
}

.mode-tab.is-active {
  background: #556DB0;
  color: #fff;
  font-weight: 600;
}

.mode-tabs .mode-tab:hover{
    background: #556DB0;
    color: #fff;
}

.bb-container .form-group{
    background-color: #FFFFFF;
    padding: 16px 14px;
    border-radius: 8px;
    border: 1px solid #e9e9e9;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

}

.bb-container .form-block{
    padding: 0;
    border-radius: unset;
    border: none;
    box-shadow: none;
}

/* 郵便番号 */
.bb-input-row{
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
}

.bb-input-row.bb-zip input{
    font-size: 32px;
    font-weight: bold;
    padding: 6px 12px;
    /* width: 27%; */
    border-radius: 8px;
    /*border: 2px solid #514C53;*/
    /*background-color: #EAEEF5;*/
    height: 57px;
    text-align: center;
}

.bb-input.bb-input--zip2{
    width: 100%;
    max-width: 232px;
}

.bb-input.bb-input--zip1{
    width: 100%;
    max-width: 176px;
}

/* 電話番号 */
.bb-input-row.bb-tel input{
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    transition: border-color 0.2s;
    font-size: 30px;
    font-weight: bold;
    padding: 6px 12px;
    width: 27%;
}

.btn-radio-group--consent .btn-radio-text{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    line-height: 1.2;
    text-align: center;
}

.btn-radio-group--consent .btn-radio-text-sub{
  display: block;
  font-size: 15px;
}

/* 検索 */
.bb-search-btn-wrap{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    gap: 15px;
    margin-top: 20px;
    margin-bottom: 42px;
}

.bb-search-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 15px 8px 15px;
    border-radius: 8px;
    border: none;
    /* background: #336CAB;
    color: #fff; */
    font-weight: bold;
    cursor: pointer;
    transition: opacity .15s ease;
    width: 100%;
    max-width: 157px;
    height: 54px;
    margin: 0;
    text-align: center;
    background-color: #336CAB!important;
    box-shadow: 0 4px 0 #1E3165;
    font-size: 24px;
}

.bb-search-btn.kantan-btn{
    height: 84px;
    max-width: 318px;
    gap: 20px;
}

.bb-search-btn p{
    margin: 0;
    font-size: 24px;
}

.bb-search-btn p span{
    font-size: 16px;
}

/* 検索 */
.bb-search-btn--search{
    background: #336CAB!important;
    color: #fff;
    box-shadow: 0 4px 0 #1E3165;
}

/* リセット */
.bb-search-btn--reset{
    background: #6F6D6D!important;
    color: #fff;
    box-shadow: 0 4px 0 #3C3C3C;
}

.bb-search-btn:hover{
    /* opacity: .9; */
}

.search-icon img{
    display: block;
    width: 30px;
    height: 30px;
}

/*------
住所検索モーダル
--------*/
.bb-modal{
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 9999;
}

.bb-modal.is-open{
    opacity: 1;
    pointer-events: auto;
}

.bb-modal__overlay{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
}

.bb-modal__dialog{
    position: relative;
    width: min(805px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    background: #fff;
    border-radius: 8px;
    /*overflow: hidden;*/
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    display: flex;
    flex-direction: column;
}

/* ヘッダー（青バー） */
.bb-modal__head{
    background:#556DB0;
    padding:10px 12px;
    border-radius: 8px;
}

.bb-modal__title{
    background: none;
    color:#fff;
    text-align:center;
    font-size:24px;
    font-weight: 700;
    margin: 0;
}

/* 中身 */
.bb-modal__body{
    padding: 20px 17px;
    background: #EFEFEF;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}
/* 閉じるボタン */
.bb-modal__x.close-cross-button{
    color: #fff!important;
    background: none;
}
.bb-modal__x.close-cross-button:hover{
    background: rgba(255, 255, 255, 0.15)!important;
}

/* 住所表示 */
.bb-address__selected{
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #333333;
    border-radius: 5px;
    padding: 10px 10px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    min-height: 88px;
}
.bb-address__selected-mark{
    flex: 0 0 auto;
    font-weight: 700;
    color: #333;
}
.bb-address__selected-text{
    color: #222;
    font-weight: 600;
}

/* 説明 */
.bb-address__note{
    margin: 26px 0 10px;
    text-align: center;
    color: #333333;
    font-size: 20px;
    font-weight: 500;
}

/* 3カラム固定 */
.bb-address__grid-wrap{
    overflow: hidden;
    border: 1px solid #333333;
    padding: 19px 18px;
    border-radius: 5px;
    overflow: auto;
    max-height: 225px;
}

.bb-address__grid{
    /*display: grid;*/
    /*grid-template-columns: repeat(3, minmax(0, 1fr));*/
    display: flex;
    flex-wrap: wrap;
    gap:16px 14px;
    margin-bottom: 14px;
}

/* ボタン見た目 */
.bb-address__cell{
    height: 46px;
    border: 1px solid #556DB0;
    border-radius: 5px;
    background: #fff!important;
    color: #556DB0;
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    margin: 0;
    box-sizing: border-box;
    flex: 0 0 calc((100% - 14px * 2) / 3); /* 3列分 */
}

/*100%*/
.bb-address__cell--wide{
    flex-basis: 100%;
}

.bb-address__cell input{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.bb-address__cell:has(input:checked){
    background: #556DB0!important;
    color: #fff;
}

.bb-address__cell:hover{
  /* filter: brightness(0.98); */
}

/* 直接入力行（右に確認ボタン） */
.bb-address__direct{
    margin-top: 20px;
    gap: 10px;
    padding: 0 2px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.bb-address__direct-label{
    font-size: 20px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    margin-bottom: 0;
}

.bb-address__direct .bb-address__direct-input{
    height: 48px;
    border-radius: 3px;
    border: 1px solid #8B8B8B;
    padding: 0 10px;
    background: #fff;
    font-size: 20px;
    outline: none;
    max-width: 207px;
}

.bb-address__direct-btn{
    width: auto;
    height: 42px;
    padding: 0 12px;
    border: none;
    border-radius: 8px;
    background: #336CAB!important;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 0 #1E3165;
}
/* .bb-address__direct-btn:hover{ opacity: .92; } */

/* 下部ボタン */
.bb-address__actions{
    margin-top: 30px;
    display: flex;
    gap: 14px;
    justify-content: center;
}

/* 検索時メッセージ */
.bb-address__message{
    margin: 10px 0 10px;
    text-align: center;
    color: #e74c3c;
    font-size: 20px;
    font-weight: 500;
}

.bb-address__message span{

}
.bb-address__message span.hide{
    display: none;
}

.bb-btn{
    max-width: 132px;
    width: 100%;
    height: 46px;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 20px;
    cursor: pointer;
    padding: 8px 16px;
}
.bb-btn:disabled{
    opacity: 0.3 !important;
}
.bb-btn--back{
    background: #6F6D6D!important;
    color: #fff;
    box-shadow: 0 4px 0 #3C3C3C;
}
.bb-btn--close{
    background: #EF5350!important;;
    color: #fff;
    box-shadow: 0 4px 0 #980502;
}
.bb-btn--skip{
    background: #ED9150!important;
    color: #fff;
    box-shadow: 0 4px 0 #93610F;
}
/* .bb-btn:hover{ opacity: .92; } */



/* 矢印 */
.bb-arrow-down {
    width: 0;
    height: 0;
    margin: -8px auto 12px auto;
    border-left: 28px solid transparent;
    border-right: 28px solid transparent;
    border-top: 28px solid #2F446D;
}

.arrow-down {
    width: 0;
    height: 0;
    margin: 16px auto;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 40px solid #2F446D;
}


/**/
.form-group.bb-section.bb-result{
    /* padding: 8px 16px; */
    padding:27px 11px 0 11px;
    margin-bottom: 0;
}

/*住所*/
.bb-result-address{
    border:2px solid #33333340;
    border-radius: 5px;
    margin-bottom: 8px;
    background: #fff;

}

.bb-result-head{
    font-size: 24px;
    font-weight: bold;
    line-height: 1.3;
    color: #fff;
    text-align: center;
    padding: 4px 0;
    margin: 0;
    background: #556DB0;
    border-radius: 0 0 5px 5px;;
}

.bb-result-address p{
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
    color: #333;
    text-align: center;
    padding:25px 16px;
    margin: 0;
}

.bb-provider-contract-result,.bb-provider-area-result{
    border-radius: 8px;
    background: #fff;
    padding: 0 0 18px 0;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.25);
}
.bb-provider-contract-result{
    margin-top: 11px;
    margin-bottom: 20px;
}

.form-group.bb-section.bb-result-in{
    padding: 0 15px;
    margin-bottom: 0;
}

.bb-result-header{
    display: flex;
    justify-content: center;
    margin-bottom:20px;
    background: #556DB0;
    border-radius: 8px;
    padding:6px 18px;
}
.bb-result-header h3{
    font-size: 20px;
    color: #fff;
    /*background: #232F6A;*/
    /*border-radius: 30px;*/
    /*padding:10px 34px;*/
    margin: 0;
    /*display: inline-block;*/
    text-align: center;
}

/* ホーム / マンションタブ */

.bb-plan-block{
    margin: 20px 0 8px 0;
}

.bb-plan-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    gap: 6px;
}

.bb-plan-tab {
    font-size: 20px;
    text-align: center;
    padding: 7px 0;
    font-weight: 700;
    background: #CFCFCF;
    color: #fff;
    cursor: pointer;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    gap: 7px;
}

.bb-plan-tab span{
    display: flex;
}

/* .bb-plan-tab:hover {
    opacity: 0.9;
} */

/* ホームタイプ（選択中） */
.bb-plan-tab--home.is-active {
    background: #E67A39;
}

.bb-plan-tab--home{
    background: #FAD5B7;
}

/* マンションタイプ */
.bb-plan-tab--mansion.is-active  {
    background: #5EBCB1;
}

.bb-plan-list { display: none; }
.bb-plan-list.is-active{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    background: #FFF5DA;
    padding: 10px 8px 8px;
    border-radius: 5px;
    border: 2px solid #E0713C;
}
/* .bb-plan-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    background: #FFF5DA;
    padding: 10px 8px 8px;
    border-radius: 0 0 8px 8px;
    border: 2px solid #E0713C;
} */

.bb-plan-tab.is-disabled{
    /* opacity: .45; */
    pointer-events: none;
    cursor: default;
    background: #D5D5D5;
}

.bb-plan-list.tab--mansion{
    background: #D6E4D9;
    border: 2px solid #5EBCB1;
}

.bb-plan-item {
    background: #fff;
    border-radius: 5px;
    padding: 0;
    text-align: center;
    overflow: hidden;
    border: 2px solid #E0713C;
    display: flex;
    flex-direction: column;
}

.bb-plan-list.tab--mansion .bb-plan-item{
    border: 2px solid #5EBCB1;
}

.bb-plan-name {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 3px;
    color: #fff;
    background: #E67A39;
    padding: 3px 0;
}

.bb-plan-list.tab--mansion .bb-plan-name{
    background: #5EBCB1;
}

.bb-plan-name span{
    font-size: 16px;
}

.bb-plan-status{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin-bottom: 5px;
}

/* アイコン部分 */
.bb-plan-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin:10px 0 6px 0;
}

.bb-plan-icon span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bb-plan-icon img {
  /* width: 65px;
    height: 65px; */
    /*display: block;*/
    width: 100%;
    height: auto;
    object-fit: contain;
}

.bb-plan-status span{
  font-size:20px;
  font-weight: bold;
  margin-bottom: 4px;
}

.bb-plan-status .txt-blue{
    color: #00A2FF;
}

.bb-plan-status .txt-red{
    color: #FF4249;
}

.bb-plan-status.status-in-txt{
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.bb-plan-status.status-in-txt span{
    font-size: 16px;
}
.bb-plan-status.status-in-txt .status-note{
    font-size: 14px;
    font-weight: 600;
    color: #6F6D6D;
}

/*番号ポータビリティ*/
.bb-portability{
    border:2px solid #556EB1;
    border-radius: 8px;
}

.bb-portability-title{
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    padding: 3px 0;
    margin: 0;
    background: #556EB1;
    border-radius: 0 0 8px 8px;;
}

.bb-portability p{
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 10px 16px;
    margin: 0;
}

/* 回線タイプ／回線品目／光電話／光テレビ の4カラム */
.line-spec {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-radius: 6px;
    overflow: hidden;
    margin: 10px 0;
    gap: 15px;
}

.line-spec__item {
    text-align: center;
    border: 2px solid #484848;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    min-height: 153px;
    box-sizing: border-box;
}


.line-spec__label {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.3;
    color: #fff;
    text-align: center;
    padding: 8px 0;
    margin: 0;
    background: #484848;
    border-radius:0 0 5px 5px;
}

.line-spec__value {
    padding: 8px 4px 8px 4px;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    color: #484848;
}

.line-spec__sub {
    font-size: 20px;
    margin-top: 5px;
}

.line-spec__accent {
    font-size: 40px;
    font-weight: 700;
}

.line-spec__accent.is-blue{
    color:#4287DB;
}

.line-spec__accent.is-orange{
    color:#FC9C2D;
}

.line-spec__accent.is-red{
    color:#FF4249;
}

.line-spec__accent span {
    font-size: 24px;
}

.line-spec__main {
    font-weight: 700;
}

.line-spec__note {
    margin-top: 5px;
    font-size: 16px;
}


/*固定電話番号*/

.bb-result--tel{
    border:2px solid #484848;
    border-radius: 5px;
    margin-bottom: 8px;
    background: #fff;
}

.bb-result-head-tel{
    font-size: 18px;
    font-weight: bold;
    line-height: 1.3;
    color: #fff;
    text-align: center;
    padding: 8px 0;
    margin: 0;
    background: #484848;
    border-radius: 0 0 5px 5px;
}

.bb-result--tel p{
    font-size: 24px;
    font-weight: bold;
    color: #484848;
    text-align: center;
    padding:6px 16px;
    margin: 0;
}

/*事業者変更承諾番号*/
.accept-number {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: 16px;
}

.accept-number__prefix {
    font-size: 48px;
    font-weight: 700;
    color: #000;
    line-height: 1.2;
}

.accept-number .accept-number__input {
    padding: 6px 12px;
    height: 57px;
    /*border: 2px solid #514C53;*/
    /*background-color: #EAEEF5;*/
    font-size: 30px;
    font-weight: bold;
    border-radius: 8px;
}

/*注意点*/

.bb-caution{
    border: 2px solid #EF5350;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
}

.bb-caution{ display:none; }
.bb-caution.is-active{ display:block; }

.bb-caution__title{
    margin: 0;
    padding: 4px 16px;
    background: #EF5350;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    border-radius:0 0 5px 5px;
}

.bb-caution__body{
    padding: 10px 13px 13px;
}

.bb-caution__lead{
    margin: 0 0 10px;
    color: #2b2b2b;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    line-height: 1.35;
}

/* リスト（番号付き・ピンク背景） */
.bb-caution__list{
    margin: 0;
    padding: 11px 15px;
    list-style: none;
    background: #FFD9D8;
    border-radius: 5px;
}

@media (max-width: 820px) {
    .bb-caution__list{
        padding: 11px 6px;
    }
}

.bb-caution__item{
    color: #EF5350;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 9px;
}

.bb-caution__item:last-child{
    margin-bottom: 0;
}


/*----
マンションタイプ限定　注意文
----*/
.line-info { display: none; }
.line-info.is-active {
    display: block;
    border: 2px solid #FFD932;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
    margin-top: 8px;
}
.line-info{
    /* border: 2px solid #FFD932;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    margin-top: 8px; */
}

.line-info__title{
    margin: 0;
    padding: 4px 16px;
    background: #FFD932;
    color: #444444;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
}

/* 本文 */
.line-info__body{
    padding: 17px 13px 15px;
    line-height: 1.8;
}

.line-info__body .line-info-lead{
    font-size: 15px;
    font-weight: 500;
    margin: 0;
    padding: 0 5px;
    line-height: 1.6;
}
.line-info__alert{
    color: #FF4249;
    font-weight: 500;
}

/* テーブル外側の薄い背景 */
.line-info__table-wrap{
    margin-top: 10px;
    background: #FFF8DF;
    padding: 10px;
    border-radius: 5px;
    overflow: hidden;
    outline: none;
}

/* テーブル本体 */
.line-info__table{
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid #8D8D8D;
    border: none;
}

/* 罫線・セル共通 */
.line-info__table th,
.line-info__table td{
    border: 1px solid #8D8D8D;
    text-align: center;
    vertical-align: middle;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
    font-size: 16px;
}

.line-info__table td{
    font-weight: 500;
    line-height: 1.3;
    padding: 3px 8px;
    min-height: 51px;
    height: 100%;
    height: 51px;
}

/* 外周のセルborderだけ消す（＝“中だけ”になる） */
.line-info__table tr:first-child > *{ border-top: none; }
.line-info__table tr:last-child  > *{ border-bottom: none; }
.line-info__table tr > *:first-child{ border-left: none; }
.line-info__table tr > *:last-child { border-right: none; }

/* 見出し*/
.line-info__table th{
    color:#fff;
    font-size:16px;
    line-height: 1.3;
    padding: 5px 5px;
    font-weight: 500;
}
.line-info__table th small{
    font-size:13px;
}

.line-info__table .th-1{ background:#f2b700; }
.line-info__table .th-2{ background:#f2b700; }
.line-info__table .th-3{ background:#f2b700; }
.line-info__table .th-4{ background:#f2b700; }
.line-info__table .th-5{ background:#f2b700; }


.line-info__table th.th-1{
    width:24%;
    font-size: 15px;
}
.line-info__table th.th-2{
    width:19%;
    font-size: 15px;
}
.line-info__table th.th-3{ width:22%; }
.line-info__table th.th-4{ width:18%; }
.line-info__table th.th-5{ width:17%; }


.line-info__table .td-left{
  /* background:#ffffff; */
}

.line-info__table .td-fee--accent span{
  font-size: 14px;
}

/*----
コンサルアシストモード
----*/
.bb-balloon{
    margin-top: 3px;
    padding: 10px 12px 10px 10px;
    border: 0.5px solid #000000;
    border-radius: 10px;
    background: #f3f6fb;
    display: flex;
    align-items: center;
    gap: 15px;
}

.bb-balloon .icon_nobeko{
    display: inline-block;
}
.bb-balloon .icon_nobeko img{
    width: 100%;
    max-width: 30px;
    height: auto;
    display: block;
}

.bb-balloon__text{
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
}
.btn-radio-group.bb-provider-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
}

.bb-provider-more.is-hidden{
    display: none;
}

/* もっと見るボタンは3列分使う */
.bb-provider-morebtn{
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 175px;
    background: #D8E2FF!important;
    color:#232F6A!important;
    font-size: 18px;
    padding: 9px 15px 9px 15px;
    border-radius: 8px;
}

.bb-line-section{
    background-color: #F4F8FF;
    padding: 10px 12px;
    border-radius: 8px;
}

.bb-line-section:last-child{
    margin-top: 12px;
}

.bb-line-header {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.bb-line-section .bb-line-header h3{
    font-size: 20px;
    color: #fff;
    background: #232F6A;
    border-radius: 30px;
    padding: 2px 34px;
    margin: 0;
    display: inline-block;
    text-align: center;
}

.bb-provider-card__inner {
    display: block;
    /*padding: 12px 10px;*/
    border: 2px solid #514C53;
    /*background-color: #EAEEF5;*/
    color: #514C53;
    border-radius: 8px;
    text-align: center;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 18px;
    box-shadow: inset 0 0 0 0 transparent;
    background: #fff;
    flex-direction: column;
    padding: 0 9px;
    font-weight: 500;
    min-height: 55px;
    line-height: 1.2;
}

.btn-radio-input:checked+.bb-provider-card__inner{
    /*background-color: #2F446D;*/
    border-color: #232F6A;
    /*color: #FFFFFF;*/
    /*font-weight: bold;*/
    box-shadow: inset 0 0 0 3px #232F6A;
}

.bb-provider-card__inner span{
    font-size: 12px;
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
}


/*   結果のご案内（3パターン共通） */
.bb-result-notices{
    display: grid;
    gap: 16px;
}

.bb-notice-card{
    border: 2px solid #556DB0;
    border-radius: 5px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 2px 0 rgba(0,0,0,.06);
}

.bb-notice-bar{
    background: #556DB0;
    color: #fff;
    font-weight: 700;
    text-align: center;
    padding: 10px 12px;
    font-size: 20px;
    line-height: 1.2;
    border-radius: 0 0 5px 5px;
}

/* 本文 */
.bb-notice-body{
    padding: 12px 16px 14px 16px;
}

.bb-notice-body.bb-notice-center{
    display: flex;
    align-items: center;
}

.bb-notice-main{
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.5;
}

.bb-notice-sub{
    margin: 5px 0 0;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 700;
    color: #232F6A;
}

/* 強調（黄色マーカー） */
.bb-highlight{
    display: inline-block;
    font-size: 36px;
    position: relative;
    z-index: 0;
}

.bb-highlight::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    /*bottom: 0.08em;*/
    bottom: 4px;
    height: 0.6em;
    background: #FFC700;
    z-index: -1;
}

.bb-notice-card.is-center .bb-notice-body{
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.bb-result-notices-img img{
    display: block;
    width: 100%;
    height: auto;
}

.bb-notice-card .bb-pill{
    display: inline-flex;
    padding: 5px 18px;
    border-radius: 999px;
    background: #fff;
    vertical-align: middle;
}

.bb-notice-bar-txt{
    font-weight: 700;
    font-size: 24px;
    vertical-align: middle;
}

.bb-notice-row{
    display: flex;
    gap: 8px;
    align-items: center;
}

.bb-notice-row .bb-notice-main{
    font-size: 18px;
}

.bb-notice-row .bb-highlight{
    font-size: 32px;
}

.bb-notice-icon img{
    width: 100%;
    max-width: 31px;
    height: auto;
    object-fit: contain;
    display: block;
}

/*--
所属する都道府県を見るbutton
--*/
.c-toggle-btn{
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.c-toggle-btn__btn{
    position: relative;
    display: inline-flex;
    align-items: center;
    /*gap: 6px;*/
    padding: 6px 22px 6px 9px;
    border: none;
    border-radius: 5px;
    background: #556DB0!important;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    max-width: 230px;
}

.c-toggle-btn__icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
}

.c-toggle-btn__icon img{
    display: block;
    width: 16px;
    height: 16px;
}

.c-toggle-btn__btn::after{
    content: "";
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    position: absolute;
    right: 8px;
    top: calc(50% - 4px);
}

/* =========================
   案内バナー（共通）
========================= */
.bb-note{
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 20px;
}

.bb-note__avatar{
    flex: 0 0 36px;
    width: 36px;
}
.bb-note__avatar img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.bb-note__balloon{
    flex: 1;
    background: #f3f6ff;
    border-radius: 8px;
    padding: 14px 10px;
    display:flex;
    justify-content:center;
}

.bb-note__text{
    margin: 0;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.7;
    color: #222E6A;
    /*display: inline-flex;*/
    /*justify-content: center;*/
    /*align-items: baseline;*/
    display:block;
    text-align:center;
}

.bb-note__em{
    color: #FF3B6E;
    font-weight: 700;
    font-size: 22px;
}

.bb-note__em.f-18{
    font-size: 18px;
}

/*吹き出し　背景なし*/
.bb-note.bb-sim-note{
    justify-content: center;
}
.bb-note.bb-sim-note .bb-note__balloon{
    background: none;
    padding: 0 10px;
    flex: unset;
}

/* =========================
   メリットリスト
========================= */
.bb-merit{
    display: grid;
    gap: 35px;
    margin-bottom: 30px;
}

.bb-merit__item{
    padding: 0;
}

.bb-merit__head{
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
}

.bb-pill{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 16px;
    border-radius: 50px;
    background: #232F6A;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0;
}

.bb-merit__title{
    font-size: 20px;
    font-weight: 700;
    color: #232F6A;
}

.bb-merit__desc{
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
    color: #111827;
}

.bb-txt-em{
    color: #FF3B6E;
    font-weight: 700;
}

/*--乗り換え予定ブランド　線,枠あり--*/
.btn-radio-group.bb-provider-grid.bb-provider-grid--mobilebrand {
    border: 1px solid #333333;
    padding: 15px;
    background: #F6FAFF;
    padding: 18px 12px 8px 12px;
    border-radius: 8px;
    margin-bottom: 18px;
}

/*--スマホ台数--*/
.bb-count-grid{
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 7px;
}

.bb-count-grid .btn-radio-label{
    min-width: auto;
}

.bb-count-grid .btn-radio-text{
    font-size: 24px;
    font-weight: 500;
    align-items: baseline;
    padding: 12px 3px;
    background: #fff;
}

.bb-count-grid .btn-radio-unit{
    font-size: 18px;
}
/*クリック→矢印の位置*/
.bb-count-grid .btn-radio-input:checked+.btn-radio-text::before{
    left: 2px;
    font-size: 20px;
}


/*-----
料金シミュレーション
-----*/

.bb-recommend-avatar{
    display: flex;
}
.bb-recommend-avatar img{
    width: 36px;
    height: auto;
}

.bb-recommend-text img{
    vertical-align: middle;
}

.bb-notice-main.bb-recommend-main{
    display: flex;
    align-items: center;
    gap: 10px;
}

.bb-recommend-main-text-block{
    display: flex;
    align-items: baseline;
}

.bb-recommend-text{
    display: flex;
    margin-right: 6px;
}

.bb-recommend-main-text-block .bb-highlight{

}

.bb-recommend-subnote{
    font-size: 20px;
}

.bb-note.bb-sim-note.border-bg{
    border: 1px solid #e9e9e9;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    background: #fff;
    padding: 13px 16px;
    border-radius: 8px;
}

/* =========================
  シミュレーション見出し
========================= */
.bb-sim-head{
    text-align: center;
    margin: 18px 0 16px;
}

.bb-sim-head__ttl{
    font-size: 24px;
    font-weight: 700;
    color: #232F6A;
    margin: 0 0 6px;
}

.bb-sim-head__sub{
    font-size: 20px;
    font-weight: 500;
    color: #232F6A;
    margin: 0;
}

/* =========================
  比較カードレイアウト
========================= */
.bb-sim-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.bb-sim-col{
    display: flex;
    flex-direction: column;
}

.bb-sim-card{
    border: 1px solid #cfd6e6;
    border-radius: 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    position: relative;
}

/* 上部 */
.bb-sim-card__top{
    padding: 16px;
    text-align: center;
}

.bb-sim-card__top .bb-sim-logo{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 31px;
}

.bb-sim-logo img{
}

.bb-sim-divider{
    height: 1px;
    background: #ccc;
    margin: 12px 0;
}

.bb-sim-price{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.bb-sim-badge{
    display: inline-block;
    background: #5c6fb3;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 14px;
    border-radius: 999px;
    margin-right: 6px;
}

.bb-sim-price__main{
    font-size: 18px;
    font-weight: 700;
    color: #333333;
    display: flex;
    align-items: baseline;
    line-height: 1.5;
}

.bb-sim-price__main span{
    font-size: 24px;
}

.bb-sim-caption{
    background: #f1f1f1;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 50px;
    margin-top: 10px;
    display: inline-flex;
    justify-content: center;
}

/* 中身 */
.bb-sim-card__body{
    padding: 16px;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    gap:10px;
}

.bb-sim-dl{
    margin: 0;
}

.bb-sim-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.bb-sim-row dt{
    font-weight: 600;
}

.bb-sim-row dd{
    margin: 0;
    font-size: 20px;
    font-weight:400;
}

.bb-sim-row dd span{
    font-size: 14px;
}

.bb-sim-plus{
    text-align: center;
    font-size: 20px;
    margin: 10px 0;
}

/* フッター */
.bb-sim-footer{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    background: #F6FAFF;
    color: #222E6A;
    padding: 5px 15px;
}

.bb-sim-footer__label{
    font-size: 15px;
}

.bb-sim-footer__value{
    font-size: 20px;
}

.bb-sim-footer__value span{
    font-size: 14px;
}

/* 割引 */
.bb-sim-discount{
    margin-top: 12px;
}

.bb-sim-discount__bar{
    background: #5c6fb3;
    color: #fff;
    font-size: 14px;
    padding:2px 10px;
    text-align: center;
    width: 100%;
    display: block;
    box-sizing: border-box;
}

.bb-sim-discount__row{
    display: flex;
    justify-content: space-between;
    padding: 8px;
    font-weight: 700;
}

.bb-sim-discount__value{
    color: #1f2f5c;
}

/* オプション */

.bb-sim-options{
    display: flex;
    justify-content: center;
    /*justify-content: space-between;*/
    background: #FFF6CB;
    border-radius: 8px;
    margin:13px auto 0 auto;
    width: calc(100% - 30px);
    gap:15px;
    padding: 10px 18px;
}
.bb-sim-option{
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    margin: 0;
}

.bb-sim-option__input{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* ボタン見た目（既存に合わせて調整してOK） */
.bb-sim-option__btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    height: 28px;
    padding: 0 10px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 14px;
    border: 1px solid #C0C0C0;
    background: #C0C0C0;
    color: #7B7B7B;
    box-shadow: 0 3px 0 rgb(0 0 0 / 80%);
}

/* ON時 */
.bb-sim-option.is-on .bb-sim-option__btn{
    background: #FFB700; /* 既存の黄色に寄せたいなら変更 */
    border-color: #FFB700;
    color: #fff;
}

/* hover */
.bb-sim-option:hover .bb-sim-option__btn{
    filter: brightness(0.98);
}

/* =========================
   料金表　タブ切り替えあり
========================= */
.bb-sim--compare .bb-sim-lead{
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.5;
}

/* tabs */
.bb-sim--compare .bb-sim-tabs{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.bb-sim--compare .bb-sim-tab{
    border: 1px solid #d7d7d7;
    background: #f7f7f7;
    padding: 10px 12px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1.2;
}

.bb-sim--compare .bb-sim-tab span{
    display:block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    opacity: .85;
}

.bb-sim--compare .bb-sim-tab.is-active{
    background: #ffd766;
    border-color: #e8b200;
}
.bb-sim--compare .bb-sim-select{
    position: relative;
    display:block;
    cursor:pointer;
    border-radius: 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    position: relative;
}

/* inputは隠す */
.bb-sim--compare .bb-sim-select__radio{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

/* 左上の〇 */
.bb-sim--compare .bb-sim-select__dot{
    position:absolute;
    left: 10px;
    top: 10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #bdbdbd;
    background:#fff;
    z-index: 2;
}

.bb-sim--compare .bb-sim-select__radio:checked + .bb-sim-select__dot{
    border-color:#1e6ad6;
    box-shadow: 0 0 0 3px rgba(30,106,214,.15);
}
.bb-sim--compare .bb-sim-select__radio:checked + .bb-sim-select__dot::after{
    content:"";
    position:absolute;
    inset: 4px;
    border-radius:50%;
    background:#1e6ad6;
}

/* 選択時にカード枠を強調 */
.bb-sim--compare .bb-sim-select__radio:checked ~ .bb-sim-card{
    outline: 2px solid #1e6ad6;
    outline-offset: -2px;
    border-radius: 10px;
}

/* ロゴ + 右にアイコン */
.bb-sim--compare .bb-sim-logo--with-icons{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.bb-sim--compare .bb-sim-logo__icons{
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.bb-sim--compare .bb-sim-logo__icon{
    display: flex;
    width: auto;
}


.bb-sim-dl.bb-sim-dl--bottom{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap:15px;
}
.bb-sim-row--bottom {
    background:#EFEFEF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:16px 10px;
    gap:10px;
}

.bb-sim-panel .bb-sim-bottom{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 15px;
}


.bb-sim-row--bottom dt{
    font-size:14px;
    font-weight:600;
    line-height: 1.2;
}

.bb-sim-row--bottom dt span{
    font-size:13px;
}

.bb-sim-row--bottom dd{
    margin:0;
    font-weight:400;
    font-size:20px;
}

.bb-sim-row--bottom dd span{
    font-size:14px;
}

#api-running-modal-overlay,
#qr-scan-modal-overlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: #99999999;
    z-index: 9999;
    align-content: center;
    gap: 40px;
    transition: opacity .35s ease, visibility .35s ease;
}

#api-running-modal-overlay.hide,
#api-running-modal-overlay.hidden,
#qr-scan-modal-overlay.hide,
#qr-scan-modal-overlay.hidden {
    opacity: 0;
    visibility: hidden;
}

#api-running-modal-overlay .running-text,
#qr-scan-modal-overlay .running-text {
    color: #222;
    font-size: 30px;
    font-weight: 600;
    background: #fff;
    padding: 4px 12px;
    border: solid 3px #222;
    border-radius: 6px;
}


.btn-radio-group{
  padding-top: 0;
}

.btn-radio-group .btn-radio-label,
.btn-radio-group-vertical .btn-radio-label{
  position: relative;
  align-items: center;
}

#lineItem-options .btn-radio-group-vertical.bb-radio-group{
    margin-bottom:20px;
    padding:18px 20px;
    background:#E8EEF5;
    border-radius: 8px;
}

#niftyTV-step1{
    padding: 18px 20px;
    background: #E8EEF5;
    border-radius: 8px;
}

.btn-radio-group.btn-radio-group-grid,
.btn-radio-group-vertical{
  --balloon-shift: 55px;
}

.btn-radio-label{
  position: relative;
}

.btn-radio-label[data-balloon]:not([data-balloon=""])::before{
  content: attr(data-balloon);
  position: absolute;
  left: 50%;
  top: calc(-1 * var(--balloon-space, 54px) + var(--balloon-shift, 0px));
  transform: translateX(-50%);
  background: #ff4d5a;
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
  padding: 10px 16px;
  border-radius: 10px;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  z-index: 2;
}

.btn-radio-label[data-balloon]:not([data-balloon=""])::after{
  content: "";
  position: absolute;
  left: 50%;
  top: calc(-1 * var(--balloon-space, 54px) + var(--balloon-shift, 0px) + 38px);
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #ff4d5a;
  z-index: 2;
}

.btn-radio-group .btn-radio-label[data-balloon=""]::before,
.btn-radio-group .btn-radio-label[data-balloon=""]::after,
.btn-radio-group-vertical .btn-radio-label[data-balloon=""]::before,
.btn-radio-group-vertical .btn-radio-label[data-balloon=""]::after{
  display: none !important;
}

/*担当者コード　入力*/
.form-block-person{
    display: flex;
    align-items: center;
    gap: 14px;
}
.form-block-person #personName{
    width: 180px;
    border:2px solid #e9ecef;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
 }
#kongoIdWrapper input{
    border:2px solid #e9ecef;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
}

/*qrモーダル*/
.qr-modal{
    max-width: 700px !important;
    padding: 24px !important;
}
@media (max-width: 767px) {
    .qr-modal{
        max-width: 100vw!important;
    }
}
.tabs {
    display: flex;
    flex-wrap: wrap;
    width: 700px;
    gap: 16px;
    justify-content: center;
}

.tab_item {
    flex: 1;
    position: relative;
    height: 60px;
    background-color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid #CCC;
    border-radius: 8px;
}

.tab_item label{
    margin-bottom: 0;
}

/* 本物のラジオボタンは見えないようにして重ねる */
.qr-modal-radio {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 2; /* 一番上に置いてクリックに反応させる */
}

/* --- ラジオボタン --- */
/* 外側（::before） */
.tab_item::before {
    content: "";
    position: absolute;
    left: 6px;
    width: 15px;
    height: 15px;
    border: 2px solid #E2E2E2;
    border-radius: 50%;
    /*margin-right: 10px;*/
    background: #fff;
    display: inline-block;
}
/* 内側（::after） */
.tab_item::after {
    content: "";
    position: absolute;
    left: 9px;
    width: 13px;
    height: 13px;
    background: #5A6CAB !important;
    border-radius: 50%;
    opacity: 0; /* 通常時は消しておく */
    transition: 0.2s;
}

/* 枠全体の色を変える */
.tab_item:has(input:checked) {
    background-color: #EAEFFE;
    /*color: #fff;*/
    border: 1px solid #5A6CAB;
}

/* 外枠の円の色を変える */
.tab_item:has(input:checked)::before {
    border-color: #fff;
}

/* 中のポチを表示する */
.tab_item:has(input:checked)::after {
    opacity: 1;
    background: #fff; /* 枠が青くなるのでポチは白が見やすい */
}


.tab_content {
    display: none;
    width: 100%;
}
.tabs:has(#anotherDevice:checked) #anotherDevice_content,
.tabs:has(#thisIpad:checked) #thisIpad_content {
    display: block;
}

.tab_content_inner{
    display: flex;
    justify-content: space-between;
}

.qr-text-bold{
    font-size: 16px;
    font-weight: 600;
    text-align: start;
}

.qr-contents-title {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}
.circle-number{
    background: #E2E2E2;
    border-radius: 30px;
    height: 29px;
    width: 29px;
    text-align: center;
}
.user-type-title{
    background: #E2E2E2;
    border-radius: 4px;
    max-width: 70px;
    text-align: center;
    padding: 0 20px;
    margin-bottom: 16px;
    font-size: 20px;
}
.user-type{
    background: #E2E2E2;
    border-radius: 4px;
    max-width: 70px;
    text-align: center;
    padding: 0 8px;
}
.tabs .search-result-box{
    padding: 35px;
    height: 375px;
    text-align: center;
    align-content: center;
    border: none;
}

.disable-form {
    pointer-events: none;
    opacity: 0.8;
    background-color: #e9ecef;

}


.bb-step-separator{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #333333;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -30px auto;
    box-shadow: 0 4px 8px rgba(0,0,0,.25);
    border:3px solid #fff;
    position: relative;
    z-index: 1;
}

.bb-step-separator__icon{
    width: 43px;
    height: auto;
    display: block;
}

.bb-availability-badge{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 8px;
    background: #E8EEF5;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin:0 0 10px 0;
}

.bb-label-auto{
    font-size: 16px;
}

/* アイコン位置固定 + テキスト中央固定 */
.bb-form-alert{
    display: grid;
    grid-template-columns: 35px 1fr 10px;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 8px;
    box-sizing: border-box;
    margin-top: 5px;
}

/* 右側のダミー（テキストを真ん中に固定するため） */
.bb-form-alert::after{
    content: "";
}

/* アイコン */
.bb-form-alert__icon{
    display: grid;
    place-items: center;
}
.bb-form-alert__icon img{
    width: 34px;
    height: 34px;
    display: block;
}

/* テキスト */
.bb-form-alert .note{
    margin: 0 !important;
    text-align: center;
    line-height: 1.6;
}

/* danger（赤） */
.bb-form-alert--danger{
    background: #FFD9D9;
}
.bb-form-alert--danger .note{
    color: #FF3A3A;
    font-weight: 700;
    font-size: 16px;
}

/*-------
アバター＋テキスト　吹き出し
-------*/
.bb-optHint{
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin: 10px 0 14px;
}

/* 左のアイコン*/
.bb-optHint__avatar{
    flex: 0 0 36px;
    width: 36px;
    display: flex;
    justify-content: center;
}

.bb-optHint__avatar img{
    width: 36px;
    height: auto;
    display: block;
}

.bb-optHint__bubble{
    flex: 1;
    border: 1px solid #333;
    border-radius: 8px;
    background: #fff;
    padding: 15px 16px;
}

.bb-optHint__text{
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: #333;
    text-align: center;
}

/* -------
オプション加入
-------- */
.checkbox-group .bb-optItem{
    display: grid;
    /*grid-template-columns: 1fr 160px;*/
    gap: 10px;
    align-items: stretch;
}

.checkbox-group{
    display: grid;
    gap: 17px;
    margin:16px 0 16px 0;
}

.checkbox-group .bb-optCard{
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    background: #E9EFFF;
    border: 2px solid #556DB0;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    cursor: pointer;
    margin-bottom: 0;
}

.checkbox-group .bb-optText{
    flex: 1 1 auto;
    text-align: center;
    font-weight: 5500;
    color: #333;
    font-size: 16px;
}

/* 右ボタン */
.checkbox-group .bb-optDetail{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    background: #336CAB;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    /*box-shadow: 0 2px 6px rgba(0,0,0,.15);*/
    cursor: pointer;
}

.checkbox-group .bb-optDetail__icon{
    /*width: 18px;*/
    /*height: 18px;*/
    /*border-radius: 50%;*/
    /*background: #fff;*/
    /*color: #2f6ea7;*/
    /*display: inline-flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    /*font-weight: 900;*/
    /*font-size: 12px;*/
    /*line-height: 1;*/
}

.bb-optDetail__icon img{
    width: 16px;
    height: 16px;
    display: block;
}

/* 必須オプションのチェックボックス見た目を置き換え */
#requiredOptions-checkboxes-only label,
#requiredOptions-checkboxes label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ネイティブを消してデザインを当てる */
#requiredOptions-checkboxes-only input[type="checkbox"],
#requiredOptions-checkboxes input[type="checkbox"]{
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 2px solid #CFCFCF;
    border-radius: 3px;
    background: #fff;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex: 0 0 20px;
}

/* ✓ を描画（未チェック時は透明） */
#requiredOptions-checkboxes-only input[type="checkbox"]::after,
#requiredOptions-checkboxes input[type="checkbox"]::after{
    content: "";
    width: 10px;
    height: 6px;
    border-left: 3px solid #556DB0;
    border-bottom: 3px solid #556DB0;
    transform: rotate(-45deg);
    opacity: 0;
}

#requiredOptions-checkboxes-only input[type="checkbox"]:checked::after,
#requiredOptions-checkboxes input[type="checkbox"]:checked::after{
    opacity: 1;
}