/* ========================================
   NJES Original Theme - main.css
======================================== */
@font-face {
    font-family: "NJES Company";
    src:
        url("../fonts/njes-company.otf")
        format("opentype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}


:root {
    --content-width: 1240px;
    --header-height: 82px;

    --color-logo: #0351F8;
    --font-logo:
        "ＭＳ ゴシック",
        "MS Gothic",
        monospace;

    --color-primary: #0351f8;
    --color-primary-dark: #083f9f;
    --color-cyan: #37b7e9;
    --color-navy: #102b4e;
    --color-text: #405873;
    --color-muted: #6b7e92;
    --color-line: #dce7f2;
    --color-soft-blue: #f3f8ff;
    --color-white: #ffffff;

    --shadow-card:
        0 18px 45px rgb(22 68 114 / 10%);

    --shadow-card-hover:
        0 27px 60px rgb(22 68 114 / 17%);
}


/* ========================================
   リセット・共通設定
======================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    min-width: 0;
    margin: 0;
    color: var(--color-text);
    background-color: #ffffff;
    font-family:
        "Noto Sans JP",
        "Yu Gothic",
        "Hiragino Kaku Gothic ProN",
        "Meiryo",
        sans-serif;
    font-size: 16px;
    line-height: 1.7;
    overflow-x: hidden;
    overflow-wrap: anywhere;
}

body.menu-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    color: inherit;
}

img,
svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

ul,
ol {
    margin-top: 0;
}

.site-main {
    display: block;
    overflow: hidden;
}

.container {
    width: min(
        var(--content-width),
        calc(100% - 48px)
    );
    margin-inline: auto;
}


/* ========================================
   NJESロゴ共通設定
======================================== */

.site-logo__main,
.site-footer__logo-text,
.site-footer__bottom-logo,
.hero-service-network__core-logo,
.pickup-card__fallback span {
    color: var(--color-logo);
    font-family: var(--font-logo);
    font-style: italic;
    font-weight: 900;
    line-height: 1;

    -webkit-text-stroke: 0.55px currentColor;

    text-shadow:
        0.45px 0 currentColor,
        -0.45px 0 currentColor;
}

/* ========================================
   ヘッダー
======================================== */

.site-header {
    position: relative;
    z-index: 1000;
    width: 100%;
    background-color: rgb(255 255 255 / 96%);
    border-bottom: 1px solid #e2ebf4;
    box-shadow:
        0 3px 18px rgb(20 66 108 / 4%);
    backdrop-filter: blur(12px);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 34px;
    width: min(
        var(--content-width),
        calc(100% - 48px)
    );
    min-height: var(--header-height);
    margin-inline: auto;
}

.site-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 16px;
}

.site-logo__main {
    display: inline-block;
    font-size: 30px;
    line-height: 1;
    letter-spacing: 0.04em;
}

.site-logo__company-name {
    min-width: 0;
    color: #12233a;
    font-family:
        "NJES Company",
        "Yu Gothic",
        "Meiryo",
        sans-serif;
    font-size: 19px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.site-logo__sub {
    display: none;
}


.global-navigation {
    margin-left: auto;
}

.global-navigation__list {
    display: flex;
    align-items: center;
    gap: 29px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.global-navigation__item {
    margin: 0;
}

.global-navigation__list a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--header-height);
    color: #263e5a;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.global-navigation__list a::after {
    position: absolute;
    right: 0;
    bottom: 19px;
    left: 0;
    width: 0;
    height: 2px;
    margin-inline: auto;
    content: "";
    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            #55c7ef
        );
    border-radius: 999px;
    transition: width 0.25s ease;
}

.global-navigation__list a:hover::after,
.global-navigation__list
.current-menu-item > a::after {
    width: 100%;
}

.global-navigation__item--contact a,
.header-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 21px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #0351f8,
            #1188d7
        );
    border-radius: 10px;
    box-shadow:
        0 9px 20px rgb(3 81 248 / 18%);
    transition:
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

.global-navigation__item--contact a::after,
.header-contact::after {
    display: none;
}

.global-navigation__item--contact a:hover,
.header-contact:hover {
    box-shadow:
        0 13px 26px rgb(3 81 248 / 25%);
    transform: translateY(-2px);
}


/* ========================================
   ハンバーガーメニュー
======================================== */

.menu-button {
    position: relative;
    display: none;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    margin-left: auto;
    padding: 0;
    cursor: pointer;
    background-color: #f3f8ff;
    border: 1px solid #d6e5f5;
    border-radius: 10px;
}

.menu-button span {
    position: absolute;
    left: 50%;
    width: 20px;
    height: 2px;
    background-color: #0753a6;
    border-radius: 999px;
    transform: translate(-50%, -50%);
    transition:
        top 0.3s ease,
        transform 0.3s ease,
        opacity 0.3s ease;
}

.menu-button span:nth-child(1) {
    top: calc(50% - 7px);
}

.menu-button span:nth-child(2) {
    top: 50%;
}

.menu-button span:nth-child(3) {
    top: calc(50% + 7px);
}

.menu-button.is-open span:nth-child(1) {
    top: 50%;
    transform:
        translate(-50%, -50%)
        rotate(45deg);
}

.menu-button.is-open span:nth-child(2) {
    opacity: 0;
}

.menu-button.is-open span:nth-child(3) {
    top: 50%;
    transform:
        translate(-50%, -50%)
        rotate(-45deg);
}

/* ========================================
   ファーストビュー
======================================== */

.hero {
    position: relative;
    display: block;
    min-height: 980px;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #edf6ff 50%,
            #eefbff 100%
        );
}

.hero::before,
.hero::after {
    display: none;
}

.hero__background {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero__grid {
    position: absolute;
    inset: 0;
    opacity: 0.44;
    background-image:
        linear-gradient(
            rgb(3 81 248 / 5%) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgb(3 81 248 / 5%) 1px,
            transparent 1px
        );
    background-size: 62px 62px;
    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 23%,
            #000 100%
        );
}

.hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(4px);
}

.hero__orb--blue {
    top: -190px;
    right: 6%;
    width: 530px;
    height: 530px;
    background:
        radial-gradient(
            circle,
            rgb(3 81 248 / 17%),
            rgb(3 81 248 / 2%) 62%,
            transparent 72%
        );
}

.hero__orb--cyan {
    right: -110px;
    bottom: -180px;
    width: 520px;
    height: 520px;
    background:
        radial-gradient(
            circle,
            rgb(55 183 233 / 20%),
            rgb(55 183 233 / 2%) 62%,
            transparent 72%
        );
}

.hero__orb--yellow {
    top: 18%;
    left: 46%;
    width: 220px;
    height: 220px;
    background:
        radial-gradient(
            circle,
            rgb(255 205 82 / 17%),
            transparent 70%
        );
}

.hero__inner {
    position: relative;
    z-index: 2;
    display: block;
    width: min(
        var(--content-width),
        calc(100% - 48px)
    );
    margin-inline: auto;
    padding: 75px 0 100px;
}

.hero__content {
    position: relative;
    z-index: 3;
}

.hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 23px;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.hero__eyebrow-line {
    display: block;
    width: 45px;
    height: 2px;
    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            #63cef3
        );
    border-radius: 999px;
}

.hero__title {
    margin: 0;
}

.hero__title-en {
    display: block;
    color: var(--color-navy);
    font-size:
        clamp(58px, 6vw, 90px);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.hero__title-accent {
    position: relative;
    display: inline-block;
    color: var(--color-navy);
}

.hero__title-accent::after {
    position: absolute;
    right: 0;
    bottom: -7px;
    left: 0;

    width: 100%;
    height: 6px;

    content: "";

    background:
        linear-gradient(
            90deg,
            #0351f8 0%,
            #37b7e9 100%
        );

    border-radius: 999px;
    pointer-events: none;
}

.hero__title-ja {
    display: block;
    margin-top: 32px;
    color: var(--color-navy);
    font-size:
        clamp(25px, 2.3vw, 36px);
    font-weight: 800;
    line-height: 1.55;
    letter-spacing: 0.04em;
}

.hero__description {
    max-width: 610px;
    margin: 29px 0 0;
    color: #566c82;
    font-size: 15px;
    line-height: 2;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 39px;
}

.hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    min-width: 200px;
    min-height: 58px;
    padding: 0 21px 0 25px;
    font-size: 13px;
    font-weight: 800;
    border-radius: 12px;
    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

.hero-button--primary {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            #1689d9
        );
    box-shadow:
        0 15px 30px rgb(3 81 248 / 20%);
}

.hero-button--secondary {
    color: var(--color-primary);
    background-color:
        rgb(255 255 255 / 72%);
    border: 1px solid #bed5ec;
}

.hero-button:hover {
    transform: translateY(-3px);
}

.hero-button--primary:hover {
    box-shadow:
        0 20px 37px rgb(3 81 248 / 28%);
}

.hero-button--secondary:hover {
    color: #ffffff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.hero-button__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background-color:
        rgb(255 255 255 / 18%);
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.hero-button--secondary
.hero-button__arrow {
    background-color: #edf5ff;
}

.hero-button--secondary:hover
.hero-button__arrow {
    background-color:
        rgb(255 255 255 / 18%);
}

.hero-button:hover
.hero-button__arrow {
    transform: translateX(4px);
}

/* ========================================
   ファーストビュー右側・スクロール表示
======================================== */

.hero-visual {
    position: relative;
    min-width: 0;
    min-height: 570px;
}

.hero__scroll {
    position: absolute;
    right: max(
        18px,
        calc((100vw - var(--content-width)) / 2 - 48px)
    );
    bottom: 34px;
    left: auto;
    z-index: 12;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    pointer-events: none;
    transform: none;
}

.hero__scroll-text {
    color: #7690a8;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.2em;
    writing-mode: vertical-rl;
}

.hero__scroll-line {
    position: relative;
    display: block;
    width: 1px;
    height: 37px;
    overflow: hidden;
    background-color: #ceddeb;
}

.hero__scroll-line::after {
    position: absolute;
    top: -100%;
    left: 0;
    width: 1px;
    height: 100%;
    content: "";
    background-color: var(--color-primary);
    animation: scroll-line 2s ease-in-out infinite;
}

@keyframes scroll-line {
    0% {
        top: -100%;
    }

    70%,
    100% {
        top: 100%;
    }
}


/* ========================================
   ABOUT NJES
======================================== */

.about-njes {
    position: relative;
    padding: 135px 0;
    background-color: #ffffff;
}

.about-njes::before {
    position: absolute;
    top: 0;
    left: 7%;
    width: 1px;
    height: 95px;
    content: "";
    background:
        linear-gradient(
            #d9e8f6,
            transparent
        );
}

.about-njes__inner {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1.08fr);
    gap: 95px;
    width: min(
        var(--content-width),
        calc(100% - 48px)
    );
    margin-inline: auto;
}

.about-njes__label {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 0 0 21px;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.about-njes__label-line {
    width: 42px;
    height: 2px;
    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            #6dcdf1
        );
    border-radius: 999px;
}

.about-njes__title {
    margin: 0;
    color: var(--color-navy);
    font-size:
        clamp(38px, 4.2vw, 59px);
    font-weight: 800;
    line-height: 1.55;
    letter-spacing: 0.035em;
}

.about-njes__content {
    padding-top: 43px;
}

.about-njes__lead {
    margin: 0 0 29px;
    color: var(--color-navy);
    font-size:
        clamp(20px, 2vw, 27px);
    font-weight: 800;
    line-height: 1.7;
}

.about-njes__text {
    margin: 0 0 17px;
    color: #607489;
    font-size: 15px;
    line-height: 2.15;
}

.about-njes__link {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    margin-top: 29px;
    padding-bottom: 8px;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 800;
    border-bottom: 1px solid #b8d5ef;
}

.about-njes__link-arrow {
    transition: transform 0.3s ease;
}

.about-njes__link:hover
.about-njes__link-arrow {
    transform: translateX(6px);
}

.about-njes.is-reveal-ready
.about-njes__heading,
.about-njes.is-reveal-ready
.about-njes__content {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.about-njes.is-reveal-ready
.about-njes__content {
    transition-delay: 0.14s;
}

.about-njes.is-visible
.about-njes__heading,
.about-njes.is-visible
.about-njes__content {
    opacity: 1;
    transform: translateY(0);
}


/* ========================================
   サービス一覧
======================================== */

.services-section {
    position: relative;
    padding: 135px 0;
    background:
        linear-gradient(
            180deg,
            #f4f9ff 0%,
            #f8fbff 56%,
            #ffffff 100%
        );
}

.services-section__inner {
    width: min(
        var(--content-width),
        calc(100% - 48px)
    );
    margin-inline: auto;
}

.services-section__header {
    display: grid;
    grid-template-columns:
        minmax(290px, 0.75fr)
        minmax(0, 1.25fr);
    align-items: end;
    gap: 75px;
    margin-bottom: 48px;
}

.services-section__label {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 0 0 17px;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.services-section__label span {
    display: block;
    width: 42px;
    height: 2px;
    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            #75c9f8
        );
    border-radius: 999px;
}

.services-section__title {
    margin: 0;
    color: var(--color-navy);
    font-size:
        clamp(39px, 4.4vw, 58px);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.04em;
}

.services-section__introduction {
    max-width: 680px;
    justify-self: end;
}

.services-section__lead {
    margin: 0 0 16px;
    color: var(--color-navy);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.7;
}

.services-section__description {
    margin: 0;
    color: #64788d;
    font-size: 14px;
    line-height: 2;
}


/* ========================================
   サービスフィルター
======================================== */

.service-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 38px;
}

