@charset "UTF-8";

#content .plan2,
#content .plan3 {
    /* 初期表示 */
    display: none;
}

input[type=button],
input[type=submit] {
    background-color: #00603C;
    padding: .8em;
    width: 100%;
    border: none;
    font-weight: bold;
    color: #fff;
    font-size: 18px;
    transition: .4s;
}

input[type=radio] {
    display: none;
}

input.print {
    max-width: 300px;
    margin-top: 40px;
}

.caution {
    font-size: 14px;
    text-align: left;
    text-indent: -1em;
    padding-left: 1em;
    margin-top: 0.4em;
}

.calculation_button {
    position: relative;
    margin-top: 50px;
}

.calculation_button::after,
input[type=submit]::after {
    content: "";
    display: block;
    position: absolute;
    top: 45%;
    right: 30px;
    width: 10px;
    height: 10px;
    border: solid 1px #fff;
    border-top: none;
    border-right: none;
    transform: translateY(-50%) rotate(-45deg);

}

input[type=button]:hover,
input[type=submit]:hover {
    opacity: 0.8;
}

/* simulation */

.simulation_contents {
    max-width: 1000px;
    margin: 60px auto;
    border-radius: 5px;
}

.simulation_contents .simulation_wrap {
    position: relative;
}

/* .simulation_contents .simulation_wrap::after {
    content: "";
    position: absolute;
    top: 8%;
    left: 70px;
    width: 2px;
    height: 540px;
    background-color: #ADADAD;
    z-index: 0;
} */

.simulation_item {
    display: flex;
    position: relative;
}

.simulation_item:nth-of-type(even) {
    background-color: #F9FCED;
}

.simulation_item::before {
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    content: "1";
    position: absolute;
    display: block;
    top: 0.7em;
    left: 1em;
    background-color: #00603C;
    border-radius: 50%;
    font-weight: bold;
    color: #fff;
    z-index: 1;
    width: 1.8em;
    height: 1.8em;
    line-height: 1.9;
    text-align: center;
}

.simulation_item:nth-child(2)::before {
    content: "2";
}

.simulation_item:nth-child(3)::before {
    content: "3";
}

.simulation_item:nth-child(4)::before {
    content: "4";
}

.simulation_item:nth-child(5)::before {
    content: "5";
}

.simulation_item:nth-child(6)::before {
    content: "6";
}

.simulation_item .question {
    font-size: 18px;
    font-weight: bold;
    text-align: left;
}

.question_text {
    width: 31%;
    min-width: 310px;
    border-right: 1px dotted #707070;
    padding: 25px 25px 25px 80px;
}

.simulation_item .answer {
    text-align: left;
    width: 100%;
    padding: 25px 20px;
    border-right: 1px dotted #707070;
}

input[type=text] {
    font-size: 24px;
    text-align: right;
    padding: .2em;
    margin-right: .5em;
    box-sizing: border-box;
    width: 100%;
}

.answer_caution {
    font-size: 14px;
    margin-top: 1em;
}

.answer_text {
    display: flex;
    align-items: baseline;
}



/* land */
.land {
    background-color: #E7F0C2;
    width: 100%;
    margin-left: auto;
    margin-top: 40px;
    text-align: left;
    border-radius: 5px;
}

.land_contents {
    padding: 27px;
}

.land .title {
    font-weight: bold;
    color: #8A9A3F;
    margin-bottom: 30px;
}

.land_caution {
    font-size: 14px;
    margin-top: 1em;
    color: #444;
    border-bottom: 1px solid #fff;
}

.land_item {
    display: flex;
    margin-top: 22px;
    align-items: flex-end;
    line-height: 1;
}

.land_item .price {
    font-size: 24px;
    font-weight: bold;
    margin: 0 .5em 0 1em;
}

.land_item .currency {
    font-weight: bold;
}

.land_item .title {
    font-size: 16px;
    color: #444;
    font-weight: 400;
    margin-bottom: 0;
}

.funds_text {
    text-align: left;
}

/* result */
.result_contents {
    background-color: #FFFCF3;
    border: 1px solid #DED8B6;
    max-width: 1000px;
    margin: 60px auto;
    border-radius: 5px;
}

.result_contents .result_wrap {
    padding: 50px;
}

.result_title {
    text-align: left;
    font-size: 36px;
    font-weight: bold;
}

.result_text {
    text-align: left;
    font-size: 16px;
    margin-top: 20px;
}

.result_text_wrap {
    margin-top: 30px;
}



.result_text .price_wrap {
    display: flex;
}

.result_item {
    display: flex;
    margin-top: 10px;
    background-color: #fff;
    border: 1px solid #ADADAD;
    border-radius: 5px;
    font-size: 14px;
}

.result_item_end {
    border: 3px solid #00603C;
}

