@charset "utf-8";

/*

custom.css
Version: 2025.05.13

*/

/* --------------------------------------------------------
/* .loading（loading.js）
/* .more-hidden（more-hidden.js）
/* .loopslider-gallery（loopslider.js）
/* .fontsize（fontsize.js）
/* .colorchange（colorchange.js）
/* .sitemap-box（accordion-menu.js）
/* .loan-simulation（loan-simulation.js）
-------------------------------------------------------- */


/* .loading（loading.js）
-------------------------------------------------------- */
.loading {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999999;
    visibility: visible;
    min-height: 100vh; /* カスタムプロパティ未対応ブラウザ用のフォールバック */
    /* min-height: calc(var(--vh, 1vh) * 100); */ /* 100vh --vhが未定義の場合は1vhを使う */
    width: 100%;
    /* height: 100%; */
    background-color: rgba(255, 255, 255, 1);
    opacity: 1;
    transition: all 1s;
}
/* 初回アクセス時の処理 */
.loading.is-active {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}
/* 2回目以降アクセス時の処理 */
.loading.is-active.visited {
    display: none;
    /* transition: all 1.4s; */
    /* background-color: rgba(51, 51, 51, .6);
    transition: all .8s ease-in-out .6s; */
}
/* 画面遷移アニメーション */
/* .loading.is-active.visited::after {
    display: none;
}
.loading.is-active.visited::after {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    display: block;
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
    width: 100%;
    height: 100%;
    background-color: rgba(51, 51, 51, 1);
    content: "";
    transform: scaleX(0);
    animation-name: pageanime;
    animation-duration: 1.2s;
    animation-timing-function: ease-in-out;

    animation-fill-mode: forwards;
}
@keyframes pageanime {
    0% {
                transform: scaleX(0);
                transform-origin: left;
    }
    50% {
                transform: scaleX(1);
                transform-origin: left;
    }
    50.001% {
                transform-origin: right;
    }
    100% {
                transform: scaleX(0);
                transform-origin: right;
    }
} */

.loading-inner {
    z-index: 9999999999;
    display: flex;
    visibility: hidden;
    min-height: 100vh; /* カスタムプロパティ未対応ブラウザ用のフォールバック */
    /* min-height: calc(var(--vh, 1vh) * 100); */ /* 100vh --vhが未定義の場合は1vhを使う */
    width: 100%;
    /* height: 100%; */
    background-color: rgba(255, 255, 255, 1);
    opacity: 0;
    transition: all 1s;

    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
}
.loading-inner.is-active {
    visibility: visible;
    opacity: 1;
}

/* logo */
.loading svg {
    max-width: 520px;
    width: 100%;
}
.loading svg .logo-item {
    animation-name: anime-logo; /* keyframe名 */
    animation-duration: 4s; /* 所要時間 */
    animation-timing-function: linear; /* 進行割合 */

    fill: #000; /* 塗りつぶし色 */
    stroke-width: 2; /* 線の太さ */
    stroke-dasharray: 2500; /* 線の間隔 */
    stroke-dashoffset: 0; /* 線の始まりの開始位置 */
}

/* アニメーション設定 */
@keyframes anime-logo {
    0% {
        fill: #fff; /* 塗りつぶし色 */
        stroke-dashoffset: 2500; /* 線の始まりの開始位置 */
        stroke: #000; /* パスの色 */
    }
    80% {
        fill: #fff; /* 塗りつぶし色 */
    }
    100% {
        stroke-dashoffset: 0; /* 線の始まりの開始位置 */
        stroke: white; /* パスの色 */
    }
}

.loading .logo-office {
    margin-top: 10px;
}

