@charset "utf-8";

/************ common ************/
body {
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-size: 20px;
    background: #fffeee;
    width: 100%;
    min-height: 100vh;
    letter-spacing: -0.01em;
    position: relative;
}

:root {
    --box-shadow: 7px 7px 6px -6px rgba(8, 4, 5, .2);
}

main {
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 200px;
}

header {
    background: #fff;
    border-bottom: #ff99a2 2px solid;
}

header .box {
    width: 1200px;
    margin: 0 auto;
    padding: 30px 0;
    display: flex;
    align-items: center;
}

header .box .manager {
    font-weight: bold;
    margin-left: auto;
}

header .box .btn_logout input {
    font-weight: bold;
    background: #a2ff99;
    width: 180px;
    margin-left: 40px;
    border-radius: 20px;
    text-align: center;
    line-height: 2;
    cursor: pointer;
    display: block;
    color: #000000;
    font-size: 20px;
}

.breadcrumb {
    display: flex;
    align-items: center;
}

.breadcrumb p:nth-child(n+2) {
    margin-left: 10px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"] {
    background: #fff;
    width: 100%;
    height: 60px;
    padding: 0 10px;
}

input[type="submit"] {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    width: 300px;
    margin: 0 auto;
    border-radius: 20px;
    text-align: center;
    line-height: 2.857;
    display: block;
}

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"] + label {
    background: #fff;
    width: 17px;
    height: 17px;
    margin-top: 7px;
    border: #000 1px solid;
    position: relative;
    display: block;
    cursor: pointer;
}

input[type="checkbox"] + label::before {
    content: '';
    background: url(../images/check.png) no-repeat;
    width: 14px;
    height: 15px;
    position: absolute;
    left: 3px;
    top: -3px;
    opacity: 0;
    transition: opacity .3s ease;
}

input[type="checkbox"]:checked + label::before {
    opacity: 1;
}

select {
    background: url(../images/select_arrow.png) no-repeat #fff right 10px center;
    width: 100px;
    height: 50px;
    padding: 0 10px;
}

span.error {
    font-weight: bold;
    color: #ff4c4c;
    margin: 10px 0 0 0 !important;
    display: block;
}

.sub_menu {
    margin: 25px 0 30px;
    display: flex;
    justify-content: center;
}

.sub_menu div a {
    font-weight: bold;
    color: #ff8a00;
    background: #fff;
    width: 180px;
    border-radius: 20px;
    text-align: center;
    line-height: 2;
    display: block;
}

.sub_menu div:nth-child(n+2) a {
    margin-left: 30px;
}

.sub_menu div.current a {
    color: #fff;
    background: #ff8a00;
    pointer-events: none;
}

.personal_info {
    margin-top: 40px;
    display: flex;
    align-items: center;
}

.personal_info .icon {
    background: #fff;
    width: 134px;
    height: 134px;
    margin-left: 30px;
    padding-top: 25px;
    border-radius: 50%;
    text-align: center;
}

.personal_info dl {
    width: 340px;
    margin-left: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.personal_info dl dt {
    font-weight: bold;
    background: #ffd800;
    width: 130px;
    border-radius: 15px;
    text-align: center;
    line-height: 1.5;
}

.personal_info dl dd {
    font-size: 24px;
    font-weight: bold;
    margin-left: 20px;
}

.personal_info dl dt:nth-of-type(n+2),
.personal_info dl dd:nth-of-type(n+2) {
    margin-top: 20px;
}

footer {
    background: #e6e6e6;
    width: 100%;
    padding: 30px 0;
    position: absolute;
    left: 0;
    bottom: 0;
}

footer p {
    font-size: 14px;
    text-align: center;
}
/************ common ************/

/************ login ************/
#login main {
    padding-top: 100px;
}

#login main h1 {
    text-align: center;
}

#login main .box {
    width: 500px;
    margin: 20px auto 0;
}

#login main .box dl dt {
    font-size: 24px;
    margin-top: 40px;
}

#login main .box dl dd {
    margin-top: 10px;
}

#login main .box .btn_login {
    margin-top: 60px;
}

#login main .box .btn_login input[type="submit"] {
    background: #ff99a2;
}

#login main .box .text_01 {
    font-weight: bold;
    margin-top: 15px;
    text-align: center;
}

#login main .box .text_01 a {
    color: #ff99a2;
    text-decoration: underline;
}

#login main .box .text_01 a:hover {
    text-decoration: none;
}

#login main .box .btn_create_new {
    margin: 40px auto 0;
    text-align: center;
}

#login main .box .btn_create_new a {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    background: #ff8a00;
    width: 300px;
    margin: 0 auto;
    border-radius: 20px;
    text-align: center;
    line-height: 2.857;
    display: block;
}
/************ login ************/

/************ resetting ************/
#resetting main {
    padding-top: 200px;
}

#resetting main h1 {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    background: #ff8a00;
    width: 1000px;
    margin: 0 auto;
    padding-left: 40px;
    border-radius: 30px;
    line-height: 2.143;
    box-sizing: var(--box-shadow);
}

#resetting main .box .text_01 {
    font-size: 24px;
    font-weight: bold;
    margin-top: 80px;
    text-align: center;
    line-height: 2;
}

#resetting main .box dl {
    width: 500px;
    margin: 80px auto 0;
}

#resetting main .box dl dt {
    font-size: 24px;
}

#resetting main .box dl dd {
    margin-top: 10px;
}

#resetting main .box .btn_send input[type="submit"] {
    background: #ff99a2;
    margin: 50px auto 0;
}

#resetting main .box .text_02 {
    font-weight: bold;
    margin-top: 30px;
    text-align: center;
}

#resetting main .box .text_02 a {
    color: #ff99a2;
    text-decoration: underline;
    text-underline-offset: 5px;
}

#resetting main .box .text_02 a:hover {
    text-decoration: none;
}

#resetting.complete main {
    padding-top: 300px;
}

#resetting.complete main h1 {
    font-size: 24px;
    color: #000;
    background: none;
    padding: 0;
    text-align: center;
}
/************ resetting ************/

/************ reregist ************/
#reregist main {
    padding-top: 200px;
}

#reregist main h1 {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    background: #ff8a00;
    width: 1000px;
    margin: 0 auto;
    padding-left: 40px;
    border-radius: 30px;
    line-height: 2.143;
    box-sizing: var(--box-shadow);
}

#reregist main .box p {
    font-weight: bold;
    margin-top: 80px;
    text-align: center;
    line-height: 2;
}

#reregist main .box dl {
    width: 900px;
    margin: 80px auto 0;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

#reregist main .box dl dt {
    font-weight: bold;
    background: #a2ff99;
    width: 250px;
    border-radius: 15px;
    text-align: center;
    line-height: 2.5;
    letter-spacing: -0.075em;
}

