@import url('https://fonts.googleapis.com/css2?family=Hind:wght@700&display=swap&text=CASEMOVIE0123456789');

/*==============================================================

financial_plan common

==============================================================*/
:root {
    /* color */
    --color-dblue: #26466d;
    --color-lblue: #6ebec4;
    --color-bg1: #f7f6f2;
    --color-bg2: #e5eded;
    --callout-border: 4px;
}

img {
    vertical-align: bottom;
}

.en {
    font-family: 'Hind', sans-serif;
    font-weight: 700;
}

.dblue {
    color: var(--color-dblue) !important;
}

.red {
    color: var(--color-red) !important;
}

.bg-dblue {
    color: #fff;
    background-color: var(--color-dblue) !important;
}

.bg-red {
    color: #fff;
    background-color: var(--color-red) !important;
}

.bg-white {
    background-color: #fff !important;
}

.bg-financial_beige {
    background-color: var(--color-bg1) !important;
}

.bg-financial_gray {
    background-color: var(--color-bg2) !important;
}

.underline {
    background: linear-gradient(transparent 65%, rgba(110, 190, 196, 0.5) 65%);
    text-decoration: none;
}

.pbtm-0 {
    padding-bottom: 0 !important;
}

/*==============================================================

financial_plan top

==============================================================*/

/* header
------------------------------------------*/
.main-header {
    width: 100%;
    height: 370px;
    position: relative;
    background-color: var(--color-bg1);
}

@media screen and (max-width:767px) {
    .main-header {
        height: auto;
        overflow: hidden;
    }
}

.main-header .title-wrp {
    position: relative;
    padding-top: 6%;
}

@media screen and (max-width:767px) {
    .main-header .title-wrp {
        height: auto;
    }
}

.main-header .title-wrp .title {
    align-self: center;
    position: relative;
    z-index: 2;
}

@media screen and (max-width:767px) {
    .main-header .title-wrp .title {
        width: min(96%, 520px);
        padding-top: 20px;
        margin: 0 auto;
        position: static;
    }
}

/* .main-header .title-wrp .title .tagline {
    display: block;
    width: 100%;
    font-size: 1.8rem;
    margin: 1em auto;
} */

.main-header .mainimg {
    width: 90%;
    max-width: 1400px;
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0;
    padding: 0;
}

@media screen and (max-width:767px) {
    .main-header .mainimg {
        width: 160%;
        margin-left: -60%;
        position: static;
    }
}

/* main
------------------------------------------*/
.main-contnets-wrp {
    background-color: var(--color-bg1);
    position: relative;
}

.main-contnets-wrp a:not([class]) {
    color: var(--color-dblue);
}

.main-contnets-wrp .note,
#lBox .note {
    font-size: min(1.4rem, 3.4vw);
}

.main-contnets-wrp .note+.note,
#lBox .note+.note {
    margin-top: .3em;
}

.main-contnets-wrp .note:not(.red),
#lBox .note:not(.red) {
    color: #666;
}

.main-contnets-wrp .note a,
#lBox .note a {
    word-break: break-all;
}

/* lead wrp
------------------------------------------*/
.lead-wrp {
    padding: 0 50px 0 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(20px, 3vw, 100px);
    background-color: var(--color-dblue);
    color: #fff;
    font-size: 1.6rem;
    line-height: 2;
}

@media screen and (max-width: 767px) {
    .lead-wrp {
        display: block;
        padding: 0;
    }
}

.lead-wrp .lead {
    min-width: 32em;
    font-size: min(1.6rem, 4vw);
    line-height: 2;
    font-weight: 500;
}

@media screen and (max-width: 1024px) {
    .lead-wrp .lead {
        min-width: 18em;
    }

    @media screen and (max-width: 767px) {
        .lead-wrp .lead {
            padding: 2.5em 1.5em;
        }
    }
}

.lead-wrp .lead br.tabbr {
    display: none;
}

@media screen and (max-width: 1024px) {
    .lead-wrp .lead br.tabbr {
        display: block;
    }

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

        .lead-wrp .lead br,
        .lead-wrp .lead br.tabbr {
            display: none;
        }
    }
}

/* planner profile -------------*/
.lead-wrp .planner-wrp {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    overflow: hidden;
}

.lead-wrp .planner-wrp .thumb {
    width: min(150px, 36%);
}

@media (max-width:767px) {
    .lead-wrp .planner-wrp .thumb img {
        scale: 1.1;
        object-position: center bottom;
    }
}

.lead-wrp .planner-wrp .meta-wrp {
    padding: 2em 0;
    flex-grow: 1;
}

@media (max-width:767px) {
    .lead-wrp .planner-wrp .meta-wrp {
        width: 63%;
        padding: 0 1em 2em 0;
    }
}

.lead-wrp .planner-wrp .planner-title {
    font-size: min(2.2rem, 5vw);
    margin-bottom: .5em;
}

.lead-wrp .planner-wrp .planner-title::first-letter {
    color: var(--color-red);
}

.lead-wrp .planner-wrp .subtitle {
    font-size: min(1.4rem, 3.4vw);
    font-weight: 500;
    line-height: 1.5;
}

.planner-name {
    font-size: min(2rem, 5.8vw);
    font-weight: 500;
}

.planner-name .sml {
    padding: 0 .1em;
    font-size: .7em;
}

.lead-wrp .planner-wrp .btn {
    margin: 1em 0 0;
    font-size: min(1.4rem, 3.4vw);
    font-weight: bold;
    background-color: #fff;
    color: var(--color-dblue);
    transition: all .3s ease;
}

.lead-wrp .planner-wrp .btn:hover {
    background-color: #f9e37c;
}

/* popup profile -------------*/
.profile-wrp {
    width: min(90vw, 600px);
    margin: 0 auto;
    display: grid;
    grid-template-areas:
        "header header"
        "figure info";
    grid-template-columns: auto 1fr;
    place-items: center;
    gap: 0 32px;
}

@media screen and (max-width: 414px) {
    .profile-wrp {
        grid-template-areas:
            "header"
            "figure"
            "info";
        grid-template-columns: auto;
        gap: 5vw 0;
    }
}

.profile-wrp header {
    grid-area: header;
}

.profile-wrp .title {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 1em;
}

.profile-wrp .subtitle {
    font-size: 1.3em;
    text-align: center;
    margin-bottom: 1em;
}

.profile-wrp .thumb {
    width: min(150px, 30vw);
    grid-area: figure;
}

.profile-wrp .meta-wrp {
    grid-area: info;
}

.profile-wrp .meta-wrp p {
    font-size: .9em;
    line-height: 1.8;
}

.profile-wrp .meta-wrp p.planner-name {
    font-size: 1.2em;
    margin-bottom: 1em;
}


/* article list wrp
------------------------------------------*/
.article-list-wrp {
    position: relative;
    z-index: 0;
}

/* anchor_link -------------*/
.anchor_link-wrp {
    padding: min(2em, 3vw) min(2em, 2vw);
    z-index: 2;
    background-color: var(--color-bg1);
}

.anchor_link-wrp .anchor_link-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: min(2em, 1vw);
}

.anchor_link-wrp .anchor_link-list .anchor_link {
    width: min(20em, 32vw);
}

.anchor_link-wrp .anchor_link-list .anchor_link a {
    display: block;
    width: 100%;
    padding: 1em 1.5em;
    text-align: center;
    font-weight: bold;
    font-size: 1.1em;
    letter-spacing: .05em;
    color: #fff;
    background-color: var(--plan-bgColor);
    text-decoration: none;
    border: solid 2px #fff;
    border-radius: 10px;
    position: relative;
    transition: all .3s ease;
}

.anchor_link-wrp .anchor_link-list .anchor_link:hover a {
    background-color: #222;
}

@media (max-width:1024px) {
    .anchor_link-wrp .anchor_link-list .anchor_link a {
        padding: 1em 1em 1em .25em;
        font-size: min(1em, 3.2vw);
    }
}

.anchor_link-wrp .anchor_link-list .anchor_link a .sml {
    font-weight: normal;
    font-size: .85em;
}

@media (max-width:767px) {
    .anchor_link-wrp .anchor_link-list .anchor_link a .sml {
        display: block;
        font-size: .95em;
    }
}

.anchor_link-wrp .anchor_link-list .anchor_link a .min-ls {
    display: inline-block;
    margin: 0 -.25em;
}

.anchor_link-wrp .anchor_link-list .anchor_link a .iconfont-c-arrow_b {
    position: absolute;
    top: calc(50% - .5em);
    right: .5em;
    font-size: 1.8rem;
}

@media (max-width:767px) {
    .anchor_link-wrp .anchor_link-list .anchor_link a .iconfont-c-arrow_b {
        right: .25em;
        font-size: 3.4vw;
    }
}

