@charset "utf-8";
/* =========================================================================================
Layout
=========================================================================================*/
h2.wp-block-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-align: center;
    gap: 0.5em;
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 468px) {
}

.sec_intro {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:end;

    &::before {
        content:"";
        position:absolute;
        display:block;
        background:no-repeat center / contain;
    }
    & dt {
        flex-shrink:0;
        padding-right:1.5em;
        color:var(--color-main);
        font-size:clamp(1.063rem, calc(0.315rem + 2.557vw), 1.625rem);/* vp:468-820px 17-26px */
        font-weight:var(--weight-black);
        text-align:center;
        line-height:48px;
    }
    & dt strong {
        display:block;
        font-size:clamp(1.875rem, calc(1.21rem + 2.273vw), 2.375rem);/* vp:468-820px 30-38px */
    }
    & dd {
        padding-left:2.5em;
        font-size:clamp(1rem, calc(0.751rem + 0.852vw), 1.188rem);/* vp:468-820px 16-19px */
        font-weight:var(--weight-bold);
        border-left:var(--border-bold);
    }
}
.vendor .sec_intro::before {
    inset:auto auto 4em 0;
    width:min(198px, 27.9898vw);/* vp:393px 110px */
    aspect-ratio:198/180;
    background-image:url(../images/common/icon_vendor.svg);
}
.supporter .sec_intro::before {
    inset:auto auto 5.875em 0;
    width:min(203px, 30.5343vw);/* vp:393px 120px */
    aspect-ratio:203/169;
    background-image:url(../images/common/icon_supporter.svg);
}
@media only screen and (max-width:1500px){
    :is(.vendor, .supporter) .sec_intro::before { inset-block:auto 100%;}
}
@media only screen and (max-width:1200px){
    .sec_intro {
        display:grid;
        grid-template:
            "img dt" auto
            "dd dd" 1fr / auto 1fr;
        gap:clamp(0.5rem, calc(-0.165rem + 2.273vw), 1rem);/* vp:468-820px 8-16px */
        width:fit-content;
        margin-inline:auto;

        &::before { grid-area:img;}
        & dt { grid-area:dt;}
        & dd { grid-area:dd;}

        &::before { position:static; width:max(120px, 16.9166vw);}
        & dt { padding:0;}
        & dd { padding:1em 0 0; border-top:var(--border-bold); border-left:none;}
    }
}
@media only screen and (max-width:468px){
    .sec_intro {

        & dt { line-height:1.3;}
    }
}