#reregist main .box dl dt span {
    color: #ff4444;
}

#reregist main .box dl dd {
    width: 620px;
    margin-left: 30px;
}

#reregist main .box dl dd input[type="text"] {
    height: 50px;
}

#reregist main .box dl dt:nth-of-type(n+2),
#reregist main .box dl dd:nth-of-type(n+2) {
    margin-top: 30px;
}

#reregist main .box .btn_register input[type="submit"] {
    font-size: 30px;
    font-weight: bold;
    background: #ff99a2;
    width: 400px;
    margin: 80px auto 0;
    border-radius: 20px;
    text-align: center;
    line-height: 2.667;
}

#reregist.complete main {
    padding-top: 300px;
}

#reregist.complete main h1 {
    font-size: 24px;
    color: #000;
    background: none;
    padding: 0;
    text-align: center;
}

#reregist.complete main p {
    font-weight: bold;
    margin-top: 30px;
    text-align: center;
}

#reregist.complete main p a {
    color: #ff99a2;
    text-decoration: underline;
    text-underline-offset: 5px;
}
/************ reregist ************/

/************ user_list ************/
#user_list main {
    padding: 30px 0 100px;
}

#user_list main .search_box dl {
    width: 660px;
    margin: 50px auto 0;
    display: flex;
    flex-wrap: wrap;
}

#user_list main .search_box dl dt {
    font-weight: bold;
    background: #a2ff99;
    width: 130px;
    border-radius: 15px;
    text-align: center;
    line-height: 2.5;
}

#user_list main .search_box dl dd {
    width: 500px;
    margin-left: 30px;
}

#user_list main .search_box dl dd input {
    height: 50px;
}

#user_list main .search_box dl dt:nth-of-type(n+2),
#user_list main .search_box dl dd:nth-of-type(n+2) {
    margin-top: 10px;
}

#user_list main .search_box .btn_search input[type="submit"] {
    background: #6aeaec;
    margin-top: 30px;
}

#user_list main .user_list .title_box {
    background: #fff799;
    width: 100%;
    margin-top: 50px;
    padding: 0 30px;
    border-radius: 30px;
    line-height: 3;
    display: flex;
    align-items: center;
    box-shadow: var(--box-shadow);
}

#user_list main .user_list .title_box h2 {
    font-size: 28px;
    font-weight: bold;
    line-height: 2.143;
}

#user_list main .user_list .title_box .btn {
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    width: 160px;
    border-radius: 20px;
    text-align: center;
    line-height: 1.818;
}

#user_list main .user_list .title_box .btn_create {
    background: #ff8a00;
    margin-left: auto;
    cursor: pointer;
}

#user_list main .user_list .title_box .btn_change {
    background: #3ad22c;
    margin-left: 10px;
}

#user_list main .user_list .title_box .btn_delete {
    background: #ff6985;
    margin-left: 10px;
}

#user_list main .user_list #modal_create {
    background: rgba(255, 255, 255, .8);
    width: 100%;
    height: 100vh;
    padding: 50px 0;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 3;
    overflow: auto;
    display: none;
}

#user_list main .user_list #modal_create .box {
    background: #fffeee;
    width: 1100px;
    margin: 0 auto;
    padding: 30px 50px;
    border: #e17708 1px solid;
}

#user_list main .user_list #modal_create .box h3 {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    background: #ff8a00;
    width: 1000px;
    margin: 0 auto;
    padding-left: 30px;
    border-radius: 30px;
    line-height: 2.143;
    box-shadow: var(--box-shadow);
}

#user_list main .user_list #modal_create .box dl {
    width: 850px;
    margin: 40px auto 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

#user_list main .user_list #modal_create .box dl dt {
    font-weight: bold;
    background: #a2ff99;
    width: 200px;
    border-radius: 15px;
    text-align: center;
    line-height: 2.5;
}

#user_list main .user_list #modal_create .box dl dt span,
#map_family main .family_structure #modal_edit .box dl dt span,
#balance_management main #data_box table th span {
    color: #ff4444;
}

#user_list main .user_list #modal_create .box dl dd {
    width: 620px;
    margin-left: 30px;
}

#user_list main .user_list #modal_create .box dl dt:nth-of-type(n+2),
#user_list main .user_list #modal_create .box dl dd:nth-of-type(n+2) {
    margin-top: 10px;
}

#user_list main .user_list #modal_create .box dl dd input,
#user_list main .user_list #modal_create .box dl dd select {
    height: 50px;
}

#user_list main .user_list #modal_create .box dl dd input[type="radio"],
#user_list main .user_list #modal_create .box dl dd input + label {
    vertical-align: middle;
}

#user_list main .user_list #modal_create .box dl dd input[name="sei"],
#user_list main .user_list #modal_create .box dl dd input[name="mei"],
#user_list main .user_list #modal_create .box dl dd input[name="kana_sei"],
#user_list main .user_list #modal_create .box dl dd input[name="kana_mei"],
#user_list main .user_list #modal_create .box dl dd input[name="postal1"],
#user_list main .user_list #modal_create .box dl dd input[name="postal2"] {
    width: 153px;
}

#user_list main .user_list #modal_create .box dl dd input[name="mei"],
#user_list main .user_list #modal_create .box dl dd input[name="kana_mei"] {
    margin-left: 30px;
}

#user_list main .user_list #modal_create .box dl dd input[name="age"] {
    width: 100px;
}

#user_list main .user_list #modal_create .box dl dd select[name="prefecture"] {
    width: 254px;
}

#user_list main .user_list #modal_create .box dl dd label {
    margin: 0 80px 0 15px;
}

#user_list main .user_list #modal_create .box dl button {
    font-weight: bold;
    background: #ececec;
    width: 250px;
    margin-left: 10px;
    border-radius: 15px;
    text-align: center;
    line-height: 2.5;
}

#user_list main .user_list #modal_create .box .btn_box {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

#user_list main .user_list .modal .box .btn_box .btn_close {
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    background: #ff99a2;
    width: 200px;
    border-radius: 20px;
    text-align: center;
    line-height: 2.667;
    cursor: pointer;
}

#user_list main .user_list #modal_create .box .btn_box .btn_register {
    margin-left: 50px;
}

#user_list main .user_list #modal_create .box .btn_box .btn_register input[type="submit"] {
    background: #ff8a00;
    width: 200px;
}

#user_list main .user_list #modal_change {
    background: rgba(255, 255, 255, .8);
    width: 100%;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 3;
}

#user_list main .user_list #modal_change .box {
    background: #fffeee;
    width: 1100px;
    padding: 30px 50px 80px;
    border: #e17708 1px solid;
}