/* article list -------------*/
.article-list {
    width: calc(100% - 50px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width:767px) {
    .article-list {
        width: 100%;
        display: block;
    }
}

.article-list.plan-basic,
.anchor_link-wrp .anchor_link-list .anchor_link.basic a {
    --plan-bgColor: #6ebec4;
}

.article-list.plan-lifeplan,
.anchor_link-wrp .anchor_link-list .anchor_link.lifeplan a {
    --plan-bgColor: #e9cc44;
    --blend-per: 40%;
}

.article-list.plan-system,
.anchor_link-wrp .anchor_link-list .anchor_link.system a {
    --plan-bgColor: #f14232;
}

.article-list .plan_list-title {
    grid-column: span 3;
    padding: 1.25em;
    background-color: var(--plan-bgColor);
    color: #fff;
    text-align: center;
    font-size: min(1.5em, 4.6vw);
    letter-spacing: .1em;
}

.article-list .article-wrp {
    padding: 2em 1em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    /* background-color: color-mix(in srgb, var(--plan-bgColor) var(--blend-per, 30%), #fff); */
    background-color: var(--color-bg1);
}

:where(.plan-basic, .plan-system) .article-wrp:nth-child(even),
.plan-lifeplan .article-wrp:nth-child(odd) {
    background-color: color-mix(in srgb, var(--color-bg1) 96%, #000);
}

/* :where(.plan-basic, .plan-system) .article-wrp:nth-child(even) {
    background-color: color-mix(in srgb, var(--plan-bgColor) 20%, #fff);
}

.plan-lifeplan .article-wrp:nth-child(odd) {
    background-color: color-mix(in srgb, var(--plan-bgColor) 22%, #fff);
} */

@media (max-width:767px) {
    .article-list .article-wrp {
        width: 100%;
        padding: 2em .5em;
        flex-direction: row;
        justify-content: center;
    }
}

/* .article-list .article-wrp .new {
    display: inline-block;
    width: 120px;
    height: 60px;
    position: absolute;
    bottom: 85%;
    left: -20%;
    transform: rotate(-10deg);
}

.article-list .article-wrp .new img {
    width: 100%;
    height: 100%;
    object-fit: contain;
} */

.article-list .article-wrp .thumb {
    width: min(230px, 80%);
    aspect-ratio: 1/.78;
    margin: 0 auto 1.5em;
    max-height: 179px;
}

@media (max-width:767px) {
    .article-list .article-wrp .thumb {
        width: min(200px, 38%);
        margin: 0;
        aspect-ratio: 1/1;
    }
}

.article-list .article-wrp .thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.article-list .article-wrp .meta-wrp {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

@media (max-width:767px) {
    .article-list .article-wrp .meta-wrp {
        display: block;
        width: 60%;
        padding: 0 .5em;
    }
}

.single-title-wrp .title,
.article-list .article-wrp .title {
    margin-bottom: .5em;
    color: var(--color-dblue);
    font-size: min(2rem, 5vw);
    position: relative;
}


.single-title-wrp .title.new::before,
.article-list .article-wrp .title.new::before {
    content: 'NEW';
    display: inline-block;
    background-color: var(--color-red);
    color: #fff;
    margin-right: .75em;
    padding: .25em .75em;
    border-radius: 3px;
    font-size: min(.6em, 2.5vw);
    vertical-align: middle;
}

.single-title-wrp .title.new::before {
    font-size: min(.5em, 3vw);
}

.article-list .article-wrp .lead {
    margin-bottom: 1em;
    font-size: min(1.6rem, 4vw);
    font-weight: 500;
}

.article-list .article-wrp .btn {
    background-color: var(--color-dblue);
    font-size: min(1.3rem, 4vw);
    color: #fff;
    margin: auto 0 0;
    transition: all .3s ease;
}

.article-list .article-wrp .btn:not(.soon):hover {
    background-color: #222 !important;
}

.article-list .article-wrp .btn.soon {
    background-color: #ccc;
    pointer-events: none;
}


/*==============================================================

financial_plan single page

==============================================================*/
@media (min-width: 768px) {
    .single .main-contnets-wrp .inner-lg {
        width: min(calc(100% - 200px), var(--max-width));
    }
}

/* article header
------------------------------------------*/
.article-header {
    width: 100%;
    overflow: hidden;
    background-color: var(--color-bg2);
}

@media screen and (max-width: 767px) {
    .article-header {
        width: 100%;
        text-align: center;
    }
}

.article-header .title-wrp {
    display: grid;
    min-height: 240px;
    grid-template-columns: min(320px, 30%) 1fr 240px;
    grid-template-rows: max(240px, 100%);
    position: relative;
}

@media screen and (max-width: 767px) {
    .article-header .title-wrp {
        grid-template-columns: 100%;
        grid-template-rows: auto auto min(300px, 60vw);
    }
}

.article-header .financial_plan-logo {
    display: grid;
    place-items: center;
    background-color: var(--color-bg1);
    position: relative;
}

@media screen and (max-width: 767px) {
    .article-header .financial_plan-logo {
        width: 100%;
        height: auto;
        padding: 15px 0;
    }
}

.article-header .financial_plan-logo picture {
    width: min(220px, 90%);
}

@media screen and (max-width: 767px) {
    .article-header .financial_plan-logo picture {
        width: min(80%, 360px);
    }
}

.article-header .financial_plan-logo img,
.article-header .financial_plan-logo source {
    width: 100%;
    height: auto;
}

.article-header .single-title-wrp {
    padding: 2em 10px 2em 60px;
    align-self: center;
}

@media screen and (max-width: 767px) {
    .article-header .single-title-wrp {
        width: 100%;
        padding: 20px;
    }
}

/* .article-header .num {
    font-size: min(6rem, 10vw);
    display: inline-block;
    margin-right: .5em;
}

.article-header .num::after {
    height: 5px;
}

@media screen and (max-width: 767px) {
    .article-header .num {
        display: inline-block;
        margin: 0 auto;
    }
}
*/

.article-header .single-title-wrp .title {
    font-size: min(3.2rem, 5vw);
    color: var(--color-dblue);
    letter-spacing: .05em;
    margin-top: 0;
}

@media screen and (max-width: 767px) {
    .article-header .title {
        display: block;
        width: 100%;
        padding: .5em 0 0;
    }
}

.article-header .single-title-wrp .subtitle {
    font-size: min(2.4rem, 5vw);
    margin-top: .5em;
}

@media screen and (max-width: 767px) {
    .article-header .subtitle {
        font-size: min(2rem, 3.6vw);
        margin-top: .5em;
    }
}

.article-header .mainimg {
    width: max(240px, 23%);
    position: absolute;
    right: 0;
    top: 0;
}

.article-header .mainimg img {
    width: min(240px, 60vw);
    height: auto;
}

@media screen and (max-width: 767px) {
    .article-header .mainimg {
        width: 100%;
        position: static;
        text-align: center;
    }
}

/* main
------------------------------------------*/
.financial_plan-inner {
    width: min(calc(100% - calc(var(--base-gutter)*2)), var(--base-width));
    margin: 0 auto;
    padding: 60px 20px;
}

@media (max-width:767px) {
    .financial_plan-inner {
        padding: 40px 0;
        font-size: min(1em, 4.1vw)
    }
}

/* .contents-wrp>.financial_plan-inner:last-child ,
.point-outer>.point-wrp:last-child>.financial_plan-inner {
    padding-bottom: 0;
} */

/* .contents-wrp .financial_plan-inner:not(.pbtm):last-child {
    padding-bottom: 0;
} */

/* comment wrp -------------*/
.comment-wrp {
    background-color: #fff;
}

.comment-wrp .financial_plan-inner {
    max-width: 800px;
}

.comment-wrp .planner-wrp {
    --planner-size: 180px;
    margin-bottom: 4em;
    padding: 2em;
    padding-left: var(--planner-size);
    border-radius: 1em;
    background-color: rgba(249, 226, 124, 0.5);
    font-size: min(1em, 4vw);
    font-weight: bold;
    position: relative;
}

.comment-wrp .planner-wrp::before {
    content: '';
    display: block;
    width: var(--planner-size);
    height: calc(100% + 2em);
    background: url(../img/planner1.svg) no-repeat center top / 100% auto;
    position: absolute;
    left: 0;
    bottom: 0;
}

@media screen and (max-width: 640px) {
    .comment-wrp .planner-wrp {
        --planner-size: 25vw;
    }

    .comment-wrp .planner-wrp::before {
        height: calc(var(--planner-size)*1.4);
    }

    @media screen and (max-width: 414px) {
        .comment-wrp .planner-wrp {
            margin-top: 1em;
            padding: 3em 1em 1.5em;
            text-align: center;
        }

        .comment-wrp .planner-wrp::before {
            width: 20vw;
            height: 20vw;
            background: url(../img/c-planner.svg) no-repeat center top / 100% auto;
            left: calc(50% - 10vw);
            top: -10vw;
            bottom: auto;
        }

    }
}

.comment-box {
    width: 100%;
    max-width: 900px;
    margin: 2em auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.comment-box.planner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.comment-box .icon {
    width: 100px;
    transform: translateY(-1em);
    position: relative;
}

@media screen and (max-width: 767px) {
    .comment-box .icon {
        width: 70px;
    }
}

.comment-wrp .comment-box.planner .icon::after {
    content: '大矢先生';
    display: block;
    width: 100%;
    margin-top: .2em;
    font-size: .8em;
    text-align: center;
    color: var(--color-red);
}

.comment {
    background: #fff;
    border-radius: 0.25em;
    position: relative;
}

.comment-box .comment {
    max-width: calc(100% - 200px);
    padding: 2em;
    margin: 0 2em;
    border: 4px solid var(--color-lblue);
    border-radius: 1em;
    text-align: justify;
}

@media screen and (max-width: 767px) {
    .comment-box .comment {
        max-width: calc(100% - 90px);
        padding: .75em;
        margin: 0 1em;
        font-size: .85em;
    }
}

.comment-box.planner .comment {
    border: 4px solid var(--color-red);
    border-radius: 1em;
}

.comment::after,
.comment::before {
    content: '';
    height: 0;
    width: 0;
    position: absolute;
    top: 50%;
    pointer-events: none;
    border: solid transparent;
    transform: translateY(-50%);
}

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

    .comment::after,
    .comment::before {
        font-size: .7em;
    }
}

/* callout right */
.callout-r-frame::after,
.callout-r-frame::before {
    left: 100%;
    border-width: 1em 0 1em 1.7em;
}

.callout-r-frame::before {
    border-color: transparent transparent transparent var(--color-lblue);
}

.callout-r-frame::after {
    margin-left: -6px;
    border-color: transparent transparent transparent #fff;
}

.planner .callout-r-frame::before {
    border-color: transparent transparent transparent var(--color-red);
}

/* callout left */
.callout-l-frame::after,
.callout-l-frame::before {
    right: 100%;
    border-width: 1em 1.7em 1em 0;
}

.callout-l-frame::before {
    border-color: transparent var(--color-lblue) transparent transparent;
}

.callout-l-frame::after {
    margin-right: -6px;
    border-color: transparent #fff transparent transparent;
}

.planner .callout-l-frame::before {
    border-color: transparent var(--color-red) transparent transparent;
}

/* marker */
.yellow_line {
    background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #f9e37c 0%) repeat scroll 0 0;
}

/* family profile wrp -------------*/
.family-profile-title {
    text-align: center;
    font-size: min(3rem, 6.5vw);
    color: var(--color-dblue);
}

.family-profile-name {
    text-align: center;
    font-size: min(1em, 4vw);
}

/* basic_profile */
.basic_profile {
    width: min(100%, 800px);
    margin: 2em auto 0;
    display: grid;
    gap: 2em;
}

.vol4 .basic_profile {
    width: min(100%, 940px);
}

@media (min-width: 768px) {
    .basic_profile {
        grid-template-areas:
            "img table"
            "img comment";
        grid-template-columns: 160px 1fr;
    }

    .vol4 .basic_profile {
        grid-template-columns: 300px 1fr;

    }
}

@media screen and (max-width: 767px) {
    .basic_profile {
        grid-template-areas:
            "img"
            "table"
            "comment";
        grid-template-rows: min(35vw, 200px) auto auto;
        gap: 1em 0;
    }
}

.basic_profile .profile-img {
    grid-area: img;
    align-self: center;
    text-align: center;
}

@media screen and (max-width: 767px) {
    .basic_profile .profile-img img {
        width: auto;
        height: min(35vw, 200px);
    }
}

.basic_profile .basic_profile-table {
    grid-area: table;
}

@media screen and (min-width: 840px) {
    .basic_profile .basic_profile-table {
        padding-top: 2rem;
        display: grid;
        grid-template-areas:
            "th1 td1 th2 td2"
            "th1 td1 th3 td3"
            "th1 td1 th4 td4";
        align-content: center;
    }

    .basic_profile .basic_profile-table :is(tbody, tr) {
        display: contents;
    }

    .basic_profile .basic_profile-table :is(th, td) {
        padding: .3em 0;
    }

    .basic_profile .basic_profile-table tr:nth-child(1) th {
        grid-area: th1;
    }

    .basic_profile .basic_profile-table tr:nth-child(1) td {
        grid-area: td1;
        margin-right: 4rem;
        border-right: solid 1px #aaa;
    }

    .basic_profile .basic_profile-table tr:nth-child(2) th {
        grid-area: th2;
        border-bottom: solid 1px #666;
    }

    .basic_profile .basic_profile-table tr:nth-child(2) td {
        grid-area: td2;
        border-bottom: solid 1px #666;
    }

    .basic_profile .basic_profile-table tr:nth-child(3) th {
        grid-area: th3;
        border-bottom: solid 1px #666;
    }

    .basic_profile .basic_profile-table tr:nth-child(3) td {
        grid-area: td3;
        border-bottom: solid 1px #666;
    }

    .basic_profile .basic_profile-table tr:nth-child(4) th {
        grid-area: th4;
    }

    .basic_profile .basic_profile-table tr:nth-child(4) td {
        grid-area: td4;
    }
}

@media screen and (max-width: 840px) {
    .basic_profile .basic_profile-table :is(th, td) {
        padding: .5em 0;
        border-bottom: solid 1px #666;
    }

    @media screen and (max-width: 767px) {
        .basic_profile .basic_profile-table {
            font-size: min(1.3rem, 3.5vw);
        }
    }
}

.basic_profile .basic_profile-table th {
    color: var(--color-red);
    text-align: left;
}

.basic_profile .comment {
    border: 4px solid var(--color-lblue);
    border-radius: 1em;
    padding: 2em;
    grid-area: comment;
}

@media (min-width: 768px) {
    .basic_profile .comment {
        width: fit-content;
        height: max-content;
    }
}

@media screen and (max-width: 767px) {
    .basic_profile .comment {
        margin-top: 1em;
        padding: 1.2em;
        font-size: 1.4rem;
    }

    .basic_profile .comment::before,
    .basic_profile .comment::after {
        position: absolute;
        left: 50%;
        right: auto;
        top: auto;
        border-width: 0 1.2em 2em 1.2em;
        pointer-events: none;
        transform: translate(-50%, 0);
    }

    .basic_profile .comment::before {
        bottom: 100%;
        border-color: transparent transparent var(--color-lblue) transparent;
    }

    .basic_profile .comment::after {
        bottom: calc(100% - 8px);
        border-color: transparent transparent #fff transparent;
    }
}

/* plan-frame */
.family-profile-wrp .plan-frame {
    margin: 2em auto 0;
    padding: 2em 3em;
    background-color: #fff;
}

.family-profile-wrp .plan-frame .plan-title {
    text-align: center;
    font-size: 2rem;
    color: var(--color-dblue);
}

.family-profile-wrp .plan-frame .plan-item {
    margin: 2.5em 0;
    align-items: center;
}

.summary-box {
    text-align: center;
    color: #fff;
    background-color: var(--color-red);
    border-radius: 10px;
    font-weight: bold;
    position: relative;
}

.summary-box span:not([class]) {
    font-size: 1.3em;
}

.family-profile-wrp .plan-frame .summary-box {
    width: 11em;
    height: 5em;
    line-height: 1.9;
    display: grid;
    place-items: center;
}

.family-profile-wrp .plan-frame .summary-box::after {
    content: '';
    display: block;
    width: 1.2em;
    height: .9em;
    position: absolute;
    right: -2.6em;
    top: calc(50% - .5em);
    border-top: solid 4px #000;
    border-bottom: solid 4px #000;
}

.family-profile-wrp .plan-frame .detail-table {
    width: calc(100% - 16em);
}

.family-profile-wrp .plan-frame .detail-table :is(th, td) {
    width: 30%;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
}

.family-profile-wrp .plan-frame .detail-table :is(th, td):nth-child(2) {
    width: 65%;
    border-left: solid 1px #666;
}

.family-profile-wrp .plan-frame .detail-table th {
    padding: .5em .5em;
    border-top: solid 1px #666;
    border-bottom: solid 1px #666;
    color: var(--color-red);
}

.family-profile-wrp .plan-frame .detail-table td {
    padding: .7em .5em;
    border-bottom: solid 1px #666;
}

.family-profile-wrp .plan-frame+.note {
    margin-top: 10px;
}

@media screen and (max-width: 767px) {
    .family-profile-wrp .plan-frame {
        padding: 1.2em;
    }

    .family-profile-wrp .plan-frame .plan-title {
        font-size: 1.7rem;
    }

    .family-profile-wrp .plan-frame .plan-item {
        flex-direction: column;
    }

    .family-profile-wrp .plan-frame .summary-box {
        margin-bottom: 3em;
    }

    .family-profile-wrp .plan-frame .summary-box::after {
        width: 1em;
        height: 1.2em;
        right: calc(50% - .5em);
        top: calc(100% + .9em);
        border: none;
        border-left: solid 4px #000;
        border-right: solid 4px #000;
    }

    .family-profile-wrp .plan-frame .detail-table {
        width: 100%;
        font-size: .85em;
    }
}

/* point navi contents -------------*/
.point-outer {
    position: relative;
}

/* point-menu */
@media screen and (min-width: 641px) {
    .point-menu {
        height: 12em;
        position: sticky;
        top: 0;
        z-index: 10;
        transform: scaleY(1);
        transition: transform .3s ease;
        transform-origin: top center;
    }

    .point-menu ul {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: min(64px, 5vw);
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .point-menu ul li {
        width: 14em;
        text-align: center;
    }

    .vol4 .point-menu ul li {
        width: 20em;
    }
}

.point-menu ul li a {
    display: block;
    color: inherit;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
    transform: scale(1, 1);
    transition: transform .3s ease;
}

.point-menu ul li a::after {
    content: '';
    display: block;
    width: 1em;
    height: 1em;
    transform: rotate(45deg);
    margin: 1.2em auto 0;
    border-bottom: solid 1px;
    border-right: solid 1px;
    transition: margin .3s ease;
}

.point-menu ul li span {
    display: block;
    width: 5rem;
    margin: 0 auto .5em;
}

.point-menu.on {
    transform: scaleY(.65);
}

.point-menu.on ul li a {
    transform: scale(.7, 1.1);
}

.point-menu.on ul li a::after {
    margin: .5em auto 0;
}

@media screen and (max-width: 640px) {
    .point-menu {
        height: auto;
        transform: scaleY(1) !important;
        position: static;
    }

    .point-menu ul {
        padding: .8em 2em;
    }

    .point-menu ul li {
        width: 100%;
        margin: 0 auto;
        padding: .5em 0;
        border-bottom: 1px solid #ccc;
    }

    .point-menu ul li:last-child {
        border-bottom: 0;
    }

    .point-menu ul li a {
        display: flex;
        align-items: center;
        font-size: .9em;
        transform: scale(1) !important;
    }

    .point-menu ul li a::after {
        position: absolute;
        right: 0;
        top: calc(50% - .75em);
        margin: 0;
    }

    .point-menu ul li a span {
        width: 4rem;
    }

    .point-menu ul li a p {
        width: calc(100% - 6rem);
        margin-left: 2rem;
        text-align: left;
    }
}

/* point wrp */
.point-wrp {
    overflow: hidden;
}

/* point title */
.point-title {
    text-align: center;
    font-size: 2.6rem;
}

.point-title span:not(.iblock) {
    display: block;
    margin: 0 auto 1em;
}

@media screen and (max-width: 767px) {
    .point-title {
        text-align: center;
        font-size: 2rem;
    }
}

/* frame title -------------*/
.frame-title-wrp {
    text-align: center;
    margin-bottom: 3em;
}

@media screen and (max-width: 767px) {
    .frame-title-wrp {
        margin-bottom: 2em;
    }
}

.point-title+.frame-title-wrp {
    margin-top: min(140px, 28vw);
}

.frame-title {
    font-size: 2rem;
    display: inline-block;
    border: 4px solid;
    padding: .25em 2em;
    position: relative;
    background-color: #fff;
}

@media screen and (max-width: 767px) {
    .frame-title {
        font-size: min(1.6rem, 4.2vw);
        padding: .25em .5em;
    }
}

.frame-title::after {
    display: block;
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    width: min(150px, 33vw);
    aspect-ratio: 1/.8;
    margin: 0 auto;
    background-image: url(/financial_plan/img/planner1.svg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
    translate: -50% 0;
}

.point-title+.lead,
.point-title+.lead+.lead,
.frame-title-wrp+.lead,
.frame-title-wrp+.lead+.lead {
    width: 100%;
    margin: 0 auto 2em;
    text-align: center;
    font-size: min(1.6rem, 4vw);
    line-height: 1.8;
}

.point-title+.lead {
    margin: 2em auto;
}

.frame-title-wrp+.lead.text-left {
    text-align: justify;
}

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

    .frame-title-wrp+.lead,
    .frame-title-wrp+.lead+.lead {
        text-align: justify;
    }
}

/* sub title -------------*/
.sub-title {
    margin-bottom: 1em;
    color: var(--color-dblue);
    font-weight: bold;
    font-size: min(2rem, 4.6vw);
    text-align: center;
}

/* plus advice wrp -------------*/
.plus_advice-wrp {
    margin: 60px auto 0;
    padding: 60px 20px;
    background-color: rgba(249, 226, 124, 0.5);
    border: solid 4px #fff;
    border-radius: 10px;
}

@media (max-width:767px) {
    .plus_advice-wrp {
        margin-top: 10vw;
        padding: 40px 15px;
    }
}

.plus_advice-wrp.with-column {
    padding: 60px 20px 0;
}

.plus_advice-wrp .lead {
    padding-left: 1em;
    padding-right: 1em;
}

.plus_advice-wrp.with-column .column {
    width: calc(100% + 40px);
    margin-top: 40px;
    padding: 40px 5%;
    background-color: #f9e37c;
    translate: -20px;
}

@media screen and (min-width:768px) {
    .plus_advice-wrp.with-column .column {
        display: grid;
        grid-template-areas:
            "icon title"
            "icon text"
            "btn btn";
        grid-template-columns: auto 1fr;
        align-content: center;
        gap: 0 40px;
    }
}

.plus_advice-wrp.with-column .column .column-icon {
    grid-area: icon;
    width: 7em;
    height: 7em;
    display: grid;
    place-items: center;
    background-color: #fff;
    font-size: .85em;
    font-weight: bold;
    border: 3px solid;
    border-radius: 50%;
}

.plus_advice-wrp.with-column .column .column-title {
    grid-area: title;
    margin-bottom: .5em;
    font-size: 1.05em;
    align-self: flex-end;
}

.plus_advice-wrp.with-column .column .text {
    grid-area: text;
}

.plus_advice-wrp.with-column .column .btn-wrp {
    grid-area: btn;
}

.plus_advice-wrp .btn-wrp:last-child .btn {
    margin: 2em auto 0;
}

.plus_advice-wrp.with-column .column .btn-wrp .btn {
    margin: 1em auto 0;
}

@media screen and (max-width:767px) {
    .plus_advice-wrp.with-column .column .column-icon {
        margin: -4em auto 2em;
        font-size: .75em;
    }

    .plus_advice-wrp.with-column .column .column-title {
        text-align: center;
    }

    .plus_advice-wrp.with-column .column .btn-wrp .btn {
        padding: .5em 2em;

    }
}

/* white fill wrp -------------*/
.white-fill_wrp {
    width: 100%;
    margin-bottom: 60px;
    border-radius: 10px;
    background-color: #fff;
    padding: 2em;
}

.white-fill_wrp:last-child {
    margin-bottom: 0;
}

@media (max-width:767px) {
    .white-fill_wrp {
        padding: 40px 15px;
    }
}

.white-fill_wrp .sub-title {
    margin-bottom: .5em;
}

.white-fill_wrp .lead {
    line-height: 1.8;
    text-align: center;
}

@media (max-width:767px) {
    .white-fill_wrp .lead {
        text-align: justify;
    }

    .white-fill_wrp .lead .iblock {
        display: inline;
    }
}

.white-fill_wrp .frame-sub {
    width: fit-content;
    padding: .2em 1em;
    margin: 0 auto 2em;
    border: solid 1px;
    color: var(--color-dblue);
    text-align: center;
    font-size: .9em;
}

.white-fill_wrp .frame-sub .sml {
    font-size: .85em;
}

/* table-type1 -------------*/
.table-type1 {
    margin: 2em auto .5em;
    width: 100%;
}

@media screen and (max-width:767px) {
    .table-type1 {
        font-size: min(1em, 3.2vw);
    }
}

.table-type1 th,
.table-type1 td {
    padding: .75em .5em;
    text-align: center;
    vertical-align: middle;
    border: 2px solid #fff;
    background-color: #f3f3f3;
}

.table-type1 th.subth {
    font-size: .85em;
}

.table-type1 thead th {
    background-color: var(--color-red);
    color: #fff;
}

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

    .tax_cut_plan tbody dt,
    .tax_cut_plan tbody dd {
        padding: .75em .25em;
    }
}

.table-type1 tbody .em-cell {
    background-color: rgba(249, 226, 124, 0.5);
}

.table-type1 tbody .em-cell .em {
    display: block;
    margin-top: .25em;
    font-weight: bold;
    color: var(--color-red);
}

/* account book -------------*/
.account_book {
    width: 100%;
    margin-bottom: 2em;
    --color-accountbook-green: #41aa54;
    --color-accountbook-orange: #fe4d11;
    --color-accountbook-red: #ff0001;
    font-size: .85em;
}

.account_book caption {
    margin-bottom: -1.5em;
    text-align: left;
    font-weight: bold;
}

.account_book :is(th, td) {
    padding: .3em 1em;
    font-weight: normal;
    vertical-align: middle;
}

.account_book tbody tr:first-child :is(th, .before, .after),
.account_book tbody tr.border-thick :is(th, .before, .after) {
    border-top: solid 2px #666;
}

.account_book thead :is(.before, .after) {
    text-align: center;
    font-weight: bold;
}

.account_book tbody:not(.total) .head1 {
    padding-top: .7em;
    vertical-align: top;
}

.account_book tbody .head2 {
    text-align: left;
    border-left: solid 1px #aaa;
    border-bottom: solid 1px #aaa;
}

.account_book tbody :is(.before, .after) {
    padding: .3em .5em;
    border-bottom: solid 1px #aaa;
}

.account_book tbody :is(.before, .after) :is(.price, .price-sp_after) {
    display: block;
    padding-right: max(8rem, 25%);
    text-align: right;
}

.account_book tbody :is(.before, .after) :is(.price, .price-sp_after)::after {
    content: '円';
    font-size: .8em;
    padding-left: .3em;
}

.account_book tbody .before {
    font-size: 1.3em;
    border-left: solid 1px #aaa;
    position: relative;
}

.account_book tbody .before .price-sp_after {
    display: none;
}

.account_book tbody .before .price-sp_after:not(.inherit) {
    color: var(--color-red);
}

.account_book tbody :is(.before, .after) .note {
    display: block;
    text-align: center;
    font-size: .8em;
}

@media screen and (min-width: 768px) {
    .account_book tbody.savings .head1 {
        border-bottom: solid 2px #666;
    }
}

.account_book tbody.savings tr:last-child :is(.head2, .before, .after) {
    border-bottom: solid 2px #666;
}

.account_book tbody.total {
    font-size: 1.2em;
}

.account_book tbody.total :is(th, td) {
    border-bottom: none;
}

.account_book tbody .space {
    width: min(10rem, 10vw);
}

.account_book tbody .after {
    font-size: 1.3em;
}

.account_book tbody .twice {
    position: absolute;
    font-size: .85em;
    transform: translate(1.7em, .15em);
}

.account_book tbody .onlyhasband {
    display: inline-block;
}

.account_book tbody .onlyhasband .sml {
    font-size: .7em;
}

.account_book tbody :is(.incomes-sum, .expenses-sum) :is(th, td:not(.space)) {
    background-color: rgba(249, 226, 124, 0.5);
}

@media screen and (max-width: 960px) {
    .account_book {
        font-size: .9em;
    }

    @media screen and (max-width: 767px) {
        .account_book {
            width: 100%;
            font-size: min(.9em, 3.5vw);
            line-height: 1.4;
        }

        .account_book caption {
            margin-bottom: .7em;
        }

        .account_book thead {
            display: none;
        }

        .account_book tbody tr {
            display: flex;
            flex-wrap: wrap;
        }

        .account_book :is(th, td) {
            padding: .3em;
            font-size: .8em;
        }

        .account_book tbody .head1 {
            display: block;
            width: 100%;
        }

        .account_book tbody .head2,
        .account_book tbody.total .head1 {
            width: 30%;
            border-left: none;
        }

        .account_book tbody .head2 .brackets {
            font-size: .8em;
        }

        .account_book tbody .before {
            display: block;
            width: 70%;
        }

        .account_book tbody .before.show .price {
            display: none;
        }

        .account_book tbody .before.show .price-sp_after {
            display: block;
        }

        .account_book tbody .space {
            display: none;
        }

        .account_book tbody .after {
            display: none;
        }
    }
}

/* check arrow */
.account_book tbody :is(.check_icon, .check_arrow) {
    position: absolute;
    z-index: 2;
}

@media (min-width: 768px) {
    .account_book tbody :is(.check_icon, .check_arrow) {
        left: calc(100% + min(5rem, 5vw));
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

.account_book tbody .check_icon {
    display: block;
    --checkicon-size: 3rem;
    width: var(--checkicon-size);
    height: var(--checkicon-size);
    background-color: var(--color-accountbook-orange);
    border-radius: 50%;
}

.account_book tbody .check_icon::after {
    content: '';
    display: block;
    width: calc(var(--checkicon-size) * .5);
    height: calc(var(--checkicon-size) * .3);
    position: absolute;
    left: 50%;
    top: 50%;
    border-left: solid 3px #fff;
    border-bottom: solid 3px #fff;
    transform: translate(-50%, -70%) rotate(-45deg);
}

.account_book tbody .check_arrow {
    --arrow-color: var(--color-accountbook-green);
    cursor: pointer;
}

.account_book tbody .check_arrow.orange_arrow {
    --arrow-color: var(--color-accountbook-orange);
}

@media (min-width: 768px) {
    .account_book tbody .arrow {
        --arrow-size: 2rem;
        display: block;
        width: 3rem;
        height: var(--arrow-size);
        margin-left: -1rem;
        background-color: var(--arrow-color);
        position: relative;
    }

    .account_book tbody .check_arrow.orange_arrow .arrow {
        --arrow-size: 6rem;
    }

    .account_book tbody .arrow::after {
        content: '';
        display: inline-block;
        width: 2rem;
        height: calc(var(--arrow-size) + 1.4rem);
        background: linear-gradient(to bottom left, transparent 51%, var(--arrow-color) 50%) top left/ 100% 50% no-repeat,
            linear-gradient(to top left, transparent 51%, var(--arrow-color) 50%) bottom left / 100% 50% no-repeat;
        position: absolute;
        left: 97%;
        top: -.7rem;
    }

    .account_book tbody .check {
        padding: .6em 1.2em .5em 1.4em;
        font-size: .55em;
        border-radius: 2em;
        left: 50%;
        top: calc(100% + 1em);
        transform: translateX(-50%);
    }
}

.account_book tbody .check {
    display: inline-block;
    color: #fff;
    background-color: var(--arrow-color);
    line-height: 1;
    position: absolute;
}

.account_book tbody .fukidashi {
    width: max-content;
    position: absolute;
    left: 50%;
    bottom: calc(100% + 1.5rem);
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all .3s ease;
}

.account_book tbody .fukidashi.open {
    bottom: calc(100% + 3rem);
    opacity: 1;
    visibility: visible;
}

.account_book tbody .fukidashi [class*="fukidashi_"] {
    margin-top: .5em;
    padding: 1.2em 2em;
    color: #fff;
    background-color: var(--arrow-color);
    font-size: min(1.5rem, 4vw);
    font-weight: bold;
    text-align: center;
    border-radius: 10px;
    position: relative;
    box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .3);
}

.account_book tbody .fukidashi .fukidashi_green {
    --arrow-color: var(--color-accountbook-green);
}

.account_book tbody .fukidashi .fukidashi_orange {
    --arrow-color: var(--color-accountbook-orange);
}

.account_book tbody .fukidashi .fukidashi_red {
    --arrow-color: var(--color-accountbook-red);
}

.account_book tbody .fukidashi [class*="fukidashi_"]::after {
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    top: 100%;
    left: calc(50% - 12px);
    border: solid 12px transparent;
    border-top: solid 15px var(--arrow-color);
    filter: drop-shadow(1px 3px 2px rgba(0, 0, 0, .3));
}

.account_book tbody .fukidashi .plus::after {
    content: none;
}

.account_book tbody .fukidashi .plus .plus_icon {
    display: block;
    --plusicon-size: 4rem;
    width: var(--plusicon-size);
    height: var(--plusicon-size);
    background-color: #fff;
    color: var(--arrow-color);
    border-radius: 50%;
    border: solid 3px;
    position: absolute;
    left: 50%;
    bottom: -3px;
    transform: translate(-50%, 50%);
    z-index: 2;
}

.account_book tbody .fukidashi .plus .plus_icon::before,
.account_book tbody .fukidashi .plus .plus_icon::after {
    content: '';
    display: block;
    width: calc(var(--plusicon-size) * .5);
    height: 0;
    border-top: solid 3px var(--arrow-color);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.account_book tbody .fukidashi .plus .plus_icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.account_book tbody .fukidashi span {
    font-size: 1.4em;
}

.account_book tbody .fukidashi span.more {
    display: inline-block;
    margin: .6em 0;
    padding: .3em .5em;
    font-size: .85em;
    border-radius: 8px;
    line-height: 1;
    color: var(--arrow-color);
    background-color: #fff;
}

.account_book tbody .fukidashi .check_icon {
    --checkicon-size: 2.6rem;
    position: absolute;
    left: .7em;
    top: .7em;
    background-color: #fff;
    transform: none;
}

.account_book tbody .fukidashi .check_icon::after {
    border-left: solid 3px var(--arrow-color);
    border-bottom: solid 3px var(--arrow-color);
}

.account_book tbody .fukidashi .frame {
    width: 14em;
    margin-top: 1em;
    padding: 1em .75em;
    border: solid 1px #fff;
    text-align: justify;
    font-size: .9em;
}

@media screen and (max-width: 767px) {
    .account_book tbody .check_icon {
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .account_book tbody .check_arrow {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }

    .account_book tbody .arrow {
        width: calc(100% - 6px);
        height: calc(100% - 6px);
        position: absolute;
        left: 3px;
        top: 3px;
        border: solid 2px var(--arrow-color);
        border-radius: 5px;
    }

    .account_book tbody .orange_arrow {
        height: calc(450% - 6px);
        top: -202%;
    }

    .account_book tbody .check {
        width: 5em;
        height: 5em;
        display: grid;
        place-items: center;
        font-size: min(.7em, 3vw);
        border-radius: 50%;
        right: -1em;
        top: 50%;
        transform: translateY(-50%);
    }

    .account_book tbody .fukidashi {
        transform: translateX(-67%);
    }
}

/* sum arrow */
.account_book tbody.total .sum_arrow {
    height: 1em;
    margin-top: .5em;
    text-align: left;
    position: relative;
}

.account_book tbody.total .sum_arrow span {
    display: inline-block;
    width: calc(100% + 20rem);
    position: absolute;
    padding: .4em 1em .5em 1.2em;
    color: #fff;
    background-color: var(--color-dblue);
    font-size: .6em;
    line-height: 1;
}

.account_book tbody.total .sum_arrow span::after {
    content: '';
    display: inline-block;
    width: 1.2rem;
    height: 100%;
    background: linear-gradient(to bottom left, transparent 50%, var(--color-dblue) 50%) top left/ 100% 50% no-repeat,
        linear-gradient(to top left, transparent 50%, var(--color-dblue) 50%) bottom left / 100% 50% no-repeat;
    position: absolute;
    left: 100%;
    top: 0;
}

@media screen and (max-width: 767px) {
    .account_book tbody.total .sum_arrow span {
        width: 97%;
    }
}


/* planner point wrp -------------*/
.financial-point-wrp {
    position: relative;
}

.planner-point-wrp {
    position: relative;
    padding: 60px 20px 100px;
}

@media screen and (max-width:640px) {
    .planner-point-wrp {
        position: relative;
        padding: 60px 20px;
    }
}

.planner-point-wrp .point-frame {
    width: min(calc(100% - 230px), 600px);
    border: 4px solid var(--color-red);
    background-color: #fff;
    border-radius: 5px;
    margin: 0 auto;
    padding: 2em;
}

.planner-point-wrp .point-frame p {
    text-align: justify;
}

@media screen and (max-width:980px) {
    .planner-point-wrp .point-frame {
        width: calc(100% - 210px);
        padding: 2em 3em;
    }

    @media screen and (max-width:640px) {
        .planner-point-wrp .point-frame {
            width: 100%;
            padding: 2em 1.7em 2.5em;
        }

        .planner-point-wrp .point-frame p {
            font-size: .9em;
        }
    }
}

.planner-point {
    position: absolute;
    bottom: 0;
    left: calc(50% - 500px);
    z-index: 1;
}

@media screen and (max-width:980px) {
    .planner-point {
        left: 0;
    }

    @media screen and (max-width:640px) {
        .planner-point {
            --plannner-img-size: max(30vw, 165px);
            width: var(--plannner-img-size);
            height: calc(var(--plannner-img-size) * .75);
            left: -6.5vw;
            overflow: hidden;
        }
    }
}

.planner-point-wrp .point-frame .title {
    text-align: center;
    margin-bottom: 1em;
    font-size: 1.1em;
}

.financial-point-wrp .note {
    width: min(calc(100% - 230px), 600px);
    position: absolute;
    left: 50%;
    bottom: 2em;
    font-size: .8em;
    color: #555;
    transform: translateX(-50%);
}

@media screen and (max-width:980px) {
    .financial-point-wrp .note {
        width: calc(100% - 250px);
    }

    @media screen and (max-width:640px) {
        .financial-point-wrp .note {
            width: 100%;
            padding: 2em 20px;
            position: static;
            transform: translateX(0);
            background-color: #fff
        }
    }
}

/* lbox -------------*/
#lBoxInner {
    width: 100%;
    padding: 10px;
}

/*==============================================================

each single page

==============================================================*/

/* plan compare -- vol1,vol2  */
.plan-compare .tab-btn-wrp {
    width: 100%;
    margin: 1em auto 1.75em;
}

.plan-compare .tab-btn-wrp a {
    display: block;
    position: relative;
    width: 49%;
    padding: .5em;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    background-color: #fff;
    border: 4px solid;
    border-radius: 5px;
    transition: all .3s ease;
}

.vol2 .plan-compare .tab-btn-wrp a {
    padding: 1.2em .3em 1.2em 2em;
}

.plan-compare .tab-btn-wrp a .iconfont-c-arrow_b {
    position: absolute;
    top: calc(50% - .5em);
    right: .5em;
}

.plan-compare .tab-btn-wrp a.btn-dblue {
    color: var(--color-dblue);
}

.plan-compare .tab-btn-wrp a.btn-red {
    color: var(--color-red);
}

.plan-compare .tab-btn-wrp a.btn-dblue:hover,
.plan-compare .tab-btn-wrp a.btn-dblue.on {
    background-color: var(--color-dblue);
    color: #fff;
    border: 4px solid var(--color-dblue);
}

.plan-compare .tab-btn-wrp a.btn-red:hover,
.plan-compare .tab-btn-wrp a.btn-red.on {
    background-color: var(--color-red);
    color: #fff;
    border: 4px solid var(--color-red);
}

.plan-compare .tab-btn-wrp a.btn-dblue.on::after,
.plan-compare .tab-btn-wrp a.btn-red.on::after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-width: 20px;
    margin-left: -20px;
}

.plan-compare .tab-btn-wrp a.btn-dblue.on::after {
    border-top-color: var(--color-dblue);
}

.plan-compare .tab-btn-wrp a.btn-red.on::after {
    border-top-color: var(--color-red);
}

.plan-compare .tab-btn-wrp a .icon {
    position: absolute;
    top: -.5em;
    left: .5em;
}

.vol2 .plan-compare .tab-btn-wrp a .icon {
    width: 60px;
    top: calc(50% - 30px);
}

@media screen and (max-width: 767px) {
    .plan-compare .tab-btn-wrp a {
        font-size: .9em;
    }

    .vol2 .plan-compare .tab-btn-wrp a {
        padding: 1em 0;
    }

    .plan-compare .tab-btn-wrp a .icon {
        position: static;
        width: 25px;
        margin: 0 auto .5em;
    }
}

.tab-contents {
    width: 100%;
    border-radius: 10px;
    background-color: #fff;
    padding: 2em;
    display: none;
    opacity: 0;
    transition: all .3s ease;
}

@media screen and (max-width: 767px) {
    .tab-contents {
        padding: 1em;
        font-size: .8em;
    }
}

.tab-contents.on {
    display: flex;
    opacity: 1;
    margin-bottom: 2em;
}

@media screen and (max-width: 767px) {
    .tab-contents.on {
        display: block;
    }
}

.frame-dblue {
    border: 4px solid var(--color-dblue);
}

.frame-red {
    border: 4px solid var(--color-red);
}

/*=== vol1 ===*/
.vol1 .plan-compare .set {
    width: 55%;
}

.vol1 .plan-compare .total {
    width: 40%;
}

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

    .vol1 .plan-compare .set,
    .vol1 .plan-compare .total {
        width: 100%;
    }
}

.vol1 .plan-compare table {
    width: 100%;
    margin: 1em 0;
}

.vol1 .plan-compare tr {
    border-top: 1px solid #ccc;
}

.vol1 .plan-compare th {
    font-weight: normal;
    border-right: 1px solid #ccc;
    padding-right: 1em;
}

.vol1 .plan-compare .set th {
    text-align: left;
    vertical-align: middle;
    width: 20%;
}

.vol1 .plan-compare .total th {
    text-align: left;
    width: 50%;
}

.vol1 .plan-compare td {
    padding: 1em 0 1em 1.5em;
}

@media screen and (max-width: 767px) {
    .vol1 .plan-compare td {
        padding: .5em 0 .5em 1em;
    }
}

.vol1 .plan-compare .total td {
    text-align: right;
}

.vol1 .plan-compare tr:last-child {
    border-bottom: 1px solid #ccc;
}

.vol1 .plan-compare .total tr:last-child {
    border-top: 3px solid #999;
}

.vol1 .plan-compare .total tr:last-child td {
    color: var(--color-red);
    font-size: 2rem;
}

.vol1 .plan-compare .note {
    font-size: .9em;
}

@media screen and (max-width: 767px) {
    .vol1 .plan-compare .note {
        font-size: .8em;
    }
}

/* financial merit wrp -- vol1 */
.financial-merit-wrp {
    background-color: #fff;
}

.financial-merit-wrp .box {
    padding: 2em;
    text-align: center;
    border-radius: 8px;
    background-color: #fff;
}

.financial-merit-wrp .box .title {
    font-size: 1.3em;
    margin-bottom: 1em;
}

.financial-merit-wrp .box p {
    display: block;
    margin-top: 1em;
}

.financial-merit-wrp .btn-wrp {
    text-align: center;
}

.financial-merit-wrp .btn {
    font-size: min(1.2em, 3.6vw);
    background-color: var(--color-red);
    position: relative;
    transition: all .3s ease;
}

.financial-merit-wrp .btn:hover {
    background-color: #222;
}

.financial-merit-wrp .btn .iconfont-c-arrow_r {
    position: absolute;
    top: calc(50% - .5em);
    right: 1em;
}

/* lbox -- vol1 */
.compare-wrp {
    width: min(100%, 800px);
    margin: 0 auto;
}

.compare-frame {
    border: 4px solid #ccc;
    padding: 1.5em;
    background-color: #fff;
    margin-bottom: 1em;
    border-radius: 5px;
}

@media screen and (max-width: 767px) {
    .compare-frame {
        border: 3px solid #ccc;
        padding: 1em .5em;
    }
}

.compare-frame table {
    width: 100%;
}

.compare-frame tr {
    border-bottom: 1px solid #ccc;
}

.compare-frame tr:last-child {
    border-bottom: none;
}

.compare-frame th {
    font-size: 1.1em;
    padding: .5em;
}

@media screen and (max-width: 767px) {
    .compare-frame th {
        font-size: .9em;
    }
}

.compare-frame th:nth-child(1),
.compare-frame th:nth-child(3) {
    width: 40%;
}

.compare-frame th:nth-child(2) {
    width: 20%;
}

.compare-frame td {
    font-size: .9em;
    text-align: center;
    padding: .75em .5em;
    vertical-align: middle;
}

@media screen and (max-width: 767px) {
    .compare-frame td {
        font-size: min(.75em, 2.8vw);
    }

    .compare-frame td:first-child {
        padding-left: 0;
    }

    .compare-frame td:last-child {
        padding-right: 0;
    }

    @media screen and (max-width: 414px) {
        .compare-frame td br {
            display: none;
        }
    }
}

.compare-frame tr td:nth-child(2) {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

.compare-wrp sup {
    font-size: .7em;
}

.compare-wrp .note {
    font-size: .8em;
}

.compare-wrp .comment-box {
    justify-content: center;
    margin: 3em auto;
}


/*=== vol2 ===*/
.vol2 .plan-compare .person-wrp {
    width: 35%;
    text-align: center;
}

.vol2 .plan-compare .person-wrp h4 {
    font-size: min(2.1rem, 6vw);
}

.vol2 .plan-compare .person-wrp h4 span {
    font-size: 1.5em;
}

.vol2 .plan-compare .person-wrp figure {
    margin: 2rem auto;
}

.vol2 .plan-compare table {
    width: 60%;
    font-size: 1.7rem;
}

.vol2 .plan-compare table :is(th, td) {
    vertical-align: middle;
}

.vol2 .plan-compare table tr:not(:last-child) :is(th, td) {
    border-bottom: solid 1px #ccc;
}

.vol2 .plan-compare table th {
    padding-left: .5em;
    text-align: left;
}

.vol2 .plan-compare table td {
    padding: .5em 0;
    text-align: center;
}

.vol2 .plan-compare table td span {
    font-size: 1.4em;
    font-weight: bold;
}

.vol2 .plan-compare table tr:last-child :is(th, td) {
    color: var(--color-red);
}

.vol2 .plan-compare table tr:last-child td {
    font-size: 2.4rem;
}

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

    .vol2 .plan-compare .person-wrp,
    .vol2 .plan-compare table {
        width: 100%;
    }

    .vol2 .plan-compare table {
        margin-top: 1em;
        font-size: 1.4rem;
    }
}

/* rate_simulation -- vol2 */
.rate_simulation-wrp {
    text-align: center;
}

.rate_simulation-wrp p:not(.note) {
    font-weight: bold;
    font-size: 1.8rem;
}

.rate_simulation-wrp .rate-text-em {
    display: inline-block;
    margin: .75em 0 1.5em;
    padding: .5em 2.5em;
    color: #fff;
    background-color: var(--color-dblue);
    border-radius: 2em;
}

.rate_simulation-wrp .flex-center {
    margin: 3rem auto;
    align-items: center;
    gap: 0 min(6rem, 6vw);
}

.rate_simulation-wrp table,
.rate-wrp table {
    font-size: min(1em, 3.2vw);
}

.rate_simulation-wrp table :is(th, td),
.rate-wrp table :is(th, td) {
    padding: .25em;
    border-bottom: solid 1px #666;
    font-weight: bold;
}

.rate_simulation-wrp table tr.arrow-cell :is(th, td),
.rate-wrp table tr.arrow-cell :is(th, td) {
    border-bottom: none;
}

.rate_simulation-wrp table tr :is(th, td):nth-child(2),
.rate-wrp table tr :is(th, td):nth-child(2) {
    padding-left: min(4rem, 3vw);
    padding-right: min(4rem, 3vw);
}

.rate_simulation-wrp table th,
.rate-wrp table th {
    color: var(--color-red);
}

.rate_simulation-wrp table tr.before-cell td,
.rate-wrp table tr.before-cell td {
    padding-top: .75em;
    padding-bottom: .75em;
    font-size: 1.3em;
}

.rate_simulation-wrp table tr.arrow-cell td .arrow {
    display: block;
    width: 0;
    height: 2.5em;
    margin: 0 auto;
    position: relative;
}

.rate_simulation-wrp table tr.arrow-cell td .arrow::after {
    content: '';
    left: -1.7em;
    top: calc(50% - .5em);
    border: solid transparent;
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-width: 1.5em 1.7em 0 1.7em;
    border-color: var(--color-red) transparent transparent transparent;
}

.rate_simulation-wrp table tr.after-cell td,
.rate-wrp table tr.after-cell td {
    padding-bottom: .5em;
    font-size: 1.3em;
    color: var(--color-red);
}

.rate_simulation-wrp table td span,
.rate-wrp table td span {
    padding: 0 .1em;
    font-size: 1.5em;
}

.rate_simulation-wrp .summary-box,
.rate-wrp .summary-box {
    padding: .8em 2em;
    line-height: 1.2;
    font-size: 1.25em;
}

.rate_simulation-wrp .summary-box::before,
.rate-wrp .summary-box::before {
    content: '';
    right: 100%;
    bottom: 2.5em;
    border: solid transparent;
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-width: 1.3em 1.5em 0 0;
    border-color: transparent var(--color-red) transparent transparent;
}

.rate_simulation-wrp .summary-box span.more {
    display: inline-block;
    margin: .6em 0;
    padding: .3em .5em;
    font-size: .85em;
    border: solid 2px;
    border-radius: 8px;
    line-height: 1;
}

.rate_simulation-wrp .btn {
    margin: 3em 1em;
}

.rate_simulation-wrp .btn .iconfont-c-arrow_r {
    position: absolute;
    top: calc(50% - .5em);
    right: 1em;
}

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

    .rate_simulation-wrp .summary-box,
    .rate-wrp .summary-box {
        font-size: min(1em, 4.2vw);
    }
}

@media screen and (max-width: 767px) {
    .rate_simulation-wrp p:not(.note) {
        font-size: 1.6rem;
    }

    .rate_simulation-wrp .note {
        text-align: left;
    }

    .rate_simulation-wrp .summary-box {
        margin-top: 2.5em;
    }

    .rate_simulation-wrp .summary-box::before,
    .rate-wrp .summary-box::before {
        right: calc(50% - 1em);
        bottom: 100%;
        border: solid transparent;
        border-width: 0 1em 1.5em 1em;
        border-color: transparent transparent var(--color-red) transparent;
    }
}

/* loan figure -- vol2 */
.loan {
    width: min(100%, 980px);
    margin: 4rem auto;
}

.loan figcaption {
    display: inline-block;
    padding: .3em 1.5em;
    border: solid 1px;
    border-radius: 3px;
}

@media (min-width: 768px) {
    .loan.fig30s figcaption {
        transform: translateY(105%);
    }
}

@media screen and (max-width: 767px) {
    .loan figcaption {
        font-size: 1.2rem;
        margin-bottom: 1em;
    }
}

/* lbox rate -- vol2 */
.rate-wrp {
    width: min(100%, 1100px);
    margin: 0 auto;
}

.rate-wrp .note {
    font-size: 1.4rem;
}

.rate-wrp figure img {
    width: 100%;
    height: auto;
}

.rate-frame {
    border: 4px solid var(--color-lblue);
    padding: 3em 1.5em;
    background-color: #fff;
    margin-bottom: 1em;
    border-radius: 5px;
}

.rate-frame h1,
.rate-frame h2 {
    text-align: center;
    font-size: min(3rem, 5vw);
    color: var(--color-red);
}

.rate-frame h1 span {
    display: block;
    margin: 0 auto .3em;
    font-size: .8em;
    color: var(--color-dblue);
}

.rate-figure1 {
    width: min(100%, 870px);
    margin: 3em auto 0;
}

.graph {
    width: min(100%, 680px);
    margin: 4em auto 0;
    position: relative;
}

.rate-figure2 {
    margin-bottom: 1em;
    padding: min(2em, 7vw) min(3em, 5vw);
    background-color: var(--color-bg1);
    border: solid 1px #ccc;
}

.rate-figure2 figcaption {
    margin-bottom: 1em;
    color: var(--color-dblue);
    font-size: min(2rem, 4vw);
    text-align: center;
}

.rate-figure2 .planner-point {
    left: calc(50% - 480px);
}

@media screen and (max-width:960px) {
    .rate-figure2 {
        position: relative;
        overflow: hidden;
    }

    .rate-figure2 .planner-point {
        --plannner-img-size: min(165px, 30vw);
        width: var(--plannner-img-size);
        height: calc(var(--plannner-img-size) * .75);
        left: -20px;
        overflow: hidden;
    }
}

.rate-example {
    width: min(100%, 900px);
    margin: 3em auto 0;
}

.rate-example h2 {
    margin-bottom: 1em;
}

.rate-example .flex-center {
    gap: min(3em, 5vw);
    flex-wrap: nowrap;
}

.rate-example table {
    text-align: center;
}

.rate-example .min-width {
    width: min-content;
}

.rate-example .summary-box {
    min-width: 18em;
    padding: 1.5em .5em;
    line-height: 1.4;
}

.rate-example .note {
    margin-top: 1.5em;
}

@media screen and (max-width: 767px) {
    .rate-frame {
        border: 3px solid var(--color-lblue);
        padding: 2em 1em;
    }

    .rate-figure1 {
        width: min(100%, 400px);
    }

    .rate-example {
        display: flex;
        flex-direction: column;
    }

    .rate-example .flex-center {
        display: contents;
    }

    .rate-example .min-width {
        display: contents;
    }

    .rate-example .summary-box {
        margin: 2.5em auto 0;
    }
}

/*=== vol3 ===*/
.plus_advice-wrp .review-wrp {
    margin: 1em auto;
    width: 98%;
}

.plus_advice-wrp .review {
    width: 19%;
    background-color: #fff;
    text-align: center;
}

@media screen and (max-width:767px) {
    .plus_advice-wrp .review {
        width: 100%;
        margin-bottom: .5em;
        font-size: .9em;
    }
}

.plus_advice-wrp .review .label {
    background-color: var(--color-dblue);
    color: #fff;
    padding: .5em;
    text-align: center;
}

.plus_advice-wrp .review.income .label {
    background-color: var(--color-red);
}

.plus_advice-wrp .review .price {
    padding: .5em;
}

.plus_advice-wrp .review .price .calculate {
    font-weight: bold;
    color: var(--color-dblue);
}

.plus_advice-wrp .review.income .price .calculate {
    color: var(--color-red);
}

.plus_advice-wrp .review .price .calculate span {
    font-size: 1.5em;
}

.plus_advice-wrp .summary-box {
    width: 13%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-left: 5%;
}

.plus_advice-wrp .summary-box::before {
    content: '';
    right: 95%;
    top: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: transparent;
    border-left-color: var(--color-red);
    border-width: 20px;
    margin-top: -20px;
}

@media screen and (max-width:767px) {
    .plus_advice-wrp .summary-box {
        width: 100%;
        padding: 1em 0;
        margin: 3em 0 0;
    }

    .plus_advice-wrp .summary-box>* {
        display: inline-block;
    }

    .plus_advice-wrp .summary-box::before {
        top: auto;
        right: auto;
        bottom: 100%;
        left: 50%;
        border-color: transparent;
        border-top-color: var(--color-red);
        border-width: 20px;
        margin-top: 0;
        margin-left: -20px;
    }
}

.plus_advice-wrp .review-res-wrp {
    margin-top: 2em;
    font-size: 1.2em;
}

.plus_advice-wrp .review-res-wrp .review-res {
    font-size: min(1.3em, 5.5vw);
    font-weight: bold;
    color: var(--color-red);
    margin-top: .5em;
}

.plus_advice-wrp .review-res-wrp .review-res .fontsize-s {
    font-size: .7em;
}

/* childrens allowance -- vol3 */
.childrens_allowance,
.housing_allowance {
    width: min(100%, 800px);
    margin: 3em auto 0;
}

.childrens_allowance table {
    margin-bottom: 1em;
    width: 100%;
}

@media screen and (min-width:768px) {
    .childrens_allowance table {
        display: grid;
        grid-template-areas:
            "head1 th1 th2 th3"
            "head2 td1 td2 td3";
    }

    .childrens_allowance table :is(thead, tbody),
    .childrens_allowance table tr {
        display: contents;
    }

    .childrens_allowance table th,
    .childrens_allowance table td {
        display: grid;
        place-items: center;
    }

    .childrens_allowance table .head1 {
        grid-area: head1;
    }

    .childrens_allowance table .head2 {
        grid-area: head2;
    }

    .childrens_allowance table .th1 {
        grid-area: th1;
    }

    .childrens_allowance table .th2 {
        grid-area: th2;
    }

    .childrens_allowance table .th3 {
        grid-area: th3;
    }

    .childrens_allowance table .td1 {
        grid-area: td1;
    }

    .childrens_allowance table .td2 {
        grid-area: td2;
    }

    .childrens_allowance table .td3 {
        grid-area: td3;
    }
}

.childrens_allowance th {
    background-color: var(--color-red);
    color: #fff;
}

.childrens_allowance td {
    background-color: #f3f3f3;
}

.childrens_allowance th,
.childrens_allowance td {
    text-align: center;
    vertical-align: middle;
    border: 2px solid #fff;
    padding: .75em;
}

.childrens_allowance .td2 span {
    display: block;
    font-size: .8em;
}


/* plus advice -- vol3 */
.loan_screening {
    width: min(100%, 800px);
    margin: 2em auto 0;
}

.loan_screening figcaption,
.loan_repayment figcaption {
    margin-bottom: 1em;
    grid-area: cap;
    color: var(--color-dblue);
    font-weight: bold;
    font-size: 2rem;
    text-align: center;
}

.loan_screening ul {
    /* grid-area: list; */
    counter-reset: screening;
}

.loan_screening ul li {
    padding: 3em .5em 1em;
    margin-bottom: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: #fff;
    border-radius: 5px;
    font-weight: bold;
    position: relative;
}

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

    .loan_screening figcaption,
    .loan_repayment figcaption {
        font-size: 1.6rem;
    }

    .loan_screening ul li {
        width: 100%;
        margin-bottom: 1em;
    }
}

.loan_screening ul li::before {
    content: counter(screening);
    counter-increment: screening;
    color: var(--color-red);
    font-size: 1.4em;
    position: absolute;
    top: .5em;
}

.loan_screening ul li span {
    display: inline-block;
    margin-top: .2em;
    font-size: .85em;
    color: #222;
    font-weight: normal;
}

@media screen and (max-width:767px) {
    .loan_screening ul li span {
        font-size: .75em;
    }
}

.loan_screening .note {
    grid-area: note;
    color: #666;
}


/*=== vol4 ===*/
.vol4 .loan_repayment {
    width: min(980px, 90%);
    margin: 0 auto;
    text-align: center;
}

.vol4 #point2 figure:not(.icon) {
    width: min(570px, 100%);
    margin: 0 auto 30px;
}