/* .svg-elem（svgartista.net） */
@keyframes animate-svg-fill-1 {
    0% {
        fill: transparent;
    }
    100% {
        fill: rgb(176, 56, 35);
    }
}
.svg-elem-1 {
    animation: animate-svg-fill-1 .7s cubic-bezier(.47, 0, .745, .715) .8s both;
}
@keyframes animate-svg-fill-2 {
    0% {
        fill: transparent;
    }
    100% {
        fill: rgb(223, 100, 10);
    }
}
.svg-elem-2 {
    animation: animate-svg-fill-2 .7s cubic-bezier(.47, 0, .745, .715) .9s both;
}
@keyframes animate-svg-fill-3 {
    0% {
        fill: transparent;
    }
    100% {
        fill: rgb(245, 187, 25);
    }
}
.svg-elem-3 {
    animation: animate-svg-fill-3 .7s cubic-bezier(.47, 0, .745, .715) 1s both;
}
@keyframes animate-svg-fill-4 {
    0% {
        fill: transparent;
    }
    100% {
        fill: rgb(0, 129, 204);
    }
}
.svg-elem-4 {
    animation: animate-svg-fill-4 .7s cubic-bezier(.47, 0, .745, .715) 1.1s both;
}
@keyframes animate-svg-fill-5 {
    0% {
        fill: transparent;
    }
    100% {
        fill: rgb(0, 129, 204);
    }
}
.svg-elem-5 {
    animation: animate-svg-fill-5 .7s cubic-bezier(.47, 0, .745, .715) 1.2000000000000002s both;
}
@keyframes animate-svg-fill-6 {
    0% {
        fill: transparent;
    }
    100% {
        fill: rgb(0, 0, 0);
    }
}
.svg-elem-6 {
    animation: animate-svg-fill-6 .7s cubic-bezier(.47, 0, .745, .715) 1.3s both;
}
@keyframes animate-svg-fill-7 {
    0% {
        fill: transparent;
    }
    100% {
        fill: rgb(0, 0, 0);
    }
}
.svg-elem-7 {
    animation: animate-svg-fill-7 .7s cubic-bezier(.47, 0, .745, .715) 1.4000000000000001s both;
}
@keyframes animate-svg-fill-8 {
    0% {
        fill: transparent;
    }
    100% {
        fill: rgb(0, 0, 0);
    }
}
.svg-elem-8 {
    animation: animate-svg-fill-8 .7s cubic-bezier(.47, 0, .745, .715) 1.5s both;
}
@keyframes animate-svg-fill-9 {
    0% {
        fill: transparent;
    }
    100% {
        fill: rgb(0, 0, 0);
    }
}
.svg-elem-9 {
    animation: animate-svg-fill-9 .7s cubic-bezier(.47, 0, .745, .715) 1.6s both;
}
@keyframes animate-svg-fill-10 {
    0% {
        fill: transparent;
    }
    100% {
        fill: rgb(0, 0, 0);
    }
}
.svg-elem-10 {
    animation: animate-svg-fill-10 .7s cubic-bezier(.47, 0, .745, .715) 1.7000000000000002s both;
}
@keyframes animate-svg-fill-11 {
    0% {
        fill: transparent;
    }
    100% {
        fill: rgb(0, 0, 0);
    }
}
.svg-elem-11 {
    animation: animate-svg-fill-11 .7s cubic-bezier(.47, 0, .745, .715) 1.8s both;
}
@keyframes animate-svg-fill-12 {
    0% {
        fill: transparent;
    }
    100% {
        fill: rgb(0, 0, 0);
    }
}
.svg-elem-12 {
    animation: animate-svg-fill-12 .7s cubic-bezier(.47, 0, .745, .715) 1.9000000000000001s both;
}
@keyframes animate-svg-fill-13 {
    0% {
        fill: transparent;
    }
    100% {
        fill: rgb(230, 0, 18);
    }
}
.svg-elem-13 {
    animation: animate-svg-fill-13 .7s cubic-bezier(.47, 0, .745, .715) 2s both;
}
@keyframes animate-svg-fill-14 {
    0% {
        fill: transparent;
    }
    100% {
        fill: rgb(230, 0, 18);
    }
}
.svg-elem-14 {
    animation: animate-svg-fill-14 .7s cubic-bezier(.47, 0, .745, .715) 2.1s both;
}
@keyframes animate-svg-fill-15 {
    0% {
        fill: transparent;
    }
    100% {
        fill: rgb(0, 0, 0);
    }
}
.svg-elem-15 {
    animation: animate-svg-fill-15 .7s cubic-bezier(.47, 0, .745, .715) 2.2s both;
}
@keyframes animate-svg-fill-16 {
    0% {
        fill: transparent;
    }
    100% {
        fill: rgb(0, 0, 0);
    }
}
.svg-elem-16 {
    animation: animate-svg-fill-16 .7s cubic-bezier(.47, 0, .745, .715) 2.3s both;
}
@keyframes animate-svg-fill-17 {
    0% {
        fill: transparent;
    }
    100% {
        fill: rgb(0, 0, 0);
    }
}
.svg-elem-17 {
    animation: animate-svg-fill-17 .7s cubic-bezier(.47, 0, .745, .715) 2.4000000000000004s both;
}
@keyframes animate-svg-fill-18 {
    0% {
        fill: transparent;
    }
    100% {
        fill: rgb(0, 0, 0);
    }
}
.svg-elem-18 {
    animation: animate-svg-fill-18 .7s cubic-bezier(.47, 0, .745, .715) 2.5s both;
}
@keyframes animate-svg-fill-19 {
    0% {
        fill: transparent;
    }
    100% {
        fill: rgb(0, 0, 0);
    }
}
.svg-elem-19 {
    animation: animate-svg-fill-19 .7s cubic-bezier(.47, 0, .745, .715) 2.6s both;
}