#user_list main .user_list #modal_change .box h3 {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    background: #3ad22c;
    width: 1000px;
    padding-left: 40px;
    border-radius: 30px;
    box-shadow: var(--box-shadow);
    line-height: 2.143;
}

#user_list main .user_list #modal_change .box dl {
    width: 510px;
    margin: 60px auto 0;
    display: flex;
    flex-wrap: wrap;
}

#user_list main .user_list #modal_change .box dl dt {
    font-weight: bold;
    background: #a2ff99;
    width: 200px;
    border-radius: 15px;
    text-align: center;
    line-height: 2.5;
}

#user_list main .user_list #modal_change .box dl dd {
    width: 280px;
    margin-left: 30px;
}

#user_list main .user_list #modal_change .box dl dt:nth-of-type(n+2),
#user_list main .user_list #modal_change .box dl dd:nth-of-type(n+2) {
    margin-top: 40px;
}

#user_list main .user_list #modal_change .box dl dd input[type="text"] {
    height: 50px;
}

#user_list main .user_list #modal_change .box dl dd select {
    width: 100%;
}

#user_list main .user_list #modal_change .box .btn_box {
    margin-top: 80px;
    display: flex;
    justify-content: center;
}

#user_list main .user_list #modal_change .box .btn_box .btn_change input[type="button"] {
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    background: #3ad22c;
    width: 200px;
    margin-left: 40px;
    border-radius: 20px;
    text-align: center;
    line-height: 2.667;
}

#user_list main .user_list #modal_change_confirm {
    background: rgba(255, 255, 255, .8);
    width: 100%;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 3;
}

#user_list main .user_list #modal_change_confirm .box {
    background: #fffeee;
    width: 1100px;
    padding: 30px 50px 80px;
    border: #e17708 1px solid;
}

#user_list main .user_list #modal_change_confirm .box h3 {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    background: #3ad22c;
    width: 1000px;
    padding-left: 40px;
    border-radius: 30px;
    box-shadow: var(--box-shadow);
    line-height: 2.143;
}

#user_list main .user_list #modal_change_confirm .box p {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-top: 80px;
}

#user_list main .user_list #modal_change_confirm .box dl {
    width: 510px;
    margin: 60px auto 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

#user_list main .user_list #modal_change_confirm .box dl dt {
    font-weight: bold;
    background: #a2ff99;
    width: 200px;
    border-radius: 15px;
    text-align: center;
    line-height: 2.5;
}

#user_list main .user_list #modal_change_confirm .box dl dd {
    width: 280px;
    margin-left: 30px;
}

#user_list main .user_list #modal_change_confirm .box dl dt:nth-of-type(n+2),
#user_list main .user_list #modal_change_confirm .box dl dd:nth-of-type(n+2) {
    margin-top: 40px;
}

#user_list main .user_list #modal_change_confirm .box .btn_box {
    margin-top: 80px;
    display: flex;
    justify-content: center;
}

#user_list main .user_list #modal_change_confirm .box .btn_box .btn_ok input[type="button"] {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    background: #3ad22c;
    width: 200px;
    margin-left: 40px;
    border-radius: 20px;
    text-align: center;
    line-height: 3.333;
}

#user_list main .user_list #modal_change_confirm .box .btn_box .btn_back {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    background: #ff99a2;
    width: 200px;
    border-radius: 20px;
    text-align: center;
    line-height: 3.333;
    cursor: pointer;
}

#user_list main .user_list #modal_change_complete {
    background: rgba(255, 255, 255, .8);
    width: 100%;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 3;
}

#user_list main .user_list #modal_change_complete .box {
    background: #fffeee;
    width: 1100px;
    padding: 30px 50px 100px;
    border: #e17708 1px solid;
}

#user_list main .user_list #modal_change_complete .box h3 {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    background: #3ad22c;
    width: 1000px;
    padding-left: 40px;
    border-radius: 30px;
    box-shadow: var(--box-shadow);
    line-height: 2.143;
}

#user_list main .user_list #modal_change_complete .box p {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-top: 180px;
}

#user_list main .user_list #modal_change_complete .box .btn_back a {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    background: #ff99a2;
    width: 200px;
    margin: 120px auto 0;
    border-radius: 20px;
    text-align: center;
    line-height: 3.333;
    display: block;
}

#user_list main .user_list #modal_delete {
    background: rgba(255, 255, 255, .8);
    width: 100%;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 3;
}

#user_list main .user_list #modal_delete .box {
    background: #fffeee;
    width: 1100px;
    padding: 30px 50px 80px;
    border: #e17708 1px solid;
}

#user_list main .user_list #modal_delete .box h3 {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    background: #ff6985;
    width: 1000px;
    padding-left: 60px;
    border-radius: 30px;
    box-shadow: var(--box-shadow);
    line-height: 2.143;
}

#user_list main .user_list #modal_delete .box p {
    font-size: 24px;
    font-weight: bold;
    margin-top: 80px;
    text-align: center;
    line-height: 2;
}

#user_list main .user_list #modal_delete .box .btn_box {
    margin-top: 80px;
    display: flex;
    justify-content: center;
}

#user_list main .user_list #modal_delete .box .btn_box .btn_delete input[type="button"] {
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    background: #ff6985;
    width: 200px;
    margin-left: 40px;
    border-radius: 20px;
    text-align: center;
    line-height: 2.667;
    cursor: pointer;
}

#user_list main .user_list #modal_delete_complete {
    background: rgba(255, 255, 255, .8);
    width: 100%;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 3;
}

#user_list main .user_list #modal_delete_complete .box {
    background: #fffeee;
    width: 1100px;
    padding: 30px 50px 80px;
    border: #e17708 1px solid;
}

#user_list main .user_list #modal_delete_complete .box h3 {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    background: #ff6985;
    width: 1000px;
    padding-left: 60px;
    border-radius: 30px;
    box-shadow: var(--box-shadow);
    line-height: 2.143;
}

#user_list main .user_list #modal_delete_complete .box p {
    font-size: 24px;
    font-weight: bold;
    margin-top: 120px;
    text-align: center;
    line-height: 2;
}

#user_list main .user_list #modal_delete_complete .box .btn_back a {
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    background: #ff99a2;
    width: 200px;
    margin: 120px auto 0;
    border-radius: 20px;
    text-align: center;
    line-height: 2.667;
    display: block;
}

#user_list main .user_list .list_box {
    background: #fff;
    margin-top: 50px;
    padding: 20px 10px 30px 30px;
    height: 500px;
}

#user_list main .user_list .list_box .inner {
    height: 450px;
    padding-right: 10px;
    overflow: auto;
}