.service-filter__button {
    min-height: 42px;
    padding: 0 20px;
    color: #60758b;
    cursor: pointer;
    background-color: #ffffff;
    border: 1px solid #d5e3f0;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

.service-filter__button:hover {
    color: var(--color-primary);
    border-color: #aaccec;
    transform: translateY(-2px);
}

.service-filter__button.is-active {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            #168fd8
        );
    border-color: transparent;
    box-shadow:
        0 9px 21px rgb(3 81 248 / 18%);
}


/* ========================================
   サービスカード
======================================== */

.service-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.service-card {
    --service-color: #246bea;
    --service-dark: #164fae;
    --service-soft: #f2f7ff;
    --service-border: #d8e5f5;
    --service-glow:
        rgb(36 107 234 / 6%);
    --service-top-color:
        rgb(36 107 234 / 22%);

    position: relative;
    min-width: 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 100% 0,
            var(--service-glow),
            transparent 42%
        ),
        #ffffff;
    border:
        1px solid var(--service-border);
    border-radius: 22px;
    box-shadow:
        0 14px 36px rgb(29 72 113 / 7%);
    transition:
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s ease,
        opacity 0.3s ease;
}

.service-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    content: "";
    background:
        linear-gradient(
            90deg,
            var(--service-color),
            var(--service-top-color)
        );
}

.service-card:hover {
    border-color:
        var(--service-color);
    box-shadow:
        0 23px 52px rgb(29 72 113 / 14%);
    transform: translateY(-7px);
}

.service-card.is-hidden {
    display: none;
}


/* ITサポート */

.service-card[
    data-service-category="support"
] {
    --service-color: #246bea;
    --service-dark: #174fae;
    --service-soft: #f2f7ff;
    --service-border: #d8e5f5;
    --service-glow:
        rgb(36 107 234 / 6%);
    --service-top-color:
        rgb(36 107 234 / 22%);
}


/* 環境構築 */

.service-card[
    data-service-category="environment"
] {
    --service-color: #1597c5;
    --service-dark: #0c6f96;
    --service-soft: #f0faff;
    --service-border: #d3eaf4;
    --service-glow:
        rgb(21 151 197 / 6%);
    --service-top-color:
        rgb(21 151 197 / 23%);
}


/* 買取・販売 */

.service-card[
    data-service-category="sales"
] {
    --service-color: #d88125;
    --service-dark: #a75d12;
    --service-soft: #fff8ef;
    --service-border: #f1dfc8;
    --service-glow:
        rgb(216 129 37 / 6%);
    --service-top-color:
        rgb(216 129 37 / 24%);
}


/* その他 */

.service-card[
    data-service-category="other"
] {
    --service-color: #8267c7;
    --service-dark: #6349a8;
    --service-soft: #f7f4ff;
    --service-border: #e3daf8;
    --service-glow:
        rgb(130 103 199 / 6%);
    --service-top-color:
        rgb(130 103 199 / 23%);
}

.service-card__link {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 25px 27px 27px;
}

.service-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.service-card__number {
    color: var(--service-color);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.service-card__category {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 11px;
    color: var(--service-dark);
    background-color: var(--service-soft);
    border:
        1px solid var(--service-border);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.service-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 118px;
    height: 118px;
    margin: 23px 0 18px;
    overflow: hidden;
    background-color: var(--service-soft);
    border:
        1px solid var(--service-border);
    border-radius: 24px;
}

.service-card__icon img {
    width: 96px;
    height: 96px;
    object-fit: contain;
}

.service-card__title {
    margin: 0;
    color: var(--color-navy);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.6;
}

.service-card__summary {
    margin: 13px 0 0;
    color: #687b8f;
    font-size: 13px;
    line-height: 1.9;
}

.service-card__more {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-top: auto;
    padding-top: 24px;
    color: var(--service-color);
    font-size: 11px;
    font-weight: 800;
}

.service-card__more span {
    transition: transform 0.3s ease;
}

.service-card:hover
.service-card__more span {
    transform: translateX(5px);
}


/* ========================================
   サービス詳細
======================================== */

.service-details {
    margin-top: 115px;
    padding: 66px;
    background-color: #ffffff;
    border: 1px solid #dce8f4;
    border-radius: 30px;
    box-shadow:
        0 22px 58px rgb(29 72 113 / 8%);
}

.service-details__header {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr);
    max-width: 720px;
    margin-bottom: 37px;
}

.service-details__label {
    margin: 0 0 13px;
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.18em;
}

.service-details__title {
    margin: 0;
    color: var(--color-navy);
    font-size:
        clamp(31px, 3.5vw, 47px);
    font-weight: 800;
    line-height: 1.4;
}

.service-details__description {
    margin: 15px 0 0;
    color: #687b8f;
    font-size: 14px;
    line-height: 1.9;
}

.service-accordion {
    border-top:
        1px solid #dce7f2;
}

.service-accordion__item {
    scroll-margin-top: 100px;
    border-bottom:
        1px solid #dce7f2;
}

.service-accordion__heading {
    margin: 0;
}

.service-accordion__button {
    display: grid;
    grid-template-columns:
        56px
        minmax(0, 1fr)
        42px;
    align-items: center;
    gap: 22px;
    width: 100%;
    min-height: 103px;
    padding: 19px 13px;
    text-align: left;
    cursor: pointer;
    background: transparent;
    border: 0;
    transition:
        background-color 0.3s ease,
        padding-left 0.3s ease;
}

.service-accordion__button:hover,
.service-accordion__button[
    aria-expanded="true"
] {
    padding-left: 21px;
    background-color: #f6faff;
}

.service-accordion__number {
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.service-accordion__button-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.service-accordion__category {
    color: #72869a;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.service-accordion__name {
    color: var(--color-navy);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.5;
}

.service-accordion__mark {
    position: relative;
    display: block;
    width: 37px;
    height: 37px;
    background-color: #edf5ff;
    border-radius: 50%;
    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
}

.service-accordion__mark::before,
.service-accordion__mark::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    content: "";
    background-color:
        var(--color-primary);
    border-radius: 999px;
    transform:
        translate(-50%, -50%);
    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
}

.service-accordion__mark::after {
    transform:
        translate(-50%, -50%)
        rotate(90deg);
}

.service-accordion__button[
    aria-expanded="true"
]
.service-accordion__mark {
    background-color:
        var(--color-primary);
    transform: rotate(180deg);
}

.service-accordion__button[
    aria-expanded="true"
]
.service-accordion__mark::before,
.service-accordion__button[
    aria-expanded="true"
]
.service-accordion__mark::after {
    background-color: #ffffff;
}

.service-accordion__button[
    aria-expanded="true"
]
.service-accordion__mark::after {
    transform:
        translate(-50%, -50%)
        rotate(0);
}

.service-accordion__panel[hidden] {
    display: none;
}

.service-accordion__panel {
    background-color: #f8fbff;
}

.service-accordion__content {
    padding: 12px 88px 42px;
}

.service-accordion__lead {
    margin: 0 0 22px;
    color: #50677f;
    font-size: 14px;
    line-height: 2;
}

.service-accordion__list {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 12px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.service-accordion__list li {
    position: relative;
    padding-left: 18px;
    color: #526a82;
    font-size: 13px;
    line-height: 1.8;
}

.service-accordion__list li::before {
    position: absolute;
    top: 0.78em;
    left: 0;
    width: 6px;
    height: 6px;
    content: "";
    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            #58c7ee
        );
    border-radius: 50%;
}

.service-accordion__contact {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-height: 47px;
    margin-top: 29px;
    padding: 0 20px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            #1689d9
        );
    border-radius: 10px;
    font-size: 11px;
    font-weight: 800;
    box-shadow:
        0 10px 22px rgb(3 81 248 / 16%);
    transition:
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

.service-accordion__contact:hover {
    box-shadow:
        0 14px 29px rgb(3 81 248 / 24%);
    transform: translateY(-2px);
}

.service-accordion__contact span {
    transition: transform 0.3s ease;
}

.service-accordion__contact:hover span {
    transform: translateX(4px);
}


/* ========================================
   ピックアップ・お知らせ共通見出し
======================================== */

.content-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 50px;
}

.content-section-heading__main {
    flex-shrink: 0;
}

.content-section-heading__label {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 0 0 17px;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.content-section-heading__label span {
    display: block;
    width: 42px;
    height: 2px;
    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            #75c9f8
        );
    border-radius: 999px;
}

.content-section-heading__title {
    margin: 0;
    color: var(--color-navy);
    font-size:
        clamp(36px, 4vw, 55px);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.04em;
}

.content-section-heading__description {
    max-width: 580px;
    margin: 0;
    color: #617489;
    font-size: 15px;
    line-height: 2;
}

.content-empty-message {
    padding: 50px 30px;
    margin: 0;
    color: #617489;
    text-align: center;
    background-color: #ffffff;
    border: 1px solid #dfeaf5;
    border-radius: 20px;
}


/* ========================================
   ピックアップ
======================================== */

.pickup-section {
    position: relative;
    padding: 130px 0;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #f3f8ff 0%,
            #f8fcff 48%,
            #f0fbff 100%
        );
}

.pickup-section::before {
    position: absolute;
    top: -210px;
    right: -160px;
    width: 470px;
    height: 470px;
    content: "";
    background:
        radial-gradient(
            circle,
            rgb(3 81 248 / 8%),
            transparent 70%
        );
    border-radius: 50%;
    pointer-events: none;
}

.pickup-section__inner {
    position: relative;
    z-index: 2;
    width: min(
        var(--content-width),
        calc(100% - 48px)
    );
    margin-inline: auto;
}

/* ========================================
   ピックアップスライダー
======================================== */

.pickup-slider {
    position: relative;
    width: 100%;
    max-width: 920px;
    margin-inline: auto;
}

.pickup-slider__viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    cursor: grab;
    touch-action: pan-y;
    border-radius: 28px;
}

.pickup-slider__viewport:active {
    cursor: grabbing;
}

.pickup-slider__track {
    display: flex;
    width: 100%;
    align-items: stretch;
    transition: transform 0.65s ease;
    will-change: transform;
}

.pickup-slide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
}

.pickup-card {
    display: block;
    width: 100%;
    color: #ffffff;
    cursor: pointer;
    user-select: none;
}

.pickup-card__visual {
    position: relative;

    /*
     * 1920×1080と同じ16:9
     */
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 0;

    overflow: hidden;
    background-color: #dceeff;
    border: 1px solid rgb(255 255 255 / 75%);
    border-radius: 28px;
    box-shadow: var(--shadow-card);
    transform: translateZ(0);

    transition:
        box-shadow 0.35s ease,
        transform 0.35s ease;
}

.pickup-card:hover .pickup-card__visual {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-5px);
}

.pickup-card__image,
.pickup-card__fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.pickup-card__image {
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    transition: transform 0.7s ease;
}

.pickup-card:hover .pickup-card__image {
    transform: scale(1.025);
}

.pickup-card__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    background:
        linear-gradient(
            145deg,
            #ddecff,
            #f2f9ff
        );
    pointer-events: none;
}

.pickup-card__fallback span {
    font-size: clamp(35px, 5vw, 70px);
    line-height: 1;
}

/* ========================================
   ピックアップ：文字の視認性向上
======================================== */

.pickup-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            180deg,
            rgb(0 10 25 / 2%) 0%,
            rgb(0 10 25 / 6%) 35%,
            rgb(0 10 25 / 48%) 68%,
            rgb(0 10 25 / 88%) 100%
        );
    pointer-events: none;
}

.pickup-card__content {
    position: absolute;
    right: auto;
    bottom: 24px;
    left: 24px;
    z-index: 2;

    width: min(
        700px,
        calc(100% - 48px)
    );
    max-width: none;
    padding: 22px 24px;

    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            rgb(4 18 37 / 76%),
            rgb(4 18 37 / 52%)
        );
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 16px;
    box-shadow:
        0 14px 35px rgb(0 0 0 / 20%);
    backdrop-filter: blur(6px);
    pointer-events: none;
}

.pickup-card__date {
    display: block;
    margin-bottom: 9px;
    color: rgb(255 255 255 / 82%);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-shadow:
        0 1px 4px rgb(0 0 0 / 65%);
}

.pickup-card__title {
    margin: 0;
    color: #ffffff;
    font-size:
        clamp(22px, 2.7vw, 38px);
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: 0.02em;
    text-shadow:
        0 2px 4px rgb(0 0 0 / 80%),
        0 5px 15px rgb(0 0 0 / 55%);
}

.pickup-card__excerpt {
    display: -webkit-box;
    max-width: 650px;
    margin: 13px 0 0;
    overflow: hidden;
    color: rgb(255 255 255 / 86%);
    font-size: 14px;
    line-height: 1.85;
    text-shadow:
        0 1px 4px rgb(0 0 0 / 65%);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.pickup-card__more {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 17px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    text-shadow:
        0 1px 4px rgb(0 0 0 / 65%);
}

.pickup-card__more span {
    transition: transform 0.3s ease;
}

.pickup-card:hover
.pickup-card__more span {
    transform: translateX(5px);
}

/* ========================================
   ピックアップ操作部分
======================================== */

.pickup-slider__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 28px;
}