/* .css-loaders（css-loaders.com） */
.loading .css-loaders {
    width: 80px;
    border-radius: 50%;
    background: radial-gradient(farthest-side, rgba(1, 92, 172, 1) 94%, rgba(0, 0, 0, 0)) top / 8px 8px no-repeat,
    conic-gradient(rgba(0, 0, 0, 0) 30%, rgba(1, 92, 172, 1));
    animation: css-loaders 1s infinite linear;

    aspect-ratio: 1;
    -webkit-mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 8px), rgba(0, 0, 0, 1) 0%);
}
@keyframes css-loaders {
    100% {
        transform: rotate(1turn);
    }
}


/* .more-hidden（more-hidden.js）
-------------------------------------------------------- */
.more-hidden {
    margin: 0 auto;
    padding: 0;
    width: 100%;
}

/* .more-hidden-list */
.more-hidden-list {
    margin: 0 auto;
    padding: 0;
    width: 100%;
}
.more-hidden-list li {
    visibility: visible;
    margin: 0;
    padding: 0;
    height: auto;
    opacity: 1;
    transition: all 1s ease 0s;
}
.more-hidden-list li.is-hidden {
    visibility: hidden;
    margin: 0;
    padding: 0;
    height: 0;
    opacity: 0;
}

/* .more-hidden-btn */
.more-hidden-btn {
    margin-top: 20px;
    text-align: center;
}
.more-hidden-btn.is-btn-hidden {
    display: none;
}
.more-hidden-btn button {
    padding: 0;
    width: 160px;
    height: 40px;
    outline: none;
    border: 0;
    border-radius: 16px;
    background-color: #333;
    color: #fff;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
}


/* .loopslider-gallery（loopslider.js）
-------------------------------------------------------- */
.loopslider-gallery {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    width: 100%;
    height: 293px;
    text-align: left;
}
.loopslider-gallery-inner {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    height: 293px;
}
.loopslider-gallery-list {
    float: left;
    overflow: hidden;
    height: 293px;
}
.loopslider-gallery-list-item {
    display: inline;
    float: left;
    overflow: hidden;
    width: 440px;
    height: 293px;
}

/* clearfix */
.loopslider-gallery-inner::after {
    display: none;
    clear: none;
    content: "";
}


/* .fontsize（fontsize.js）
-------------------------------------------------------- */
.fontsize,
.hdr-box-fontsize {
    display: flex;

    flex-wrap: wrap;
    align-items: center;
}
.fontsize::after,
.hdr-box-fontsize::after {
    display: none;
}
.fontsize-ttl {
    padding: 6px 10px;
    text-align: center;
    font-weight: 700;
    font-size: 1.3rem;
}
.fontsize-list {
    display: flex;
    overflow: hidden;
    margin: 0;
    padding: 0;

    align-items: center;
    justify-content: center;
}
.fontsize-list::after {
    display: none;
}
.fontsize-list li {
    margin-right: 2px;
    padding: 5px;
    width: 30px;
    border: 1px solid #dfdfdf;
    background: #fff;
    /* background: linear-gradient(to bottom, #fff 0, #f7f7f7 100%); */
    color: #020202;
    text-align: center;
    font-weight: 700;
    font-size: 1.3rem;
    cursor: pointer;
}
.fontsize-list li:last-child {
    margin-right: 0;
}
.fontsize-list li.current {
    background: #00008b;
    color: #fff;
    font-weight: 700;
    cursor: default;
}


/* .colorchange（colorchange.js）
-------------------------------------------------------- */
.colorchange,
.hdr-box-colorchange {
    display: flex;

    flex-wrap: wrap;
    align-items: center;
}
.colorchange::after,
.hdr-box-colorchange::after {
    display: none;
}
.colorchange-ttl {
    padding: 6px 10px;
    text-align: center;
    font-weight: 700;
    font-size: 1.3rem;
}
.colorchange-list {
    display: flex;
    overflow: hidden;
    margin: 0;
    padding: 0;

    align-items: center;
    justify-content: center;
}
.colorchange-list::after {
    display: none;
}
.colorchange-list li {
    margin-right: 2px;
    padding: 5px;
    width: 30px;
    border: 1px solid #dfdfdf;
    background: #fff;
    /* background: linear-gradient(to bottom, #fff 0, #f7f7f7 100%); */
    color: #020202;
    text-align: center;
    font-weight: 700;
    font-size: 1.3rem;
    cursor: pointer;
}
.colorchange-list li:last-child {
    margin-right: 0;
}
.colorchange-list li.current {
    background: #00008b;
    color: #fff;
    font-weight: 700;
    cursor: default;
}
.colorchange-list li.default {
    background: #fff;
    color: #020202;
}
.colorchange-list li.a-blue {
    background: #00008b;
    color: #ff0;
}
.colorchange-list li.a-yellow {
    background: #ff0;
    color: #020202;
}
.colorchange-list li.a-black {
    background: #000;
    color: #ff0;
}