#user_list main .user_list .list_box table {
    width: 100%;
    table-layout: fixed;
}

#user_list main .user_list .list_box table tr:nth-child(2n+1) {
    background: #fffde0;
}

#user_list main .user_list .list_box table tr.one_box:hover {
    background: #84f57a;
}

#user_list main .user_list .list_box table th {
    font-weight: bold;
    color: #fff;
    background: #ff8a00;
    text-align: center;
    line-height: 1.5;
    position: sticky;
    top: 0;
    z-index: 2;
}

#user_list main .user_list .list_box table th:before {
    content: "";
    width: 100%;
    height: 100%;
    border: #000 1px solid;
    position: absolute;
    top: 0;
    left: 0;
}

#user_list main .user_list .list_box table th:nth-child(n+2)::before {
    border-left: none;
}

#user_list main .user_list .list_box table th:first-child {
    width: 110px;
}

#user_list main .user_list .list_box table th:nth-child(2) {
    width: 130px;
}

#user_list main .user_list .list_box table th:nth-child(3) {
    width: 155px;
}

#user_list main .user_list .list_box table th:nth-child(4) {
    width: 185px;
}

#user_list main .user_list .list_box table th:nth-child(5) {
    width: 160px;
}

#user_list main .user_list .list_box table th:nth-child(6) {
    width: 355px;
}

#user_list main .user_list .list_box table th:last-child {
    width: 37px;
}

#user_list main .user_list .list_box table td {
    border: #000 1px solid;
    line-height: 1.5;
    cursor: pointer;
    caret-color: transparent;
}

#user_list main .user_list .list_box table td:last-child {
    padding: 0 10px;
}

#user_list main .user_list .list_box table td a {
    width: 100%;
    padding: 0 10px;
    display: block;
}

#user_list main .user_list .list_box table tr.spacer th {
    background: #fff;
    height: 15px;
    left: -1px;
    top: 30px;
}

#user_list main .user_list .list_box table tr.spacer th::before {
    border: none;
}
/************ user_list ************/

/************ map_family ************/
#map_family main .family_structure h2 {
    font-size: 32px;
    font-weight: bold;
    background: #fff799;
    margin-top: 80px;
    padding-left: 40px;
    border-radius: 30px;
    line-height: 1.875;
    box-shadow: var(--box-shadow);
}

#map_family main .family_structure > .box {
    background: #fff;
    margin-top: 40px;
    padding: 60px 25px 80px;
    display: flex;
    flex-wrap: wrap;
}

#map_family main .family_structure > .box .one_box {
    background: #fff;
    width: 176px;
    height: 220px;
    padding: 20px 10px 0;
    position: relative;
    z-index: 1;
    box-shadow: var(--box-shadow);
    cursor: pointer;
}

#map_family main .family_structure > .box .one_box:first-child::before {
    content: '';
    background: #000;
    width: 20px;
    height: 2px;
    position: absolute;
    right: -21px;
    top: 50%;
    z-index: -1;
    display: block;
}

#map_family main .family_structure > .box .one_box:first-child::after {
    content: '';
    background: #000;
    width: 2px;
    height: 297px;
    position: absolute;
    right: -12px;
    top: 50%;
    z-index: -1;
    display: block;
}

#map_family main .family_structure > .box .one_box:nth-child(2) {
    margin-left: 20px;
}

#map_family main .family_structure > .box .one_box:nth-child(2)::before {
    content: '';
    background: #000;
    width: 780px;
    height: 2px;
    position: absolute;
    right: -594px;
    top: calc(50% + 297px);
    z-index: -1;
    display: block;
}

#map_family main .family_structure > .box .one_box:nth-child(3) {
    margin-left: auto;
}

#map_family main .family_structure > .box .one_box:nth-child(3)::before {
    content: '';
    background: #000;
    width: 20px;
    height: 2px;
    position: absolute;
    right: -21px;
    top: 50%;
    z-index: -1;
    display: block;
}

#map_family main .family_structure > .box .one_box:nth-child(3)::after {
    content: '';
    background: #000;
    width: 2px;
    height: 297px;
    position: absolute;
    right: -12px;
    top: 50%;
    z-index: -1;
    display: block;
}

#map_family main .family_structure > .box .one_box:nth-child(4) {
    margin-left: 20px;
}

#map_family main .family_structure > .box .one_box:nth-child(5) {
    margin: 70px 0 0 33%;
}

#map_family main .family_structure > .box .one_box:nth-child(5)::before {
    content: '';
    background: #000;
    width: 2px;
    height: 171px;
    position: absolute;
    right: -12px;
    top: calc(50% + 8px);
    z-index: -1;
    display: block;
}

#map_family main .family_structure > .box .one_box:nth-child(5)::after {
    content: '';
    background: #000;
    height: 2px;
    width: 972px;
    position: absolute;
    right: -505px;
    top: calc(50% + 179px);
    z-index: -1;
    display: block;
}

#map_family main .family_structure > .box .one_box:nth-child(6) {
    margin: 70px 33% 0 20px;
}

#map_family main .family_structure > .box .one_box:nth-child(n+7) {
    margin-top: 184px;
}

#map_family main .family_structure > .box .one_box:nth-child(n+7)::before {
    content: '';
    background: #000;
    width: 2px;
    height: 115px;
    position: absolute;
    left: 50%;
    top: -116px;
}

#map_family main .family_structure > .box .one_box:nth-child(n+8) {
    margin-left: 18px;
}

#map_family main .family_structure > .box .one_box .relationship {
    font-weight: bold;
    width: 130px;
    margin: 0 auto;
    border-radius: 15px;
    text-align: center;
    line-height: 1.5;
}

#map_family main .family_structure > .box .one_box .icon {
    margin-top: 10px;
    text-align: center;
}

#map_family main .family_structure > .box .one_box .data {
    margin: 10px auto 0;
    text-align: center;
}

#map_family main .family_structure > .box .one_box .data .inner {
    font-size: 18px;
    display: inline-block;
}

#map_family main .family_structure > .box .one_box .data .inner .name {
    text-align: left;
}

#map_family main .family_structure > .box .one_box .data .inner .age {
    margin-top: 5px;
    text-align: left;
}

#map_family main .family_structure > .box .him_father,
#map_family main .family_structure > .box .him_mother,
#map_family main .family_structure > .box .spouse_father,
#map_family main .family_structure > .box .spouse_mother {
    border: #e8d4bf 1px solid;
}

#map_family main .family_structure > .box .him_father .relationship,
#map_family main .family_structure > .box .him_mother .relationship,
#map_family main .family_structure > .box .spouse_father .relationship,
#map_family main .family_structure > .box .spouse_mother .relationship {
    background: #e8d4bf;
}

