@charset "utf-8";
.selfcheckbox {padding: 30px;border: 1px solid #ced4da;border-radius:1em;overflow: hidden;background: #FFF;}
.step-group { display: none; animation: fadeIns 0.5s; }
.step-group.active { display: block; }
.step-group .title {font-weight: bold;font-size:140%;color: #1270c0; margin-bottom:.5em; text-align:center;}
.selfcheckbox .check-item {display: flex;align-items: center;padding: .5em .8em;margin-bottom: .5em;border: 1px solid #eee;border-radius: .5em;background: #fff;cursor: pointer;transition: all 0.2s;}
.selfcheckbox .check-item:hover {background-color: #f9f9f9;border-color: #e9f2f9;}
.selfcheckbox .check-item:has(input:checked) { color: #0070c0; font-weight:700;background-color: #e6f2ff; border-color: #0070c0; }
.selfcheckbox .check-item input[type="checkbox"] {position: relative;width: 2em;height: 2em;border: 2px solid #ced4da;border-radius: .4em;margin-right: .8em;vertical-align: middle;background-color: #fff;transition: all 0.2s;flex-shrink: 0;}
.selfcheckbox .check-item input[type="checkbox"]:checked { background-color: #0070c0; border-color: #0070c0; }
.selfcheckbox .check-item input[type="checkbox"]::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px;height: 12px; border: solid white;border-width: 0 3px 3px 0;transform: rotate(45deg);opacity: 0;transition: opacity 0.2s; }
.selfcheckbox .check-item input[type="checkbox"]:checked::after {opacity: 1;}

.selfcheckbox .nav-buttons { display: flex; justify-content: space-between; margin-top: 20px; gap: 10px; }
.selfcheckbox .btn-next,.selfcheckbox .btn-result { background-color: #0070c0; width: 100%; }
.selfcheckbox .btn-next:hover, .btn-result:hover { background-color: #0070c0; }
.selfcheckbox .btn-prev { background-color: #6c757d; width: 100%; }
.selfcheckbox .btn-prev:hover { background-color: #5a6268; }
.selfcheckbox #result-area {padding:30px;border-radius:.5em;background-color: #e9f2f9;}

.selfcheckbox button {display: block;width: 100%;padding: .8em 0;background: #0070c0;color: white;font-size:120%;font-weight:800;border-radius:.4em;cursor: pointer;margin-top:1em;border: none;}
.selfcheckbox button:hover {background: #007bff;}
.selfcheckbox .result-title {font-weight: bold;font-size:140%;color: #d35400;}
.selfcheckbox .step-indicator {text-align: center;margin-bottom: 20px;color: #888;font-size: 0.9em;position: relative;}
@keyframes fadeIns { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.progress-container {width: calc(100% + 60px);background-color: #e0e0e0;height: 15px;overflow: hidden;position: absolute;top: -30px;left: -30px;}
.progress-bar { height: 100%; background-color: #007bff; width: 33.3%; transition: width 0.3s ease; }


@media screen and (max-width: 650px) {
.selfcheckbox {padding:1.5em 4%;border-radius:.5em;}
.selfcheckbox #result-area {padding:4%;}
.progress-container { height: 15px; top: -1.8em;left: -5%;}
.step-group .title {font-size:6vw; line-height:1.4;word-break: auto-phrase;font-feature-settings: "palt";}
.selfcheckbox .check-item { line-height:1.4;word-break: auto-phrase;font-feature-settings: "palt"; }
}