/* .a-blue */
body.a-blue * {
    border-color: #ff0 !important;
    background-color: #00008b !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #ff0 !important;
    list-style-image: none !important;
    text-shadow: none !important;
}
body.a-blue header,
body.a-blue footer,
body.a-blue main,
body.a-blue aside,
body.a-blue nav,
body.a-blue div,
body.a-blue section,
body.a-blue input {
    background-color: #00008b !important;
    opacity: 1;
}
body.a-blue header::before,
body.a-blue header::after,
body.a-blue footer::before,
body.a-blue footer::after,
body.a-blue main::before,
body.a-blue main::after,
body.a-blue aside::before,
body.a-blue aside::after,
body.a-blue nav::before,
body.a-blue nav::after,
body.a-blue div::before,
body.a-blue div::after,
body.a-blue section::before,
body.a-blue section::after,
body.a-blue input::before,
body.a-blue input::after {
    background-color: #00008b !important;
}
body.a-blue h1,
body.a-blue h2,
body.a-blue h3,
body.a-blue h4,
body.a-blue h5,
body.a-blue h6,
body.a-blue p,
body.a-blue span,
body.a-blue i,
body.a-blue em,
body.a-blue ul li,
body.a-blue dl dt,
body.a-blue dl dd,
body.a-blue a,
body.a-blue input,
body.a-blue div,
body.a-blue table,
body.a-blue thead {
    border-color: #ff0 !important;
}
body.a-blue h1::before,
body.a-blue h1::after,
body.a-blue h2::before,
body.a-blue h2::after,
body.a-blue h3::before,
body.a-blue h3::after,
body.a-blue h4::before,
body.a-blue h4::after,
body.a-blue h5::before,
body.a-blue h5::after,
body.a-blue h6::before,
body.a-blue h6::after,
body.a-blue p::before,
body.a-blue p::after,
body.a-blue span::before,
body.a-blue span::after,
body.a-blue i::before,
body.a-blue i::after,
body.a-blue em::before,
body.a-blue em::after,
body.a-blue ul li::before,
body.a-blue ul li::after,
body.a-blue dl dt::before,
body.a-blue dl dt::after,
body.a-blue dl dd::before,
body.a-blue dl dd::after,
body.a-blue a::before,
body.a-blue a::after,
body.a-blue input::before,
body.a-blue input::after,
body.a-blue div::before,
body.a-blue div::after,
body.a-blue table::before,
body.a-blue table::after,
body.a-blue thead::before,
body.a-blue thead::after {
    border-color: #ff0 !important;
    background-color: #00008b !important;
    color: #ff0 !important;
}
body.a-blue .gnav {
    border-bottom: 1px solid yellow !important;
}
body.a-blue .gnav-list-item:first-child > a > span::before,
body.a-blue .gnav-list-item > a > span::after {
    background-color: yellow !important;
}
body.a-blue .hnav-toggle,
body.a-blue .hdr-toggle,
body.a-blue .pagetop-btn {
    border: 3px solid yellow !important;
}
body.a-blue .hnav-toggle-icon span,
body.a-blue .hdr-toggle-icon span {
    background-color: yellow !important;
}
body.a-blue .pagetop-link {
    border-top: 1px solid yellow !important;
}
body.a-blue h2.sect-ttl {
    border-bottom: 1px solid yellow !important;
    border-left: 3px solid yellow !important;
}
body.a-blue a:hover {
    text-decoration: underline !important;
}

