/* http: //jigsaw.w3.org/css-validator/ */
:root {
    --pinkg: #EF8F80;
    --pink: #FFC0B4;
    --pink40: rgba(255, 192, 180, 0.4);
    --yellow: #FDEA6C;
    --yellow30: rgba(253, 234, 108, 0.3);
    --orangeg: #F2A227;
    --orange: #FFC162;
    --orange40: rgba(255, 193, 98, 0.4);
    --orange15: rgba(255, 193, 98, 0.15);
    --blueg: #44BEC4;
    --blue: #88E1E5;
    --blue40: rgba(136, 225, 229, 0.4);
    --blue15: rgba(136, 225, 229, 0.15);
    --greeng: #93D63C;
    --green: #B9E67F;
    --green40: rgba(185, 230, 127, 0.4);
    --green15: rgba(185, 230, 127, 0.15);
}


html,
body {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

* {
    box-sizing: border-box;
    position: relative;
    font-family: "Zen Maru Gothic", serif;

}

img {
    max-width: 100%;
}

#logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 auto;
    padding: 1rem 0;
}

.page-index #logo {
    padding:  0;
}

#breadcrumbs {
    font-size: 1rem;
}

#logo img {
    width: 250px;
    margin: 0;
    display: block;
}

#logo .bt {
    font-size: 1rem;
    padding: 1.25rem 2rem;
    gap: 0;
}

.page-index #logo span img {
    display: block;
    margin: 0 0.5rem 0 0;
    width: 155px;
    height: auto;
}

#logo>span {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

a {
    transition: 0.3s;
}

.nonestyle {
    background: none;
    border: none;
    padding: 0;
}

.subtitle {
    background: #FDEA6C;
    font-size: 1.6rem;
    font-weight: 700;
    padding: 1rem 0;
}

.subtitle .wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 1rem;
}

.subtitle span {
    display: inline-block;
    font-size: 1.2rem;
}

.wrapper {
    display: block;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    max-width: 880px;
}

@media all and (max-width: 640px) {
    #mainvisual .wrapper {
        padding: 0;
    }
}

.normal {
    font-weight: normal;
    display: block;
}

.page-index #mainvisual,
.page-application #mainvisual {
    background: var(--pinkg);
}

#mainvisual {
    background: var(--pink);
}

#mainvisual * {
    display: block;
}

#mainvisual h1 {
    margin: 0 auto;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 5em;
}

#mainvisual:has(picture) h1 {
    align-items: flex-start;
}

#mainvisual:has(picture) {
    padding-bottom: 1rem;
}

#mainvisual picture {
    padding: 20px 0 0;
}

#mainvisual::after {
    display: block;
    position: absolute;
    bottom: 7px;
    left: 0;
    width: 100%;
    content: '';
    background: #fff;
    height: 7px;
}

#mainvisual:has(picture)::after {
    display: none;
}


.attention {
    font-size: 1rem;
    display: block;
}

strong {
    color: #D6262F;
    display: inline-block;
    margin: 0 0.125rem;
}

strong.cb {
    color: #000;
}

p,
li {
    font-size: 1.1rem;
}

.colorbox {
    padding: 2rem;
    margin: 1rem auto;
    border-radius: 20px;
    max-width: 100%;
    width: 660px;
    background: var(--yellow30);
}

.skip {
    position: absolute;
    left: -9000px
}

.nd {
    display: none !important;
}