#map_family main .family_structure > .box .himself.men {
    border: #5ddfff 1px solid;
}

#map_family main .family_structure > .box .himself.women {
    border: #ff9fbc 1px solid;
}

#map_family main .family_structure > .box .himself.men .relationship {
    background: #5ddfff;
}

#map_family main .family_structure > .box .himself.women .relationship {
    background: #ff9fbc;
}

#map_family main .family_structure > .box .spouse.men {
    border: #5ddfff 1px solid;
}

#map_family main .family_structure > .box .spouse.women {
    border: #ff9fbc 1px solid;
}

#map_family main .family_structure > .box .spouse.men .relationship {
    background: #5ddfff;
}

#map_family main .family_structure > .box .spouse.women .relationship {
    background: #ff9fbc;
}

#map_family main .family_structure > .box .children {
    border: #fff557 1px solid;
}

#map_family main .family_structure > .box .children .relationship {
    background: #fff557;
}

#map_family main .family_structure > .box .children .data {
    margin-top: 15px;
}

#map_family main .family_structure > .box .not_set {
    border: #b7b7b7 1px solid;
}

#map_family main .family_structure > .box .not_set .relationship {
    background: #b7b7b7;
}

#map_family main .family_structure > .box .not_set .data {
    margin-top: 15px;
}

#map_family main .family_structure #modal_edit {
    background: rgba(255, 255, 255, .8);
    width: 100%;
    height: 100vh;
    padding: 50px 0;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2;
    overflow: auto;
    display: none;
}

#map_family main .family_structure #modal_edit .box {
    background: #fffeee;
    width: 1100px;
    margin: 0 auto;
    padding: 30px 50px 80px;
    border: #e17708 1px solid;
    position: relative;
}

#map_family main .family_structure #modal_edit .box h3 {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    background: #ff8a00;
    width: 1000px;
    margin: 0 auto;
    padding-left: 30px;
    border-radius: 30px;
    line-height: 2.143;
    box-shadow: var(--box-shadow);
}

#map_family main .family_structure #modal_edit .box .icon {
    background: #fff;
    width: 180px;
    height: 180px;
    padding-top: 50px;
    border-radius: 50%;
    text-align: center;
    position: absolute;
    top: 160px;
    right: 150px;
}

#map_family main .family_structure #modal_edit .box dl {
    width: 850px;
    margin: 60px auto 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

#map_family main .family_structure #modal_edit .box dl dt {
    font-weight: bold;
    background: #a2ff99;
    width: 200px;
    border-radius: 15px;
    text-align: center;
    line-height: 2.5;
}

#map_family main .family_structure #modal_edit .box dl dd {
    width: 620px;
    margin-left: 30px;
}

#map_family main .family_structure #modal_edit .box dl dt:nth-of-type(n+2),
#map_family main .family_structure #modal_edit .box dl dd:nth-of-type(n+2) {
    margin-top: 30px;
}

#map_family main .family_structure #modal_edit .box dl dt:nth-of-type(n+6),
#map_family main .family_structure #modal_edit .box dl dd:nth-of-type(n+6) {
    margin-top: 10px;
}

#map_family main .family_structure #modal_edit .box dl dd input,
#map_family main .family_structure #modal_edit .box dl dd select {
    height: 50px;
}

#map_family main .family_structure #modal_edit .box dl dd input[name="relationship"],
#map_family main .family_structure #modal_edit .box dl dd input[name="name"],
#map_family main .family_structure #modal_edit .box dl dd input[name="kana"] {
    width: 254px;
}

#map_family main .family_structure #modal_edit .box dl dd input[type="radio"],
#map_family main .family_structure #modal_edit .box dl dd input + label {
    vertical-align: middle;
}

#map_family main .family_structure #modal_edit .box dl dd input[name="sei"],
#map_family main .family_structure #modal_edit .box dl dd input[name="mei"],
#map_family main .family_structure #modal_edit .box dl dd input[name="kana_sei"],
#map_family main .family_structure #modal_edit .box dl dd input[name="kana_mei"],
#map_family main .family_structure #modal_edit .box dl dd input[name="postal1"],
#map_family main .family_structure #modal_edit .box dl dd input[name="postal2"] {
    width: 153px;
}

#map_family main .family_structure #modal_edit .box dl dd input[name="mei"],
#map_family main .family_structure #modal_edit .box dl dd input[name="kana_mei"] {
    margin-left: 30px;
}

#map_family main .family_structure #modal_edit .box dl dd input[name="age"] {
    width: 100px;
}

#map_family main .family_structure #modal_edit .box dl dd select[name="prefecture"] {
    width: 254px;
}

#map_family main .family_structure #modal_edit .box dl dd label {
    margin: 0 80px 0 15px;
}

#map_family main .family_structure #modal_edit .box dl button {
    font-weight: bold;
    background: #ececec;
    width: 250px;
    margin-left: 10px;
    border-radius: 15px;
    text-align: center;
    line-height: 2.5;
}

#map_family main .family_structure #modal_edit .box .btn_box {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

#map_family main .family_structure #modal_edit .box .btn_box .btn_close {
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    background: #ff99a2;
    width: 200px;
    border-radius: 20px;
    text-align: center;
    line-height: 2.667;
    cursor: pointer;
}

#map_family main .family_structure #modal_edit .box .btn_box .btn_change input[type="button"] {
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    background: #3ad22c;
    width: 200px;
    margin-left: 20px;
    border-radius: 20px;
    text-align: center;
    line-height: 2.667;
}

#map_family main .family_structure #modal_edit .box .btn_box .btn_register input[type="button"] {
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    background: #ff8a00;
    width: 200px;
    margin-left: 20px;
    border-radius: 20px;
    text-align: center;
    line-height: 2.667;
}

#map_family main .family_structure #modal_edit .box .btn_box .btn_delete {
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    background: #ff6985;
    width: 200px;
    margin-left: 20px;
    border-radius: 20px;
    text-align: center;
    line-height: 2.667;
    cursor: pointer;
}

#map_family main .family_structure #modal_change_complete {
    background: rgba(255, 255, 255, .8);
    width: 100%;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2;
}

#map_family main .family_structure #modal_change_complete .box {
    background: #fffeee;
    width: 1100px;
    padding: 30px 50px 100px;
    border: #e17708 1px solid;
}

#map_family main .family_structure #modal_change_complete .box h3 {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    background: #3ad22c;
    width: 1000px;
    padding-left: 40px;
    border-radius: 30px;
    box-shadow: var(--box-shadow);
    line-height: 2.143;
}

#map_family main .family_structure #modal_change_complete .box p {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-top: 180px;
}