@media screen and (max-width: 767px) {
    .vol4 #point2 .plus_advice-wrp .text-center {
        text-align: justify;
    }
}

/*=== vol5 ===*/
.tax_cut_plan .lead .note {
    display: inline-block;
    line-height: 1.7;
}

.tax_cut_plan figcaption {
    color: var(--color-dblue);
    font-size: 1.1em;
    font-weight: bold;
}

.tax_cut_plan .small {
    font-weight: normal;
    font-size: .9em;
}

@media (max-width:767px) {
    .tax_cut_plan .small {
        margin-top: .5em;
        display: inline-block;
        font-size: min(.9em, 3.4vw);
        line-height: 1.5;
    }
}

.tax_cut_plan .support {
    margin-top: 2em;
    text-align: center;
}

.tax_cut_plan table tbody th {
    font-weight: normal;
}

@media screen and (min-width:768px) {
    .tax_cut_plan .tax_cut_plan-table1 th.subth {
        width: 18%;
    }
}

@media screen and (max-width:767px) {
    .tax_cut_plan .tax_cut_plan-table1 {
        display: grid;
        grid-auto-flow: column dense;
        grid-template: repeat(6, auto) / 1.5em 6.5em 1fr 1fr 1fr;
        line-height: 1.4;
    }

    .tax_cut_plan .tax_cut_plan-table1 :is(thead, tbody, tr) {
        display: contents;
    }

    .tax_cut_plan .tax_cut_plan-table1 :is(th, td) {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 7px 3px;
        border: 1px solid #fff;
    }

    .tax_cut_plan .tax_cut_plan-table1 th {
        font-size: .9em;
    }

    .tax_cut_plan .tax_cut_plan-table1 th[rowspan="2"] {
        grid-column-end: span 2;
    }

    .tax_cut_plan .tax_cut_plan-table1 th[colspan="2"] {
        grid-row-end: span 2;
    }

    .tax_cut_plan .tax_cut_plan-table1 td {
        font-size: 1.15em;
    }

    .tax_cut_plan .tax_cut_plan-table1 td[rowspan="3"] {
        grid-column-end: span 3;
    }

    .tax_cut_plan .tax_cut_plan-table1 td .sml {
        font-size: .75em;
    }

    .tax_cut_plan .tax_cut_plan-table1 td .yen {
        display: block;
    }
}

