:root {
    --shadow-card: 0 0 12px 0 rgba(168, 168, 168, 0.25);
    --size-xsmall: 12px;
    --size-small: 14px;
    --size-normal: 16px;
    --lh-large: 1.7;
    --lh-medium: 1.6;
    --lh-normal: 1.5;
    --radius-xxsmall: 2px;
    --radius-xsmall: 4px;
    --radius-small: 6px;
    --radius-normal: 8px;
    --color-contents-bg : #F7FAFF;
    --color-white: #ffffff;
    --color-gray-100: #F1F5F9;
    --color-gray-300: #CBD5E1;
    --color-gray-400: #94A3B8;
    --color-gray-500: #64758B;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1E293B;
    --color-red-50: #FFE6E7;
    --color-red-600: #AD0008;
    --color-brand-400: #1A75FF;
    --color-brand-500: #004AA6;
    --color-brand-600: #003B85;
    --fw-bold: 700;
    --fw-semibold: 600;
    --fw-normal: 400;
    --grad-common-top: linear-gradient(180deg, #FFFFFF 0%, #E8FBFE 100%);
    --grad-common-bottom: linear-gradient(180deg, #E8FBFE 0%, #FFFFFF 100%);
    --shadow-primary: 0px 0px 24px 0px rgba(161, 191, 220, 0.8);
    --shadow-secondary: 0px 0px 24px 0px rgba(161, 191, 220, 0.32);
    --transition-common: all 0.3s ease;
}

/* setting */
.main-content.index {
    p {
        color: var(--color-gray-700);
        margin-bottom: 0;
    }
    figure {
        margin: 0;
    }
    .cta-text{
        color: #ffffff;
        margin-bottom: 32px;
    }
    @media screen and (min-width: 769px) {
      .cta-text{
        margin-bottom: 40px;
    }  
    }
}

/* heading */
.area-title {
    font-weight: var(--fw-bold);
    line-height: var(--lh-normal);
    /** heading2 **/
    &.area-title-H2 {
        font-size: 24px;
        line-height: var(--lh-large);
        @media (min-width: 1024px) {
            font-size: 48px;
            line-height: var(--lh-normal);
        }
    }
    /** heading3 **/
    &.area-title-H3 {
        font-size: 20px;
        line-height: var(--lh-medium);
        @media (min-width: 1024px) {
            font-size: 24px;
            line-height: var(--lh-normal);
        }
    }
    @media (min-width: 1024px) {
        &.area-title-large {
            font-size: 32px;
        }
    }
}

/* link  */
.link-text {
    text-align: left;
    font-size: var(--size-normal);
    line-height: var(--lh-normal);
    color: var(--color-gray-800);
    position: relative;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    &::after {
        content: '';
        display: inline-block;
        width: 24px;
        height: 24px;
        mask-image: url(/wp-content/themes/itwith/images/top/icon_text_arrow.svg);
        mask-position: center top;
        mask-repeat: no-repeat;
        mask-size: contain;
        background-color: var(--color-gray-400);
        transition: all 0.3s, background-color 0.3s;
    }
    &:hover {
        color: var(--color-brand-600);
        &::after {
            background-color: var(--color-brand-600);
        }
    }
}

/* grid */
.grid-group {
    display: grid;
    gap: 24px;
    &.group-gap40 {
        gap: 40px;
    }
    .icon-support{
        flex-direction: column;
        @media (min-width: 1024px) {
            flex-direction: row;
        }
    }
}

.button {
    &.button--tertiary {
        min-height: 48px;
        padding: 12px;
        border-color: var(--color-gray-300);
        color: var(--color-gray-800);
        font-weight: 400;
        @media (min-width: 1024px) {
            margin-inline: auto;
            padding-inline: 24px;
            width: fit-content;
        }
    }
}

/* utility */
.line-height1 {
    line-height: 1 !important;
}
.parts-title {
    color: var(--color-gray-800);
}

/* main-visual */
.main-visual {
    padding: 150px calc(24 / 375 * 100vw) 0;
    position: relative;
    @media (min-width: 769px) {
        padding: 84px 24px 0;
    }
    .main-title,
    p.main-lead {
        color: var(--color-gray-800);
        text-align: center;
        line-height: var(--lh-large);
    }
    .main-title {
        font-size: 26px;
        font-weight: var(--fw-bold);
        letter-spacing: .02em;
        white-space: nowrap;
        @media (min-width: 1024px) {
            font-size: 48px;
            white-space: wrap;
        }
    }
    .main-lead {
        font-size: 14px;
        font-weight: var(--fw-semibold);
        max-width: 100%;
        letter-spacing: .05em;
        @media (min-width: 1024px) {
            font-size: 28px;
        }
    }
    .main-link {
        width: 100%;
        max-width: 240px;
        margin-inline: auto;
        display: grid;
        align-items: flex-start;
        gap: 27px;
        position: relative;
        z-index: 3;
        @media (min-width: 1024px) {
            grid-template-columns: repeat(2, 1fr);
            gap: 27px;
            margin-top: 10px;
            max-width: 507px;
        }
        .main-link-item {
            .button {
                font-size: 16px;
                width: 100%;
                min-height: 54px;
                display: inline-flex;
                justify-content: center;
                align-items: center;
                transition: var(--transition-common);
                &.button--primary {
                    box-shadow: var(--shadow-primary);
                }
                &.button--secondary {
                    box-shadow: var(--shadow-secondary);
                }
                &:hover {
                    box-shadow: none;
                    color: #ffffff;
                    background-color: var(--color-brand-600);
                    &.button--secondary {
                        background-color: #F5F9FF;
                        color: var(--color-brand-500);
                    }
                }
            }
            &:last-child{
                display: none;
                @media (min-width: 1024px) {
                    display: block;
                }
            }
        }
    }
    .main-context {
        display: grid;
        gap: calc(80 / 375 * 100vw);
        justify-content: center;
        @media (min-width: 1024px) {
            gap: 54px;
        }
    }
#c{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;}
      .inner{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:96px 24px 64px;}
      h1{margin:0 0 14px;text-align:left;font-size:clamp(36px,4vw,56px);line-height:1.15;color:#0b1b2e;}
      p{margin:0;max-width:760px;text-align:left;font-size:clamp(16px,1.5vw,20px);line-height:1.7;color:rgba(11,27,46,.72);}
      @media (prefers-reduced-motion: reduce){ #c{display:none;} }
}
.logo-slider {
    width: 100%;
    overflow: hidden; /* はみ出た部分を隠す */
    background: #fff;
    padding-top: 47px;
    position: relative;
    @media (min-width: 1024px) {
        padding-top: 38px;
    }
    .logo-track {
        display: flex;
        align-items: center;
        gap: 40px;
        width: max-content; /* 中身のサイズに合わせる */
        animation: scroll 40s linear infinite; /* 30秒で1周、等速、無限 */
        will-change: transform;
    }
    .logo-track img {
        height: auto; /* 画像の高さはお好みで */
        width: auto;
        flex-shrink: 1;
        object-fit: contain;
        backface-visibility: hidden;
        transform: translateZ(0);
    }
    &:hover .logo-track {
        animation-play-state: paused; /* ホバーでアニメーションを停止 */
    }
    &::before,
    &::after {
        content: "";
        position: absolute;
        top: 0;
        width: 150px;
        height: 100%;
        z-index: 2;
        pointer-events: none;
    }
    &::before {
        left: 0;
        background: linear-gradient(to right, #fff, transparent);
    }
    &::after {
        right: 0;
        background: linear-gradient(to left, #fff, transparent);
    }
}
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-25%);/* 全体の半分（画像1枚分）動いたらリセット */
    }
}
/* ai-chat-bot */
.ai-chat-bot {
    position: fixed;
    z-index: 100;
    bottom: 40px;
    right: calc(56 / 750 * 100vw);
    @media (min-width: 1024px) {
        top: 449px;
        right: 56px;
    }
    button {
        appearance: none;
        border: none;
        background-color: transparent;
    }
}
/* area */
.area-wrapper {
    position: relative;
    &:has(.area.about),
    &:has(.area.specialize),
    &:has(.area.function) {
        &::after {
            width: 100%;
            content: '';
            display: block;
            position: absolute;
            background-color: transparent;
            background-position: 0 center;
            background-repeat: no-repeat;
            background-size: cover;
            z-index: 2;
            aspect-ratio: 375 / 241;
            pointer-events: none;
            @media (min-width: 1024px) {
                aspect-ratio: 1280 / 424;
            }
        }
    }
    &:has(.area.about),
    &:has(.area.specialize) {
        &::after {
            background-image: url(/wp-content/themes/itwith/images/top/bg_wave_gr_sp.svg);
            @media (min-width: 1024px) {
                background-image: url(/wp-content/themes/itwith/images/top/bg_wave_gr_pc.png);
            }
        }
    }
    &:has(.area.function) {
        &::before {
            content: '';
            width: 100%;
            height: 375px;
            display: block;
            background: var(--grad-common-bottom);
            position: absolute;
            top: 0;
            left: 0;
            @media (min-width: 1024px) {
                height: 1280px;
            }
        }
        &::after {
            background-image: url(/wp-content/themes/itwith/images/top/bg_wave_bl_sp.svg);
            @media (min-width: 1024px) {
                background-image: url(/wp-content/themes/itwith/images/top/bg_wave_bl_pc.png);
            }
        }
    }
    &:has(.area.about) {
        &::after {
            bottom: calc(-57 / 375 * 100vw);
            @media (min-width: 1024px) {
                bottom: -109px;
            }
        }
    }
    &:has(.area.specialize) {
        &::after {
            bottom: calc(-65 / 375 * 100vw);
            @media (min-width: 1024px) {
                bottom: -215px;
            }
        }
    }
    &:has(.area.function) {
        &::after {
            bottom: calc(-60 / 375 * 100vw);
            @media (min-width: 1024px) {
                bottom: -118px;
            }
        }
    }
}
.area {
    position: relative;
    .area-inner * {
        position: relative;
        z-index: 3;
    }
    .area-context {
        display: grid;
        justify-content: center;
        gap: 40px;
        text-align: center;
    }
    .area-lead {
        font-size: 14px;
        font-weight: var(--fw-normal);
        line-height: var(--lh-large);
        @media (min-width: 1024px) {
            font-size: 20px;
            line-height: var(--lh-medium);
        }
    }
    .area-contents-colmun {
        display: grid;
        width: 100%;
        max-width: 1280px;
        margin-inline: auto;
        &.area-contents-colmun2 {
            margin-top: 40px;
            gap: 32px;
            @media (min-width: 1024px) {
                margin-top: 80px;
                padding-inline: 27px;
                grid-template-columns: repeat(2, 1fr);
                gap: 100px;
            }
            .area-about-col {
                gap: 24px;
                @media (min-width: 1024px) {
                    gap: 32px;
                    padding: 56px 85px;
                    .area-lead {
                        font-size: var(--size-normal);
                        line-height: var(--lh-large);
                    }
                }
            }
        }
        &.area-contents-colmun3 {
            margin-top: 40px;
            gap: 32px;
            @media (min-width: 1024px) {
                margin-top: 120px;
                grid-template-columns: repeat(3, 1fr);
            }
            .area-about-col {
                gap: 24px;
                padding: 40px 26px;
                @media (min-width: 1024px) {
                    gap: 32px;
                    padding-block: 56px;
                    .area-lead {
                        font-size: var(--size-normal);
                        line-height: var(--lh-large);
                    }
                }
            }
        }
        .area-about-col {
            display: grid;
            justify-content: center;
            .area-lead {
                text-align: left;
            }
        }
    }
    .area-inner {
        mask-size: 100% 100%;
        mask-repeat: no-repeat;
        padding-inline: 24px;
        @media (min-width: 1024px) {
            max-width: 1280px;
            margin-inline: auto;
            padding-inline: 60px;
        }
    }
    .card-item {
        transition: var(--transition-common);
    }
    &.about {
        background: var(--grad-common-top);
        padding-bottom: calc(120 / 375 * 100vw);
        mask-image: url(/wp-content/themes/itwith/images/top/mask_about_sp.svg);
        mask-position: bottom center;
        mask-size: cover;
        padding-top: 80px;
        @media (min-width: 1024px) {
            padding-block: 240px 298px;
            mask-image: url(/wp-content/themes/itwith/images/top/mask_about.svg);
        }
        .about-img {
            max-width: 196px;
            margin-inline: auto;
        }
    }
    &.specialize {
        background: var(--grad-common-top);
        padding-block: 80px 115px;
        mask-image: url(/wp-content/themes/itwith/images/top/mask_about_sp.svg);
        mask-position: bottom center;
        mask-size: cover;
        @media (min-width: 1024px) {
            mask-image: none;
            padding: 160px 0 146px;
        }
        .area-inner {
            @media (min-width: 1024px) {
                padding-inline: 40px;
            }
        }
        .specialize-image {
            margin-top: 40px;
            text-align: center;
            figure {
                margin-inline: -24px;
            }
            @media (min-width: 1024px) {
                max-width: 1094px;
                margin: 0 auto;
                figure {
                    margin-inline: 0;
                }
            }
        }
        .area-contents-colmun {
            margin-top: 64px;
            .area-about-col {
                border-radius: 24px;
                background-color: #E3F7FF;
                gap: 32px;
                padding: 40px 8px;
                text-align: center;
                .area-lead {
                    text-align: center;
                }
            }
            .specialize-image {
                margin-top: 0;
                figure {
                    margin-inline: 0;
                }
                @media (min-width: 1024px) {
                    max-width: 650px;
                    image-rendering: -webkit-optimize-contrast;
                    margin-top: 32px;
                }
                
            }
            .area-title-H3{
                font-size: 24px;
            }
            @media (min-width: 1024px) {
                margin: 10px auto 0;
                max-width: 1200px;
                .area-about-col {
                    border-radius: 24px;
                    background-color: #E3F7FF;
                    padding: 80px;
                    .area-title-H3 {
                        font-size: 32px;
                    }
                    .area-lead {
                        text-align: center;
                        font-size: 20px;
                    }
                }
            }
        }
    }
    &.function {
        margin-top: calc(-50 / 375 * 100vw);
        background: linear-gradient(45deg, #ABEEFD -3.27%, #9DD8FF 34.81%, #D9F9FC 88.36%, #C5FDF1 120.49%);
        mask-image: url(/wp-content/themes/itwith/images/top/mask_function_sp.svg);
        mask-position: top center;
        mask-repeat: no-repeat;
        mask-size: 100% 100%;
        padding-block: calc(117 / 375 * 100vw) 140px;
        @media (min-width: 1024px) {
            margin-top: 0;
            mask-image: url(/wp-content/themes/itwith/images/top/mask_function.svg);
            padding-block: 240px 227px;
        }
        .function-img {
            max-width: 172px;
            margin-inline: auto;
            width: 172px;
            height: 172px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #cdeefb;
            border-radius: 50%;
        }
        .card-item {
            background-color: #DFF6FF;
            box-shadow: 0px 12px 32px 10px #98D6F5;
        }
    }
    &.overview {
        background: var(--grad-common-top);
        padding-block: 80px;
        @media (min-width: 1024px) {
            padding: 160px 40px 73px;
        }
        .area-context {
            text-align: left;
        }
        .overview-sales {
            margin-top: 64px;
            display: grid;
            gap: 64px;
            @media (min-width: 1024px) {
                margin-top: 42px;
            }
        }
        .img-overview {
            text-align: center;
            @media (min-width: 1024px) {
                max-width: 435px;
                margin: 0 auto;
            }
        }
        .area-overview-colmun {
            margin-top: 0;
            @media (min-width: 1024px) {
                margin-top: 10px;
                padding-inline: 0;
            }
            .area-title-H3 {
                color: var(--color-gray-800);
                @media (min-width: 1024px) {
                    font-size: 20px;
                }
                .icon-support {
                    display: inline-flex;
                    align-items: center;
                    gap: 16px;
                    &::before {
                        content: '';
                        display: inline-block;
                        width: 64px;
                        height: 64px;
                        background: transparent url(/wp-content/themes/itwith/images/top/icon-support.svg) 0 0 no-repeat;
                        background-size: contain;
                    }
                }
            }
            p:not([class]) {
                font-size: 20px;
                line-height: var(--lh-large);
            }
            .card-item.area-about-col {
                box-shadow: none;
                background-color: #F1F7FF;
                gap: 16px;
                padding: 26px 38px;
                @media (min-width: 1024px) {
                    padding-inline: 56px;
                }
            }
        }
        .area-support-colmun {
            @media (min-width: 1024px) {
                justify-content: stretch;
            }
            .area-about-col {
                padding: 48px 24px;
                @media (min-width: 1024px) {
                    width: 100%;
                    justify-content: inherit;
                    text-align: left;
                    padding: 48px;
                }
            }
            .area-title.area-title-H3 {
                color: var(--color-brand-500);
                font-size: 24px;
                display: grid;
                gap: 16px;
                justify-content: center;
                @media (min-width: 1024px) {
                    justify-content: flex-start;
                }
            }
        }
        .label-group {
            display: grid;
            gap: 12px;
            .label-title {
                font-size: var(--size-small);
                line-height: var(--lh-large);
                text-align: left;
                text-indent: -1em;
                padding-left: 1em;
                @media (min-width: 1024px) {
                    font-size: var(--size-normal);
                }
            }
            .label-list {
                display: grid;
                gap: 8px;
                @media (min-width: 1024px) {
                    display: flex;
                    gap: 16px;
                }
            }
            .label-box {
                font-size: var(--size-small);
                line-height: var(--lh-normal);
                display: inline-flex;
                align-items: center;
                gap: 6px;
                padding: 8px 16px;
                background-color: rgba(230, 240, 255, 0.5);
                border-radius: var(--radius-normal);
                width: 100%;
                @media (min-width: 1024px) {
                    width: fit-content;
                    font-size: var(--size-normal);
                }
                &::before {
                    content: '';
                    display: inline-block;
                    width: 24px;
                    height: 24px;
                    mask-image: url(/wp-content/themes/itwith/images/top/icon-check.svg);
                    mask-position: center;
                    mask-repeat: no-repeat;
                    mask-size: 19px 19px;
                    background-color: var(--color-brand-400);
                }
            }
        }
        .spot-service {
            gap: 24px;
            @media (min-width: 1024px) {
                margin-top: 96px;
                .area-context {
                    justify-content: flex-start;
                    gap: 42px;
                }
            }
            .area-contents-colmun {
                margin-top: 32px;
                @media (min-width: 1024px) {
                    margin-top: 40px;
                }
                .area-about-col {
                    padding: 32px;
                    display: flex;
                    justify-content: flex-start;
                    .link-text{
                        display: flex;
                        width: 100%;
                    }
                }
            }
        }
    }
    &.case-study {
        .area-inner {
            padding-block: 160px 0;
        }
        .case-info {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .case-detail {
            display: grid;
            gap: 64px;
            .area-contents-colmun {
                @media (min-width: 1024px) {
                    padding: 0;
                }
                .area-about-col {
                    gap: 21px;
                    order: 1;
                    justify-content: flex-start;
                    &:first-child {
                        order: 2;
                    }
                    .case-study-image{
                        border-radius: 8px;
                    }
                    @media (min-width: 1024px) {
                        &:first-child {
                            order: 1;
                        }
                        order: 2;
                        padding: 0;
                        max-width: 517px;
                    }
                }
                .area-title{
                    color: var(--color-gray-800) !important;
                    transition: none !important;
                    transition-delay: 0s !important;
                }
                &:hover {
                    .link-text{
                        color: var(--color-brand-600);
                        &::after {
                            background-color: var(--color-brand-600);
                        }
                    }
                    .area-title{
                        color: var(--color-gray-800) !important;
                        transition: none !important;
                        transition-delay: 0s !important;
                    }
                }
            }
        }
    }
    &.news {
        margin-block: 90px 80px;
        padding-inline: 16px;
        @media (min-width: 1024px) {
            padding-inline: 24px;
            margin-block: 160px 0;
        }
        .area-inner {
            padding-inline: 0;
            max-width: 1160px;
        }
        .news-link {
            background: rgba(230, 240, 255, 0.5);
            border-radius: 24px;
            color: var(--color-gray-800);
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 40px;
            padding: 40px 24px;
            transition: var(--transition-common);
            @media (min-width: 1024px) {
                justify-content: center;
                flex-direction: row;
                gap: 74px;
                padding: 80px;
            }
            .news-item dd{
                border-bottom: 1px solid transparent;
                transition: var(--transition-common);
                line-height: 1.5;
            }
            &:hover {
                background-color: #F3F7FF;
                .area-title-news,
                .news-item dt,
                .news-item dd {
                    text-decoration: none;
                    color: var(--color-gray-800);
                }
                .news-item dd {
                    border-color:var(--color-gray-800);
                }
            }
        }
        .area-title-news {
            font-size: 20px;
            line-height: 1;
        }
        .news-item {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
            @media (min-width: 1024px) {
                flex-direction: row;
                gap: 74px;
                align-items: center;
            }
            dt, dd {
                font-size: 16px;
            }
            dt {
                color: var(--color-gray-600);
                @media (min-width: 1024px) {
                    color: var(--color-gray-700);
                }
            }
        }
    }
    /* card-link */
    .card-link {
        &:hover {
            color: inherit;
            box-shadow: none;
            .link-text {
                color: var(--color-brand-600);
                &::after {
                    background-color: var(--color-brand-600);
                }
            }
        }
    }
}

/* icon */
.icon {
    display: grid;
    position: relative;
    justify-content: center;
    gap: 16px;
    @media (min-width: 1024px) {
        gap: 24px;
    }
    &::before {
        content: '';
        display: inline-flex;
        background: transparent none center top no-repeat;
        background-size: cover;
        width: 48px;
        height: 48px;
        margin-inline: auto;
    }
    &.icon-support {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        &::before {
            background-image: url(/wp-content/themes/itwith/images/top/icon-support.svg);
            width: 64px;
            height: 64px;
        }
    }
    &.icon-software {
        &::before {
            background-image: url(/wp-content/themes/itwith/images/top/icon-software.svg);
        }
    }
    &.icon-hardware {
        &::before {
            background-image: url(/wp-content/themes/itwith/images/top/icon-hardware.svg);
        }
    }
    &.icon-reuse {
        &::before {
            background-image: url(/wp-content/themes/itwith/images/top/icon-reuse.svg);
        }
    }
    &.icon-diagnosis {
        &::before {
            background-image: url(/wp-content/themes/itwith/images/top/icon-diagnosis.svg);
        }
    }
    &.icon-visit {
        &::before {
            background-image: url(/wp-content/themes/itwith/images/top/icon-visit.svg);
        }
    }
    &.icon-velox {
        &::before {
            background-image: url(/wp-content/themes/itwith/images/top/icon-velox.png);
            width: 142px;
            height: 48px;
        }
    }
    &.icon-arrow {
        display: inline-flex;
        gap: 8px;
        align-items: center;
        &::before {
            display: none;
        }
        &::after {
            content: '';
            display: inline-flex;
            background: transparent url(/wp-content/themes/itwith/images/top/icon_link_arrow.svg.svg) center top no-repeat;
            background-size: cover;
            width: 24px;
            height: 24px;
            margin-inline: auto;
        }
    }
}

/* logo */
.logo {
    display: grid;
    gap: 21px;
    .logo-element{
        max-width: 150px;
    }
}
.label-box--round {
    background-color: var(--color-brand-400);
    border-radius: 90px;
    color: var(--color-white);
    font-weight: var(--fw-bold);
    font-size: var(--size-small);
    width: fit-content;
    height: 24px;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding-inline: 12px;
    margin-inline: auto;
    position: relative;
    &::before {
        content: '';
        display: inline-block;
        width: 16px;
        height: 16px;
        mask-image: url(/wp-content/themes/itwith/images/top/icon_clock.svg);
        mask-position: 0 0;
        mask-repeat: no-repeat;
        mask-size: contain;
        background-color: var(--color-white);
    }
}