section {
    padding: 2rem 0;

    .orangeblock {
        .colorbox {
            background: var(--orange15);
        }

        h3 {
            background: var(--orange40);
            border-bottom: 6px solid var(--orangeg);
        }

        h4::before {
            background: var(--orange40);
        }

        h4::after {
            background: var(--orangeg);
        }

        h5::after {
            background: var(--orange);
        }

        ul:not(.flows) li::before {
            background: var(--orangeg);
        }
    }

    .blueblock {
        .colorbox {
            background: var(--blue15);
        }

        h3 {
            background: var(--blue40);
            border-bottom: 6px solid var(--blueg);
        }

        h4::before {
            background: var(--blue40);
        }

        h4::after {
            background: var(--blueg);
        }

        h5::after {
            background: var(--blue);
        }

        .colorbox h6 {
            border-bottom: 2px solid var(--blue);
        }

        ul:not(.flows) li::before {
            background: var(--blueg);
        }
    }

    .greenblock {
        .colorbox {
            background: var(--green15);
        }

        h3 {
            background: var(--green40);
            border-bottom: 6px solid var(--greeng);
        }

        h4::before {
            background: var(--green40);
        }

        h4::after {
            background: var(--greeng);
        }

        h5::after {
            background: var(--green);
        }

        ul:not(.flows) li::before {
            background: var(--greeng);
        }
    }
}

.colorbox h5 {
    margin: 0 auto 2rem;
    text-align: center;

}

.colorbox h5::after {
    content: '';
    display: none;
}

.flex {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.flex.c2::after {
    content: '';
    width: calc((100% - 1rem) / 2);
    max-width: 350px;
    height: 1px;
    display: block;
}

.flex.c2>* {
    width: calc((100% - 1rem) / 2);
    max-width: 350px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding: 1rem 2rem;
    background: var(--yellow);
    border-radius: 20px;
}

@media all and (max-width: 640px) {
    .flex.c2>* {
        width: 100%;
    }
}

.flex.c2>*>a {
    color: #000;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 1.1rem;
    gap: 1rem;
}

.flex.c2>*>ul {
    margin: 0.5rem auto 0;
    display: block;
    width: 100%;
    padding: 0.5rem 0 0 1rem;
    list-style: disc;
    border-top: 1px solid #000;
}

.flex.c2>*>ul li {
    padding: 0;
    font-size: 1rem;
    width: fit-content;
    color: #000;
    font-weight: 400 !important;
    text-decoration: none;
    display: flex;
    list-style: disc;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    margin: 0;
}

.flex.c2>*>ul li a {
    color: #000;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    margin: 0;
    text-decoration: none;
}

.flex.c2>*>ul li::before {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    position: absolute;
    left: -0.75rem;
    background: #000;
    border-radius: 2rem;
}

.flex.c2>*>ul a:after {
    content: url('../images/nav_b.svg');
}

.flex.c2>*>a:after {
    content: url('../images/nav_a.svg');
}

.flex.c2 a {
    opacity: 1;
}

.flex.c2 a:hover {
    opacity: 0.6;
}


h2,
h3,
h4,
h5,
.catchcopy,
.catchup,
strong,
.bt,
dt {
    font-weight: 700;
}

h2 {
    text-align: center;
    padding: 2.5rem 1rem 3rem;
    font-size: 2.2rem;
    margin: 0 auto 2rem;
    background: #F1EDE8;
}

h2 span {
    font-size: 1.2rem;
    display: block;
}

h2 em {
    font-size: 1.8rem;
    display: block;
    font-style: normal;
}

h3 {
    padding: 1rem 0;
    font-size: 1.6rem;
    margin: 4rem auto 1.5rem;
    padding: 0.5rem 1rem;
    border-radius: 10px 10px 0 0;
    background: var(--pink40);
    border-bottom: 7px solid var(--pinkg);
}

h4 {
    display: block;
    font-size: 1.4rem;
    padding: 0.25rem 0 0.75rem;
    margin: 2.5rem auto 1.5rem;
}

h4::before {
    content: '';
    width: 100%;
    position: absolute;
    bottom: -3px;
    left: 0;
    z-index: 1;
    display: block;
    border-radius: 7px;
    height: 7px;
    background: var(--pink40);
}

h4::after {
    content: '';
    width: 220px;
    position: absolute;
    bottom: -3px;
    left: 0;
    z-index: 2;
    display: inline-block;
    height: 7px;
    border-radius: 7px;
    background: var(--pinkg);
}

h5 {
    font-size: 1.3rem;
    padding: 0.25rem 0;
    margin: 2rem auto 0;
}

h5::after {
    content: '';
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    background: var(--pink40);
    height: 3px;
}

/*nowinfo*/
#nowinfo {
    max-width: 100%;
    padding: 4rem 0;
    overflow: hidden;
}