.tax_cut_plan .estimate {
    position: relative;
    z-index: auto;
    padding: min(3em, 10vw) 0 min(4em, 15vw);
}

.tax_cut_plan .estimate p {
    width: fit-content;
    padding: .5em 1.5em;
    margin: 0 auto;
    border-radius: 2em;
    background-color: var(--color-dblue);
    color: #fff;
    text-align: center;
    position: relative;
    z-index: 1;
}

@media screen and (max-width:767px) {
    .tax_cut_plan .estimate p {
        padding: .5em 3em;
        border-radius: 3em;
    }
}

.tax_cut_plan .estimate p .small {
    margin-top: 0;
}

.tax_cut_plan .estimate::before,
.tax_cut_plan .estimate::after {
    --arrow-color: #becad9;
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}

.tax_cut_plan .estimate::before {
    width: 1.5em;
    top: 10%;
    bottom: 2em;
    background-color: var(--arrow-color);
}

.tax_cut_plan .estimate::after {
    border: solid transparent 1.7em;
    border-bottom: 0;
    border-top: solid 2em var(--arrow-color);
    bottom: .75em;
}

@media screen and (min-width:768px) {
    .tax_cut_plan .estimate+.flex-between {
        flex-wrap: nowrap;
    }

    .tax_cut_plan .tax_cut_plan-table2 {
        width: auto;
        flex-grow: 1;
        margin: 0 10% 0 0;
    }
}