.pickup-slider.is-static .pickup-slider__footer {
    display: none;
}

.pickup-slider__dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pickup-slider__dot {
    width: 9px;
    height: 9px;
    margin: 0;
    padding: 0;

    cursor: pointer;
    background-color: #a5bdd5;
    border: 0;
    border-radius: 999px;
    opacity: 0.55;

    transition:
        width 0.3s ease,
        background-color 0.3s ease,
        opacity 0.3s ease;
}

.pickup-slider__dot.is-active {
    width: 31px;
    background-color: var(--color-primary);
    opacity: 1;
}

.pickup-slider__navigation {
    display: flex;
    gap: 10px;
}

.pickup-slider__button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;

    color: var(--color-primary);
    font-size: 19px;

    cursor: pointer;
    background-color: #ffffff;
    border: 1px solid #cfe0f3;
    border-radius: 50%;
    box-shadow:
        0 8px 22px rgb(26 78 130 / 8%);

    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.pickup-slider__button:hover {
    color: #ffffff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

/* ========================================
   お知らせ
======================================== */

.news-section {
    padding: 130px 0;
    background-color: #ffffff;
}

.news-section__inner {
    width: min(
        var(--content-width),
        calc(100% - 48px)
    );
    margin-inline: auto;
}

.content-section-heading--news {
    align-items: center;
}

.news-section__archive-link {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 6px;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 800;
    border-bottom: 1px solid #afd1f4;
}

.news-section__archive-link span {
    transition: transform 0.3s ease;
}

.news-section__archive-link:hover span {
    transform: translateX(5px);
}

.news-list {
    border-top:
        1px solid var(--color-line);
}

.news-list__item {
    border-bottom:
        1px solid var(--color-line);
}

.news-list__link {
    display: grid;
    grid-template-columns:
        220px
        minmax(0, 1fr)
        45px;
    align-items: center;
    gap: 35px;
    min-height: 105px;
    padding: 20px 24px;
    transition:
        background-color 0.3s ease,
        padding-left 0.3s ease;
}

.news-list__link:hover {
    padding-left: 31px;
    background-color: #f5f9ff;
}

.news-list__meta {
    display: flex;
    align-items: center;
    gap: 15px;
}

.news-list__date {
    color: #667b91;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.news-list__category {
    padding: 5px 12px;
    color: var(--color-primary);
    font-size: 10px;
    font-weight: 800;
    background-color: #edf5ff;
    border: 1px solid #d5e5fa;
    border-radius: 999px;
}

.news-list__title {
    margin: 0;
    color: var(--color-navy);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.8;
}

.news-list__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 37px;
    color: var(--color-primary);
    background-color: #edf5ff;
    border-radius: 50%;
    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        transform 0.3s ease;
}

.news-list__link:hover
.news-list__arrow {
    color: #ffffff;
    background-color:
        var(--color-primary);
    transform: translateX(4px);
}


/* ========================================
   個別記事
======================================== */

.post-page {
    padding: 100px 0 130px;
    background-color: #ffffff;
}

.post-page__inner {
    width: min(
        900px,
        calc(100% - 48px)
    );
    margin-inline: auto;
}

.post-page__back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 45px;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 700;
}

.post-page__label {
    margin: 0 0 14px;
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.post-page__date {
    display: block;
    margin-bottom: 15px;
    color: #718397;
    font-size: 12px;
    font-weight: 700;
}

.post-page__title {
    margin: 0;
    color: var(--color-navy);
    font-size:
        clamp(31px, 4vw, 50px);
    font-weight: 800;
    line-height: 1.5;
}

.post-page__image {
    margin-top: 45px;
    overflow: hidden;
    border-radius: 25px;
}

.post-page__image img {
    display: block;
    width: 100%;
    height: auto;
}

.post-page__content {
    margin-top: 55px;
    color: var(--color-text);
    font-size: 16px;
    line-height: 2.1;
}

.post-page__content > *:first-child {
    margin-top: 0;
}

.post-page__content h2 {
    margin: 55px 0 22px;
    color: var(--color-navy);
    font-size: 28px;
    line-height: 1.55;
}

.post-page__content h3 {
    margin: 40px 0 18px;
    color: var(--color-navy);
    font-size: 22px;
    line-height: 1.6;
}

.post-page__content p {
    margin: 0 0 1.7em;
}

.post-page__content ul,
.post-page__content ol {
    margin-bottom: 1.8em;
    padding-left: 1.5em;
}

.post-page__content img {
    max-width: 100%;
    height: auto;
}


/* ========================================
   お知らせアーカイブ
======================================== */

.news-archive {
    padding: 100px 0 130px;
    background-color: #ffffff;
}

.news-archive__inner {
    width: min(
        var(--content-width),
        calc(100% - 48px)
    );
    margin-inline: auto;
}

.news-archive__header {
    margin-bottom: 55px;
}

.news-archive__label {
    margin: 0 0 12px;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.news-archive__title {
    margin: 0;
    color: var(--color-navy);
    font-size:
        clamp(36px, 4vw, 55px);
    font-weight: 800;
}

.news-pagination {
    margin-top: 50px;
}

.news-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.news-pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 10px;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 700;
    background-color: #edf5ff;
    border-radius: 10px;
}

.news-pagination
.page-numbers.current {
    color: #ffffff;
    background-color:
        var(--color-primary);
}


/* ========================================
   NJES SERVICE NETWORK
   ファーストビュー右側アニメーション
======================================== */

.hero-service-network {
    position: absolute;
    inset: 22px 0 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 50%,
            rgb(3 81 248 / 8%) 0%,
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgb(255 255 255 / 88%) 0%,
            rgb(239 248 255 / 72%) 100%
        );
    border: 1px solid rgb(255 255 255 / 92%);
    border-radius: 38px;
    box-shadow:
        0 35px 80px rgb(19 67 113 / 13%),
        inset 0 1px 0 rgb(255 255 255 / 88%);
    backdrop-filter: blur(13px);
}


/* ========================================
   上部ラベル
======================================== */

.hero-service-network__header {
    position: absolute;
    top: 25px;
    right: 29px;
    left: 29px;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: #5d7287;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.13em;
}

.hero-service-network__header-main {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero-service-network__status {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    background: #39c98c;
    border-radius: 50%;
    box-shadow:
        0 0 0 5px rgb(57 201 140 / 12%);
    animation:
        hero-service-status 2s
        ease-in-out infinite;
}

.hero-service-network__active {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    color: #14805b;
    background: rgb(57 201 140 / 10%);
    border: 1px solid rgb(57 201 140 / 21%);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.1em;
}

@keyframes hero-service-status {
    0%,
    100% {
        opacity: 0.55;
        transform: scale(0.85);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}


/* ========================================
   SVGネットワーク
======================================== */

.hero-service-network__map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-service-network__ring {
    fill: none;
    stroke: url("#heroServiceRingGradient");
    transform-box: view-box;
    transform-origin: center;
}

.hero-service-network__ring--outer {
    stroke-width: 1.2;
    stroke-dasharray: 4 13;
    opacity: 0.16;
    animation:
        hero-service-ring-rotate 34s
        linear infinite;
}

.hero-service-network__ring--middle {
    stroke-width: 1.3;
    stroke-dasharray: 3 9;
    opacity: 0.18;
    animation:
        hero-service-ring-rotate-reverse 25s
        linear infinite;
}

.hero-service-network__ring--inner {
    stroke-width: 1.5;
    opacity: 0.16;
}

@keyframes hero-service-ring-rotate {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes hero-service-ring-rotate-reverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0);
    }
}


/* ========================================
   接続線
======================================== */

.hero-service-network__route {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-dasharray: 7 11;
    opacity: 0.17;
    animation:
        hero-service-route-flow 7s
        linear infinite,
        hero-service-route-active 8s
        ease-in-out infinite;
    animation-delay:
        0s,
        var(--route-delay);
}

.hero-service-network__route--support {
    color: #286ef1;
}

.hero-service-network__route--infrastructure {
    color: #199fc8;
}

.hero-service-network__route--workplace {
    color: #42bda9;
}

.hero-service-network__route--lifecycle {
    color: #dd8b2b;
}

@keyframes hero-service-route-flow {
    to {
        stroke-dashoffset: -180;
    }
}

@keyframes hero-service-route-active {
    0%,
    23%,
    100% {
        opacity: 0.16;
        stroke-width: 1.8;
    }

    4%,
    17% {
        opacity: 0.78;
        stroke-width: 2.7;
    }
}


/* ========================================
   接続点
======================================== */

.hero-service-network__node {
    fill: currentColor;
    stroke: #ffffff;
    stroke-width: 4;
    opacity: 0.65;
    transform-box: fill-box;
    transform-origin: center;
    animation:
        hero-service-node-active 8s
        ease-in-out infinite;
    animation-delay: var(--node-delay);
}

.hero-service-network__node--support {
    color: #286ef1;
}

.hero-service-network__node--infrastructure {
    color: #199fc8;
}

.hero-service-network__node--workplace {
    color: #42bda9;
}

.hero-service-network__node--lifecycle {
    color: #dd8b2b;
}

@keyframes hero-service-node-active {
    0%,
    23%,
    100% {
        opacity: 0.58;
        transform: scale(0.9);
    }

    4%,
    17% {
        opacity: 1;
        transform: scale(1.35);
    }
}


/* ========================================
   中央へ流れる光
======================================== */

.hero-service-network__packet {
    fill: currentColor;
    opacity: 0;
}

.hero-service-network__packet--support {
    color: #286ef1;
}

.hero-service-network__packet--infrastructure {
    color: #199fc8;
}

.hero-service-network__packet--workplace {
    color: #42bda9;
}

.hero-service-network__packet--lifecycle {
    color: #dd8b2b;
}


/* ========================================
   中央のNJES
======================================== */

.hero-service-network__core {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 174px;
    height: 174px;
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #edf6ff 100%
        );
    border: 1px solid rgb(3 81 248 / 13%);
    border-radius: 50%;
    box-shadow:
        0 22px 48px rgb(21 71 119 / 18%),
        inset 0 0 0 12px rgb(3 81 248 / 3%);
    transform: translate(-50%, -50%);
    animation:
        hero-service-core-breathe 2s
        ease-in-out infinite;
}

.hero-service-network__core::before {
    position: absolute;
    inset: -14px;
    content: "";
    border: 1px solid rgb(3 81 248 / 13%);
    border-radius: 50%;
    animation:
        hero-service-core-wave 2s
        ease-out infinite;
}

.hero-service-network__core-ring {
    position: absolute;
    inset: 12px;
    border: 1px dashed rgb(3 81 248 / 15%);
    border-radius: 50%;
    animation:
        hero-service-core-ring 18s
        linear infinite;
}

.hero-service-network__core-bars {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 29px;
    margin-bottom: 8px;
}

.hero-service-network__core-bars span {
    width: 7px;
    height: 20px;
    background:
        linear-gradient(
            180deg,
            #0351f8,
            #56c9ee
        );
    border-radius: 999px;
}

.hero-service-network__core-bars
span:nth-child(2) {
    height: 29px;
}

.hero-service-network__core-bars
span:nth-child(3) {
    height: 15px;
}

.hero-service-network__core-logo {
    position: relative;
    z-index: 2;
    margin: 0;
    font-size: 27px;
    line-height: 1;
    letter-spacing: 0.08em;
}

.hero-service-network__core-text {
    position: relative;
    z-index: 2;
    margin: 7px 0 0;
    color: #72869a;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: 0.15em;
}

@keyframes hero-service-core-breathe {
    0%,
    100% {
        box-shadow:
            0 22px 48px rgb(21 71 119 / 18%),
            inset 0 0 0 12px rgb(3 81 248 / 3%);
    }

    50% {
        box-shadow:
            0 26px 56px rgb(21 71 119 / 23%),
            0 0 34px rgb(3 81 248 / 9%),
            inset 0 0 0 12px rgb(3 81 248 / 4%);
    }
}

@keyframes hero-service-core-wave {
    0% {
        opacity: 0;
        transform: scale(0.88);
    }

    35% {
        opacity: 0.55;
    }

    100% {
        opacity: 0;
        transform: scale(1.15);
    }
}

@keyframes hero-service-core-ring {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}


/* ========================================
   サービス領域カード
======================================== */

.hero-service-network__items {
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
}

.hero-service-network__item {
    --item-color: #286ef1;
    --item-soft: rgb(40 110 241 / 8%);
    --item-border: rgb(40 110 241 / 18%);

    position: absolute;
    display: grid;
    grid-template-columns:
        42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: clamp(180px, 34%, 215px);
    min-height: 76px;
    padding: 11px 15px 11px 11px;
    color: #34506d;
    background: rgb(255 255 255 / 89%);
    border: 1px solid var(--item-border);
    border-radius: 16px;
    box-shadow:
        0 13px 28px rgb(25 72 118 / 9%);
    backdrop-filter: blur(10px);
    opacity: 0.7;
    transform-origin: center;
    animation:
        hero-service-item-active 8s
        ease-in-out infinite;
    animation-delay: var(--item-delay);
}