#nowinfo .wrapper {
    width: calc(660px + 40px);
    max-width: 100%;
}

#nowinfo h3 {
    font-size: 1.4rem;
    margin: 0 auto;
    display: block;
    width: fit-content;
    padding-top: 0;
    background: none;
    padding-bottom: 0;
    border-bottom: 3px dotted #D6262F;
}

#topinfo li span {
    margin-top: 0.25rem;
    display: inline-block;
}

.catchup {
    display: block;
    text-align: center;
    width: fit-content;
    margin: 0 auto 2rem;
    background: transparent;
    padding: 0.5rem 0;
    font-size: 1.4rem;
    border-bottom: 7px dotted #D6262F;
}

.catchup strong {
    color: #D6262F;
    font-size: 2.8rem;
}

/*topinfo*/

#topinfo.wrapper .infobox {
    background-color: #F8F6F3;
    margin: 0 auto 40px;
    border-radius: 20px;
    padding: 30px 40px;
    font-weight: normal;
}

#topinfo h2 {
    color: #D6262F;
    text-align: center;
    background-image: none;
    background-color: transparent;
    font-size: 120%;
    padding: 0;
    margin: 2rem 0;
}

#topinfo h2::after {
    content: none;
}

#topinfo ul li {
    margin: 15px 0;
}

#welcome {
    padding: 20px;
    font-weight: 700;
    border-radius: 20px;
    margin: 0 auto 2rem;
}

#welcome p {
    margin: 1rem auto 40px;
}

#toplinks {
    background: rgba(255, 192, 180, 0.2);
    border-radius: 10px;
    padding: 2rem;
    margin-bottom: 3rem;
}

#toplinks h2 {
    margin: 0;
    padding: 0;
    font-size: 1.4rem;
    background: none;
}

#toplinks h2::after {
    display: none;
}

#toplinks a {
    text-decoration: none;
    color: #000;
}

#toplinks a:hover {
    text-decoration: underline;
}

#toplinks>ul {
    margin-top: 2rem;
}

#toplinks>ul>li {
    padding: 1rem 0 1rem 2rem;
    position: relative;
    border-top: 1px solid rgba(112, 112, 112, 0.3);
}

#toplinks>ul>li::before {
    top: 1rem;
    left: 0;
    width: 1.5rem;
    height: 1.5rem;
    background: #FFC0B4;
    border-radius: 2rem;
}

#toplinks>ul>li::after {
    content: url('../images/nav_b.svg');
    top: 0.9rem;
    left: 0.66rem;
    position: absolute;
}

#toplinks ul ul {
    list-style: none;
}

#toplinks ul ul>li::before {
    content: url('../images/nav_p.svg');
    top: 0;
    left: 0.5rem;
    width: auto;
    height: auto;
    background: none;
    position: absolute;

}

#toplinks ul span {
    display: block;
}

#toplinks ul span,
#toplinks ul ul>li a {
    font-weight: normal;
}

#targetlinks ul {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

#targetlinks ul li {
    border: 10px solid #fff1ed;
    background: #fffcfb;
    border-radius: 10px;
    padding: 2rem;
    font-weight: normal;
    width: calc((100% - 2rem) / 2);
}

#targetlinks ul li::before {
    display: none;
    padding: 0;
}

#targetlinks h4 {
    margin: 0 auto 2rem;
    border-bottom: 5px dotted var(--pink);
    text-align: center;
    display: block;
    width: fit-content;
}

#targetlinks h4::before,
#targetlinks h4::after {
    display: none;
}

#targetlinks img {
    margin-bottom: 0.5rem;
}

#targetlinks a {
    display: block;
    width: fit-content;
    max-width: 100%;
    font-weight: bold;
    border-radius: 2rem;
    background: #FDEA6C;
    margin: 1rem auto 0;
    padding: 1rem 1.5rem;
    color: #000;
    text-decoration: none;
}