.tax_cut_plan .tax_cut_plan-table2 {
    position: relative;
}

@media screen and (max-width:767px) {
    .tax_cut_plan .tax_cut_plan-table2 {
        margin: 0 auto 1em;
    }
}

.tax_cut_plan .tax_cut_plan-table2::after {
    content: '';
    display: block;
    width: 5em;
    height: 1.5em;
    background:
        linear-gradient(to top, var(--color-lblue) 60%, transparent 60%) top left/ 70% 100% no-repeat,
        linear-gradient(to top right, var(--color-lblue) 50%, transparent 50%) top right / 30% 100% no-repeat;
    position: absolute;
    left: calc(100% - 1em);
    bottom: 1.5em;
}

@media screen and (max-width:767px) {
    .tax_cut_plan .tax_cut_plan-table2::after {
        content: none;
    }
}

.tax_cut_plan .sum {
    margin: 0 auto;
    position: relative;
}

.tax_cut_plan .sum .balloon {
    width: 13em;
    height: 13em;
    padding-bottom: 1.5em;
    margin: 0 auto 2em;
    display: grid;
    place-items: center;
    text-align: center;
    font-size: min(1.6rem, 3.8vw);
    line-height: 1.8em;
    color: var(--color-red);
    border: solid 2px;
    border-radius: 50%;
}