/* =========================================================================================
MAIN VISUAL
=========================================================================================*/
/*
*   .mv_title_{1~18}：左上にある見出しの各文字。①
*   .mv_catch p：左下にある2行テキスト。②
*/
.main-visual {
    /* min関数はすべて、100vw:1500px の状態をもとに算出しています */
    --mv-title-delay:0.05s;/* 各文字の遅延時間 */
    --mv-catch-base-delay:1.25s;/* 発火までの遅延時間 */
    --mv-catch-add-delay:0.25s;/* 追加の遅延時間 */
    --mv-img-base-delay:calc(var(--mv-catch-base-delay) + 0.5s);/* 発火までの遅延時間 */
    --mv-img-add-delay:0.1s;/* 追加の遅延時間 */

    position: relative;
    height:min(880px, 61.1111vw);
    border-top:none;

    & .inner-large { width:100%; height:100%;}
    & .mv_abs { position:absolute;}
    & .mv_title { top:min(120px, 8vw); left:min(66px, 4.4vw); z-index:2;}
    & .mv_title_wrap {
        --img-baseSize:min(74.5px, 4.9666vw);/* 各文字画像の基準となるサイズ。一番大きいサイズを基準として計算 */
        
        display:flex;
        align-items:end;

        & img {
            clip-path:polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
            translate:0% 100%;
            transition:0.5s;
        }
        & img + img { margin-left:-0.2em;}
        & .mv_title_1  { transition-delay:calc(var(--mv-title-delay) * 1);  width:calc(var(--img-baseSize) * 0.9664);}
        & .mv_title_2  { transition-delay:calc(var(--mv-title-delay) * 2);  width:calc(var(--img-baseSize) * 0.9463);}
        & .mv_title_3  { transition-delay:calc(var(--mv-title-delay) * 3);  width:calc(var(--img-baseSize) * 0.9395);}
        & .mv_title_4  { transition-delay:calc(var(--mv-title-delay) * 4);  width:calc(var(--img-baseSize) * 1);}
        & .mv_title_5  { transition-delay:calc(var(--mv-title-delay) * 5);  width:calc(var(--img-baseSize) * 1);}
        & .mv_title_6  { transition-delay:calc(var(--mv-title-delay) * 6);  width:calc(var(--img-baseSize) * 0.9463);}
        & .mv_title_7  { transition-delay:calc(var(--mv-title-delay) * 7);  width:calc(var(--img-baseSize) * 0.8859);}
        & .mv_title_8  { transition-delay:calc(var(--mv-title-delay) * 8);  width:calc(var(--img-baseSize) * 0.9597);}
        & .mv_title_9  { transition-delay:calc(var(--mv-title-delay) * 9);  width:calc(var(--img-baseSize) * 0.9328);}
        & .mv_title_10 { transition-delay:calc(var(--mv-title-delay) * 10); width:calc(var(--img-baseSize) * 0.953);}
        & .mv_title_11 { transition-delay:calc(var(--mv-title-delay) * 11); width:calc(var(--img-baseSize) * 0.9865);}
        & .mv_title_12 { transition-delay:calc(var(--mv-title-delay) * 12); width:calc(var(--img-baseSize) * 0.9127);}
        & .mv_title_13 { transition-delay:calc(var(--mv-title-delay) * 13); width:calc(var(--img-baseSize) * 0.8859);}
        & .mv_title_14 { transition-delay:calc(var(--mv-title-delay) * 14); width:calc(var(--img-baseSize) * 0.7583);}
        & .mv_title_15 { transition-delay:calc(var(--mv-title-delay) * 15); width:calc(var(--img-baseSize) * 0.8993);}
        & .mv_title_16 { transition-delay:calc(var(--mv-title-delay) * 16); width:calc(var(--img-baseSize) * 0.9127);}
        & .mv_title_17 { transition-delay:calc(var(--mv-title-delay) * 17); width:calc(var(--img-baseSize) * 0.9194);}
        & .mv_title_18 { transition-delay:calc(var(--mv-title-delay) * 18); width:calc(var(--img-baseSize) * 0.9731);}
    }

    & .mv_1 { width:min(999px, 66.6vw);     top:min(110px, 7.3333vw);   right:-15px;}
    & .mv_2 { width:min(499px, 33.2666vw);  bottom:min(86px, 5.7333vw); left:min(39px, 2.6vw);}
    & .mv_3 { width:min(148px, 10.2777vw);  top:min(604px, 40.2666vw);  left:min(584px, 38.9333vw);}
    & .mv_4 { width:min(86px, 5.7333vw);    top:min(583px, 38.8666vw);  right:min(248px, 16.5333vw);}
    & .mv_5 { width:min(139px, 9.2666vw);   top:min(633px, 42.2vw);     right:min(364.5px, 24.3vw);}
    & :is(.mv_1, .mv_2, .mv_3, .mv_4, .mv_5) {
        /* translate:0% -5rem; */
        transform:translateY(-5em);
        opacity:0;
        transition:1.0s;
    }
    & .mv_1 { transition-delay:calc(var(--mv-img-base-delay) + var(--mv-img-add-delay) * 0);}
    & .mv_2 { transition-delay:calc(var(--mv-img-base-delay) + var(--mv-img-add-delay) * 1);}
    & .mv_3 { transition-delay:calc(var(--mv-img-base-delay) + var(--mv-img-add-delay) * 2);}
    & .mv_4 { transition-delay:calc(var(--mv-img-base-delay) + var(--mv-img-add-delay) * 3);}
    & .mv_5 { transition-delay:calc(var(--mv-img-base-delay) + var(--mv-img-add-delay) * 4);}

    & .mv_catch {
        top:min(422px, 29.3055vw);
        left:min(120px, 8.3333vw);
        z-index:1;

        & p {
            width:fit-content;
            padding:0.1em 0.75em;
            color:var(--color-main);
            font-size:clamp(1.5rem, calc(1.047rem + 1.55vw), 2.5rem);/* vp:468-1200px 24-40px */
            font-weight:bold;
            font-feature-settings:"palt";
            background-color:#fff;
            border:solid 1px currentColor;

            clip-path:polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
            translate:0% 100%;
            transition:0.5s;
            transition-delay:var(--mv-catch-base-delay);
        }
        & p + p {
            transition-delay:calc(var(--mv-catch-base-delay) + var(--mv-catch-add-delay));
        }
    }
    & .mv_catch p:nth-of-type(2) {
        margin-top:0.4em;
        margin-left:0.4em;
    }
    & .wp-block-buttons {
        position:absolute;
        inset:100% auto auto 50%;
        translate:-50% -50%;
        white-space:nowrap;
        z-index:1;
    }

    /* transition:after */
    &.active {
        & .mv_title_wrap img {
            clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
            translate:0% 0%;
        }
        & .mv_catch p {
            clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
            translate:0% 0%;
        }
        & :is(.mv_1, .mv_2, .mv_3, .mv_4, .mv_5) {
            opacity:1;
            /* translate:0% 0%; */
            transform:translateY(0%);
        }
    }
}
@media only screen and (max-width: 820px) {
    .main-visual {
        height:auto;
        aspect-ratio:820/670;

        & .mv_title { top:min(50px, 6.0975vw); left:min(60px, 7.3170vw);}
        & .mv_title_wrap {
            --img-baseSize:min(62.0px, 7.5609vw);/* vp:820px 62px */

            & img + img { margin-left:-0.15em;}
        }
        & .mv_1 { width:min(550px, 67.0731vw);  top:min(223px, 27.1951vw); right:min(20px, 2.4390vw);}
        & .mv_2 { width:min(275px, 33.5365vw);  top:min(426px, 51.9512vw); left:min(20px, 2.4390vw);}
        & .mv_3 { width:min(82px, 10vw);        top:min(496px, 60.4878vw); left:min(320px, 39.0243vw);}
        & .mv_4 { width:min(48px, 5.8536vw);    top:min(484px, 59.0243vw); right:min(165px, 20.1219vw);}
        & .mv_5 { width:min(77px, 9.3902vw);    top:min(511px, 62.3170vw); right:min(229px, 27.9268vw);}
        & .mv_catch { top:min(330px, 40.2439vw); left:min(95px, 11.5853vw);}
        & .mv_catch p { padding-inline:0.5em; line-height:1.4;}
    }
}
@media only screen and (max-width: 468px) {
    & .main-visual {
        aspect-ratio:393/607;

        & .mv_title { top:8.9058vw; left:5.0890vw;}
        & .mv_title_wrap {
            --img-baseSize:min(46.5px, 9.9358vw);/* vp:468px, 46.5px */
        }
        & .mv_1 { width:93.6386vw;  top:54.4529vw;  right:3.0534vw;}
        & .mv_2 { width:46.5648vw;  top:108.9058vw; left:3.0534vw;}
        & .mv_3 { width:13.7404vw;  top:100.7633vw; left:15.26781vw;}
        & .mv_4 { width:7.8880vw;   top:98.4732vw;  right:27.7353vw;}
        & .mv_5 { width:12.9770vw;  top:103.3078vw; right:38.6768vw;}
        & .mv_catch { top:107.8880vw; inset-inline:auto 7.8880vw;}
    }
}