.addinfo span {
    position: absolute;
    font-size: 0.85rem;
    padding: 0;
    left: 0;
    bottom: 0.5rem;
    white-space: nowrap;
}

.addinfo {
    padding-bottom: 2rem;
    display: block;
}

#targetlinks a:hover {
    background: rgba(253, 234, 108, 0.5);
}






.center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}

.center .bt {
    margin: 2rem auto;
}

.center img {
    margin: 1rem auto;
    display: block;
}

.catchcopy {
    font-size: 2.4rem;
    display: block;
    width: fit-content;
    margin: 2rem auto 3rem;
    background: transparent;
    padding: 1rem 0;
    border-bottom: 7px dotted #D6262F;
}



.more {
    font-size: 1.4rem;
    display: block;
    width: fit-content;
    font-weight: bold;
}

#sec1 .more,
#sec2 .more {
    border-bottom: 7px dotted #D6262F;
    font-size: 1.8rem;
}

.more strong {
    font-size: 110%;
}

.plus {
    margin-bottom: 70px;
}

.plus::after {
    content: url('../images/plus.svg');
    position: absolute;
    bottom: -50px;
    left: calc(50% - 15px);
}

.kome {
    padding-left: 2.5rem;
}

.kome1::before {
    content: '※1';
    position: absolute;
    left: 0;
}

.colorbox p span {
    font-weight: bold;
}

.colorbox p {
    margin: 0.25rem auto;
}

.colorbox h6 {
    font-size: 1.2rem;
    margin: 1rem auto 0.5rem;
    border-bottom: 2px solid var(--pink40);
}

.colorbox.attention {
    width: 880px;
}

.colorbox.attention img {
    display: block;
    float: right;
    max-width: 120px;
    margin: 0 0 1rem 2rem;

}

.colorbox.attention p {
    margin: 1rem auto;
}

.bt {
    background: var(--yellow);
    padding: 1rem 3rem;
    position: relative;
    display: flex;
    text-decoration: none;
    color: #000;
    width: fit-content;
    border-radius: 5rem;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.bt:hover {
    background: var(--yellow30);
}

.bt.red {
    background: #D6262F;
    color: #fff;
}

.bt.red:hover {
    background: rgba(214, 38, 47, 0.8);
}

.bt.purple {
    background: #EFD2F7;
}

.bt.purple:hover {
    background: rgba(239, 210, 247, 0.5);
}

.bt.blue {
    background: #D2EAF7;
}

.bt.blue:hover {
    background: rgba(210, 234, 247, 0.5);
}

.bt.green {
    background: #D2F7DF;
}

.bt.green:hover {
    background: rgba(210, 247, 223, 0.5);
}

ul:not(.flows) {
    list-style: none;
    margin: 1rem auto;
    padding: 0;
}

ul:not(.flows) li {
    padding-left: 1.5rem;
    padding-bottom: 0.25rem;
}

#sec1 ul:not(.flows) li {
    font-weight: bold;
}


section ul:not(.flows) li:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0.4rem;
    width: 1rem;
    height: 1rem;
    background: var(--pink);
    border-radius: 2rem;
}

#downloads ul:not(.flows) li::before,
section ul:not(.flows) li li::before {
    left: 0.5rem;
    top: 0.7rem;
    width: 5px;
    height: 5px;
    background: #000;
}

#downloads ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;

}

#downloads ul li {
    width: calc((100% - 1rem) / 2);
    display: inline-block;
    padding-left: 0;
}

#downloads ul li::before {
    display: none;
}

#downloads ul li img {
    width: 100%;
    display: block;
}

#downloads ul li img.hw {
    width: 55%;
}

#downloads ul li img.qw {
    width: 75%;
}

@media all and (max-width: 560px) {
    #downloads ul li {
        width: 100%;
    }
}

/*.bt::after{
    content: url('../images/linkbt.svg');
    transform:translateY(3px);
}*/
.flows {
    list-style: none;
    margin: 2rem auto;
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
}