.hero-service-network__item--support {
    top: 16%;
    left: 4%;
}

.hero-service-network__item--infrastructure {
    top: 19%;
    right: 4%;
    --item-color: #1597c5;
    --item-soft: rgb(21 151 197 / 8%);
    --item-border: rgb(21 151 197 / 19%);
}

.hero-service-network__item--workplace {
    right: 4%;
    bottom: 11%;
    --item-color: #30aa94;
    --item-soft: rgb(48 170 148 / 8%);
    --item-border: rgb(48 170 148 / 19%);
}

.hero-service-network__item--lifecycle {
    bottom: 8%;
    left: 4%;
    --item-color: #d88125;
    --item-soft: rgb(216 129 37 / 8%);
    --item-border: rgb(216 129 37 / 20%);
}

.hero-service-network__item-number {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--item-color);
    background: var(--item-soft);
    border: 1px solid var(--item-border);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.06em;
}

.hero-service-network__item-content {
    display: block;
    min-width: 0;
}

.hero-service-network__item-title {
    display: block;
    color: #2d4864;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.hero-service-network__item-description {
    display: block;
    margin-top: 5px;
    color: #788b9e;
    font-size: 8px;
    font-weight: 700;
    line-height: 1.5;
}

@keyframes hero-service-item-active {
    0%,
    23%,
    100% {
        opacity: 0.68;
        box-shadow:
            0 13px 28px rgb(25 72 118 / 9%);
        transform:
            translateY(0)
            scale(1);
    }

    4%,
    17% {
        opacity: 1;
        border-color: var(--item-color);
        box-shadow:
            0 18px 38px rgb(25 72 118 / 16%),
            0 0 0 4px var(--item-soft);
        transform:
            translateY(-5px)
            scale(1.025);
    }
}


/* ========================================
   フッター
======================================== */

.site-footer {
    position: relative;
    width: 100%;
    overflow: hidden;
    color: #c8d6e6;
    background:
        radial-gradient(
            circle at 10% 0%,
            rgb(3 81 248 / 18%),
            transparent 35%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgb(55 183 233 / 12%),
            transparent 34%
        ),
        #0d2138;
}

.site-footer::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    content: "";
    background:
        linear-gradient(
            90deg,
            transparent,
            rgb(55 183 233 / 70%),
            transparent
        );
}

.site-footer__main {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(180px, 0.72fr)
        minmax(260px, 1fr);
    gap: clamp(36px, 5vw, 72px);
    width: min(
        1200px,
        calc(100% - 64px)
    );
    margin-inline: auto;
    padding: 82px 0 68px;
}

.site-footer__company,
.site-footer__navigation,
.site-footer__contact {
    min-width: 0;
}

.site-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    color: inherit;
    text-decoration: none;
    overflow-wrap: normal;
    word-break: normal;
}

.site-footer__logo-text {
    display: inline-block;
    font-size: 37px;
    line-height: 1;
    letter-spacing: 0.04em;
}

.site-footer__company-name {
    margin: 0;
    color: #ffffff;
    font-family:
        "NJES Company",
        "Yu Gothic",
        "Meiryo",
        sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.site-footer__tagline {
    margin: 27px 0 0;
    color: #6ed6ea;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.site-footer__description {
    max-width: 370px;
    margin: 15px 0 0;
    color: rgb(213 225 238 / 68%);
    font-size: 13px;
    line-height: 2;
}

.site-footer__heading {
    position: relative;
    margin: 0 0 25px;
    padding-left: 34px;
    color: #63cfea;
    font-size: 10px;
    font-weight: 850;
    line-height: 1.5;
    letter-spacing: 0.18em;
}

.site-footer__heading::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 23px;
    height: 1px;
    content: "";
    background:
        linear-gradient(
            90deg,
            #2688f2,
            #5bd2eb
        );
    transform: translateY(-50%);
}

.site-footer__navigation {
    margin: 0;
}

.site-footer__menu {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__menu-item {
    margin: 0;
    border-bottom:
        1px solid rgb(255 255 255 / 9%);
}

.site-footer__menu-item:first-child {
    border-top:
        1px solid rgb(255 255 255 / 9%);
}

.site-footer__menu-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 48px;
    padding: 0 4px;
    color: rgb(223 233 244 / 75%);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: normal;
    word-break: normal;
    transition:
        color 0.25s ease,
        padding-left 0.25s ease;
}

.site-footer__menu-item a:hover,
.site-footer__menu-item a.is-current {
    padding-left: 9px;
    color: #ffffff;
}

.site-footer__menu-arrow {
    color: #52c8e7;
    font-size: 13px;
    transition: transform 0.25s ease;
}

.site-footer__menu-item a:hover
.site-footer__menu-arrow {
    transform: translateX(5px);
}

.site-footer__contact {
    position: relative;
    padding: 29px;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            rgb(255 255 255 / 8%),
            rgb(255 255 255 / 3%)
        );
    border:
        1px solid rgb(255 255 255 / 11%);
    border-radius: 20px;
    box-shadow:
        0 20px 45px rgb(0 10 28 / 20%);
}

.site-footer__contact::before {
    position: absolute;
    top: -90px;
    right: -80px;
    width: 190px;
    height: 190px;
    content: "";
    background:
        radial-gradient(
            circle,
            rgb(55 183 233 / 18%),
            transparent 70%
        );
    border-radius: 50%;
    pointer-events: none;
}

.site-footer__contact > * {
    position: relative;
    z-index: 1;
}

.site-footer__contact-title {
    margin: 0;
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.65;
    letter-spacing: 0.03em;
}

.site-footer__contact-text {
    margin: 15px 0 0;
    color: rgb(220 231 243 / 65%);
    font-size: 12px;
    line-height: 1.9;
}

.site-footer__contact-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    width: 100%;
    min-height: 54px;
    margin-top: 24px;
    padding: 0 18px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #0351f8,
            #1597d4
        );
    border-radius: 10px;
    box-shadow:
        0 12px 27px rgb(3 81 248 / 23%);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition:
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.site-footer__contact-button:hover {
    box-shadow:
        0 17px 34px rgb(3 81 248 / 32%);
    transform: translateY(-3px);
}

.site-footer__contact-arrow {
    display: grid;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    place-items: center;
    background: rgb(255 255 255 / 15%);
    border-radius: 50%;
    transition: transform 0.25s ease;
}

.site-footer__contact-button:hover
.site-footer__contact-arrow {
    transform: translateX(4px);
}

.site-footer__bottom {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);
    align-items: center;
    gap: 30px;
    width: min(
        1200px,
        calc(100% - 64px)
    );
    margin-inline: auto;
    padding: 25px 0 28px;
    border-top:
        1px solid rgb(255 255 255 / 10%);
}

.site-footer__bottom-logo {
    justify-self: start;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0.07em;
}

/* ========================================
   フッター下部・規約リンク
======================================== */

.site-footer__legal-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    gap: 10px;
}

.site-footer__legal-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 0;
}

.site-footer__legal-link {
    position: relative;
    padding: 0 15px;
    color: rgb(221 231 241 / 62%);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.7;
    white-space: nowrap;
    transition: color 0.25s ease;
}

.site-footer__legal-link:not(:first-child) {
    border-left:
        1px solid rgb(255 255 255 / 16%);
}

.site-footer__legal-link:hover {
    color: #ffffff;
}

.site-footer__copyright {
    width: auto;
    margin: 0;
    padding: 0;
    color: rgb(221 231 241 / 43%);
    border: 0;
    font-size: 10px;
    line-height: 1.7;
    text-align: center;
    white-space: nowrap;
}

.site-footer__page-top {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 8px;
    color: rgb(221 231 241 / 53%);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 0.12em;
    transition: color 0.25s ease;
}

.site-footer__page-top span {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    color: #58cbe7;
    border:
        1px solid rgb(88 203 231 / 30%);
    border-radius: 50%;
    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s ease;
}

.site-footer__page-top:hover {
    color: #ffffff;
}

.site-footer__page-top:hover span {
    color: #ffffff;
    background: #148cc7;
    transform: translateY(-3px);
}


/* ========================================
   レスポンシブ：1100px以下
======================================== */

@media (max-width: 1100px) {
    .hero__scroll {
        display: none;
    }

    .hero-service-network__header {
        font-size: 11px;
    }

    .hero-service-network__active {
        min-height: 26px;
        padding-inline: 11px;
        font-size: 9px;
    }

    .hero-service-network__item {
        width: clamp(170px, 33%, 200px);
    }

    .hero-service-network__item-number {
        font-size: 10px;
    }

    .hero-service-network__item-title {
        font-size: 10px;
    }

    .hero-service-network__item-description {
        font-size: 7.5px;
    }
}


/* ========================================
   レスポンシブ：タブレット（960px以下）
======================================== */

@media (max-width: 960px) {
    /* ========================================
       タブレット・スマートフォン用ヘッダー
    ======================================== */


    :root {
        --header-height: 70px;
    }

    .site-header {
        position: relative;
        width: 100%;
    }

    .header-inner {
        position: relative;
        gap: 12px;
        width: calc(100% - 32px);
        min-height: var(--header-height);
    }

    .site-header .site-logo {
        min-width: 0;
        margin-right: auto;
        gap: 9px;
    }

    .site-header .site-logo__main {
        flex: 0 0 auto;
        font-size: 27px;
    }

    .site-header .site-logo__company-name {
        flex: 0 1 auto;
        min-width: 0;
        color: #12233a;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.35;
        letter-spacing: 0.02em;
        white-space: nowrap;
    }


    /* ハンバーガーボタンを表示 */

    .menu-button {
        position: relative;
        display: block;
        width: 44px;
        height: 44px;
        margin-left: auto;
        flex: 0 0 44px;
        padding: 0;
        background: #f3f8ff;
        border: 1px solid #d6e5f5;
        border-radius: 10px;
    }


    /* メニューをヘッダーの下に配置 */

    .global-navigation {
        position: absolute;
        top: 100%;
        right: -16px;
        left: -16px;
        z-index: 1000;

        display: block;
        margin: 0;
        padding: 10px 20px 22px;

        visibility: hidden;
        opacity: 0;

        background: #ffffff;
        border-top: 1px solid #e2ebf4;
        box-shadow:
            0 18px 35px rgb(20 66 108 / 14%);

        pointer-events: none;
        transform: translateY(-10px);

        transition:
            visibility 0.25s ease,
            opacity 0.25s ease,
            transform 0.25s ease;
    }

    .global-navigation.is-open {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .global-navigation__list {
        display: grid;
        width: 100%;
        gap: 0;
        margin: 0;
        padding: 0;
    }

    .global-navigation__list li {
        width: 100%;
        margin: 0;
        border-bottom: 1px solid #e2ebf4;
    }

    .global-navigation__list a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 56px;
        padding: 0 5px;
        color: #263e5a;
        font-size: 14px;
        font-weight: 700;
        white-space: normal;
    }

    .global-navigation__list a::after {
        position: static;
        display: block;
        width: auto;
        height: auto;
        margin: 0;
        content: "→";
        color: var(--color-primary);
        background: none;
        transform: none;
    }

    .global-navigation__list a:hover::after,
    .global-navigation__list
    .current-menu-item > a::after {
        width: auto;
    }


    /* お問い合わせメニュー */

    .global-navigation__item--contact {
        padding-top: 12px;
        border-bottom: 0;
    }

    .global-navigation__item--contact a,
    .global-navigation__list
    .global-navigation__item--contact a {
        justify-content: space-between;
        min-height: 52px;
        padding: 0 18px;
        color: #ffffff;
        background:
            linear-gradient(
                135deg,
                #0351f8,
                #1188d7
            );
        border-radius: 9px;
    }

    .global-navigation__item--contact a::after {
        color: #ffffff;
    }

    /* ========================================
       タブレット用ファーストビュー
    ======================================== */


    .hero {
        min-height: auto;
    }

    .hero__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 45px;
        width: calc(100% - 40px);
        padding: 75px 0 90px;
    }

    .hero__content {
        width: 100%;
        min-width: 0;
        max-width: 700px;
    }

    .hero__title-en {
        font-size: clamp(48px, 9vw, 72px);
        line-height: 1.05;
        letter-spacing: -0.035em;
        overflow-wrap: normal;
        word-break: normal;
    }

    .hero__title-accent {
        overflow-wrap: normal;
        word-break: normal;
    }

    .hero__title-ja {
        font-size: clamp(24px, 4vw, 32px);
    }

    .hero-visual {
        width: min(100%, 650px);
        min-height: 500px;
        margin-inline: auto;
    }

    /* ========================================
       トップページ中段
       タブレット・スマートフォン最終修正
    ======================================== */


    /* ========================================
       タブレット
    ======================================== */


    /* ABOUT NJES */

    .about-njes__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-njes__content {
        max-width: 760px;
        padding-top: 0;
    }


    /* サービス見出し */

    .services-section__header {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 25px;
    }

    .services-section__introduction {
        width: 100%;
        max-width: 760px;
        justify-self: start;
    }


    /* サービスカード */

    .service-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* サービス詳細 */

    .service-details {
        padding: 46px;
    }


    /* ピックアップ・お知らせ見出し */

    .content-section-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
    }

    .content-section-heading__description {
        max-width: 720px;
    }

    .hero-motion-title {
        gap: 0.06em 0.16em;
    }

    .hero-motion-title__and {
        width: 3.15em;
        min-width: 3.15em;
        height: 3.15em;
        flex-basis: 3.15em;
    }

    .site-footer__main {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(250px, 0.9fr);
        gap: 55px 45px;
        width: calc(100% - 48px);
        padding: 65px 0 55px;
    }

    .site-footer__company {
        grid-column: 1 / -1;
    }

    .site-footer__description {
        max-width: 600px;
    }

    .site-footer__bottom {
        width: calc(100% - 48px);
    }
}


