@charset "UTF-8";

/* -------------------------------------------------------
    ict-dx.html タブレット版（768px〜1439px）
    css/ict-dx.css（PC版）の px 指定を 1440px 基準で vw に変換
    計算式：px ÷ 1440 × 100 = vw（小数点4桁まで）
    セレクタ・レイアウト構成はPC版から変更していません
------------------------------------------------------- */

@media screen and (min-width: 768px) and (max-width: 1439px) {

    /* -------------------------
        このファイルは ict-dx.html（04_ICT・DX）専用のスタイルです。
        ヘッダー・フッター・共通ボタン等は css/common.css を参照しています。
        このページのみ Figma上で紺色の背景（#0073BA）とグラデーション装飾を使用しているため、
        配色トークンはこのファイル内で完結させています。
    ------------------------- */

    :root {
        --ict-blue: #0072BA;
        --ict-tint: rgba(211, 244, 251, 0.3);
        --ict-gradient: linear-gradient(240deg, #7F2FFF 3.36%, #1BC0EE 103.75%);
        --ict-gradient-soft: linear-gradient(242deg, #71D0EB 3.36%, #8E6DC2 103.75%);
    }

    .ict-dx {
        min-width: 69.4444vw;
        background: var(--ict-blue);
        color: #fff;
    }

    .ict-dx section > div {
        max-width: 85vw;
        margin: 0 auto;
    }


    /* -------------------------
        見出しピル（紫〜水色グラデーションの角丸見出し）
    ------------------------- */

    .c-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 34.1667vw;
        padding: 0.8333vw 2.7778vw;
        margin: 0 auto 2.7778vw;
        background: var(--ict-gradient);
    }

    .c-pill__text {
        font-size: 3.0556vw;
        font-weight: 700;
        line-height: 1.35;
        color: #fff;
        text-align: center;
        white-space: nowrap;
    }

    .c-pill--lg {
        min-width: 42.5vw;
        padding: 1.3889vw 2.7778vw;
    }

    .c-pill--lg .c-pill__text {
        white-space: normal;
    }


    /* -------------------------
        ヒーロー
    ------------------------- */

    .ict-hero {
        position: relative;
        height: 88.8889vw;
        padding: 25.6944vw 0 62.5vw;
        overflow: clip;
        background-image:
            radial-gradient(ellipse at 20% 20%, rgba(106, 0, 255, 0.35), transparent 55%),
            radial-gradient(ellipse at 75% 55%, rgba(0, 200, 220, 0.3), transparent 55%),
            url("../images/ict-dx/bg_circuit.webp");
        background-repeat: no-repeat;
        background-position: 0 0, 0 0, center center;
        background-size: cover, cover, 162.0139vw auto;
        background-blend-mode: screen, screen, screen;
    }

    .ict-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("../images/ict-dx/bg_circuit.webp");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 162.0139vw auto;
        mix-blend-mode: screen;
        opacity: 0;
        pointer-events: none;
        animation: cyber-glitch-bg 6s -4s infinite;
    }

    .ict-hero__inner {
        position: relative;
        padding: 0 15.2778vw;
        text-align: center;
    }

    .ict-hero__watermark {
        position: absolute;
        inset: -60px 0 auto 0;
        display: flex;
        justify-content: space-between;
        font-family: "Abel", sans-serif;
        font-size: 15.2778vw;
        line-height: 1;
        letter-spacing: 4px;
        color: transparent;
        pointer-events: none;
        user-select: none;
    }

    .ict-hero__watermark span:first-child {
        background: linear-gradient(160deg, #6a00ff, #0d09d4);
        -webkit-background-clip: text;
        background-clip: text;
        opacity: 0.65;
        mix-blend-mode: color-dodge;
    }

    .ict-hero__watermark span:last-child {
        align-self: flex-end;
        background: linear-gradient(160deg, #00eeff, #000ace);
        -webkit-background-clip: text;
        background-clip: text;
        opacity: 0.4;
        mix-blend-mode: color-dodge;
    }

    .ict-hero__title {
        position: relative;
        font-size: 3.4722vw;
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: 2.5px;
        color: #fff;
    }

    .ict-hero__sub {
        position: relative;
        margin-top: 1.3889vw;
        font-size: 1.6667vw;
        letter-spacing: 2.4px;
        color: #fff;
    }

    .ict-hero__lead {
        position: relative;
        max-width: 62.5vw;
        margin: 19.4444vw auto 0;
        font-size: 1.5278vw;
        line-height: 2.7;
        text-align: center;
        color: #fff;
    }


    /* -------------------------
        ひだまりDXのポイント
    ------------------------- */

    .ict-points {
        position: relative;
        z-index: 0;
        overflow: clip;
        padding: 19.4444vw 15.2778vw 7.6389vw;
        text-align: center;
    }

    /* -------------------------
        背景装飾（虹色のグロー）
    ------------------------- */

    .ict-deco-blob {
        position: absolute;
        z-index: -1;
        width: 48.6111vw;
        height: auto;
        pointer-events: none;
    }

    .ict-points__inner,
    .ict-result__inner,
    .ict-status__inner {
        position: relative;
        z-index: 2;
    }

    .ict-points .ict-deco-blob {
        top: 10.4167vw;
        right: -29.8611vw;
        width: 83.3333vw;
        z-index: 1;
    }

    .ict-points__list {
        width: 78.125vw;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8.3333vw 2.7778vw;
        text-align: left;
        flex-direction: column;
        margin: 2.7778vw auto 0;
    }

    .ict-points__item {
        position: relative;
        width: 32.7083vw;
        padding-top: 1.3889vw;
    }

    .ict-icon_point01 {
        position: absolute;
        top: -0.6944vw;
        right: -43.75vw;
        width: 27.4306vw;
        height: auto;
    }

    .ict-icon_point02_1 {
        position: absolute;
        top: -0.6944vw;
        right: -55.5556vw;
        width: 18.0556vw;
        height: auto;
    }

    .ict-icon_point02_2 {
        position: absolute;
        top: 6.25vw;
        right: -30.5556vw;
        width: 23.6111vw;
        height: auto;
    }

    .ict-icon_point03 {
        position: absolute;
        top: 4.1667vw;
        right: -40.2778vw;
        width: 18.0556vw;
        height: auto;
    }


    .ict-points__label {
        font-family: "Abel", sans-serif;
        font-size: 4.1667vw;
        letter-spacing: 3px;
        text-transform: uppercase;
        background: var(--ict-gradient-soft);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        line-height: 1;
    }

    .ict-points__title {
        margin: 0.6944vw 0 2.0833vw;
        font-size: 2.6389vw;
        line-height: 1.26;
        font-weight: 700;
        color: #fff;
    }

    .ict-points__text {
        margin-top: 1.1111vw;
        font-size: 1.25vw;
        line-height: 1.8;
        color: #fff;
    }


    /* -------------------------
        劇的ビフォーアフター／ペーパレス化
    ------------------------- */

    .ict-result {
        position: relative;
        z-index: 0;
        overflow: hidden;
        padding: 6.9444vw 15.2778vw;
        text-align: center;
    }

    .ict-result .ict-deco-blob {
        bottom: 0vw;
        left: -20.8333vw;
        width: 69.4444vw;
        z-index: 1;
    }

    .ict-result__lead {
        margin-top: -0.6944vw;
        margin-bottom: 8.3333vw;
        font-size: 1.3889vw;
        color: #fff;
    }

    .ict-result__heading {
        margin-bottom: 2.0833vw;
        font-size: 2.5vw;
        font-weight: 700;
        color: #fff;
    }

    .ict-time-compare {
        width: 100%;
        max-width: 78.125vw;
        margin: 1.3889vw auto 0;
    }

    .ict-time-compare__img {
        display: block;
        width: 100%;
        height: auto;
    }

    .ict-result__summary {
        max-width: 78.125vw;
        margin: 2.7778vw auto 12.5vw;
        font-size: 1.25vw;
        line-height: 2;
        color: #fff;
        text-align: left;
        padding: 0 4.1667vw;
    }

    .ict-paperless {
        width: 100%;
        max-width: 78.125vw;
        margin: 2.7778vw auto 0;
    }

    .ict-paperless__img {
        display: block;
        width: 100%;
        height: auto;
    }


    /* -------------------------
        チームで挑む組織への変革
    ------------------------- */

    .ict-team {
        padding: 0 15.2778vw 6.9444vw;
        text-align: center;
    }

    .ict-team__heading {
        padding-top: 6.9444vw;
        margin-bottom: 5.5556vw;
        font-size: 2.5vw;
        font-weight: 700;
        color: #fff;
        border-bottom: solid 1px #FFF;
        padding-bottom: 2.0833vw;
    }

    .ict-team__illust-wrap {
        max-width: 69.5833vw;
        margin: 0 auto;
    }

    .ict-team__illust {
        display: block;
        width: 100%;
        border-radius: 1.3889vw;
    }

    .ict-team__caption {
        margin-top: 2.6389vw;
        font-size: 1.25vw;
        color: rgba(255, 255, 255, 0.75);
        text-align: left;
    }


    /* -------------------------
        ICT・DXの成果と現在地
    ------------------------- */

    .ict-status {
        position: relative;
        z-index: 0;
        overflow: clip;
        padding: 6.9444vw 15.2778vw;
        text-align: center;
    }

    .ict-status .ict-deco-blob {
        top: 5.5556vw;
        right: -18.0556vw;
        width: 59.0278vw;
        z-index: 1;
    }

    .ict-status-banner {
        width: 100%;
        max-width: 78.125vw;
        margin: 2.7778vw auto 0;
    }

    .ict-status-banner__img {
        display: block;
        width: 100%;
        height: auto;
    }

    .ict-status__summary {
        max-width: 69.4444vw;
        margin: 3.4722vw auto;
        font-size: 1.25vw;
        line-height: 1.8;
        color: #fff;
        text-align: left;
    }


    /* -------------------------
        ツール紹介
    ------------------------- */

    .ict-tools {
        padding: 6.9444vw 15.2778vw 17.3611vw;
        text-align: center;
    }

    .ict-tools .c-pill__text {
        font-size: 2.7778vw;
    }

    .ict-tools__lead {
        max-width: 47.7083vw;
        margin: 2.7778vw auto 0;
        font-size: 1.3889vw;
        line-height: 2;
        color: #fff;
    }

    .ict-tools__list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2.0833vw;
        margin-top: 3.4722vw;
        text-align: left;
    }

    .ict-tools__item {
        position: relative;
        padding: 1vw;
        background: rgba(255, 255, 255, 0.1);
        font-family: "Noto Sans JP", sans-serif;
    }

    .ict-tools__photo {
        display: block;
        width: 100%;
        aspect-ratio: 320 / 197;
        object-fit: cover;
        margin-bottom: 1.3889vw;
    }

    .ict-tools__photo--contain {
        object-fit: contain;
    }

    .ict-tools__title {
        font-size: 1.3vw;
        font-weight: 500;
        color: #fff;
        margin: 0 1vw;
    }

    .ict-tools__text {
        margin: 1vw;
        font-size: 1.25vw;
        line-height: 1.6;
        color: #fff;
        text-align: left;
    }


    /* -------------------------
        VOICE
    ------------------------- */

    .ict-voice {
        position: relative;
        padding: 13.8889vw 15.2778vw;
        background: var(--ict-gradient);
        text-align: center;
    }

    .ict-voice__inner {
        position: relative;
    }

    .ict-voice__en {
        position: absolute;
        top: -16.8056vw;
        left: -54.1667vw;
        right: 0;
        font-family: "Abel", sans-serif;
        font-size: 20.8333vw;
        line-height: 1;
        letter-spacing: 3px;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        pointer-events: none;
    }

    .ict-voice__title {
        position: relative;
        width: fit-content;
        margin: 0vw auto 0;
        font-size: 2.7778vw;
        font-weight: 700;
        color: #fff;
    }

    .ict-voice__title::after {
        content: "";
        display: block;
        width: 100%;
        height: 0.2083vw;
        margin-top: 0.9722vw;
        border-radius: 0.1389vw;
        background: #fff;
    }

    .ict-voice__list {
        display: flex;
        flex-direction: column;
        gap: 5.5556vw;
        margin-top: 4.1667vw;
    }

    .ict-voice__item {
        position: relative;
        width: 68.0556vw;
        margin: 0 auto;
        display: flex;
        align-items: center;
        gap: 4.1667vw;
        padding: 3.8194vw 4.5139vw;
        background: rgba(255, 255, 255, 0.12);
        text-align: left;
        justify-content: center;
    }

    .ict-voice__item::after {
        content: "";
        position: absolute;
        left: 7.8472vw;
        bottom: -4.8611vw;
        width: 4.1667vw;
        height: 4.8611vw;
        background: rgba(255, 255, 255, 0.12);
        clip-path: polygon(0 0, 100% 0, 0 100%);
    }

    .ict-voice__item:nth-child(2)::after {
        left: auto;
        right: 7.9167vw;
        clip-path: polygon(0 0, 100% 0, 100% 100%);
    }

    .ict-voice__photo{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .ict-voice__photo img{
        flex: none;
        width: 12.8472vw;
        height: 12.8472vw;
        border-radius: 50%;
        object-fit: cover;
    }
    .ict-voice__photo p{
        text-align: center;
        font-size: 1.1806vw;
        margin-top: 0.6944vw;
    }

    .ict-voice__photo--placeholder {
        background: #fff;
    }

    .ict-voice__name {
        display: none;
    }

    .ict-voice__bubble {
        width: 41.6667vw;
        flex: 1;
    }

    .ict-voice__catch {
        font-size: 1.8056vw;
        font-weight: 500;
        line-height: 1.5;
        color: #fff;
    }

    .ict-voice__text {
        margin-top: 1.7361vw;
        font-size: 1.25vw;
        line-height: 1.8;
        color: #fff;
    }


    /* -------------------------
        公的認定
    ------------------------- */

    .ict-cert {
        position: relative;
        z-index: 0;
        overflow: hidden;
        padding: 6.9444vw 15.2778vw;
        text-align: center;
    }

    .ict-cert__heading {
        position: relative;
        width: fit-content;
        margin: 0 auto 2.7778vw;
        font-size: 2.7778vw;
        font-weight: 700;
        color: #fff;
    }

    .ict-cert__heading::after {
        content: "";
        display: block;
        width: 6.9444vw;
        height: 0.2083vw;
        margin: 0.9722vw auto 0;
        border-radius: 0.1389vw;
        background: #fff;
    }

    .ict-cert__body {
        display: flex;
        align-items: center;
        gap: 2.7778vw;
        max-width: 69.5833vw;
        margin: 0 auto;
        text-align: left;
    }

    .ict-cert__badge {
        display: block;
        flex: none;
        width: 26.7361vw;
        height: 27.2222vw;
        object-fit: cover;
        border-radius: 0;
    }

    .ict-cert__text-wrap {
        font-family: "Noto Sans JP", sans-serif;
    }

    .ict-cert__title {
        font-size: 1.5278vw;
        font-weight: 700;
        line-height: 1.6;
        color: #fff;
    }

    .ict-cert__text {
        margin-top: 1.3889vw;
        font-size: 1.25vw;
        line-height: 1.6;
        color: #fff;
    }


    /* -------------------------
        CONTACT
    ------------------------- */

    .ict-cta {
        position: relative;
        z-index: 0;
        padding: 15.2778vw 15.2778vw 27.7778vw;
        text-align: center;
    }

    .ict-cta .ict-deco-blob--lg {
        width: 152.7778vw;
        top: -12.5vw;
        right: 0;
    }

    .ict-cta__inner {
        position: relative;
    }

    .ict-cta__en {
        position: absolute;
        top: -19.8611vw;
        left: 0;
        right: 0;
        font-family: "Abel", sans-serif;
        font-size: 17.3611vw;
        line-height: 1;
        letter-spacing: 3px;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        pointer-events: none;
    }

    .ict-cta__buttons {
        position: relative;
        display: flex;
        justify-content: center;
        gap: 2.7778vw;
        margin-top: 9.0278vw;
    }

    .ict-cta__buttons .c-btn-more {
        background: var(--ict-gradient);
        border-radius: 0.6944vw;
        line-height: 1.3;
    }

    .ict-cta__buttons .c-btn-more::after {
        background-image: url("../images/ict-dx/icon_arrow_circle.svg");
    }
}