/* .a-yellow */
body.a-yellow * {
    border-color: #00008b !important;
    background-color: #ff0 !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #00008b !important;
    list-style-image: none !important;
    text-shadow: none !important;
}
body.a-yellow header,
body.a-yellow footer,
body.a-yellow main,
body.a-yellow aside,
body.a-yellow nav,
body.a-yellow div,
body.a-yellow section,
body.a-yellow input {
    background-color: #ff0 !important;
    opacity: 1;
}
body.a-yellow header::before,
body.a-yellow header::after,
body.a-yellow footer::before,
body.a-yellow footer::after,
body.a-yellow main::before,
body.a-yellow main::after,
body.a-yellow aside::before,
body.a-yellow aside::after,
body.a-yellow nav::before,
body.a-yellow nav::after,
body.a-yellow div::before,
body.a-yellow div::after,
body.a-yellow section::before,
body.a-yellow section::after,
body.a-yellow input::before,
body.a-yellow input::after {
    background-color: #ff0 !important;
}
body.a-yellow h1,
body.a-yellow h2,
body.a-yellow h3,
body.a-yellow h4,
body.a-yellow h5,
body.a-yellow h6,
body.a-yellow p,
body.a-yellow span,
body.a-yellow i,
body.a-yellow em,
body.a-yellow ul li,
body.a-yellow dl dt,
body.a-yellow dl dd,
body.a-yellow a,
body.a-yellow input,
body.a-yellow div,
body.a-yellow table,
body.a-yellow thead {
    border-color: #00008b !important;
}
body.a-yellow h1::before,
body.a-yellow h1::after,
body.a-yellow h2::before,
body.a-yellow h2::after,
body.a-yellow h3::before,
body.a-yellow h3::after,
body.a-yellow h4::before,
body.a-yellow h4::after,
body.a-yellow h5::before,
body.a-yellow h5::after,
body.a-yellow h6::before,
body.a-yellow h6::after,
body.a-yellow p::before,
body.a-yellow p::after,
body.a-yellow span::before,
body.a-yellow span::after,
body.a-yellow i::before,
body.a-yellow i::after,
body.a-yellow em::before,
body.a-yellow em::after,
body.a-yellow ul li::before,
body.a-yellow ul li::after,
body.a-yellow dl dt::before,
body.a-yellow dl dt::after,
body.a-yellow dl dd::before,
body.a-yellow dl dd::after,
body.a-yellow a::before,
body.a-yellow a::after,
body.a-yellow input::before,
body.a-yellow input::after,
body.a-yellow div::before,
body.a-yellow div::after,
body.a-yellow table::before,
body.a-yellow table::after,
body.a-yellow thead::before,
body.a-yellow thead::after {
    border-color: #00008b !important;
    background-color: #ff0 !important;
    color: #00008b !important;
}
body.a-yellow .gnav {
    border-bottom: 1px solid black !important;
}
body.a-yellow .gnav-list-item:first-child > a > span::before,
body.a-yellow .gnav-list-item > a > span::after {
    background-color: black !important;
}
body.a-yellow .hnav-toggle,
body.a-yellow .hdr-toggle,
body.a-yellow .pagetop-btn {
    border: 3px solid black !important;
}
body.a-yellow .hnav-toggle-icon span,
body.a-yellow .hdr-toggle-icon span {
    background-color: black !important;
}
body.a-yellow .pagetop-link {
    border-top: 1px solid black !important;
}
body.a-yellow h2.sect-ttl {
    border-bottom: 1px solid black !important;
    border-left: 3px solid black !important;
}
body.a-yellow a:hover {
    text-decoration: underline !important;
}

/* .a-black */
body.a-black * {
    border-color: #ff0 !important;
    background-color: #000 !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #ff0 !important;
    list-style-image: none !important;
    text-shadow: none !important;
}
body.a-black header,
body.a-black footer,
body.a-black main,
body.a-black aside,
body.a-black nav,
body.a-black div,
body.a-black section,
body.a-black input {
    background-color: #000 !important;
    opacity: 1;
}
body.a-black header::before,
body.a-black header::after,
body.a-black footer::before,
body.a-black footer::after,
body.a-black main::before,
body.a-black main::after,
body.a-black aside::before,
body.a-black aside::after,
body.a-black nav::before,
body.a-black nav::after,
body.a-black div::before,
body.a-black div::after,
body.a-black section::before,
body.a-black section::after,
body.a-black input::before,
body.a-black input::after {
    background-color: #000 !important;
}
body.a-black h1,
body.a-black h2,
body.a-black h3,
body.a-black h4,
body.a-black h5,
body.a-black h6,
body.a-black p,
body.a-black span,
body.a-black i,
body.a-black em,
body.a-black ul li,
body.a-black dl dt,
body.a-black dl dd,
body.a-black a,
body.a-black input,
body.a-black div,
body.a-black table,
body.a-black thead {
    border-color: #ff0 !important;
}
body.a-black h1::before,
body.a-black h1::after,
body.a-black h2::before,
body.a-black h2::after,
body.a-black h3::before,
body.a-black h3::after,
body.a-black h4::before,
body.a-black h4::after,
body.a-black h5::before,
body.a-black h5::after,
body.a-black h6::before,
body.a-black h6::after,
body.a-black p::before,
body.a-black p::after,
body.a-black span::before,
body.a-black span::after,
body.a-black i::before,
body.a-black i::after,
body.a-black em::before,
body.a-black em::after,
body.a-black ul li::before,
body.a-black ul li::after,
body.a-black dl dt::before,
body.a-black dl dt::after,
body.a-black dl dd::before,
body.a-black dl dd::after,
body.a-black a::before,
body.a-black a::after,
body.a-black input::before,
body.a-black input::after,
body.a-black div::before,
body.a-black div::after,
body.a-black table::before,
body.a-black table::after,
body.a-black thead::before,
body.a-black thead::after {
    border-color: #ff0 !important;
    background-color: #000 !important;
    color: #ff0 !important;
}
body.a-black .gnav {
    border-bottom: 1px solid yellow !important;
}
body.a-black .gnav-list-item:first-child > a > span::before,
body.a-black .gnav-list-item > a > span::after {
    background-color: yellow !important;
}
body.a-black .hnav-toggle,
body.a-black .hdr-toggle,
body.a-black .pagetop-btn {
    border: 3px solid yellow !important;
}
body.a-black .hnav-toggle-icon span,
body.a-black .hdr-toggle-icon span {
    background-color: yellow !important;
}
body.a-black .pagetop-link {
    border-top: 1px solid yellow !important;
}
body.a-black h2.sect-ttl {
    border-bottom: 1px solid yellow !important;
    border-left: 3px solid yellow !important;
}
body.a-black a:hover {
    text-decoration: underline !important;
}