/* ========================================
   レスポンシブ：スマートフォン（700px以下）
======================================== */

@media (max-width: 700px) {
    .hero__title-accent::after {
        bottom: -5px;
        height: 4px;
    }

    /* ========================================
       ピックアップ：スマートフォン
    ======================================== */


    .pickup-card__visual,
    .pickup-slider__viewport {
        border-radius: 18px;
    }

    .pickup-card__overlay {
        background:
            linear-gradient(
                180deg,
                rgb(0 10 25 / 2%) 0%,
                rgb(0 10 25 / 18%) 40%,
                rgb(0 10 25 / 82%) 100%
            );
    }

    .pickup-card__content {
        right: 12px;
        bottom: 12px;
        left: 12px;
        width: auto;
        padding: 15px 16px;
        border-radius: 12px;
        backdrop-filter: blur(4px);
    }

    .pickup-card__date {
        margin-bottom: 5px;
        font-size: 9px;
    }

    .pickup-card__title {
        font-size:
            clamp(16px, 5vw, 23px);
        line-height: 1.45;
        text-shadow:
            0 2px 4px rgb(0 0 0 / 85%),
            0 4px 12px rgb(0 0 0 / 65%);
    }

    .pickup-card__excerpt {
        display: none;
    }

    .pickup-card__more {
        margin-top: 8px;
        font-size: 10px;
    }

    .pickup-slider__footer {
        margin-top: 18px;
    }

    .pickup-slider__button {
        width: 42px;
        height: 42px;
    }

    /* ========================================
       スマートフォン用ファーストビュー
    ======================================== */


    :root {
        --header-height: 66px;
    }

    .header-inner {
        width: calc(100% - 24px);
        min-height: var(--header-height);
    }

    .site-header .site-logo {
        gap: 7px;
    }

    .site-header .site-logo__main {
        font-size: 24px;
    }

    .site-header .site-logo__company-name {
        max-width: none;
        font-size: 10px;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .menu-button {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .global-navigation {
        right: -12px;
        left: -12px;
        padding-right: 16px;
        padding-left: 16px;
    }


    /* ファーストビュー */

    .hero {
        display: block;
        min-height: auto;
    }

    .hero__inner {
        display: block;
        width: calc(100% - 28px);
        padding: 62px 0 72px;
    }

    .hero__content {
        width: 100%;
        max-width: none;
    }

    .hero__eyebrow {
        gap: 10px;
        margin-bottom: 18px;
        font-size: 10px;
        letter-spacing: 0.14em;
        overflow-wrap: normal;
        word-break: normal;
    }

    .hero__eyebrow-line {
        width: 32px;
        flex: 0 0 32px;
    }

    .hero__title {
        width: 100%;
    }

    .hero__title-en {
        display: block;
        width: 100%;
        font-size: clamp(42px, 13vw, 57px);
        line-height: 1.02;
        letter-spacing: -0.045em;
        overflow-wrap: normal;
        word-break: normal;
    }

    .hero__title-accent {
        display: inline-block;
        overflow-wrap: normal;
        word-break: normal;
    }

    .hero__title-ja {
        margin-top: 27px;
        font-size: 22px;
        line-height: 1.65;
    }

    .hero__description {
        margin-top: 22px;
        font-size: 13px;
        line-height: 1.95;
    }

    .hero__actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 11px;
        margin-top: 30px;
    }

    .hero-button {
        width: 100%;
        min-width: 0;
        min-height: 55px;
    }


    /*
     * スマートフォンでは右側の大きな図を非表示。
     * ページが極端に縦長になることを防ぐ。
     */

    .hero-visual {
        display: none;
    }

    .hero__scroll {
        display: none;
    }


    /* トップページ内側の共通幅 */

    .container,
    .about-njes__inner,
    .services-section__inner,
    .pickup-section__inner,
    .news-section__inner {
        width: calc(100% - 28px);
    }

    /* ========================================
       スマートフォン
    ======================================== */


    /* ====================================
       ABOUT NJES
    ==================================== */

    .about-njes {
        padding: 76px 0;
    }

    .about-njes::before {
        height: 55px;
    }

    .about-njes__inner {
        grid-template-columns: 1fr;
        gap: 26px;
        width: calc(100% - 28px);
    }

    .about-njes__heading,
    .about-njes__content {
        width: 100%;
        min-width: 0;
    }

    .about-njes__label {
        gap: 10px;
        margin-bottom: 16px;
        font-size: 10px;
        letter-spacing: 0.14em;
    }

    .about-njes__label-line {
        width: 32px;
        flex: 0 0 32px;
    }

    .about-njes__title {
        width: 100%;
        font-size: 31px;
        line-height: 1.55;
        letter-spacing: 0.025em;
        overflow-wrap: normal;
        word-break: normal;
    }

    .about-njes__content {
        max-width: none;
        padding-top: 0;
    }

    .about-njes__lead {
        margin-bottom: 20px;
        font-size: 19px;
        line-height: 1.75;
        overflow-wrap: normal;
        word-break: normal;
    }

    .about-njes__text {
        margin-bottom: 14px;
        font-size: 13px;
        line-height: 2;
        overflow-wrap: normal;
        word-break: normal;
    }

    .about-njes__link {
        gap: 20px;
        margin-top: 22px;
        font-size: 12px;
    }


    /* ====================================
       サービスセクション
    ==================================== */

    .services-section {
        padding: 78px 0 84px;
    }

    .services-section__inner {
        width: calc(100% - 28px);
    }

    .services-section__header {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 21px;
        margin-bottom: 31px;
    }

    .services-section__heading,
    .services-section__introduction {
        width: 100%;
        min-width: 0;
    }

    .services-section__label {
        gap: 10px;
        margin-bottom: 14px;
        font-size: 10px;
        letter-spacing: 0.14em;
    }

    .services-section__label span {
        width: 32px;
        flex: 0 0 32px;
    }

    .services-section__title {
        width: 100%;
        font-size: 32px;
        line-height: 1.4;
        letter-spacing: 0.03em;
        overflow-wrap: normal;
        word-break: normal;
    }

    .services-section__introduction {
        max-width: none;
        justify-self: stretch;
    }

    .services-section__lead {
        margin-bottom: 12px;
        font-size: 18px;
        line-height: 1.75;
        overflow-wrap: normal;
        word-break: normal;
    }

    .services-section__description {
        font-size: 13px;
        line-height: 2;
        overflow-wrap: normal;
        word-break: normal;
    }


    /* ====================================
       サービス絞り込みボタン
    ==================================== */

    .service-filter {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 9px;
        margin-bottom: 27px;
    }

    .service-filter__button {
        width: 100%;
        min-width: 0;
        min-height: 43px;
        padding: 0 10px;
        font-size: 11px;
        white-space: nowrap;
    }

    .service-filter__button:hover {
        transform: none;
    }


    /* ====================================
       サービスカード
    ==================================== */

    .service-grid {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .services-section .service-card {
        width: 100%;
        min-width: 0;
        border-radius: 17px;
    }

    .services-section .service-card:hover {
        transform: none;
    }

    .services-section .service-card__link {
        width: 100%;
        min-height: 0;
        padding: 22px 20px 24px;
    }

    .services-section .service-card__top {
        gap: 12px;
    }

    .services-section .service-card__number {
        font-size: 10px;
    }

    .services-section .service-card__category {
        min-height: 25px;
        padding: 0 9px;
        font-size: 8px;
    }

    .services-section .service-card__icon {
        width: 92px;
        height: 92px;
        margin: 19px 0 15px;
        border-radius: 19px;
    }

    .services-section .service-card__icon img {
        width: 76px;
        height: 76px;
    }

    .services-section .service-card__title {
        margin: 0;
        font-size: 18px;
        line-height: 1.55;
        overflow-wrap: normal;
        word-break: normal;
    }

    .services-section .service-card__summary {
        margin-top: 10px;
        font-size: 13px;
        line-height: 1.9;
        overflow-wrap: normal;
        word-break: normal;
    }

    .services-section .service-card__more {
        padding-top: 18px;
        font-size: 10px;
    }


    /* ====================================
       サービス詳細
    ==================================== */

    .service-details {
        margin-top: 68px;
        padding: 28px 18px;
        border-radius: 18px;
    }

    .service-details__header {
        margin-bottom: 27px;
    }

    .service-details__title {
        font-size: 28px;
        line-height: 1.5;
        overflow-wrap: normal;
        word-break: normal;
    }

    .service-details__description {
        font-size: 13px;
        line-height: 1.9;
    }

    .service-accordion__button {
        grid-template-columns:
            38px
            minmax(0, 1fr)
            35px;
        gap: 11px;
        min-height: 85px;
        padding: 15px 4px;
    }

    .service-accordion__button:hover,
    .service-accordion__button[
        aria-expanded="true"
    ] {
        padding-left: 8px;
    }

    .service-accordion__number {
        font-size: 10px;
    }

    .service-accordion__category {
        font-size: 8px;
    }

    .service-accordion__name {
        font-size: 14px;
        line-height: 1.55;
        overflow-wrap: normal;
        word-break: normal;
    }

    .service-accordion__mark {
        width: 33px;
        height: 33px;
    }

    .service-accordion__content {
        padding: 16px 10px 29px;
    }

    .service-accordion__lead {
        margin-bottom: 18px;
        font-size: 13px;
        line-height: 1.9;
    }

    .service-accordion__list {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .service-accordion__list li {
        font-size: 12px;
    }

    .service-accordion__contact {
        width: 100%;
        justify-content: space-between;
        margin-top: 23px;
    }


    /* ====================================
       ピックアップ
    ==================================== */

    .pickup-section {
        padding: 78px 0;
    }

    .pickup-section__inner {
        width: calc(100% - 28px);
    }

    .content-section-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 17px;
        margin-bottom: 31px;
    }

    .content-section-heading__main {
        width: 100%;
        min-width: 0;
    }

    .content-section-heading__title {
        font-size: 32px;
        overflow-wrap: normal;
        word-break: normal;
    }

    .content-section-heading__description {
        width: 100%;
        max-width: none;
        font-size: 13px;
        line-height: 1.9;
    }


    /* ====================================
       お知らせ
    ==================================== */

    .news-section {
        padding: 78px 0 84px;
    }

    .news-section__inner {
        width: calc(100% - 28px);
    }

    .content-section-heading--news {
        align-items: flex-start;
    }

    .news-section__archive-link {
        font-size: 12px;
    }

    .news-list__link {
        grid-template-columns:
            minmax(0, 1fr)
            37px;
        gap: 13px;
        min-height: 0;
        padding: 20px 4px;
    }

    .news-list__meta {
        grid-column: 1 / -1;
        gap: 10px;
    }

    .news-list__title {
        grid-column: 1;
        margin: 0;
        font-size: 14px;
        line-height: 1.75;
        overflow-wrap: normal;
        word-break: normal;
    }

    .news-list__arrow {
        grid-column: 2;
        align-self: center;
    }

    .news-list__link:hover {
        padding-left: 4px;
    }

    .hero-motion-title {
        display: grid;
        grid-template-columns:
            max-content
            max-content;
        align-items: center;
        justify-content: start;
        column-gap: 0.14em;
        row-gap: 0.04em;
    }

    .hero-motion-title__mask--trust {
        grid-column: 1;
        grid-row: 1;
    }

    .hero-motion-title__and {
        grid-column: 2;
        grid-row: 1;
        width: 3.3em;
        min-width: 3.3em;
        height: 3.3em;
        flex-basis: 3.3em;
        margin: 0;
    }

    .hero-motion-title__mask--technology {
        grid-column: 1 / -1;
        grid-row: 2;
        min-width: 0;
        margin-bottom: -0.3em;
        padding-bottom: 0.3em;
    }

    .hero-motion-title__word--technology {
        padding-bottom: 0.08em;
        font-size: 0.83em;
        line-height: 1.1;
        letter-spacing: -0.05em;
    }

    .site-footer__main {
        grid-template-columns: 1fr;
        gap: 47px;
        width: calc(100% - 28px);
        padding: 56px 0 45px;
    }

    .site-footer__company {
        grid-column: auto;
        text-align: left;
    }

    .site-footer__brand {
        justify-content: flex-start;
        gap: 12px;
    }

    .site-footer__logo-text {
        font-size: 31px;
        transform-origin: left center;
    }

    .site-footer__company-name {
        font-size: 13px;
    }

    .site-footer__tagline {
        margin-top: 22px;
    }

    .site-footer__description {
        max-width: none;
        font-size: 12px;
    }

    .site-footer__heading {
        margin-bottom: 20px;
    }

    .site-footer__contact {
        padding: 25px 21px;
        border-radius: 17px;
    }

    .site-footer__contact-title {
        font-size: 19px;
    }

    .site-footer__bottom {
        display: flex;
        flex-direction: column;
        gap: 18px;
        width: calc(100% - 28px);
        padding: 25px 0 28px;
        text-align: center;
    }


    .site-footer__copyright {
        order: 3;
        white-space: normal;
    }
}


/* ========================================
   レスポンシブ：小さいスマートフォン（390px以下）
======================================== */

@media (max-width: 390px) {
    /* ========================================
       小さいスマートフォン
    ======================================== */


    .site-header .site-logo__main {
        font-size: 22px;
    }

    .site-header .site-logo__company-name {
        font-size: 9px;
    }

    .menu-button {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .hero__inner {
        width: calc(100% - 24px);
        padding: 54px 0 64px;
    }

    .hero__title-en {
        font-size: 40px;
    }

    .hero__title-ja {
        font-size: 20px;
    }

    /* ========================================
       小さいスマートフォン
    ======================================== */


    .about-njes__inner,
    .services-section__inner,
    .pickup-section__inner,
    .news-section__inner {
        width: calc(100% - 24px);
    }

    .about-njes__title {
        font-size: 28px;
    }

    .services-section__title,
    .content-section-heading__title {
        font-size: 29px;
    }

    .service-filter__button {
        min-height: 41px;
        font-size: 10px;
    }

    .services-section .service-card__link {
        padding: 20px 17px 22px;
    }

    .services-section .service-card__icon {
        width: 84px;
        height: 84px;
    }

    .services-section .service-card__icon img {
        width: 69px;
        height: 69px;
    }

    .hero-motion-title {
        column-gap: 0.1em;
    }

    .hero-motion-title__and {
        width: 3em;
        min-width: 3em;
        height: 3em;
        flex-basis: 3em;
        font-size: 0.21em;
    }

    .hero-motion-title__word--technology {
        font-size: 0.76em;
    }

    .site-footer__main,
    .site-footer__bottom {
        width: calc(100% - 24px);
    }

    .site-footer__brand {
        gap: 9px;
    }

    .site-footer__logo-text {
        font-size: 28px;
    }

    .site-footer__company-name {
        font-size: 12px;
    }
}


/* ========================================
   動きを減らす設定
======================================== */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .hero-motion-title__word--trust,
    .hero-motion-title__word--technology,
    .hero-motion-title__and {
        opacity: 1;
        animation: none !important;
        transform: none;
    }

    .hero-motion-title
    .hero__title-accent::after {
        opacity: 1;
        animation: none !important;
        transform: scaleX(1);
    }

    .hero-service-network__route {
        opacity: 0.35;
    }

    .hero-service-network__node,
    .hero-service-network__item {
        opacity: 1;
    }

    .hero-service-network__packet {
        display: none;
    }
}

@media (max-width: 700px) {
    .site-footer__legal-area {
        order: 3;
        width: 100%;
        gap: 14px;
    }

    .site-footer__legal-links {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .site-footer__legal-link {
        width: 100%;
        padding: 3px 0;
        text-align: center;
        white-space: normal;
    }

    .site-footer__legal-link:not(:first-child) {
        border-left: 0;
    }

    .site-footer__copyright {
        white-space: normal;
    }

    .site-footer__page-top {
        order: 2;
    }
}

/* ========================================
   ファーストビュー：ブランドメッセージ
   TRUST AND TECHNOLOGY
======================================== */

/*
 * TRUST AND TECHNOLOGY をファーストビューの主役にする。
 * 左寄せの大型タイポグラフィ + 右側の薄い背景アート。
 */

.hero {
    min-height: 1280px;
}

.hero__inner {
    display: block;
    padding: 72px 0 100px;
}

.hero__headline {
    position: relative;
    z-index: 10;
    width: 100%;
}

.hero-brand-layout {
    position: relative;
    width: 100%;
    min-height: 525px;
    isolation: isolate;
}

/* ========================================
   大型タイトル
======================================== */

.hero-brand-title {
    position: relative;
    z-index: 3;
    width: min(100%, 1120px);
    margin: 0;
    color: var(--color-navy);
    font-family:
        "Arial Black",
        "Helvetica Neue",
        Arial,
        sans-serif;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.075em;
}

.hero-brand-title__line {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: max-content;
    max-width: 100%;
    margin: 0;

    /*
     * 大型英字のディセンダーやアンチエイリアスが
     * 下端で切れないように余白を確保する。
     */
    padding: 0.06em 0.08em 0.20em 0;
    overflow: visible;
}

.hero-brand-title__line--trust {
    justify-content: flex-start;
}

.hero-brand-title__line--technology {
    justify-content: flex-start;
    margin-top: -0.10em;
}

.hero-brand-title__word {
    display: inline-block;
    white-space: nowrap;
    will-change: opacity, transform;
}

.hero-brand-title__line--trust
.hero-brand-title__word {
    font-size:
        clamp(
            170px,
            15.3vw,
            285px
        );
    line-height: 0.92;
    letter-spacing: -0.075em;
    opacity: 0;
    transform: translate3d(-9vw, 0, 0);
}

.hero-brand-title__line--technology
.hero-brand-title__word {
    font-size:
        clamp(
            116px,
            10.7vw,
            195px
        );
    line-height: 0.98;
    letter-spacing: -0.082em;
    opacity: 0;
    transform: translate3d(9vw, 0, 0);
}

/* ========================================
   TRUST横のアクセント
======================================== */

.hero-brand-title__symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    margin: 0 0 0.12em 0.11em;
    color: var(--color-primary);
    font-family:
        Arial,
        sans-serif;
    font-size:
        clamp(
            42px,
            4.2vw,
            74px
        );
    font-weight: 400;
    line-height: 1;
    opacity: 0;
    transform: scale(0.25) rotate(-80deg);
    will-change: opacity, transform;
}

/* ========================================
   AND
======================================== */

.hero-brand-title__connector {
    display: flex;
    align-items: center;
    gap: 15px;
    width: min(310px, 42vw);
    margin:
        -0.03em
        0
        0.04em
        clamp(
            48px,
            7vw,
            110px
        );
}

.hero-brand-title__connector-line {
    display: block;
    width: clamp(74px, 8vw, 120px);
    height: 2px;
    flex: 0 0 auto;
    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            var(--color-cyan)
        );
    border-radius: 999px;
    transform: scaleX(0);
    transform-origin: left center;
}

.hero-brand-title__and {
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.30em;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-18px);
}