.tax_cut_plan .sum img {
    width: 70%;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

.tax_cut_plan .premise {
    margin: 1em 0;
    font-size: .9em;
}

.tax_cut_plan .tax_cut_plan-table3,
.tax_cut_plan .tax_cut_plan-table3~.note,
.tax_cut_plan .tax_cut_plan-table4,
.tax_cut_plan .tax_cut_plan-table4~.note {
    width: min(100%, 640px);
}

.tax_cut_plan .tax_cut_plan-table3~.note,
.tax_cut_plan .tax_cut_plan-table4~.note {
    margin: 0 auto;
    text-align: left;
}

.tax_cut_plan .tax_cut_plan-table3 th {
    width: 50%;
}

.tax_cut_plan .tax_cut_plan-table4 tbody th {
    width: 45%;
}

.zeh_subsidy {
    width: fit-content;
    margin: 2em auto 1em;
}

.zeh_subsidy~.note {
    width: min(600px, 100%);
    margin: 0 auto;
}

/*=== vol6 ===*/
.vol6 .interest_rate table {
    table-layout: fixed;
}

.vol6 .interest_rate table caption {
    padding-bottom: .5em;
    padding-left: 1.2em;
    font-weight: bold;
    text-align: left;
    position: relative;
}

.vol6 .interest_rate table caption::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    position: absolute;
    left: 0;
    top: .7em;
    transform: translateY(-50%) scale(0.7);
    border-radius: 100%;
    background-color: var(--color-dblue);
}

