section
{
    position: relative;

    width: 100%;
}

.lead
{
    width: 90%;
    margin: 0 auto 80px;

    text-align: center;
}
@media screen and (max-width: 1024px)
{
    .lead
    {
        margin-bottom: 40px;
    }
}
.lead__ttl
{
    font-size: 30px;
    font-weight: 500;
    line-height: 1.6666666667;

    margin-bottom: 20px;

    letter-spacing: .03em;
}
@media screen and (max-width: 1024px)
{
    .lead__ttl
    {
        font-size: 20px;

        margin-bottom: 10px;
    }
}
.lead__ttl span
{
    font-size: 1.3em;

    color: var(--c_bl);
}
.lead__text
{
    font-size: 16px;
    line-height: 2;

    letter-spacing: 0;
}
@media screen and (max-width: 1024px)
{
    .lead__text
    {
        font-size: 14px;
    }
}

.flow
{
    padding-bottom: 200px;

    background: url(/wp-content/themes/yuzawa/business/img/flow_bg.webp) center bottom/100% no-repeat;
}
@media screen and (max-width: 1024px)
{
    .flow
    {
        padding-bottom: 150px;
    }
}
@media screen and (max-width: 600px)
{
    .flow
    {
        padding-bottom: 80px;
    }
}
.flow__inner
{
    width: 90%;
    max-width: 1100px;

    background: url(/wp-content/themes/yuzawa/business/img/flow_deco_left.webp) left bottom/min(18%, 198px) no-repeat, url(/wp-content/themes/yuzawa/business/img/flow_deco_right.webp) right bottom/min(20.4%, 224px) no-repeat;

    margin-inline: auto;
}
.flow__ttl
{
    font-size: 36px;
    font-weight: 500;
    line-height: 1.25;

    margin-bottom: 30px;

    text-align: center;
    letter-spacing: .04em;
}
@media screen and (max-width: 1024px)
{
    .flow__ttl
    {
        font-size: 24px;
    }
}
.flow__ttl span
{
    font-size: .66em;
}
.flow__list
{
    display: flex;

    flex-wrap: wrap;
    justify-content: center;
    gap: 30px 6.35%;
}
@media screen and (max-width: 600px)
{
    .flow__list
    {
        gap: 40px;
    }
}
.flow__item
{
    position: relative;

    width: 29.1%;
    padding: 30px 30px;

    background: #f0f6fb;
}
@media screen and (max-width: 1024px)
{
    .flow__item
    {
        padding: 20px 2%;
    }
}
@media screen and (max-width: 600px)
{
    .flow__item
    {
        width: 100%;
        padding: 20px 5%;
    }
}
.flow__item:not(:first-child):before
{
    position: absolute;
    top: 50%;
    left: -15%;

    width: 24px;

    content: '';

    background: url(/wp-content/themes/yuzawa/business/img/icon_arw.webp) center/cover;

    translate: 0 -50%;
    aspect-ratio: 24/62;
}
@media screen and (max-width: 1024px)
{
    .flow__item:not(:first-child):before
    {
        width: 18px;
    }
}
@media screen and (max-width: 600px)
{
    .flow__item:not(:first-child):before
    {
        top: -20px;
        left: 50%;

        translate: -50% -50%;
        rotate: 90deg;
    }
}
.flow__item-ttl
{
    font-size: 20px;
    line-height: 1.5;

    display: flex;

    margin-bottom: 15px;

    letter-spacing: 0;

    color: var(--c_bl);

    align-items: center;
    gap: 10px;
}
@media screen and (max-width: 1024px)
{
    .flow__item-ttl
    {
        font-size: 16px;
    }
}
.flow__item-icon
{
    width: 50px;

    flex-shrink: 0;
}
@media screen and (max-width: 1024px)
{
    .flow__item-icon
    {
        width: 40px;
    }
}
.flow__item-text
{
    font-size: 16px;
    line-height: 1.875;

    letter-spacing: 0;
}
@media screen and (max-width: 1024px)
{
    .flow__item-text
    {
        font-size: 14px;
    }
}
.flow__promise
{
    font-size: 26px;
    line-height: 1.5384615385;

    margin: 50px 0 30px;

    text-align: center;
    letter-spacing: 0;

    color: var(--c_bl);
}
@media screen and (max-width: 1024px)
{
    .flow__promise
    {
        font-size: 20px;

        margin: 30px 0 20px;
    }
}
.flow__btn
{
    display: flex;

    justify-content: center;
}