/* .sitemap-box（accordion-menu.js）
-------------------------------------------------------- */
.sitemap-box {
    width: 100%;
}

/* .sitemap-box-btn */
.sitemap-box-btn {
    display: flex;
    flex-direction: column;
    padding: 1em;
    background-color: rgba(1, 92, 172, 1);
    color: #fff;
    text-align: center;
    font-size: 1.6rem;
    /* line-height: 1.4; */
    cursor: pointer;
    transition: all .4s ease;

    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* .sitemap-toggle-icon */
.sitemap-box-btn .sitemap-toggle-icon {
    position: relative;
    display: inline-block;
    margin: 0 auto 2px;
    width: 20px;
    height: 14px;
}
.sitemap-box-btn .sitemap-toggle-icon span {
    position: absolute;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 2px;
    border-radius: 0;
    background-color: #fff;
    transition: all .4s;
}
.sitemap-box-btn .sitemap-toggle-icon span:nth-of-type(1) {
    top: 0;
}
.sitemap-box-btn .sitemap-toggle-icon span:nth-of-type(2) {
    top: 6px;
}
.sitemap-box-btn .sitemap-toggle-icon span:nth-of-type(3) {
    bottom: 0;
}
.sitemap-box-btn.open .sitemap-toggle-icon span:nth-of-type(1) {
    transform: translateY(6px) rotate(-45deg);
}
.sitemap-box-btn.open .sitemap-toggle-icon span:nth-of-type(2) {
    opacity: 0;
}
.sitemap-box-btn.open .sitemap-toggle-icon span:nth-of-type(3) {
    transform: translateY(-6px) rotate(45deg);
}

/* .sitemap-toggle-txt */
.sitemap-box-btn .sitemap-toggle-txt {
    text-align: center;
    font-weight: 500;
}
.sitemap-box-btn .sitemap-toggle-txt::after {
    display: block;
    content: "サイトマップを開く";
    transition: all .4s;
}
.sitemap-box-btn.open .sitemap-toggle-txt::after {
    content: "サイトマップを閉じる";
}

/* .sitemap-box-area */
.sitemap-box-area {
    display: none;
    padding: 20px 0 50px;
}
.sitemap-box-area-list {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding: 0 14px;
    max-width: 1640px;
    width: 100%;

    /* flex-wrap: wrap; */
}

/* .sitemap-box-area-list-item */
.sitemap-box-area-list-item {
    display: flex;
    flex-direction: row;
    padding: 25px 0 20px;
    width: 100%;

    flex-wrap: wrap;
}
.sitemap-box-area-list-item + .sitemap-box-area-list-item {
    border-top: 1px solid #dadada;
}

/* .sitemap-box-area-list-item-head */
.sitemap-box-area-list-item-head {
    display: flex;
    flex-direction: row;
    padding: 0 0 10px;
    width: 100%;
    font-weight: 500;
    font-size: 1.8rem;

    justify-content: flex-start;
    align-items: center;
}
.sitemap-box-area-list-item-head .ico {
    margin-right: .1em;
}

/* .sitemap-box-area-list-item-body */
.sitemap-box-area-list-item-body {
    font-size: 1.5rem;
}
.sitemap-box-area-list-item-body .ico {
    margin-right: 0;
}
.sitemap-box-area-list-item-body-list {
    display: flex;

    flex-wrap: wrap;
}
.sitemap-box-area-list-item-body-list > li {
    display: flex;
    flex-direction: row;
    margin-right: 1em;
    margin-bottom: 0;

    align-items: center;
    justify-content: center;
}

/* pc（1200px以上の場合に適用） */
@media (min-width: 1200px) {
    .sitemap-box-btn:hover {
        background-color: rgba(1, 92, 172, .8);
        color: #fff;
        text-decoration: none;
    }
    .sitemap-box-area-list {
        padding: 0 20px;
    }
    .sitemap-box-area-list-item {
        flex-wrap: nowrap;
    }
    .sitemap-box-area-list-item-head {
        width: 240px;

        align-items: baseline;
    }
    .sitemap-box-area-list-item-body {
        padding: 0 0 0 240px;

        flex: 1;
    }
    .sitemap-box-area-list-item-head + .sitemap-box-area-list-item-body {
        padding-left: 0;
    }
    .sitemap-box-area-list-item-body-list > li {
        margin-right: 1em;
        margin-bottom: .5em;
    }
}


/* .loan-simulation（loan-simulation.js）
-------------------------------------------------------- */
.loan-simulation {
    position: relative;
    margin: 50px auto;
    padding: 50px 0;
    width: 100%;
    /* border: 1px solid #e2e7ec;
    background: #eef0f2; */
    background: #f6fdf7;
}
.loan-simulation > div {
    z-index: 0 !important;
}
.loan-simulation-inner {
    position: relative;
    z-index: 0;
    margin: 0 auto;
    padding: 0 10px;
    max-width: 1300px;
    width: 100%;
}

/* .loan-simulation-calc */
.loan-simulation-calc {
    display: flex;

    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
}

/* .loan-simulation-calc .calc-form */
.loan-simulation-calc .calc-form {
    padding: 1em;
    width: 100%;
    border: 3px solid rgba(214, 214, 214, 1);
    border-radius: 4px;
    background: #fff;
    /* box-shadow: 0 2px 6px rgba(0, 0, 0, .08); */
}

/* .loan-simulation-calc .calc-form-fieldset */
.loan-simulation-calc .calc-form-fieldset {
    display: flex;
    margin: 0;
    padding: 0;

    flex-flow: column;
    justify-content: stretch;
    align-items: flex-start;
}

/* .loan-simulation-calc .calc-form-fieldset-legend */
.loan-simulation-calc .calc-form-fieldset-legend {
    display: flex;
    margin-bottom: 1.2em;
    padding: .6em;
    width: 100%;
    background: rgba(240, 240, 240, 1);
    color: #020202;
    text-align: left;
    font-weight: 700;
    font-size: 2.0rem;

    flex-flow: wrap;
    justify-content: flex-start;
    align-items: baseline;
}
.loan-simulation-calc .calc-form-fieldset-legend small {
    margin: 0 0 0 1.2em;
    color: #333;
    font-weight: 400;
    font-size: 1.2rem;
}

/* .loan-simulation-calc .calc-form-fieldset-box */
.loan-simulation-calc .calc-form-fieldset-box {
    display: flex;
    margin-bottom: 1.5em;
    width: 100%;

    flex-flow: wrap;
    justify-content: flex-start;
    align-items: center;
}
.loan-simulation-calc .calc-form-fieldset-box label {
    margin-right: .8em;
    color: #333;
    font-weight: 600;
    font-size: 1.5rem;

    flex: 0 0 6em;
}
.loan-simulation-calc .calc-form-fieldset-box .box-field {
    display: flex;

    flex-flow: wrap;
    justify-content: flex-start;
    align-items: center;
    flex: 1;
}
.loan-simulation-calc .calc-form-fieldset-box .box-field-input {
    margin-right: .8em;
    padding: .5em;
    border: 1px solid #c3cad3;
    border-radius: 4px;
    color: #fa8200;
    font-weight: 800;
    font-size: 1.6rem;

    flex: 1;
}
.loan-simulation-calc .calc-form-fieldset-box .box-field-unit {
    color: #333;
    white-space: nowrap;
    font-size: 1.0rem;
}

/* .loan-simulation-calc .calc-form-fieldset-btn */
.loan-simulation-calc .calc-form-fieldset-btn {
    display: flex;
    margin-top: 1.6em;
    width: 100%;

    flex-flow: wrap;
    justify-content: flex-start;
    align-items: center;
}
.loan-simulation-calc .calc-form-fieldset-btn .calc-btn {
    padding: 1em 1em;
    border-radius: 4px;
    font-weight: 600;
    font-size: 1.6rem;
    cursor: pointer;
    transition: opacity .3s;

    flex: 1;
}
.loan-simulation-calc .calc-form-fieldset-btn .calc-btn:first-child {
    background: #1976d2;
    color: #fff;
}
.loan-simulation-calc .calc-form-fieldset-btn .calc-btn.reset {
    margin-left: .8em;
    background: #90a4ae;
    color: #fff;
}
.loan-simulation-calc .calc-form-fieldset-btn .calc-btn:hover {
    opacity: .9;
}

/* .loan-simulation-calc .calc-result */
.loan-simulation-calc .calc-result {
    overflow: hidden;
    padding: 0;
    border-radius: 10px 10px 0 0;
    background: #edf5f2;

    flex: 1;
}
.loan-simulation-calc .calc-result-ttl {
    position: relative;
    margin-bottom: 0;
    padding: .8em;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: linear-gradient(to right, #01784e 0%, #004a32 100%);
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 2.1rem;
}
.loan-simulation-calc .calc-result-box {
    padding: 1em;
}

/* .loan-simulation-calc .calc-result-box .box-list */
.loan-simulation-calc .calc-result-box .box-list {
    display: flex;
    margin-bottom: 1.5em;
    padding: .5em;
    border-bottom: 1px solid #01784e;
    transition: background .2s, transform .2s;

    flex-flow: wrap;
    justify-content: center;
    align-items: center;
}
.loan-simulation-calc .calc-result-box .box-list:last-child {
    border-bottom: none;
}
.loan-simulation-calc .calc-result-box .box-list.month {
    overflow: hidden;
    margin: .8em 0 1.5em;
    padding: 1.4em;
    border: 3px solid #01784e;
    border-radius: 100px;
    background: #fff;
    color: #141d1d;
    font-weight: 600;
    font-size: 1.6rem;
}

/* .loan-simulation-calc .calc-result-box .box-list-ttl */
.loan-simulation-calc .calc-result-box .box-list-ttl {
    display: flex;
    margin: 10px;
    color: #020202;
    font-weight: 600;
    font-size: 1.6rem;

    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
}
.loan-simulation-calc .calc-result-box .box-list.month .box-list-ttl {
    flex-flow: wrap;
}
.loan-simulation-calc .calc-result-box .box-list.month .box-list-ttl .ico-right-dir {
    margin-right: .8em;
    color: #01784e;
    font-size: 2.0rem;
}

/* .loan-simulation-calc .calc-result-box .box-list-value */
.loan-simulation-calc .calc-result-box .box-list-value strong {
    color: #fa8200;
    font-weight: 800;
    font-size: 1.4em;
    line-height: 1;
}
.loan-simulation-calc .calc-result-box .box-list.month .box-list-value strong {
    font-size: 1.5em;
}

/* .loan-simulation-calc .calc-result-box .ul-square */
.loan-simulation-calc .calc-result-box .ul-square {
    margin: 0 0 0 1.5em;
    padding: .5em 0 0 0;
    color: #333;
    font-size: 1.4rem;
    line-height: 1.6;
}
.loan-simulation-calc .calc-result-box .ul-square li + li {
    margin-top: .8em;
}

/* .loan-simulation-info */
.loan-simulation-info {
    margin-top: 1.5em;
}

/* sp（0px～768px未満の場合に適用） */
@media (min-width: 0) and (max-width: 767.98px) {
    .loan-simulation-calc .calc-form {
        width: 100%;
    }
    .loan-simulation-calc .calc-form-fieldset-legend {
        text-align: left;
    }
    .loan-simulation-calc .calc-form-fieldset-legend small {
        margin: 0 0 0 0;
    }
    .loan-simulation-calc .calc-result {
        margin-top: 4%;
        width: 100%;
    }
}

/* tb（768px～1200px未満の場合に適用） */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .loan-simulation-calc .calc-form {
        width: 100%;
    }
    .loan-simulation-calc .calc-form-fieldset-legend {
        text-align: left;
    }
    .loan-simulation-calc .calc-form-fieldset-legend small {
        margin: 0 0 0 1.2em;
    }
    .loan-simulation-calc .calc-result {
        margin-top: 4%;
        width: 100%;
    }
}

/* pc（1200px以上の場合に適用） */
@media (min-width: 1200px) {
    .loan-simulation-calc {
        flex-flow: wrap;
        justify-content: space-between;
        align-items: stretch;
    }
    .loan-simulation-calc .calc-form {
        padding: 2em;
        width: 48%;
    }
    .loan-simulation-calc .calc-form-fieldset-legend {
        text-align: left;
    }
    .loan-simulation-calc .calc-form-fieldset-legend small {
        margin: 0 0 0 1.2em;
    }
    .loan-simulation-calc .calc-form-fieldset-box label {
        font-size: 1.7rem;

        flex: 0 0 6em;
    }
    .loan-simulation-calc .calc-form-fieldset-box .box-field-input {
        font-size: 2.1rem;
    }
    .loan-simulation-calc .calc-form-fieldset-box .box-field-unit {
        font-size: 1.6rem;
    }
    .loan-simulation-calc .calc-result {
        margin-left: 4%;
        width: 48%;
    }
    .loan-simulation-calc .calc-result-box {
        padding: 2em;
    }
    .loan-simulation-calc .calc-result-box .box-list {
        justify-content: space-between;
        align-items: flex-end;
    }
    .loan-simulation-calc .calc-result-box .box-list.month {
        padding: 1.2em 1.8em;
    }
    .loan-simulation-calc .calc-result-box .box-list-ttl {
        margin: 0;
        font-size: 2.0rem;
    }
    .loan-simulation-calc .calc-result-box .box-list-value strong {
        font-size: 1.7em;
    }
    .loan-simulation-calc .calc-result-box .box-list.month .box-list-value strong {
        font-size: 1.8em;
    }
}