#map_family main .family_structure #modal_change_complete .box .btn_back a {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    background: #ff99a2;
    width: 200px;
    margin: 120px auto 0;
    border-radius: 20px;
    text-align: center;
    line-height: 3.333;
    display: block;
}

#map_family main .family_structure #modal_register_complete,
#balance_management main #data_box #modal_register_complete {
    background: rgba(255, 255, 255, .8);
    width: 100%;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2;
}

#map_family main .family_structure #modal_register_complete .box,
#balance_management main #data_box #modal_register_complete .box {
    background: #fffeee;
    width: 1100px;
    padding: 30px 50px 100px;
    border: #e17708 1px solid;
}

#map_family main .family_structure #modal_register_complete .box h3,
#balance_management main #data_box #modal_register_complete .box h3 {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    background: #ff8a00;
    width: 1000px;
    padding-left: 40px;
    border-radius: 30px;
    box-shadow: var(--box-shadow);
    line-height: 2.143;
}

#map_family main .family_structure #modal_register_complete .box p,
#balance_management main #data_box #modal_register_complete .box p {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-top: 180px;
}

#map_family main .family_structure #modal_register_complete .box .btn_back a,
#balance_management main #data_box #modal_register_complete .box .btn_back a {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    background: #ff99a2;
    width: 200px;
    margin: 120px auto 0;
    border-radius: 20px;
    text-align: center;
    line-height: 3.333;
    display: block;
}

#map_family main .family_structure #modal_delete {
    background: rgba(255, 255, 255, .8);
    width: 100%;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2;
}

#map_family main .family_structure #modal_delete .box {
    background: #fffeee;
    width: 1100px;
    padding: 30px 50px 80px;
    border: #e17708 1px solid;
}

#map_family main .family_structure #modal_delete .box h3 {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    background: #ff6985;
    width: 1000px;
    padding-left: 60px;
    border-radius: 30px;
    box-shadow: var(--box-shadow);
    line-height: 2.143;
}

#map_family main .family_structure #modal_delete .box p {
    font-size: 24px;
    font-weight: bold;
    margin-top: 80px;
    text-align: center;
    line-height: 2;
}

#map_family main .family_structure #modal_delete .box .btn_box {
    margin-top: 80px;
    display: flex;
    justify-content: center;
}

#map_family main .family_structure #modal_delete .box .btn_box .btn_close {
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    background: #ff99a2;
    width: 200px;
    border-radius: 20px;
    text-align: center;
    line-height: 2.667;
    cursor: pointer;
}

#map_family main .family_structure #modal_delete .box .btn_box .btn_delete input[type="button"] {
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    background: #ff6985;
    width: 200px;
    margin-left: 40px;
    border-radius: 20px;
    text-align: center;
    line-height: 2.667;
    cursor: pointer;
}

#map_family main .family_structure #modal_delete_complete {
    background: rgba(255, 255, 255, .8);
    width: 100%;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2;
}

#map_family main .family_structure #modal_delete_complete .box {
    background: #fffeee;
    width: 1100px;
    padding: 30px 50px 80px;
    border: #e17708 1px solid;
}

#map_family main .family_structure #modal_delete_complete .box h3 {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    background: #ff6985;
    width: 1000px;
    padding-left: 60px;
    border-radius: 30px;
    box-shadow: var(--box-shadow);
    line-height: 2.143;
}

#map_family main .family_structure #modal_delete_complete .box p {
    font-size: 24px;
    font-weight: bold;
    margin-top: 120px;
    text-align: center;
    line-height: 2;
}

#map_family main .family_structure #modal_delete_complete .box .btn_back a {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    background: #ff99a2;
    width: 200px;
    margin: 120px auto 0;
    border-radius: 20px;
    text-align: center;
    line-height: 3.333;
    display: block;
}
/************ map_family ************/

/************ fixed_income, extra_income, fixed_cost, variable_spending, savings, holiday ************/
#balance_management #box {
    margin-top: 80px;
}

#balance_management #box h2 {
    font-size: 32px;
    font-weight: bold;
    background: #fff799;
    padding-left: 50px;
    border-radius: 30px;
    line-height: 1.875;
    box-shadow: var(--box-shadow);
}

#balance_management #box .tab {
    margin-top: 60px;
    display: flex;
}

#balance_management #box .tab li {
    font-size: 18px;
    font-weight: bold;
    width: 180px;
    border-radius: 20px 20px 0 0;
    text-align: center;
    line-height: 2.778;
}

#balance_management #box .tab li a {
    width: 100%;
    border-radius: 20px 20px 0 0;
    display: block;
}

#balance_management #box .tab li:first-child,
#balance_management #box .tab li:nth-child(2) {
    background: #ff99a2;
}

#balance_management #box .tab li:nth-child(3),
#balance_management #box .tab li:nth-child(4) {
    background: #ffe794;
}

#balance_management #box .tab li:nth-child(5) {
    background: #84ccf6;
}

#balance_management #box .tab li:nth-child(6) {
    background:  #ffacee;
}

#balance_management #box .tab li:nth-child(n+7) {
    background:  #6be660;
}

#balance_management #box .tab li.current {
    background: #fff;
}

#balance_management #box .tab li.current a {
    pointer-events: none;
}

#balance_management #box #data_box {
    background: #fff;
    padding: 25px 25px 80px;
}

#balance_management #box #data_box .title_box {
    border-bottom: #d1d1d1 3px dotted;
    padding-bottom: 15px;
    display: flex;
    align-items: center;
}

#balance_management #box #data_box .title_box h3 {
    font-size: 28px;
    font-weight: bold;
    margin-right: auto;
}

#balance_management #box #data_box .title_box .btn {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    width: 150px;
    border-radius: 5px;
    text-align: center;
    line-height: 2.5;
}

#balance_management #box #data_box .title_box .btn_add {
    background: #6be660;
    cursor: pointer;
}

#balance_management #box #data_box .title_box .btn_renew input[type="button"] {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    background: #84ccf6;
    width: 150px;
    border-radius: 5px;
    text-align: center;
    line-height: 2.5;
}

#balance_management #box #data_box .title_box .btn_delete {
    background: #ff99a2;
}

#balance_management #box #data_box .title_box div:nth-child(n+2) {
    margin-left: 10px;
}

#balance_management #box #data_box table {
    font-size: 18px;
    width: 100%;
    margin-top: 25px;
    border-collapse: collapse;
}

#balance_management #box #data_box table th {
    background: #6be660;
    padding: 5px 0;
    border: #000 1px solid;
    text-align: center;
}

#balance_management #box #data_box table th:first-child {
    width: 150px;
}

#balance_management.fixed_income #box #data_box table th:first-child {
    width: 300px;
}

#balance_management.others_income #box #data_box table th:first-child {
    width: 300px;
}