#sec1 .btbox {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    width: fit-content;
}

#sec1 .btbox::after {
    content: '';
    width: 120px;
    height: 150px;
    background: center center no-repeat url('../images/bt.png');
    background-size: contain;
}

#faq+dl dt,
#faq+dl dd {
    margin: 0.5rem auto 0;
    position: relative;
    font-size: 1.1rem;
}

#faq+dl dt {
    font-size: 1.2rem;
    padding: 0.5rem 0.5rem 0.5rem 3rem;
    font-weight: bold;
}

#faq+dl dd {
    padding: 0.5rem 0.5rem 0.5rem 2.25rem;
    margin: 0 0 1rem 3rem;
}

#faq+dl dt::before,
#faq+dl dd::before {
    content: 'Q';
    display: flex;
    width: 2.5rem;
    height: 2.25rem;
    border-radius: 2rem;
    align-items: center;
    justify-content: center;
    position: absolute;
    line-height: 80%;
    padding-bottom: 0.25rem;
    left: 0;
    top: 0.25rem;
    font-size: 1.4rem;
    background: var(--pink);
}

#faq+dl dd::before {
    content: 'A';
    width: 1.75rem;
    height: 1.5rem;
    top: 0.5rem;
    font-size: 1.1rem;
    background: var(--yellow);
}

#pagetop {
    position: sticky;
    bottom: 20px;
    left: calc(100% - 90px);
    width: fit-content;
    display: flex;
    justify-content: flex-end;
}

#pagetop a {
    opacity: 1;
}

#pagetop a:hover {
    opacity: 0.4;
}

.bt.out {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.bt.out::after {
    content: url('../images/outlink.svg');
}

.imagebox a {
    border-radius: 20px;
    position: absolute;
}

.imagebox a span {
    position: absolute;
    left: -9000px;
}

.imagebox .mado {
    top: 0;
    left: 0;
    width: 26%;
    height: 36%;
}

.imagebox .dannetsu {
    top: 69%;
    left: 17%;
    width: 30%;
    height: 31%;
}

.imagebox .yokusou {
    top: 46%;
    left: 2.5%;
    width: 23%;
    height: 29%;
}

.imagebox .yane {
    top: 0;
    left: 69.5%;
    width: 25%;
    height: 32%;
}

.imagebox .taisin {
    top: 71%;
    left: 72%;
    width: 28%;
    height: 29%;
}

#contact .b2 {
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid #666;
}

#contact h2 {
    min-width: 160px;
    margin: 0 auto;
    text-align: left;
    padding: 1rem 0;
    background: transparent;
}

#contact h3 {
    margin: 1rem auto;
    padding: 0;
    font-weight: 700;
    font-size: 1.6rem;
    background: transparent;
    border: none;
}

#contact h4 {
    font-size: 1.4rem;
    margin: 1rem auto 0;
    padding: 0;
    background: transparent;
}

#contact h2::after,
#contact h4::before,
#contact h4::after {
    content: '';
    display: none;
}

#contact h3 span {
    font-size: 1.1rem;
    display: block;
}

#contact a {
    color: #000;
}

#contact p span {
    display: inline-block;
    margin-right: 1rem;
}

.message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    font-weight: bold;
    font-size: 1.2rem;
    padding: 1rem;
    margin: 2rem auto;

}

.message img:first-child {
    max-width: 150px;
}

.message img:nth-of-type(2) {
    max-width: 160px;
    transform: translateY(2rem);
}

.message .attention {
    left: 240px;
    font-weight: 400;
    position: absolute;
    font-size: 0.9rem;
    color: #D6262F;
    top: 1rem;
    max-width: calc(100% - 200px);
}
.voice{
    padding-bottom: 1rem;
    border-bottom: 1px solid #ccc;
}

#customervoice {
    padding-bottom: 4rem;
}

#customervoice .colorbox {
    width: 100% !important;
}