.reason__inner
{
    display: grid;

    width: 90%;
    max-width: 1100px;

    margin-inline: auto;
    grid-template-columns: 100px 1fr;
}
@media screen and (max-width: 1024px)
{
    .reason__inner
    {
        grid-template-columns: 60px 1fr;
    }
}
@media screen and (max-width: 1024px)
{
    .reason__inner
    {
        grid-template-columns: 50px 1fr;
    }
}
.reason__list
{
    counter-reset: number 0;
}
.reason__item
{
    position: relative;

    display: grid;

    grid-template-columns: 66% 1fr;
}
@media screen and (max-width: 600px)
{
    .reason__item
    {
        grid-template-columns: 1fr;
    }
}
.reason__item:not(:last-child)
{
    margin-bottom: 60px;
}
@media screen and (max-width: 1024px)
{
    .reason__item:not(:last-child)
    {
        margin-bottom: 45px;
    }
}
.reason__item:before
{
    font-size: 80px;
    font-weight: 500;
    font-style: italic;
    line-height: 1;

    position: absolute;
    top: 0;
    left: 30px;

    content: counter(number, decimal-leading-zero);
    counter-increment: number;
    letter-spacing: 0;

    color: var(--c_bl);

    translate: 0 -60%;
}
@media screen and (max-width: 1024px)
{
    .reason__item:before
    {
        font-size: 40px;

        left: 3%;
    }
}
.reason__item-content
{
    display: flex;
    flex-direction: column;

    padding: 30px 10%;

    background: var(--white);

    justify-content: center;
    align-items: flex-start;
}
@media screen and (max-width: 1024px)
{
    .reason__item-content
    {
        padding: 25px 5%;
    }
}
.reason__item-ttl
{
    font-size: 32px;
    line-height: 1.5625;

    display: flex;

    width: 100%;
    margin-bottom: 20px;

    letter-spacing: 0;

    color: var(--c_bl);

    justify-content: space-between;
    align-items: center;
}
@media screen and (max-width: 1024px)
{
    .reason__item-ttl
    {
        font-size: 20px;

        margin-bottom: 10px;
    }
}
.reason__item-ttl span
{
    width: 110px;
}
@media screen and (max-width: 1024px)
{
    .reason__item-ttl span
    {
        width: 80px;
    }
}
.reason__item-text
{
    font-size: 16px;
    line-height: 1.875;

    letter-spacing: 0;
}
@media screen and (max-width: 1024px)
{
    .reason__item-text
    {
        font-size: 14px;
    }
}
@media screen and (max-width: 600px)
{
    .reason__item-img
    {
        aspect-ratio: 16/12;
    }
}
.reason__item-img img
{
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.business
{
    padding: 100px 0 240px;

    background: url(/wp-content/themes/yuzawa/business/img/business_bg.webp) left top/min(46.5%, 698px) no-repeat;
}
@media screen and (max-width: 1024px)
{
    .business
    {
        padding: 60px 0 100px;
    }
}
.business__inner
{
    display: grid;

    width: calc(100vw - max((100vw - 1100px) / 2, 5vw));
    margin-bottom: 70px;
    margin-left: auto;

    grid-template-columns: 100px 1fr;
}
@media screen and (max-width: 1024px)
{
    .business__inner
    {
        grid-template-columns: 60px 1fr;
    }
}
@media screen and (max-width: 600px)
{
    .business__inner
    {
        grid-template-columns: 50px 1fr;
    }
}
.business__list
{
    counter-reset: number 0;
}
.business__item
{
    display: grid;

    grid-template-columns: 530px 1fr;
}
@media screen and (max-width: 1024px)
{
    .business__item
    {
        grid-template-columns: 55% 1fr;
    }
}
@media screen and (max-width: 600px)
{
    .business__item
    {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}
.business__item:not(:has(.business__item-img))
{
    width: 95%;
    max-width: 1000px;

    grid-template-columns: 1fr;
}
.business__item:not(:last-child)
{
    margin-bottom: 50px;
}
@media screen and (max-width: 1024px)
{
    .business__item:not(:last-child)
    {
        margin-bottom: 30px;
    }
}
@media screen and (max-width: 600px)
{
    .business__item-content
    {
        padding-right: 5vw;
    }
}
.business__item-ttl
{
    font-size: 30px;
    font-weight: 500;
    line-height: 1.2666666667;

    display: flex;

    margin-bottom: 20px;

    letter-spacing: .04em;

    color: var(--c_bl);

    align-items: center;
    gap: 10px;
}
@media screen and (max-width: 1024px)
{
    .business__item-ttl
    {
        font-size: 20px;

        margin-bottom: 10px;

        gap: 10px;
    }
}
.business__item-ttl:before
{
    font-size: 26px;
    line-height: 1;

    display: flex;

    width: 54px;

    content: counter(number, decimal-leading-zero);
    counter-increment: number;
    letter-spacing: 0;

    border: 1px solid var(--c_bl);
    border-radius: 50px;

    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    aspect-ratio: 1;
}
@media screen and (max-width: 1024px)
{
    .business__item-ttl:before
    {
        font-size: 18px;

        width: 40px;
    }
}
.business__item-text
{
    font-size: 16px;
    line-height: 1.875;

    padding-left: 64px;

    letter-spacing: .05em;
}
@media screen and (max-width: 1024px)
{
    .business__item-text
    {
        font-size: 14px;

        padding-left: 55px;
    }
}
.business__item-img
{
    position: relative;
}
.business__item-img:before
{
    position: absolute;

    width: 100%;
    height: 100%;

    content: '';

    background: linear-gradient(90deg, var(--white) 10%, transparent 30%);
}
.business__link
{
    width: 90%;
    max-width: 900px;
    padding: 40px;

    background: url(/wp-content/themes/yuzawa/business/img/business_img_03.webp) left top no-repeat;

    margin-inline: auto;
}
@media screen and (max-width: 1024px)
{
    .business__link
    {
        padding: 20px;

        background-size: 45%;
    }
}
@media screen and (max-width: 600px)
{
    .business__link
    {
        background-size: 70%;
    }
}
.business__link-inner
{
    display: grid;

    padding: 60px 50px;

    background: var(--white);
    box-shadow: 0 0 20px 0 rgba(0, 104, 183, .15);

    grid-template-columns: 1fr 240px;
    align-items: center;
    gap: 50px;
}
@media screen and (max-width: 1024px)
{
    .business__link-inner
    {
        padding: 35px 5%;

        gap: 5%;
        grid-template-columns: 1fr 200px;
    }
}
@media screen and (max-width: 600px)
{
    .business__link-inner
    {
        padding-block: 20px;
        grid-template-columns: 1fr;
        gap: 10px;
    }
}
.business__link-text
{
    font-size: 16px;
    line-height: 2.125;

    letter-spacing: .05em;
}
@media screen and (max-width: 1024px)
{
    .business__link-text
    {
        font-size: 14px;
    }
}
@media screen and (max-width: 600px)
{
    .business__link-btn
    {
        display: flex;

        justify-content: center;
    }
}

.products__inner
{
    display: grid;

    width: 90%;
    max-width: 1100px;

    margin-inline: auto;
    grid-template-columns: 100px 1fr;
    align-items: flex-start;
    gap: 50px 0;
}
@media screen and (max-width: 1024px)
{
    .products__inner
    {
        gap: 25px 0;
        grid-template-columns: 70px 1fr;
    }
}
@media screen and (max-width: 600px)
{
    .products__inner
    {
        grid-template-columns: 60px 1fr;
    }
}
.products__ttl
{
    grid-column: 1/-1;
}
.products__sub
{
    font-size: 28px;
    font-weight: 500;
    line-height: 1.4285714286;

    display: flex;

    letter-spacing: .1em;

    color: var(--white);

    writing-mode: vertical-rl;
    text-orientation: upright;
    font-feature-settings: normal;
    align-items: flex-end;
}
@media screen and (max-width: 1024px)
{
    .products__sub
    {
        font-size: 20px;
    }
}
@media screen and (max-width: 600px)
{
    .products__sub
    {
        font-size: 18px;
    }
}
.products__list
{
    display: grid;

    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}
@media screen and (max-width: 1024px)
{
    .products__list
    {
        gap: 10px;
    }
}
@media screen and (max-width: 600px)
{
    .products__list
    {
        grid-template-columns: 1fr;
    }
}
.products__item
{
    display: grid;

    background: var(--white);

    grid-template-columns: 310px 1fr;
}
@media screen and (max-width: 1024px)
{
    .products__item
    {
        grid-template-columns: 60% 1fr;
    }
}
.products__item-img
{
    position: relative;

    height: 100%;

    background: var(--white);

    aspect-ratio: 31/33;
}
.products__item-img img
{
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}
.products__item-name
{
    position: absolute;
    top: 30px;
    left: 30px;
}
@media screen and (max-width: 1024px)
{
    .products__item-name
    {
        top: 10px;
        left: 10px;
    }
}
.products__item-flow
{
    display: flex;
    flex-direction: column;

    background: url(/wp-content/themes/yuzawa/common/img/common-bg.webp);

    align-items: center;
    justify-content: center;
    gap: 20px;
}
@media screen and (max-width: 1024px)
{
    .products__item-flow
    {
        gap: 10px;
    }
}
.products__item-step
{
    font-size: 24px;
    font-weight: 500;
    line-height: 1;

    display: flex;
    flex-direction: column;

    letter-spacing: .04em;

    color: var(--c_bl);

    align-items: center;
    justify-content: center;
    gap: 20px;
}
@media screen and (max-width: 1024px)
{
    .products__item-step
    {
        font-size: 18px;

        gap: 10px;
    }
}
.products__item-step:not(:last-child):after
{
    display: block;

    width: 16px;

    content: '';
    transition: all .3s ease;

    background: var(--c_bl);

    aspect-ratio: 1;
    clip-path: polygon(0 calc(50% - calc(1px / 2)), calc(50% - calc(1px / 2)) calc(50% - calc(1px / 2)), calc(50% - calc(1px / 2)) 0, calc(50% + calc(1px / 2)) 0, calc(50% + calc(1px / 2)) calc(50% - calc(1px / 2)), 100% calc(50% - calc(1px / 2)), 100% calc(50% + calc(1px / 2)), calc(50% + calc(1px / 2)) calc(50% + calc(1px / 2)), calc(50% + calc(1px / 2)) 100%, calc(50% - calc(1px / 2)) 100%, calc(50% - calc(1px / 2)) calc(50% + calc(1px / 2)), 0 calc(50% + calc(1px / 2)));
}

.faq
{
    padding: 100px 0;

    background: url(/wp-content/themes/yuzawa/common/img/common-bg.webp);
}
@media screen and (max-width: 1024px)
{
    .faq
    {
        padding: 50px 0;
    }
}
.faq__inner
{
    width: 90%;
    max-width: 900px;

    margin-inline: auto;
}
.faq__ttl
{
    margin-bottom: 40px;
}
@media screen and (max-width: 1024px)
{
    .faq__ttl
    {
        margin-bottom: 30px;
    }
}
.faq__accordion details
{
    padding-bottom: 40px;

    border-bottom: 1px solid #a2a2a2;
}
@media screen and (max-width: 1024px)
{
    .faq__accordion details
    {
        padding-bottom: 20px;
    }
}
.faq__accordion details:not(:first-child)
{
    padding-top: 40px;
}
@media screen and (max-width: 1024px)
{
    .faq__accordion details:not(:first-child)
    {
        padding-top: 20px;
    }
}
.faq__details
{
    --icon_deg: 0deg;
    --clip: polygon(
    0 calc(50% - calc(2px / 2)),
    calc(50% - calc(2px / 2)) calc(50% - calc(2px / 2)),
    calc(50% - calc(2px / 2)) 0,
    calc(50% + calc(2px / 2)) 0,
    calc(50% + calc(2px / 2)) calc(50% - calc(2px / 2)),
    100% calc(50% - calc(2px / 2)),
    100% calc(50% + calc(2px / 2)),
    calc(50% + calc(2px / 2)) calc(50% + calc(2px / 2)),
    calc(50% + calc(2px / 2)) 100%,
    calc(50% - calc(2px / 2)) 100%,
    calc(50% - calc(2px / 2)) calc(50% + calc(2px / 2)),
    0 calc(50% + calc(2px / 2))
    );
}
.faq__details[open]:not([data-accordion-before-close])
{
    --icon_deg: 90deg;
    --clip: polygon(
    calc(50% - calc(2px / 2)) calc(50% - calc(2px / 2)),
    calc(50% - calc(2px / 2)) calc(50% - calc(2px / 2)),
    calc(50% - calc(2px / 2)) 0,
    calc(50% + calc(2px / 2)) 0,
    calc(50% + calc(2px / 2)) calc(50% - calc(2px / 2)),
    calc(50% + calc(2px / 2)) calc(50% - calc(2px / 2)),
    calc(50% + calc(2px / 2)) calc(50% + calc(2px / 2)),
    calc(50% + calc(2px / 2)) calc(50% + calc(2px / 2)),
    calc(50% + calc(2px / 2)) 100%,
    calc(50% - calc(2px / 2)) 100%,
    calc(50% - calc(2px / 2)) calc(50% + calc(2px / 2)),
    calc(50% - calc(2px / 2)) calc(50% + calc(2px / 2))
    );
}
.faq__summary
{
    font-size: 18px;
    font-weight: 500;
    line-height: 1.7777777778;

    position: relative;

    padding: 0 50px 0 50px;

    list-style: none;

    cursor: pointer;
    letter-spacing: .05em;

    color: var(--c_bl);
}
@media screen and (max-width: 1024px)
{
    .faq__summary
    {
        font-size: 15px;

        padding-inline: 25px 30px;
    }
}
.faq__summary::-webkit-details-marker
{
    display: none;
}
.faq__summary:before
{
    position: absolute;
    top: .24em;
    left: 0;

    display: block;

    width: 21px;

    content: '';

    background: url(/wp-content/themes/yuzawa/business/img/icon_q.svg) top/contain no-repeat;

    aspect-ratio: 22/24;
}
@media screen and (max-width: 1024px)
{
    .faq__summary:before
    {
        top: .4em;

        width: 15px;
    }
}
.faq__summary:after
{
    position: absolute;
    top: 50%;
    right: 0;

    display: block;

    width: 30px;

    content: '';
    transition: clip-path .3s, rotate .3s;

    background: var(--c_bl);

    aspect-ratio: 1;
    translate: 0 -50%;
    clip-path: var(--clip);
    rotate: var(--icon_deg);
}
@media screen and (max-width: 1024px)
{
    .faq__summary:after
    {
        width: 20px;
    }
}
.faq__content
{
    overflow: hidden;

    height: 0;
}
.faq__content-wrap
{
    position: relative;

    padding: 25px 50px 0;
}
@media screen and (max-width: 1024px)
{
    .faq__content-wrap
    {
        padding: 15px 30px 0 25px;
    }
}
.faq__content-wrap:before
{
    position: absolute;
    top: 30px;
    left: 0;

    display: block;

    width: 21px;

    content: '';

    background: url(/wp-content/themes/yuzawa/business/img/icon_a.svg) center/cover;

    aspect-ratio: 1;
}
@media screen and (max-width: 1024px)
{
    .faq__content-wrap:before
    {
        top: 22px;

        width: 15px;
    }
}
.faq__content-text
{
    font-size: 16px;
    line-height: 1.875;

    letter-spacing: .05em;
}
@media screen and (max-width: 1024px)
{
    .faq__content-text
    {
        font-size: 14px;
    }
}
.faq__content-data
{
    display: grid;

    margin-top: 20px;
    padding: 30px;

    background: var(--white);

    grid-template-columns: 130px 1fr;
}
.faq__content-label,
.faq__content-value
{
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7142857143;

    padding-bottom: 10px;

    letter-spacing: .04em;

    border-bottom: 1px solid #d0d0d0;
}
.faq__content-label:not(:last-of-type),
.faq__content-value:not(:last-of-type)
{
    margin-bottom: 10px;
}

.cta
{
    padding: 140px 0 120px;

    background: url(/wp-content/themes/yuzawa/business/img/contact_bg_left.webp) left bottom/min(21.5%, 323px) no-repeat, url(/wp-content/themes/yuzawa/business/img/contact_bg_right.webp) right 20px top 40px/min(18%, 270px) no-repeat;
}
@media screen and (max-width: 1024px)
{
    .cta
    {
        padding: 60px 0 50px;
    }
}
.cta__inner
{
    width: 90%;

    text-align: center;

    margin-inline: auto;
}
.cta__text
{
    font-size: 18px;
    font-weight: 500;
    line-height: 1.8888888889;

    letter-spacing: .03em;
}
@media screen and (max-width: 1024px)
{
    .cta__text
    {
        font-size: 16px;
    }
}
.cta__lead
{
    font-size: 30px;
    font-weight: 500;
    line-height: 1.6;

    margin-top: 20px;

    letter-spacing: .03em;

    color: var(--c_bl);
}
@media screen and (max-width: 1024px)
{
    .cta__lead
    {
        font-size: 25px;
    }
}
.cta__btn
{
    display: flex;

    margin-top: 60px;

    justify-content: center;
}
@media screen and (max-width: 1024px)
{
    .cta__btn
    {
        margin-top: 30px;
    }
}

.bg-bl
{
    position: relative;

    overflow: hidden;

    margin-top: calc(-1 * var(--wave-h));
    padding: calc(var(--wave-h) + 80px) 0 120px;

    background: none;

    --width: 1500;
    --height: 159;
    --aspect-ratio: calc(var(--width) / var(--height));
    --wave-h: calc(100vw / var(--aspect-ratio));
    --overlap: 2px;
}
@media screen and (max-width: 1024px)
{
    .bg-bl
    {
        padding: calc(var(--wave-h) + 40px) 0 60px;
    }
}
.bg-bl:has(.products)
{
    padding-top: calc(var(--wave-h) + 10px);
}
.bg-bl::before
{
    position: absolute;
    z-index: 0;

    content: '';
    pointer-events: none;

    background: url(/wp-content/themes/yuzawa/common/img/bg-bl.webp) top/cover no-repeat;

    inset: 0;
    -webkit-mask-image: url(/wp-content/themes/yuzawa/common/img/wave.png), linear-gradient(#000 0 0);
            mask-image: url(/wp-content/themes/yuzawa/common/img/wave.png), linear-gradient(#000 0 0);
    -webkit-mask-repeat: no-repeat, no-repeat;
            mask-repeat: no-repeat, no-repeat;
    -webkit-mask-size: 100% auto, 100% 100%;
            mask-size: 100% auto, 100% 100%;
    -webkit-mask-position: center top, 0 calc(var(--wave-h) - var(--overlap));
            mask-position: center top, 0 calc(var(--wave-h) - var(--overlap));
    -webkit-mask-size: 100% auto, 100% calc(100% - var(--wave-h) + var(--overlap));
            mask-size: 100% auto, 100% calc(100% - var(--wave-h) + var(--overlap));
            mask-composite: add;
    -webkit-mask-composite: source-over;
}
.bg-bl > *
{
    position: relative;
    z-index: 1;
}
/*# sourceMappingURL=style.css.map */