.result_text_wrap .result_item_top {
    margin-top: 0;
}


.result_item .title {
    font-size: 18px;
    font-weight: bold;
    color: #00603C;
    text-align: left;
}

.result_item_title {
    padding: 30px;
    width: 315px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.result_item .price {
    font-size: 24px;
    font-weight: bold;
    color: #444;
    text-align: left;
}

.result_item .currency {
    font-size: 20px;
    font-weight: bold;
    color: #444;
}

.currency_check {
    font-size: 16px;
    margin-left: 1em;
}

.currency_wrap {}

.currency_wrap .price {}

.equal {
    position: relative;
    padding-left: 100px;
}

.equal::before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    left: 2.4em;
    transform: translate(0%, -50%);
    background-image: url(/ie/fund/sim/img/equal_image.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.equal .title {
    position: relative;
    padding-left: 100px;
}

.cost {
    position: relative;
    margin: 30px 0 30px 100px;
    position: relative;
}

.cost::before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    left: -2em;
    transform: translate(-100%, -100%);
    background-image: url(/ie/fund/sim/img/plus_image.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.cost_contents {
    position: relative;
}

.cost_contents::before {
    content: "";
    display: block;
    width: 20px;
    height: 48px;
    position: absolute;
    top: 50%;
    right: 35%;
    transform: translate(0, -50%);
    background-image: url(/ie/fund/sim/img/comparison_border.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.cost_contents::after {
    content: "(c)";
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    right: 30%;
    transform: translate(0, -50%);
}

.cost_item {
    display: flex;
    margin-top: 1.5em;
}

.cost_item .title {
    text-align: left;
    width: 50%;
}


.mycost {
    display: flex;
    margin: 30px 0 30px 100px;
    position: relative;
}

.mycost::before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    left: -2em;
    transform: translate(-100%, -50%);
    background-image: url(/ie/fund/sim/img/minus_image.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.mycost .title {
    text-align: left;
    width: 50%;
}

.cost_caution {
    text-align: left;
    margin-left: 50%;
    margin-top: .5em;
}


/* タブ切り替え */
.preparation_wrap {
    text-align: left;
}

.tab_class {
    max-width: 220px;
    width: 100%;
    padding: .5em 0;
    background-color: #fff;
    font-size: 18px;
    text-align: center;
    display: inline-block;
    border-radius: 5px;
    border: 1px solid #ADADAD;
    margin-right: 1em;
}

.tab_class:last-child {
    margin-right: 0;
}

input[name="in_youi"] {
    display: none;
}

input:checked+.tab_class {
    background-color: #8A9A3F;
    color: #fff;
}

input+.tab_class:hover {
    background-color: #8A9A3F;
    color: #fff;
}

.content_class {
    width: 100%;
    background-color: #E7F0C2;
    margin-top: 30px;
    opacity: 0;
}

input:checked+.tab_class+.content_class {
    opacity: 100;
}



/* ここから新規 */
.trial_calculation {
    max-width: 1000px;
    margin: 80px auto 0;
}

.simulation .medium_title {
    font-size: 24px;
    font-weight: bold;
    text-align: left;
    color: #8A9A3F;
    border-bottom: 3px solid #8A9A3F;
    padding-bottom: 0.2em;
    margin-bottom: 1em;
    line-height: 1.5;
}

.trial_button {
    display: flex;
}

.trial_button button {
    font-size: 16px;
    width: 25%;
    margin: 10px;
    padding: 1em 0;
    background-color: #fff;
    color: #444;
    border: 1px solid #707070;
    border-radius: 5px;
    transition: .4s;
}

.trial_button button:hover {
    color: #fff;
    background-color: #8A9A3F;
    border: 1px solid #8A9A3F;
}


.check_container {
    display: flex;
}

.simulation_wrap .check1 {
    padding: 25px 25px 25px 80px;
    width: 31%;
    min-width: 310px;
    border-right: 1px dotted #fff;
    background-color: #8A9A3F;
}

.simulation_wrap .check2,
.simulation_wrap .check3,
.simulation_wrap .check4 {
    font-size: 24px;
    text-align: center;
    width: 100%;
    padding: .8em;
    border-right: 1px dotted #fff;
    color: #fff;
    font-weight: bold;
    background-color: #8A9A3F;
}


.answer_text_item {
    display: flex;
    align-items: baseline;
}



.simulation_item .answer input[type=text] {
    width: calc(100% - 2.5em);
    max-width: 300px;
    min-width: 3em;
    margin-right: 0.5em;
}


.simulation_item.kinri .title,
.kinri_dankai_detail {
    display: none;
}

.answer.kinri_dankai .title {
    display: inline;
}

.answer.kinri_dankai {
    font-size: 13px;
}

.answer.kinri_dankai .kinri_dankai_detail {
    margin-top: 1em;
    display: block;
}

.answer.kinri_dankai .title,
.answer.kinri_dankai .year_text {
    margin-right: 0.3em;
}

.answer.kinri_dankai input[type=text] {
    width: 3.7em;
    font-size: 17px;
    padding: 0.3em;
    margin-right: 0.3em;
}

.answer.kinri_dankai input[type=text].year {
    min-width: auto;
    width: 2.7em;
}

.answer.kinri_dankai .unit {
    font-size: 14px;
}


.answer_text_item+.answer_text_item {
    margin-top: 1em;
}


.result_text_wrap .check_container {
    display: flex;
    border-left: 1px solid transparent;
    border-right: 1px dotted #707070;
}

.result_text_wrap .check1 {
    width: 315px;
    flex-shrink: 0;
}

.result_text_wrap .check2,
.result_text_wrap .check3,
.result_text_wrap .check4 {
    font-size: 24px;
    text-align: center;
    width: 100%;
    padding: .6em 20px;
    border-left: 1px dotted #707070;
    color: #8A9A3F;
    font-weight: bold;
}

.price_wrap {
    padding: 20px;
    width: 100%;
    border-left: 1px dotted #707070;
    text-align: right;
}

.result_text_wrap .result_caution {
    font-size: 14px;
    text-align: right;
    margin-top: 1.5em;
}

.tiered {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.result_item .kinri_dankai1,
.result_item .kinri_dankai2 {
    display: none;
}

@media only screen and (max-width: 767px) {

    #content .plan2,
    #content .plan3 {
        /* 初期表示 */
        display: none !important;
    }

    .trial_calculation,
    .check_container,
    .result_text_wrap .check_container,
    .plan2,
    .plan3 {
        display: none;
    }

    .caution {
        font-size: 13px;
    }

    .simulation .medium_title {
        font-size: 18px;
    }

    .trial_calculation {
        margin-top: 40px;
    }

    .simulation_contents {
        margin: 30px auto;
    }

    .simulation_item {
        flex-direction: column;
        margin-left: 15px;
        padding-bottom: 30px;
        padding-left: 25px;
        position: relative;
        border-left: 2px solid #ADADAD;
        justify-content: space-between;
    }

    .simulation_item:last-of-type {
        padding-bottom: 0;
        border-left: none;
    }

    .simulation_item::before {
        font-size: 18px;
        top: -0.2em;
        left: -1em;
    }

    .simulation_item .question {
        font-size: 16px;
        width: 100%;
    }

    .question_text {
        width: auto;
        border-right: none;
        padding: 0;
        min-width: auto;
    }

    .simulation_contents .simulation_wrap {
        padding: 20px;
        background-color: #F9FCED;
        border-radius: 5px;
    }

    .simulation_item .answer {
        width: 100%;
        padding: 0;
        border-right: 0;
        min-width: auto;
    }

    .answer.kinri_dankai {
        margin-top: 1em;
    }

    .answer.kinri_dankai input[type=text] {
        margin-top: 0;
        font-size: 16px;
    }

    .calculation_button {
        margin-top: 30px;
    }

    .answer_caution {
        font-size: 12px;
    }

    .tab_class {
        max-width: 100%;
        font-size: 14px;
    }


    .land_contents {
        padding: 20px;
    }

    .land .title {
        font-size: 14px;
        margin-bottom: 0;
    }

    .land_caution {
        font-size: 12px;
        padding: 0;
        border: none;
    }

    .land_item .title {
        font-size: 13px;
    }

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

    .land_item .price {
        font-size: 18px;
        font-weight: bold;
        margin: 0 0.2em 0 0.5em;
    }

    .result_contents {
        margin: 40px auto;
    }

    .result_contents .result_wrap {
        padding: 20px;
    }

    .result_title {
        font-size: 20px;
    }

    .result_text {
        font-size: 14px;
    }

    .result_text_wrap {
        margin-top: 20px;
    }

    .result_item {
        font-size: 13px;
    }

    .result_item_title {
        padding: 15px;
        width: 45%;
        min-width: auto;
        box-sizing: border-box;
    }

    .price_wrap {
        padding: 15px;
        border-right: 0;
        width: 55%;
        box-sizing: border-box;
    }

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

    .currency span {
        font-size: 10px;
        margin-left: 1em;
    }

    .result_item .price {
        font-size: 18px;
    }

    .result_item .currency {
        font-size: 13px;
    }

    .result_item .price_wrap .currency_check {
        margin-left: 1em;
    }

    .result_text_wrap .result_caution {
        font-size: 13px;
        text-align: left;
        text-indent: -1em;
        padding-left: 1em;
    }

    input.print {
        display: none;
    }
}