#customervoice .colorbox h3 {
    background: transparent !important;
    margin: 0 auto;
    text-align: center;
    display: block;
    width: fit-content;
    font-size: 1.4rem;
    border: none !important;
}

#customervoice .colorbox::after {
    content: '';
    width: 150px;
    height: 150px;
    background-image: url('../images/catchup.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: -3rem;
    right: 2rem;
}

.voices {
    margin: 1.5rem auto 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid #ccc;
    font-weight: normal;
}

.voices:first-of-type {
    border-top: none;
}

#welcome .voices p.sig {
    text-align: right;
    margin: 0 auto;
}

.casestudy ul {
    list-style: none;
    margin: 2rem auto;
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2rem;
    flex-wrap: wrap;
}

.casestudy ul li {
    width: 100%;
    max-width: 320px;
    padding: 0;
}

.casestudy ul li::before {
    display: none;
}

.casestudy ul li img {
    display: block;
}

.page-company #downloads ul {
    list-style: none;
    margin: 2rem auto;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    gap: 2rem;
    flex-wrap: wrap;
}

.page-company #downloads ul li::before {
    display: none;
}

.page-company #downloads ul:nth-of-type(2) li {
    padding: 0;
    width: 375px;

}

.page-company #downloads ul li img {
    max-height: 200px;
    width: auto;
    display: block;
}


#apptop .wrapper {
    margin: 2rem auto 4rem;
    background: #F8F6F3;
    padding: 2rem;
    border-radius: 20px;
}

#apptop h2::after,
#apptop h3::before,
#apptop h3::after {
    display: none;
}

#apptop .catchcopy {
    margin: 0 auto;
}

#apptop h3 {
    background: none;
    text-align: center;
    border-bottom: 2px solid var(--pink);
}

#apptop .flows img {
    display: block;
    zoom: 97%;
}


.flex.c2 li::before {
    display: none;
}

.page-application #mainvisual picture {
    padding: 0;
}

.check {
    display: flex;
    justify-content: space-between;
    gap: 1rem 2rem;
}

.check img {
    min-width: 150px;
}

.check p {
    padding: 0 20px;
}

.btbox.illust {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 2rem;
}

#normal .btbox.illust a {
    margin: 2rem 0 4rem calc(15% + 2rem);
}

#normal .btbox.illust::after {
    content: '';
    display: block;
    width: 150px;
    height: 170px;
    background: center center no-repeat url('../images/normal.png');
    background-size: contain;
}

#loan .btbox.illust a {
    margin: 2rem calc(11% + 2rem) 2rem 0;
}

#loan .btbox.illust::before {
    content: '';
    display: block;
    width: 112px;
    height: 120px;
    background: center center no-repeat url('../images/loan.png');
    background-size: contain;
}



#events ul.flex.c3,
#banners ul.flex.c3 {
    list-style: none;
    margin: 2rem auto;
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

#events ul.flex li,
#banners ul.flex li {
    width: calc((100% - 2rem) / 3);
}

@media all and (max-width: 640px) {

    #events ul.flex li,
    #banners ul.flex li {
        width: auto;
        max-width: 100%;
    }
}


#contact {
    background: var(--pink);
    padding: 2rem 0;
    margin: 3rem auto 0;
}

#contact .flex {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 1rem;
}

@media all and (max-width: 640px) {
    #contact .b1 {
        flex-direction: column;
    }

    #contact h2 {
        padding: 0;
    }

    .btbox.illust {
        flex-direction: column;
        gap: 0 2rem;
    }

    #loan .btbox.illust a,
    #normal .btbox.illust a {
        margin: 2rem auto;
    }

    #normal .btbox.illust::after,
    #loan .btbox.illust::before {
        order: 2;
        transform: translateY(-1rem);
    }

    .page-index #logo span img {
        max-width: 40%;
    }

    .message {
        margin-bottom: 150px;
        gap: 0;
        justify-content: flex-start;
    }

    .message a {
        margin-top: 2rem;
    }

    .message img:nth-of-type(2) {
        position: absolute;
        bottom: -90px;
        right: 20px;
        width: 130px;
    }

    .message .attention {
        left: 180px;
    }

    .page-application #logo span a.bt span {
        display: none;
    }

    .eventbox::after,
    .eventbox>.event {
        width: calc((100% - 20px) / 2) !important;
    }

}