/* ========================================
   横スライドアニメーション
======================================== */

body.is-page-loaded
.hero-brand-title__line--trust
.hero-brand-title__word {
    animation:
        hero-brand-trust-in
        1.15s
        cubic-bezier(0.16, 1, 0.3, 1)
        0.08s
        both;
}

body.is-page-loaded
.hero-brand-title__line--technology
.hero-brand-title__word {
    animation:
        hero-brand-technology-in
        1.25s
        cubic-bezier(0.16, 1, 0.3, 1)
        0.25s
        both;
}

body.is-page-loaded
.hero-brand-title__symbol {
    animation:
        hero-brand-symbol-in
        0.68s
        cubic-bezier(0.34, 1.56, 0.64, 1)
        0.72s
        both;
}

body.is-page-loaded
.hero-brand-title__connector-line {
    animation:
        hero-brand-connector-line-in
        0.72s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.70s
        both;
}

body.is-page-loaded
.hero-brand-title__and {
    animation:
        hero-brand-and-in
        0.62s
        ease
        0.88s
        both;
}

@keyframes hero-brand-trust-in {
    0% {
        opacity: 0;
        transform: translate3d(-9vw, 0, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes hero-brand-technology-in {
    0% {
        opacity: 0;
        transform: translate3d(9vw, 0, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes hero-brand-symbol-in {
    0% {
        opacity: 0;
        transform: scale(0.25) rotate(-80deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

@keyframes hero-brand-connector-line-in {
    0% {
        transform: scaleX(0);
    }

    100% {
        transform: scaleX(1);
    }
}

@keyframes hero-brand-and-in {
    0% {
        opacity: 0;
        transform: translateX(-18px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ========================================
   右側の薄い背景アート
======================================== */

.hero-brand-art {
    position: absolute;
    top: 48%;
    right: -55px;
    z-index: 1;
    width: min(40vw, 510px);
    aspect-ratio: 1;
    opacity: 0.68;
    pointer-events: none;
    transform: translateY(-50%);
    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgb(0 0 0 / 38%) 28%,
            #000 55%,
            #000 100%
        );
    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgb(0 0 0 / 38%) 28%,
            #000 55%,
            #000 100%
        );
}

.hero-brand-art__circle {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgb(3 81 248 / 13%);
    border-radius: 50%;
    transform:
        translate(-50%, -50%);
}

.hero-brand-art__circle--outer {
    width: 100%;
    height: 100%;
    border-style: dashed;
    animation:
        hero-brand-art-rotate
        36s
        linear infinite;
}

.hero-brand-art__circle--middle {
    width: 72%;
    height: 72%;
    border-color: rgb(55 183 233 / 18%);
    animation:
        hero-brand-art-rotate-reverse
        27s
        linear infinite;
}

.hero-brand-art__circle--inner {
    width: 42%;
    height: 42%;
    background:
        radial-gradient(
            circle,
            rgb(3 81 248 / 8%),
            transparent 70%
        );
    border-color: rgb(3 81 248 / 15%);
}

.hero-brand-art__text {
    position: absolute;
    top: 50%;
    left: 50%;
    color: rgb(3 81 248 / 7%);
    font-family: var(--font-logo);
    font-size:
        clamp(
            78px,
            8.5vw,
            135px
        );
    font-style: italic;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
    transform:
        translate(-50%, -50%);
    display: inline-block;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

.hero-brand-art__line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 116%;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgb(3 81 248 / 17%),
            transparent
        );
    transform-origin: center;
}

.hero-brand-art__line--01 {
    transform:
        translate(-50%, -50%)
        rotate(0deg);
}

.hero-brand-art__line--02 {
    transform:
        translate(-50%, -50%)
        rotate(60deg);
}

.hero-brand-art__line--03 {
    transform:
        translate(-50%, -50%)
        rotate(-60deg);
}

.hero-brand-art__dot {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--color-primary);
    border: 3px solid #ffffff;
    border-radius: 50%;
    box-shadow:
        0 0 0 5px rgb(3 81 248 / 7%);
}

.hero-brand-art__dot--01 {
    top: 14%;
    left: 51%;
}

.hero-brand-art__dot--02 {
    right: 9%;
    bottom: 28%;
    background: var(--color-cyan);
}

.hero-brand-art__dot--03 {
    bottom: 12%;
    left: 29%;
}

@keyframes hero-brand-art-rotate {
    from {
        transform:
            translate(-50%, -50%)
            rotate(0);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}

@keyframes hero-brand-art-rotate-reverse {
    from {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(0);
    }
}

/* ========================================
   タイトル下部
   日本語コピー + NJES SERVICE NETWORK
======================================== */
.hero__lower {
    position: relative;
    z-index: 4;

    display: grid;

    grid-template-columns:
        minmax(320px, 0.72fr)
        minmax(520px, 1.28fr);

    align-items: stretch;

    gap: 80px;

    margin-top: 72px;
}


/* ========================================
   左側キャッチコピー
   NETWORKの高さを基準に縦中央へ配置
======================================== */

.hero__lower .hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;

    width: 100%;
    max-width: 500px;
    min-height: 570px;

    padding-top: 0;
    padding-bottom: 0;
}


.hero__lower .hero__title-ja {
    margin: 0;

    font-size:
        clamp(
            26px,
            2.35vw,
            36px
        );

    line-height: 1.6;
}


/* ========================================
   右側 NJES SERVICE NETWORK
======================================== */

.hero-visual {
    position: relative;

    width: 100%;
    min-width: 0;
    min-height: 570px;

    margin-top: 0;
}

/* ========================================
   タブレット
======================================== */

@media (max-width: 1100px) {
    .hero {
        min-height: 1160px;
    }

    .hero-brand-layout {
        min-height: 455px;
    }

    .hero-brand-title__line--trust
    .hero-brand-title__word {
        font-size:
            clamp(
                138px,
                15.1vw,
                190px
            );
    }

    .hero-brand-title__line--technology
    .hero-brand-title__word {
        font-size:
            clamp(
                92px,
                10.5vw,
                132px
            );
    }

    .hero-brand-art {
        right: -80px;
        width: min(41vw, 430px);
        opacity: 0.58;
    }

    .hero__lower {
        grid-template-columns:
            minmax(280px, 0.72fr)
            minmax(460px, 1.28fr);
        align-items: stretch;
        gap: 52px;
        margin-top: 48px;
    }

    .hero__lower .hero__content {
        min-height: 530px;
    }

    .hero-visual {
        min-height: 530px;
        margin-top: 0;
    }
}

@media (max-width: 960px) {
    .hero {
        min-height: auto;
    }

    .hero__inner {
        width: calc(100% - 40px);
        padding: 64px 0 88px;
    }

    .hero-brand-layout {
        min-height: 430px;
    }

    .hero-brand-title {
        width: 100%;
    }

    .hero-brand-title__line--trust
    .hero-brand-title__word {
        font-size:
            clamp(
                125px,
                18vw,
                170px
            );
    }

    .hero-brand-title__line--technology
    .hero-brand-title__word {
        font-size:
            clamp(
                84px,
                12.1vw,
                116px
            );
    }

    .hero-brand-title__connector {
        margin-left: 48px;
    }

    .hero-brand-art {
        right: -105px;
        width: 410px;
        opacity: 0.46;
    }

    .hero__lower {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 45px;
        margin-top: 42px;
    }

    .hero__lower .hero__content {
        display: block;
        width: 100%;
        max-width: 680px;
        min-height: 0;
        padding-top: 0;
    }

    .hero-visual {
        width: min(100%, 680px);
        min-height: 560px;
        margin: 25px auto 0;
    }
}

/* ========================================
   スマートフォン
======================================== */

@media (max-width: 700px) {
    .hero {
        min-height: auto;
    }

    .hero__inner {
        width: calc(100% - 28px);
        padding: 48px 0 72px;
    }

    .hero__eyebrow {
        margin-bottom: 24px;
    }

    .hero-brand-layout {
        min-height: 315px;
    }

    .hero-brand-title {
        width: 100%;
    }

    .hero-brand-title__line {
        padding-bottom: 0.18em;
    }

    .hero-brand-title__line--trust
    .hero-brand-title__word {
        font-size:
            clamp(
                78px,
                24vw,
                108px
            );
        line-height: 0.94;
    }

    .hero-brand-title__line--technology {
        margin-top: -0.06em;
    }

    .hero-brand-title__line--technology
    .hero-brand-title__word {
        font-size:
            clamp(
                49px,
                15.2vw,
                69px
            );
        line-height: 1;
        letter-spacing: -0.078em;
    }

    .hero-brand-title__symbol {
        margin-left: 0.08em;
        font-size:
            clamp(
                27px,
                8vw,
                38px
            );
    }

    .hero-brand-title__connector {
        width: 145px;
        gap: 9px;
        margin:
            0
            0
            2px
            23px;
    }

    .hero-brand-title__connector-line {
        width: 48px;
    }

    .hero-brand-title__and {
        font-size: 9px;
        letter-spacing: 0.24em;
    }

    .hero-brand-art {
        top: 52%;
        right: -120px;
        width: 300px;
        opacity: 0.38;
    }

    .hero-brand-art__text {
        font-size: 70px;
    }

    .hero__lower {
        display: block;
        margin-top: 34px;
    }

    .hero__lower .hero__title-ja {
        margin: 0;
        font-size: 21px;
        line-height: 1.7;
    }

    .hero-visual {
        display: none;
    }
}

@media (max-width: 390px) {
    .hero__inner {
        width: calc(100% - 24px);
        padding-top: 44px;
    }

    .hero-brand-layout {
        min-height: 285px;
    }

    .hero-brand-title__line--trust
    .hero-brand-title__word {
        font-size: 76px;
    }

    .hero-brand-title__line--technology
    .hero-brand-title__word {
        font-size: 47px;
    }

    .hero-brand-title__symbol {
        font-size: 26px;
    }

    .hero-brand-art {
        right: -132px;
        width: 285px;
    }
}

/* ========================================
   動きを減らす設定：ブランドメッセージ
======================================== */

@media (prefers-reduced-motion: reduce) {
    .hero-brand-title__word,
    .hero-brand-title__symbol,
    .hero-brand-title__and {
        opacity: 1;
        animation: none !important;
        transform: none;
    }

    .hero-brand-title__connector-line {
        animation: none !important;
        transform: scaleX(1);
    }

    .hero-brand-art__circle {
        animation: none !important;
    }
}

/* ========================================
   TRUST AND TECHNOLOGY 最終調整
   ・TRUST / TECHNOLOGY は同じ文字サイズ
   ・AND は TRUST 右側の円内に表示
   ・登場 → 静止 → 退場をループ
======================================== */

.hero-brand-layout {
    min-height: 390px;
}

.hero-brand-title {
    width: 100%;
}

.hero-brand-title__line {
    overflow: visible;
}

.hero-brand-title__line--trust {
    align-items: center;
}

.hero-brand-title__line--technology {
    margin-top: -0.08em;
}

/* TRUST と TECHNOLOGY のサイズを完全に統一 */
.hero-brand-title__line--trust
.hero-brand-title__word,
.hero-brand-title__line--technology
.hero-brand-title__word {
    font-size:
        clamp(
            92px,
            8.2vw,
            152px
        );
    line-height: 0.96;
    letter-spacing: -0.072em;
}

/* ========================================
   TRUST右側のAND円
   以前の丸いANDデザインを再現
======================================== */

.hero-brand-title__and-circle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;

    width:
        clamp(
            76px,
            6.1vw,
            108px
        );
    height:
        clamp(
            76px,
            6.1vw,
            108px
        );
    flex: 0 0 auto;

    margin-left:
        clamp(
            20px,
            2.2vw,
            38px
        );

    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-cyan)
        );
    border: 1px solid rgb(255 255 255 / 62%);
    border-radius: 50%;
    box-shadow:
        0 14px 34px rgb(3 81 248 / 24%),
        inset 0 1px 0 rgb(255 255 255 / 30%);

    font-family:
        "Arial Black",
        "Helvetica Neue",
        Arial,
        sans-serif;
    font-size:
        clamp(
            18px,
            1.35vw,
            22px
        );
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.04em;

    opacity: 0;
    transform:
        translateY(10px)
        scale(0.45)
        rotate(-20deg);
    will-change: opacity, transform;
}

/* ========================================
   ブランドタイトル ループアニメーション
   7秒で1周
======================================== */

body.is-page-loaded
.hero-brand-title__line--trust
.hero-brand-title__word {
    animation:
        hero-brand-trust-loop
        7s
        cubic-bezier(0.16, 1, 0.3, 1)
        infinite;
}

body.is-page-loaded
.hero-brand-title__line--technology
.hero-brand-title__word {
    animation:
        hero-brand-technology-loop
        7s
        cubic-bezier(0.16, 1, 0.3, 1)
        infinite;
}

body.is-page-loaded
.hero-brand-title__and-circle {
    animation:
        hero-brand-and-circle-loop
        7s
        cubic-bezier(0.34, 1.56, 0.64, 1)
        infinite;
}

@keyframes hero-brand-trust-loop {
    0% {
        opacity: 0;
        transform: translate3d(-9vw, 0, 0);
    }

    14% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    72% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    87% {
        opacity: 0;
        transform: translate3d(-6vw, 0, 0);
    }

    100% {
        opacity: 0;
        transform: translate3d(-9vw, 0, 0);
    }
}

@keyframes hero-brand-technology-loop {
    0%,
    4% {
        opacity: 0;
        transform: translate3d(9vw, 0, 0);
    }

    19% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    72% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    87% {
        opacity: 0;
        transform: translate3d(6vw, 0, 0);
    }

    100% {
        opacity: 0;
        transform: translate3d(9vw, 0, 0);
    }
}

@keyframes hero-brand-and-circle-loop {
    0%,
    8% {
        opacity: 0;
        transform:
            translateY(10px)
            scale(0.45)
            rotate(-20deg);
    }

    22% {
        opacity: 1;
        transform:
            translateY(0)
            scale(1)
            rotate(0);
    }

    72% {
        opacity: 1;
        transform:
            translateY(0)
            scale(1)
            rotate(0);
    }

    84% {
        opacity: 0;
        transform:
            translateY(-5px)
            scale(0.68)
            rotate(18deg);
    }

    100% {
        opacity: 0;
        transform:
            translateY(10px)
            scale(0.45)
            rotate(-20deg);
    }
}

/* ========================================
   タブレット：同じ文字サイズを維持
======================================== */

@media (max-width: 960px) {
    .hero-brand-layout {
        min-height: 285px;
    }

    .hero-brand-title__line--trust
    .hero-brand-title__word,
    .hero-brand-title__line--technology
    .hero-brand-title__word {
        font-size:
            clamp(
                62px,
                9.2vw,
                88px
            );
    }

    .hero-brand-title__and-circle {
        width: clamp(58px, 7.5vw, 74px);
        height: clamp(58px, 7.5vw, 74px);
        margin-left: clamp(14px, 2vw, 24px);
        font-size: clamp(14px, 1.7vw, 18px);
    }
}

/* ========================================
   スマートフォン：同じ文字サイズを維持
======================================== */

@media (max-width: 700px) {
    .hero-brand-layout {
        min-height: 205px;
    }

    .hero-brand-title__line {
        padding-bottom: 0.16em;
    }

    .hero-brand-title__line--trust
    .hero-brand-title__word,
    .hero-brand-title__line--technology
    .hero-brand-title__word {
        font-size:
            clamp(
                44px,
                12.5vw,
                60px
            );
        line-height: 0.98;
        letter-spacing: -0.068em;
    }

    .hero-brand-title__line--technology {
        margin-top: -0.03em;
    }

    .hero-brand-title__and-circle {
        width: clamp(42px, 11vw, 52px);
        height: clamp(42px, 11vw, 52px);
        margin-left: 12px;
        font-size: clamp(10px, 2.7vw, 12px);
        box-shadow:
            0 9px 21px rgb(3 81 248 / 20%),
            inset 0 1px 0 rgb(255 255 255 / 28%);
    }
}

@media (max-width: 390px) {
    .hero-brand-layout {
        min-height: 185px;
    }

    .hero-brand-title__line--trust
    .hero-brand-title__word,
    .hero-brand-title__line--technology
    .hero-brand-title__word {
        font-size: 46px;
    }

    .hero-brand-title__and-circle {
        width: 42px;
        height: 42px;
        margin-left: 9px;
        font-size: 10px;
    }
}

/* ========================================
   動きを減らす設定
======================================== */

@media (prefers-reduced-motion: reduce) {
    body.is-page-loaded
    .hero-brand-title__line--trust
    .hero-brand-title__word,
    body.is-page-loaded
    .hero-brand-title__line--technology
    .hero-brand-title__word,
    body.is-page-loaded
    .hero-brand-title__and-circle {
        opacity: 1;
        animation: none !important;
        transform: none;
    }
}



/* ========================================
   背景NJES 改行防止
======================================== */
.hero-brand-art__text {
    display: inline-block;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

/* ========================================
   AND 円：最終確定スタイル
   旧AND指定との競合をここで完全に上書きする
======================================== */

/* 旧コネクターを使用しているHTMLが残っていても線は表示しない */
.hero-brand-title__connector-line,
.hero-brand-title__symbol {
    display: none !important;
}

/* 新旧どちらのANDクラスでも必ず円として描画 */
.hero-brand-title__and-circle,
.hero-brand-title__and {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 clamp(82px, 6.2vw, 108px) !important;

    width: clamp(82px, 6.2vw, 108px) !important;
    height: clamp(82px, 6.2vw, 108px) !important;
    min-width: clamp(82px, 6.2vw, 108px) !important;
    min-height: clamp(82px, 6.2vw, 108px) !important;

    margin: 0 0 0 clamp(22px, 2.2vw, 38px) !important;
    padding: 0 !important;

    color: #ffffff !important;
    background-color: #0351f8 !important;
    background-image:
        linear-gradient(
            135deg,
            #0351f8 0%,
            #37b7e9 100%
        ) !important;

    border: 2px solid rgb(255 255 255 / 72%) !important;
    border-radius: 50% !important;

    box-shadow:
        0 14px 34px rgb(3 81 248 / 24%),
        0 0 0 7px rgb(3 81 248 / 6%),
        inset 0 1px 0 rgb(255 255 255 / 34%) !important;

    font-family:
        "Arial Black",
        "Helvetica Neue",
        Arial,
        sans-serif !important;
    font-size: clamp(18px, 1.35vw, 22px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
    text-align: center !important;
    white-space: nowrap !important;

    overflow: visible !important;
}

/* 新しいHTMLではTRUSTの右横にAND円を置く */
.hero-brand-title__line--trust {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

/* TRUST と TECHNOLOGY の文字サイズは完全に同一 */
.hero-brand-title__line--trust .hero-brand-title__word,
.hero-brand-title__line--technology .hero-brand-title__word {
    font-size: clamp(92px, 8.2vw, 152px) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.072em !important;
}

/* 背景のNJESは必ず1行で表示 */
.hero-brand-art__text {
    display: block !important;
    width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
}

@media (max-width: 1100px) {
    .hero-brand-title__and-circle,
    .hero-brand-title__and {
        flex-basis: 76px !important;
        width: 76px !important;
        height: 76px !important;
        min-width: 76px !important;
        min-height: 76px !important;
        margin-left: 20px !important;
        font-size: 16px !important;
    }
}

@media (max-width: 700px) {
    .hero-brand-title__line--trust .hero-brand-title__word,
    .hero-brand-title__line--technology .hero-brand-title__word {
        font-size: clamp(48px, 14.5vw, 66px) !important;
        line-height: 0.98 !important;
    }

    .hero-brand-title__and-circle,
    .hero-brand-title__and {
        flex-basis: 48px !important;
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        margin-left: 12px !important;
        font-size: 11px !important;
        border-width: 1px !important;
        box-shadow:
            0 8px 18px rgb(3 81 248 / 20%),
            0 0 0 4px rgb(3 81 248 / 5%) !important;
    }
}

@media (max-width: 390px) {
    .hero-brand-title__line--trust .hero-brand-title__word,
    .hero-brand-title__line--technology .hero-brand-title__word {
        font-size: 46px !important;
    }

    .hero-brand-title__and-circle,
    .hero-brand-title__and {
        flex-basis: 44px !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        margin-left: 9px !important;
        font-size: 10px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-brand-title__and-circle,
    .hero-brand-title__and {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}


/* ========================================
   TRUST右側 ANDバッジ V2
   既存のAND関連CSSと完全に分離して競合を防止
======================================== */

.hero-brand-title__line--trust {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

/* TRUST / TECHNOLOGY は完全に同じ文字サイズ */
.hero-brand-title__line--trust .hero-brand-title__word,
.hero-brand-title__line--technology .hero-brand-title__word {
    font-size: clamp(92px, 8.2vw, 152px) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.072em !important;
}

/* AND本体 */
.hero-brand-title__and-badge-v2 {
    position: relative !important;
    z-index: 5 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 clamp(88px, 6.3vw, 108px) !important;
    width: clamp(88px, 6.3vw, 108px) !important;
    height: clamp(88px, 6.3vw, 108px) !important;
    min-width: clamp(88px, 6.3vw, 108px) !important;
    min-height: clamp(88px, 6.3vw, 108px) !important;
    aspect-ratio: 1 / 1 !important;

    margin: 0 0 0 clamp(24px, 2.2vw, 38px) !important;
    padding: 0 !important;

    color: #ffffff !important;
    background: #0351f8 !important;
    border: 0 !important;
    border-radius: 9999px !important;

    font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif !important;
    font-size: clamp(19px, 1.45vw, 23px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
    text-align: center !important;
    white-space: nowrap !important;

    box-shadow:
        0 14px 34px rgb(3 81 248 / 24%),
        0 0 0 7px rgb(3 81 248 / 7%) !important;

    overflow: visible !important;
    isolation: isolate;

    opacity: 0;
    transform: translateY(10px) scale(0.55);
    will-change: opacity, transform;
}

/* 円のグラデーションを別レイヤーで必ず描画 */
.hero-brand-title__and-badge-v2::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";

    background:
        linear-gradient(
            135deg,
            #0351f8 0%,
            #1788e3 55%,
            #37b7e9 100%
        );

    border: 2px solid rgb(255 255 255 / 72%);
    border-radius: 50%;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 32%);
}

/* 7秒ループ */
body.is-page-loaded .hero-brand-title__and-badge-v2 {
    animation:
        hero-brand-and-badge-v2-loop
        7s
        cubic-bezier(0.34, 1.56, 0.64, 1)
        infinite !important;
}

@keyframes hero-brand-and-badge-v2-loop {
    0%, 8% {
        opacity: 0;
        transform: translateY(10px) scale(0.55) rotate(-16deg);
    }

    22%, 72% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0);
    }

    84%, 100% {
        opacity: 0;
        transform: translateY(-4px) scale(0.72) rotate(12deg);
    }
}

/* 背景NJESは絶対に改行しない */
.hero-brand-art__text {
    display: block !important;
    width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
}

@media (max-width: 1100px) {
    .hero-brand-title__and-badge-v2 {
        flex-basis: 76px !important;
        width: 76px !important;
        height: 76px !important;
        min-width: 76px !important;
        min-height: 76px !important;
        margin-left: 20px !important;
        font-size: 17px !important;
    }
}

@media (max-width: 700px) {
    .hero-brand-title__line--trust .hero-brand-title__word,
    .hero-brand-title__line--technology .hero-brand-title__word {
        font-size: clamp(48px, 14.5vw, 66px) !important;
        line-height: 0.98 !important;
    }

    .hero-brand-title__and-badge-v2 {
        flex-basis: 50px !important;
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        margin-left: 12px !important;
        font-size: 12px !important;
        box-shadow:
            0 8px 18px rgb(3 81 248 / 20%),
            0 0 0 4px rgb(3 81 248 / 5%) !important;
    }

    .hero-brand-title__and-badge-v2::before {
        border-width: 1px;
    }
}

@media (max-width: 390px) {
    .hero-brand-title__line--trust .hero-brand-title__word,
    .hero-brand-title__line--technology .hero-brand-title__word {
        font-size: 46px !important;
    }

    .hero-brand-title__and-badge-v2 {
        flex-basis: 46px !important;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        margin-left: 9px !important;
        font-size: 11px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-brand-title__and-badge-v2 {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

/* ========================================
   TRUST / TECHNOLOGY 文字サイズ 最終調整
   末尾配置 + !important で既存指定を確実に上書き
======================================== */
.hero-brand-title__line--trust .hero-brand-title__word,
.hero-brand-title__line--technology .hero-brand-title__word {
    font-size: clamp(108px, 9.4vw, 176px) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.072em !important;
}

@media (max-width: 960px) {
    .hero-brand-title__line--trust .hero-brand-title__word,
    .hero-brand-title__line--technology .hero-brand-title__word {
        font-size: clamp(84px, 12.5vw, 118px) !important;
    }
}

@media (max-width: 700px) {
    .hero-brand-title__line--trust .hero-brand-title__word,
    .hero-brand-title__line--technology .hero-brand-title__word {
        font-size: clamp(54px, 16vw, 72px) !important;
        line-height: 0.98 !important;
    }
}

@media (max-width: 390px) {
    .hero-brand-title__line--trust .hero-brand-title__word,
    .hero-brand-title__line--technology .hero-brand-title__word {
        font-size: 50px !important;
    }
}

/* ========================================
   ファーストビュー：NETWORKのみ表示
======================================== */
.hero__lower--network-only {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 0 !important;
    margin-top: 56px !important;
}

.hero__lower--network-only .hero-visual {
    width: min(100%, 780px) !important;
    min-height: 570px !important;
    margin: 0 auto !important;
}

/* ========================================
   ABOUT NJES：サービス・お問い合わせボタン
======================================== */
.about-njes__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.about-njes__actions .hero-button {
    min-width: 200px;
}

@media (max-width: 960px) {
    .hero__lower--network-only {
        margin-top: 42px !important;
    }

    .hero__lower--network-only .hero-visual {
        width: min(100%, 680px) !important;
        min-height: 560px !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 700px) {
    .hero__lower--network-only {
        display: none !important;
    }

    .about-njes__actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 11px;
        margin-top: 28px;
    }

    .about-njes__actions .hero-button {
        width: 100%;
        min-width: 0;
    }
}


/* ========================================
   HERO BRAND SEQUENCE 最終上書き

   1. TRUST が左から登場
   2. TECHNOLOGY が右から登場
   3. AND 円が登場
   4. TRUST / TECHNOLOGY / AND が退場
   5. NJES がズームして出現
   6. NJES がぼやけながら消える
   7. 最初から繰り返す
======================================== */

.hero-brand-layout {
    position: relative;
    isolation: isolate;
}

/*
 * 背景アートはタイトルより後ろ、
 * トランジションNJESは最前面。
 */
.hero-brand-title {
    position: relative;
    z-index: 3;
}

.hero-brand-art {
    z-index: 1;
}

/* ========================================
   TRUST / TECHNOLOGY / AND
   10秒で1サイクル
======================================== */

body.is-page-loaded
.hero-brand-title__line--trust
.hero-brand-title__word {
    animation:
        hero-brand-trust-sequence
        10s
        cubic-bezier(0.16, 1, 0.3, 1)
        infinite !important;
}

body.is-page-loaded
.hero-brand-title__line--technology
.hero-brand-title__word {
    animation:
        hero-brand-technology-sequence
        10s
        cubic-bezier(0.16, 1, 0.3, 1)
        infinite !important;
}

body.is-page-loaded
.hero-brand-title__and-badge-v2 {
    animation:
        hero-brand-and-sequence
        10s
        cubic-bezier(0.34, 1.56, 0.64, 1)
        infinite !important;
}

@keyframes hero-brand-trust-sequence {
    0% {
        opacity: 0;
        transform: translate3d(-9vw, 0, 0);
    }

    13%,
    42% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    53%,
    100% {
        opacity: 0;
        transform: translate3d(-7vw, 0, 0);
    }
}

@keyframes hero-brand-technology-sequence {
    0%,
    3% {
        opacity: 0;
        transform: translate3d(9vw, 0, 0);
    }

    17%,
    42% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    53%,
    100% {
        opacity: 0;
        transform: translate3d(7vw, 0, 0);
    }
}

@keyframes hero-brand-and-sequence {
    0%,
    7% {
        opacity: 0;
        transform:
            translateY(10px)
            scale(0.55)
            rotate(-16deg);
    }

    20%,
    42% {
        opacity: 1;
        transform:
            translateY(0)
            scale(1)
            rotate(0);
    }

    51%,
    100% {
        opacity: 0;
        transform:
            translateY(-6px)
            scale(0.68)
            rotate(14deg);
    }
}

/* ========================================
   TRUST AND TECHNOLOGY 後の NJES
======================================== */

.hero-brand-transition-logo {
    position: absolute;
    top: 48%;
    left: 50%;
    z-index: 12;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 100%;

    pointer-events: none;

    opacity: 0;
    filter: blur(16px);

    transform:
        translate(-50%, -50%)
        scale(0.72);

    transform-origin: center center;
    will-change: opacity, filter, transform;
}

.hero-brand-transition-logo__text {
    display: block;
    width: max-content;
    max-width: none;

    color: var(--color-logo);

    font-family: var(--font-logo);
    font-size:
        clamp(
            150px,
            17vw,
            280px
        );
    font-style: italic;
    font-weight: 900;
    line-height: 0.86;
    letter-spacing: -0.055em;

    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;

    /* NJESの文字だけを横方向に約1.2倍へ拡大 */
    transform: scaleX(1.2);
    transform-origin: center center;

    /* NJESロゴをより太く、力強く見せる */
    -webkit-text-stroke: 2.35px currentColor;

    text-shadow:
        1.75px 0 currentColor,
        -1.75px 0 currentColor,
        0 1.75px currentColor,
        0 -1.75px currentColor,
        1.25px 1.25px currentColor,
        -1.25px 1.25px currentColor,
        1.25px -1.25px currentColor,
        -1.25px -1.25px currentColor,
        0 18px 45px rgb(3 81 248 / 13%);
}

body.is-page-loaded
.hero-brand-transition-logo {
    animation:
        hero-brand-njes-sequence
        10s
        linear
        infinite !important;
}

/*
 * TRUST AND TECHNOLOGY の後、NJESを滑らかに表示する。
 * 小さくぼやけた状態から徐々に近づき、
 * 鮮明になったあと、ゆっくり拡大しながらぼやけて消える。
 */
@keyframes hero-brand-njes-sequence {
    0%,
    50% {
        opacity: 0;
        filter: blur(16px);
        transform:
            translate(-50%, -50%)
            scale(0.72);
    }

    55% {
        opacity: 0.12;
        filter: blur(12px);
        transform:
            translate(-50%, -50%)
            scale(0.78);
    }

    60% {
        opacity: 0.38;
        filter: blur(7px);
        transform:
            translate(-50%, -50%)
            scale(0.86);
    }

    66% {
        opacity: 0.72;
        filter: blur(3px);
        transform:
            translate(-50%, -50%)
            scale(0.94);
    }

    71% {
        opacity: 1;
        filter: blur(0);
        transform:
            translate(-50%, -50%)
            scale(1);
    }

    79% {
        opacity: 1;
        filter: blur(0);
        transform:
            translate(-50%, -50%)
            scale(1.015);
    }

    84% {
        opacity: 0.92;
        filter: blur(1px);
        transform:
            translate(-50%, -50%)
            scale(1.08);
    }

    89% {
        opacity: 0.66;
        filter: blur(5px);
        transform:
            translate(-50%, -50%)
            scale(1.24);
    }

    94% {
        opacity: 0.28;
        filter: blur(13px);
        transform:
            translate(-50%, -50%)
            scale(1.48);
    }

    100% {
        opacity: 0;
        filter: blur(26px);
        transform:
            translate(-50%, -50%)
            scale(1.82);
    }
}

/* ========================================
   タブレット
======================================== */

@media (max-width: 960px) {
    .hero-brand-transition-logo__text {
        font-size:
            clamp(
                110px,
                19vw,
                185px
            );
    }
}

/* ========================================
   スマートフォン
======================================== */

@media (max-width: 700px) {
    .hero-brand-transition-logo {
        top: 49%;
    }

    .hero-brand-transition-logo__text {
        font-size:
            clamp(
                82px,
                28vw,
                128px
            );
    }
}

@media (max-width: 390px) {
    .hero-brand-transition-logo__text {
        font-size: 86px;
    }
}

/* ========================================
   動きを減らす設定
======================================== */

@media (prefers-reduced-motion: reduce) {
    body.is-page-loaded
    .hero-brand-title__line--trust
    .hero-brand-title__word,
    body.is-page-loaded
    .hero-brand-title__line--technology
    .hero-brand-title__word,
    body.is-page-loaded
    .hero-brand-title__and-badge-v2 {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }

    .hero-brand-transition-logo {
        display: none !important;
        animation: none !important;
    }
}