.vol6 .interest_rate table th {
    background-color: #e0e0e0;
}

.vol6 .interest_rate .discnote {
    text-align: left;
    font-size: inherit !important;
    color: inherit !important;
}

/* interest_rate-compare1 */
.vol6 .interest_rate .interest_rate-compare1 th {
    width: 43%;
}

@media screen and (max-width:800px) {
    .vol6 .interest_rate .interest_rate-compare1 th {
        width: 45%;
    }
}

.vol6 .interest_rate .interest_rate-compare1 th:nth-child(1) {
    width: 14%;
}

@media screen and (max-width:800px) {
    .vol6 .interest_rate .interest_rate-compare1 th:nth-child(1) {
        width: 10%;
    }
}

@media screen and (max-width:800px) {
    .vol6 .interest_rate .interest_rate-compare1 tbody th span {
        display: inline-block;
        width: 1em;
    }
}

.vol6 .interest_rate .interest_rate-compare1 td .flex {
    aspect-ratio: 1/.75;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.vol6 .interest_rate .interest_rate-compare1 td .flex h4 {
    text-align: center;
}

@media screen and (max-width:800px) {
    .vol6 .interest_rate .interest_rate-compare1 td .iblock {
        display: inline;
    }
}

.vol6 .interest_rate .interest_rate-compare1 td .note {
    font-size: min(1.4rem, 3vw);
}


/* interest_rate-compare2 */
.vol6 .interest_rate .interest_rate-compare2 th,
.vol6 .interest_rate .interest_rate-compare2 td {
    padding: .75em .5em;
}

.vol6 .interest_rate .interest_rate-compare2 th {
    width: 27%;
}

.vol6 .interest_rate .interest_rate-compare2 th:nth-child(1) {
    width: 19%;
    font-weight: normal;
}

.vol6 .interest_rate .interest_rate-compare2 thead th span {
    display: block;
    font-size: .8em;
}

.vol6 .interest_rate .interest_rate-compare2 th:nth-child(1) .y {
    display: inline-block;
    width: 4em;
    text-align: center;
}

.vol6 .interest_rate .interest_rate-compare2 tbody td span::after {
    content: '円';
    font-size: .85em;
    padding: .2em;
}

.vol6 .interest_rate .interest_rate-compare2 tfoot :is(th, td) {
    font-weight: bold !important;
}

.vol6 .interest_rate .interest_rate-compare2 tfoot td {
    background-color: rgba(249, 226, 124, 0.5);
    font-size: 1.1em;
}

.vol6 .interest_rate .interest_rate-compare2 tfoot td span {
    font-size: 1.1em;
    padding: 0 .2em;
}

.vol6 .interest_rate .supplement {
    margin-top: 1em;
    display: grid;
    justify-content: space-between;
    grid-template-areas: 'premise sup1 sup2' 'premise note note';
    grid-template-columns: 45% 26.5% 26.5%;
    grid-template-rows: auto auto;
    gap: .5em 0;
}

@media screen and (max-width:767px) {
    .vol6 .interest_rate .supplement {
        display: grid;
        justify-content: space-between;
        grid-template-areas: 'sup1 sup2' 'premise premise' 'note note';
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: .5em 1em;
    }
}

.vol6 .interest_rate .supplement .sup1 {
    grid-area: sup1;
}

.vol6 .interest_rate .supplement .sup2 {
    grid-area: sup2;
}

.vol6 .interest_rate .supplement :is(.sup1, .sup2) {
    padding: 0 .5em .5em;
}

@media screen and (max-width:767px) {
    .vol6 .interest_rate .supplement :is(.sup1, .sup2) {
        padding: 0;
    }
}

.vol6 .interest_rate .supplement :is(.sup1, .sup2) p {
    padding: .5em 1em;
    text-align: justify;
    border: solid 1px;
    border-radius: 10px;
    font-size: min(1em, 3.2vw);
    position: relative;
}

.vol6 .interest_rate .supplement :is(.sup1, .sup2) p::before,
.vol6 .interest_rate .supplement :is(.sup1, .sup2) p::after {
    content: '';
    display: block;
    border: solid .5em transparent;
    border-bottom: solid .75em var(--border-color);
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    --border-color: currentColor;
}

.vol6 .interest_rate .supplement :is(.sup1, .sup2) p::after {
    --border-color: #fff;
    margin-bottom: -2px;
}

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

    .vol6 .interest_rate .supplement .sup1 p::before,
    .vol6 .interest_rate .supplement .sup1 p::after {
        left: 100%;
        border-bottom: solid 1.5em var(--border-color);
        transform: translate(-15%, 28%) rotate(45deg);
    }

    .vol6 .interest_rate .supplement .sup1 p::after {
        margin-bottom: -2px;
        margin-left: -2px;
    }

    .vol6 .interest_rate .supplement .sup2 p::before,
    .vol6 .interest_rate .supplement .sup2 p::after {
        left: 72%;
    }
}