.spx {
    display: none;
}

@media all and (max-width: 480px) {
    #logo {
        padding: 8px 0;

    }

    .message {
        justify-content: space-between;
    }

    .message a {
        margin-left: -4rem;
    }

    #logo img {
        width: 158px;
    }

    #logo .bt {
        font-size: 0.85rem;
        padding: 0.75rem 2rem;
    }

    .page-index #logo span img {
        display: none;
    }

    .subtitle {
        font-size: 1.4rem;
    }

    .subtitle span {
        font-size: 1.1rem;
    }

    .catchcopy,
    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.4rem;
    }

    h4 {
        font-size: 1.2rem;
    }

    .check {
        flex-direction: column;
    }

    .check p {
        margin: 0 auto;
    }

    .check img {
        width: 150px;
        margin: 0 auto;
        display: block;
    }

    .spx {
        display: inline;
    }

    #targetlinks ul li {
        width: 100%;
    }

    .eventobx::after,
    .eventbox>.event {
        width: 100% !important;
    }

    #customervoice .colorbox::after {
        width: 120px;
        height: 120px;
    }

    #customervoice .colorbox h3 {
        text-align: left;
        margin: 0;
    }
}

.start822 a {
    cursor: default !important;
}

.start822+p>.attention {
    color: #D6262F;
    text-align: center;
    margin-top: -1.5rem;
    margin-bottom: 2rem;
}

@media all and (max-width: 370px) {
    .bt {
        padding: 1rem 2rem;
    }
}

.informationbox {
    background: #fff;
    padding: 1rem 2rem;
    margin: 2rem auto;
    border-radius: 10px;
    border: 3px solid #D6262F;
}

.informationbox ul li::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0.4rem;
    width: 1rem;
    height: 1rem;
    background: var(--pink);
    border-radius: 2rem;
}

.informationbox li {
    font-weight: 700;
    color: #D6262F;
}

.informationbox ul li::before {
    background: #D6262F;
}

.eventbox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px 0;
}

.eventbox::after,
.eventbox>.event {
    width: calc((100% - 40px) / 3);
}

.eventbox::after {
    content: '';
    display: block;
    order: 2;
}

.eventbox .thumb {
    border-radius: 10px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid #DBDBDB;
    background-image: url("../images/placeholder.png");
    width: 100%;
    padding-top: 56.25%;
    position: relative;
    z-index: 1;
    margin-bottom: 0.5rem;
}

.eventbox .tags {
    margin: -1.25rem 0.5rem 0.25rem;
    position: relative;
    z-index: 2;
}

.eventbox .tags span {
    background: #42804C;
    color: #fff;
    margin: 0 5px 0 0;
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    font-weight: normal;
    border-radius: 5px;
}

.eventbox .date {
    color: #999;
    font-size: 85%;
}

.eventbox strong {
    margin: 0.5rem 0;
    padding: 0;
    font-size: 1rem;
    color: #000;
    background: none;
}

.eventbox strong a {
    color: #000;
}

.eventbox .author {
    color: #999;
}


.bt.gray {
    background: #999;
    pointer-events: none;
}

.bt.gray:hover {
    background: #999;
    pointer-events: none;
}

.stopbt {
    color: #D6262F;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #D6262F;
    font-weight: bold;
    margin: 5em auto;
    padding: 0.5rem 1rem;
    width: calc(100% - 4rem);
}

span.stopbt {
    position: absolute;
    font-size: 0.9rem;
    font-weight: bold;
    width: calc(100% - 4rem);
    top: auto;
    right: 2rem;
    margin: 0 auto;
    z-index: 100;
}

header span.stopbt {
    top: 3vw;
    right: 0;
    width: 100%;
}