#balance_management.others_income #box #data_box table th:nth-child(2) {
    width: 250px;
}

#balance_management.pension_income #box #data_box table th:first-child {
    width: 300px;
}

#balance_management.pension_income #box #data_box table th:nth-child(2) {
    width: 230px;
}

#balance_management.pension_income #box #data_box table th:nth-child(3) {
    width: 220px;
}

#balance_management.severance_pay #box #data_box table th:first-child {
    width: 300px;
}

#balance_management.severance_pay #box #data_box table th:nth-child(2) {
    width: 230px;
}

#balance_management.severance_pay #box #data_box table th:nth-child(3) {
    width: 220px;
}

#balance_management #box #data_box table td {
    background: #fffde0;
    padding: 10px 20px;
    border: #000 1px solid;
    text-align: center;
    vertical-align: middle;
}

#balance_management #box #data_box table td input[type="text"] {
    width: 140px;
    height: 35px;
    border: #000 1px solid;
}

#balance_management #box #data_box table td input[type="text"].long {
    width: 360px;
}

#balance_management.others_income #box #data_box table td:first-child input[type="text"],
#balance_management.others_income #box #data_box table td:nth-child(3) input[type="text"] {
    width: 100%;
}

#balance_management #box #data_box table td input[type="checkbox"] + label {
    margin: 0 auto;
}

#balance_management #box .sum_box {
    margin-top: 25px;
    padding-top: 30px;
    border-top: #d1d1d1 3px dotted;
}

#balance_management #box .sum_box dl {
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#balance_management #box .sum_box dl dt {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    background: #6be660;
    width: 200px;
    border-radius: 30px;
    text-align: center;
    line-height: 2.143;
}

#balance_management #box .sum_box dl dd {
    font-size: 32px;
    font-weight: bold;
}

#balance_management #box #modal_renew_complete,
#comment #box #modal_renew_complete,
#analysis #box #modal_renew_complete {
    background: rgba(255, 255, 255, .8);
    width: 100%;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2;
}

#balance_management #box #modal_renew_complete .box,
#comment #box #modal_renew_complete .box,
#analysis #box #modal_renew_complete .box {
    background: #fffeee;
    width: 1100px;
    padding: 30px 50px 100px;
    border: #e17708 1px solid;
}

#balance_management #box #modal_renew_complete .box h3,
#comment #box #modal_renew_complete .box h3,
#analysis #box #modal_renew_complete .box h3 {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    background: #84ccf6;
    width: 1000px;
    padding-left: 40px;
    border-radius: 30px;
    box-shadow: var(--box-shadow);
    line-height: 2.143;
}

#balance_management #box #modal_renew_complete .box p,
#comment #box #modal_renew_complete .box p,
#analysis #box #modal_renew_complete .box p {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-top: 180px;
}

#balance_management #box #modal_renew_complete .box .btn_back a,
#comment #box #modal_renew_complete .box .btn_back a,
#analysis #box #modal_renew_complete .box .btn_back a {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    background: #ff99a2;
    width: 200px;
    margin: 120px auto 0;
    border-radius: 20px;
    text-align: center;
    line-height: 3.333;
    display: block;
}

#balance_management #box #modal_delete {
    background: rgba(255, 255, 255, .8);
    width: 100%;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2;
}

#balance_management #box #modal_delete .box {
    background: #fffeee;
    width: 1100px;
    padding: 30px 50px 80px;
    border: #e17708 1px solid;
}

#balance_management #box #modal_delete .box h3 {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    background: #ff6985;
    width: 1000px;
    padding-left: 60px;
    border-radius: 30px;
    box-shadow: var(--box-shadow);
    line-height: 2.143;
}

#balance_management #box #modal_delete .box p {
    font-size: 24px;
    font-weight: bold;
    margin-top: 80px;
    text-align: center;
    line-height: 2;
}

#balance_management #box #modal_delete .box .btn_box {
    margin-top: 80px;
    display: flex;
    justify-content: center;
}

#balance_management #box #modal_delete .box .btn_box .btn_close {
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    background: #ff99a2;
    width: 200px;
    border-radius: 20px;
    text-align: center;
    line-height: 2.667;
    cursor: pointer;
}

#balance_management #box #modal_delete .box .btn_box .btn_delete input[type="button"] {
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    background: #ff6985;
    width: 200px;
    margin-left: 40px;
    border-radius: 20px;
    text-align: center;
    line-height: 2.667;
    cursor: pointer;
}

#balance_management #box #modal_delete_complete {
    background: rgba(255, 255, 255, .8);
    width: 100%;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2;
}

#balance_management #box #modal_delete_complete .box {
    background: #fffeee;
    width: 1100px;
    padding: 30px 50px 80px;
    border: #e17708 1px solid;
}

#balance_management #box #modal_delete_complete .box h3 {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    background: #ff6985;
    width: 1000px;
    padding-left: 60px;
    border-radius: 30px;
    box-shadow: var(--box-shadow);
    line-height: 2.143;
}

#balance_management #box #modal_delete_complete .box p {
    font-size: 24px;
    font-weight: bold;
    margin-top: 120px;
    text-align: center;
    line-height: 2;
}

#balance_management #box #modal_delete_complete .box .btn_back a {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    background: #ff99a2;
    width: 200px;
    margin: 120px auto 0;
    border-radius: 20px;
    text-align: center;
    line-height: 3.333;
    display: block;
}

#balance_management.savings #box #data_box table td input[type="text"] {
    width: 200px;
}

#balance_management.holiday #box #data_box table td input[type="text"] {
    width: 220px;
}

#balance_management.fixed_cost #box #data_box table td input[type="text"].short,
#balance_management.variable_spending #box #data_box table td input[type="text"].short,
#balance_management.savings #box #data_box table td input[type="text"].short {
    width: 130px;
}

#balance_management.fixed_cost #box #data_box table td input[type="text"].long,
#balance_management.variable_spending #box #data_box table td input[type="text"].long,
#balance_management.savings #box #data_box table td input[type="text"].long {
    width: 380px;
}

#balance_management.extra_income #box #data_box table td input[type="text"].bold {
    width: 160px;
    height: 70px;
}

#balance_management.fixed_cost #box #data_box table td select,
#balance_management.variable_spending #box #data_box table td select,
#balance_management.extra_income #box #data_box table td select,
#balance_management.holiday #box #data_box table td select {
    font-size: 18px;
    height: 35px;
    margin-left: 20px;
    border: #000 1px solid;
}

#balance_management.holiday #box #data_box table td:first-of-type select {
    width: 85%;
}