.vol6 .interest_rate .supplement .premise {
    grid-area: premise;
    font-size: .8em;
}

@media screen and (max-width:767px) {
    .vol6 .interest_rate .supplement .premise {
        margin-top: 2em;
    }
}

.vol6 .interest_rate .supplement .premise dl {
    margin-top: .5em;
    padding-right: 1em;
    position: relative;
}

.vol6 .interest_rate .supplement .premise dt {
    position: absolute;
}

.vol6 .interest_rate .supplement .premise dt span {
    display: inline-block;
    width: 5.5em;
    text-align-last: justify;
}

.vol6 .interest_rate .supplement .premise dd {
    padding-left: 6.5em;
}

.vol6 .interest_rate .supplement .note {
    grid-area: note;
}

.vol6 #interest_rate3 {
    position: relative;
}

@media screen and (max-width:767px) {
    .vol6 #interest_rate3 {
        padding-bottom: 50px;
    }
}

.vol6 .interest_rate .flex-between {
    width: min(820px, 100%);
    margin: 0 auto;
    gap: 2em 0;
}

.vol6 .interest_rate .summary {
    width: 48%;
    padding: 2em;
    border-radius: 8px;
    position: relative;
}

@media screen and (max-width:767px) {
    .vol6 .interest_rate .summary {
        width: 100%;
    }
}

.vol6 .interest_rate .summary h4 {
    margin-bottom: 1em;
    text-align: center;
    font-size: min(1.8rem, 4.4vw);
}

.vol6 .interest_rate .summary .discnote li::before {
    background-color: var(--color-dblue);
}

.vol6 .interest_rate .summary:nth-child(2) .discnote li::before {
    background-color: var(--color-red);
}

.vol6 .interest_rate .illust {
    width: 80px;
    position: absolute;
    bottom: 0;
    --position: 1%;
}

@media screen and (max-width:767px) {
    .vol6 .interest_rate .illust {
        --position: 3%;
    }
}

.vol6 .interest_rate .illust.woman {
    left: var(--position);
}

.vol6 .interest_rate .illust.man {
    right: var(--position);
}


/*=== vol7 ===*/
.vol7 .article-header .mainimg {
    top: unset;
    bottom: 0;
}

.vol7 .note-wrp {
    text-align: center;
}

.vol7 .note-wrp .note {
    display: inline-block;
    margin-bottom: 3em;
}

@media screen and (max-width:767px) {
    .vol7 .article-header .title-wrp {
        grid-template-rows: auto auto min(300px, 50vw);
    }
}

.vol7 .diagram-budget {
    margin: 5em auto;
}

/* --- vol8 --- */
.vol8 .point1-result-title {
    font-size: min(1.5em, 5vw);
    line-height: 1.4;
}

@media screen and (max-width:767px) {
    .vol8 .point1-result-title {
        margin-top: .75em;
    }
}

.vol8 .point1-result-title .large {
    font-size: 1.6em;
}

/*=== vol9 ===*/
.vol9 .diagram {
    width: min(720px, 100%);
    margin-inline: auto;
}

@media screen and (max-width:767px) {
    .vol9 .compare-table {
        margin-bottom: 6em;
    }
}

.vol9 .compare-table th {
    background-color: #e0e0e0;
}

@media screen and (max-width:767px) {
    .vol9 .compare-table th {
        font-size: min(1em, 3vw);
    }
}

.vol9 .compare-table thead .head {
    width: 20%;
}

.vol9 .compare-table thead :where(.before, .after) {
    width: 40%;
}

@media screen and (max-width:767px) {
    .vol9 .compare-table thead .head {
        width: 26%;
    }

    .vol9 .compare-table thead :where(.before, .after) {
        width: 38%;
    }
}

.vol9 .compare-table .em :where(th, td) {
    font-weight: bold;
    position: relative;
}

@media screen and (max-width:767px) {
    .vol9 .compare-table tbody :where(th, td) {
        padding: 1.25em 0;
    }

    .vol9 .compare-table tbody .em td.before {
        padding-right: 2.5em;
    }

    .vol9 .compare-table tbody .em td.after {
        padding-left: 2.5em;
    }
}

.vol9 .compare-table tfoot td {
    background-color: rgba(249, 226, 124, 0.5);
}

.vol9 .compare-table td .price::after,
.vol9 .compare-table td .percent::after {
    content: '万円';
    font-size: .85em;
    padding: .2em;
}

.vol9 .compare-table td .percent::after {
    content: '%';
}

.vol9 .compare-table :where(.arrow, .fukidashi) {
    position: absolute;
    right: 0;
    top: 50%;
    translate: 50% -50%;
    z-index: 2;
}

.vol9 .compare-table .arrow {
    padding: .3em 1.25em .3em 1em;
    clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
    line-height: 1.3;
    font-size: min(1em, 3vw);
}

@media screen and (max-width:767px) {
    .vol9 .compare-table .arrow {
        padding: .3em 1em .3em .75em;
    }
}

.vol9 .compare-table .arrow .unit {
    font-size: 1.15em;
    letter-spacing: -.05em;
}

.vol9 .compare-table .fukidashi {
    padding: .5em 1.25em;
    translate: 50% -10%;
}

.vol9 .compare-table .fukidashi span {
    font-size: 1.2em;
}

.vol9 .compare-table .fukidashi::after {
    content: '';
    display: block;
    width: 1.5em;
    height: 1.5em;
    background-color: var(--color-red);
    position: absolute;
    left: 99%;
    top: 15%;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    z-index: 3;
}

@media screen and (max-width:767px) {
    .vol9 .compare-table .fukidashi {
        width: 16em;
        padding: .5em .5em;
        translate: 50% 65%;
    }

    .vol9 .compare-table .fukidashi::after {
        left: 75%;
        top: -1.4em;
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
    }
}


/*==============================================================

footer

==============================================================*/

/* point-get-wrp */
.page-point-get-wrp {
    background-color: #8ad775;
    padding: 50px 20px;
}

/* pagenaiton */
.pagination {
    padding: 3em 15px;
}