/* =========================================================================================
Vendor：ITベンダー一覧
=========================================================================================*/
.vendor {
    
    & .heading-box img { width:min(682px, 76.5853vw);}
}
.vendorForm {
    margin-block:3.5em;

    & .vendorForm_wrap > div {
        border-radius:0 0 var(--radius-main) var(--radius-main);
        border-top:none;
    }
}
@media only screen and (max-width:468px){
    .vendor {

        & .heading-box img { width:89.9491vw;/* vp:393px 353.5px */}
    }
}



/* =========================================================================================
caseStudies：デジタル化事例
=========================================================================================*/
.caseStudies {
    --border-size:1em;

    & .post-list ul {
        display:flex;
        gap:0px;
        margin:0px;
    }

    & .caseStudies_wrap {
        display:grid;
        grid-template:
            "lt lt lt" var(--border-size)
            "ll h3 lr" auto
            "ll swiper lr" auto
            "ll nav lr" auto
            "ll btn lr" auto
            "lb lb lb" var(--border-size) / var(--border-size) auto var(--border-size);

        position:relative;
        overflow:hidden;
        background-color:#fff;
        border-radius:var(--radius-main);
    }
    & .csPost_heading {
        grid-area:h3;
        width:min(456px, 55.6097vw);
        margin-top:clamp(3rem, calc(1.587rem + 4.83vw), 4.063rem);/* vp:468-820px 48-65px */
        margin-inline:auto;
    }

    /* swiper */
    & .swiper {
        grid-area:swiper;
        margin-top:40px;
        padding-inline:min(60px, 5vw);
    }
    & .swiper-wrapper {
        align-items:stretch;

        &:has(.swiper-slide:only-child) { justify-content:center;}
    }
    & .swiper-slide {
        width:min(350px, 80vw);
        height:auto;

        &:only-child { margin-inline:0!important;}
    }
    & .swiper_navs {
        grid-area:nav;
        display:grid;
        grid-template-columns:auto 1fr auto;
        align-items:center;
        gap:2em;
        margin-top:20px;
        padding-inline:60px;
    }
    & :is(.swiper-scrollbar, .swiper-button-prev, .swiper-button-next) {
        position:static!important;
    }
    & .swiper-scrollbar {
        background-color:color-mix(in sRGB, #fff, var(--color-gray));
    }
    & .swiper-scrollbar-drag {
        background-color:var(--color-main);
    }
    & :is(.swiper-button-prev, .swiper-button-next) {
        margin-top:0px;

        &::after {
            font-size:1.5em;
            font-weight:var(--weight-black);
        }   
    }

    & .wp-block-buttons {
        grid-area:btn;
        margin-block:32px clamp(3rem, calc(2.003rem + 3.409vw), 3.75rem);/* vp:468-820px 48-60px */
    }

    /* csPost_border */
    & :is(.csPost_border_top, .csPost_border_bottom) {
        width:100%;
        height:var(--border-size);
        background:url(../images/home/csPost_border_block.webp) repeat-x center left / auto 100%;
    }
    & :is(.csPost_border_left, .csPost_border_right) {
        width:var(--border-size);
        height:100%;
        background:url(../images/home/csPost_border_inline.webp) repeat-y top center / 100% auto;
    }
    & .csPost_border_top { grid-area:lt}
    & .csPost_border_left { grid-area:ll;}
    & .csPost_border_right { grid-area:lr;}
    & .csPost_border_bottom { grid-area:lb;}
}
@media only screen and (max-width:820px){
    .caseStudies {

        & .swiper-wrapper:has(.swiper-slide:only-child) { justify-content:unset;}
    }
}
@media only screen and (max-width:468px){
    .caseStudies {
        & .caseStudies_wrap { margin-inline:calc((100% - 100vw) / 2);}
        & .csPost_heading { width:74.6692vw;/* vp:393px, 293.45px */}
        & .swiper_navs { display:none;}
        & :is(.csPost_border_top, .csPost_border_bottom) { width:100%;}
    }
}


/* =========================================================================================
flow：サービス活用の流れ
=========================================================================================*/
.flow {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1.5em;
    padding-block:37px 28px;
    border:solid 2px var(--color-main);
    border-radius:calc(var(--radius-main) * 2);
    background:var(--bg-gridLine), #fff;
    overflow:hidden;
    z-index:0;

    & hgroup img { width:min(675px, 55.6670vw);}
    & p {
        font-size:clamp(2rem, calc(0.837rem + 3.977vw), 2.875rem);/* vp:468-820px 32-46px */
        font-weight:var(--weight-black);
        text-align:center;
        line-height:1.2;
    }
    & .wp-block-button a { font-size:clamp(1.125rem, calc(0.876rem + 0.852vw), 1.313rem);/* vp:468-820px 18-21px */}

    & .abs { position:absolute; width:260px;}
    & .abs_tl { inset:0 auto auto 0; z-index:-1;}
    & .abs_tr { inset:0 0 auto auto; z-index:-1;}
    & .abs_bl { inset:auto auto 0 0; z-index:-2;}
    & .abs_br { inset:auto 0 0 auto; z-index:-2;}
}
@media only screen and (max-width:820px){
    .flow {
        justify-content:center;
        width:100%;
        padding:2em 1em 4.5em;

        & p { margin-top:0.5em;}
    }
}
@media only screen and (max-width:468px){
    .flow {
        & hgroup img { width:74.6692vw;/* vp:393px, 235.48px */}
        & .abs { width:160px;}
    }
}


/* =========================================================================================
supporter：デジタル化を支援したいITベンダーの方へ
=========================================================================================*/
.supporter {

    & .heading-box img { width:min(619px, 75.4878vw);}

    & .wp-block-buttons {
        flex-wrap:wrap;
        justify-content:center;
        gap:clamp(2.5rem, calc(0.007rem + 8.523vw), 4.375rem);/* vp:468-820px 40-70px */
        margin-top:clamp(2.875rem, calc(-0.283rem + 10.795vw), 5.25rem);/* vp:468-820px 46-84px */
    }
    & :is(.merit, .faq) a {
        position:relative;
        width:min(500px, 75vw);
        padding-block:1em;
        border-radius:var(--radius-main);

        &::before {
            content:"";
            position:absolute;
            display:block;
            height:1.9em;
            background:no-repeat center / contain;
            rotate:-11deg;
            inset:-0.9em auto auto 1em;
        }
    }
    & .merit a::before { aspect-ratio:196/50; background-image:url(../images/home/merit.webp);}
    & .faq a::before { aspect-ratio:120/50; background-image:url(../images/home/faq.webp);}
    & .regist a {
        flex-direction:column;
        align-items:center;
        padding-inline:2em 4em;
        background-color:var(--color-pink);
        border-color:var(--color-pink);
        font-size:clamp(0.938rem, calc(0.356rem + 1.989vw), 1.375rem);/* vp:468-820px 15-22px */

        & strong { font-size:1.5em;}
        &::after { width:1.75em; mask-image:url(../images/common/arrow_mask.svg);}

        &:is(:focus-visible, :active) { background-color:#fff; color:var(--color-pink);}
        @media(hover:hover) {
            &:hover { background-color:#fff; color:var(--color-pink);}
        }
    }
}
@media only screen and (max-width:468px){
    .supporter {

        & .heading-box img { width:89.9491vw;/* vp:393px 353.5px */}
        & .regist { width:100%;}
        & .regist a { line-height:1.2; gap:0.5em;}
    }
}



/* =========================================================================================
documents：各種書類ダウンロード
=========================================================================================*/
.documents {

    & .heading-box img { width:min(689px, 84.0243vw);}
}
@media only screen and (max-width:468px){
    .documents {

        & .heading-box img { width:60.8142vw;/* vp:393px 239px */}
    }
}