#balance_management.fixed_cost #box #data_box table td select:nth-of-type(2n+1),
#balance_management.variable_spending #box #data_box table td select:nth-of-type(2n+1),
#balance_management.extra_income #box #data_box table td select:nth-of-type(3n+1),
#balance_management.holiday #box #data_box table td select:nth-of-type(3n+1) {
    margin-left: 0;
}

#balance_management.fixed_cost #box #data_box table td select:nth-of-type(n+3),
#balance_management.variable_spending #box #data_box table td select:nth-of-type(n+3),
#balance_management.extra_income #box #data_box table td select:nth-of-type(n+4),
#balance_management.holiday #box #data_box table td select:nth-of-type(n+4) {
    margin-top: 10px;
}

#balance_management.fixed_cost #box #data_box table td span,
#balance_management.variable_spending #box #data_box table td span,
#balance_management.extra_income #box #data_box table td span,
#balance_management.holiday #box #data_box table td span {
    vertical-align: middle;
}

#balance_management.fixed_cost #box #data_box table td span:nth-of-type(n+3),
#balance_management.variable_spending #box #data_box table td span:nth-of-type(n+3),
#balance_management.extra_income #box #data_box table td span:nth-of-type(n+4),
#balance_management.holiday #box #data_box table td span:nth-of-type(n+4) {
    vertical-align: sub;
}

#balance_management.fixed_cost #box #data_box table th,
#balance_management.variable_spending #box #data_box table th {
    background: #ffd5d9;
}

#balance_management.savings #box #data_box table th {
    background: #84ccf6;
}

#balance_management.holiday #box #data_box table th {
    background: #ffcdf5;
}

#balance_management.holiday #box #data_box table th:nth-child(2) {
    width: 160px;
}

#balance_management.fixed_cost #box #data_box table th:last-child,
#balance_management.variable_spending #box #data_box table th:last-child,
#balance_management.savings #box #data_box table th:last-child {
    padding: 5px 10px;
}

#balance_management.fixed_cost #box .sum_box dl dt,
#balance_management.variable_spending #box .sum_box dl dt {
    background: #ff99a2;
}

#balance_management.savings #box .sum_box dl dt {
    background: #84ccf6;
}
/************ fixed_income, extra_income, fixed_cost, variable_spending, savings, holiday ************/

/************ comment ************/
#comment #box {
    margin-top: 80px;
}

#comment #box .one_box {
    margin-bottom: 60px;
}

#comment #box .one_box h2 {
    font-size: 32px;
    font-weight: bold;
    background: #fff799;
    padding-left: 30px;
    border-radius: 30px;
    line-height: 1.875;
    box-shadow: var(--box-shadow);
}

#comment #box .one_box textarea {
    background: #fff;
    width: 100%;
    height: 390px;
    margin-top: 30px;
    padding: 40px 80px;
    text-align: justify;
    line-height: 1.4;
}

#comment #box .btn_register input[type="submit"] {
    font-size: 30px;
    background: #ff8a00;
    line-height: 2.667;
}
/************ comment ************/

/************ analysis ************/
#analysis #box {
    margin-top: 80px;
}

#analysis #box h2 {
    font-size: 32px;
    font-weight: bold;
    background: #fff799;
    padding-left: 50px;
    border-radius: 30px;
    line-height: 1.875;
    box-shadow: var(--box-shadow);
}

#analysis #box .tab {
    margin-top: 60px;
    display: flex;
}

#analysis #box .tab li {
    font-size: 24px;
    font-weight: bold;
    background: #fff;
    width: 180px;
    border-radius: 20px 20px 0 0;
    text-align: center;
    line-height: 2.083;
}

#analysis #box #data_box {
    background: #fff;
    padding: 25px 25px 0;
    overflow-x: auto;
}

#analysis #box #data_box .title_box {
    border-bottom: #d1d1d1 3px dotted;
    padding-bottom: 15px;
    display: flex;
    align-items: center;
}

#analysis #box #data_box .title_box h3 {
    font-size: 28px;
    font-weight: bold;
    margin-right: auto;
}

#analysis #box #data_box .title_box .btn_pdf input[type="button"] {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    background: #3ad22c;
    width: 150px;
    border-radius: 5px;
    text-align: center;
    line-height: 2.5;
}

#analysis #box #data_box .timeline {
    overflow: auto;
    margin-bottom: 60px;
}

#analysis #box #data_box .timeline table {
    width: 100%;
    margin: 30px 0 30px;
    border-collapse: collapse;
    white-space: nowrap;
}

#analysis #box #data_box .timeline table tr:nth-child(2n+1) {
    background: #fffde0;
}

#analysis #box #data_box .timeline table th {
    background: #dbdbdb;
    padding: 5px 20px;
    border: #000 1px solid;
    text-align: center;
}

#analysis #box #data_box .timeline table td {
    border: #000 1px solid;
    padding: 10px 20px;
    text-align: right;
}

#analysis #box #data_box .timeline table th:first-child,
#analysis #box #data_box .timeline table td:first-child {
    position: sticky;
    left: 0;
}

#analysis #box #data_box .timeline table th:first-child::before,
#analysis #box #data_box .timeline table td:first-child::before {
    content: '';
    background: #000;
    width: 1px;
    height: 100%;
    position: absolute;
    left: -1px;
    top: 0;
}

#analysis #box #data_box .timeline table th:first-child::after,
#analysis #box #data_box .timeline table td:first-child::after {
    content: '';
    background: #000;
    width: 1px;
    height: 100%;
    position: absolute;
    right: -1px;
    top: 0;
}

#analysis #box #data_box .timeline table .person td {
    background: #fffde0;
    text-align: center;
}

#analysis #box #data_box .timeline table .income td:first-child {
    background: #6be660;
    text-align: center;
}

#analysis #box #data_box .timeline table .expenditure_subtotal td:first-child {
    background: #ff99a2;
    text-align: center;
}

#analysis #box #data_box .timeline table .spending td:first-child {
    background: #ffccd1;
    text-align: center;
}

#analysis #box #data_box .timeline table .annual_balance td:first-child {
    background: #ffc230;
    text-align: center;
}

#analysis #box #data_box .timeline table .assets td:first-child {
    background: #afe2ff;
    text-align: center;
}

#analysis #box #data_box .timeline table td.school {
    padding: 4px 0 0 0;
}

#analysis #box .one_box {
    margin-top: 60px;
}

#analysis #box .one_box textarea {
    background: #fff;
    width: 100%;
    height: 390px;
    margin-top: 30px;
    padding: 40px 80px;
    text-align: justify;
    line-height: 1.4;
}

#analysis #box .btn_register input[type="submit"] {
    font-size: 30px;
    background: #ff8a00;
    margin-top: 80px;
    line-height: 2.667;
}

/************ analysis ************/