/*
Theme Name: TiAG Original
Theme URI: https://tiag.jp/
Description: TiAG専用のオリジナル子テーマ
Author: 株式会社TiAG
Template: fake_tcd074
Version: 1.0.0
*/

/* ==================================================
   TiAG Original
================================================== */

:root {
    --tiag-navy: #111b3d;
    --tiag-green: #20c875;
    --tiag-cyan: #54c8ef;
    --tiag-white: #ffffff;
    --tiag-text: #121826;
}

html {
    scroll-behavior: smooth;
}

body.tiag-original {
    margin: 0;
    background: #fff;
    color: var(--tiag-text);
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        "Yu Gothic",
        "YuGothic",
        "Noto Sans JP",
        sans-serif;
}

body.tiag-original * {
    box-sizing: border-box;
}

body.tiag-original img {
    max-width: 100%;
}


/* ==================================================
   Header
================================================== */

.tiag-header {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    padding: 24px 40px;
}

.tiag-header__inner {
    width: min(1440px, 100%);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tiag-header__logo {
    display: block;
    width: 126px;
}

.tiag-header__logo img {
    display: block;
    width: 100%;
    height: auto;
}

.tiag-nav {
    display: flex;
    align-items: center;
    gap: 34px;
}

.tiag-nav a {
    color: var(--tiag-navy);
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    letter-spacing: .03em;
    transition:
        opacity .25s ease,
        transform .25s ease;
}

.tiag-nav a:hover {
    opacity: .55;
    transform: translateY(-1px);
}

.tiag-nav__contact {
    padding: 11px 20px;
    border-radius: 999px;
    background: var(--tiag-navy);
    color: #fff !important;
}


/* ==================================================
   Hero
================================================== */

.tiag-hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;

    background:
        radial-gradient(
            circle at 82% 30%,
            rgba(84, 200, 239, .15),
            rgba(84, 200, 239, 0) 34%
        ),
        radial-gradient(
            circle at 38% 78%,
            rgba(32, 200, 117, .11),
            rgba(32, 200, 117, 0) 34%
        ),
        linear-gradient(
            120deg,
            #ffffff 0%,
            #ffffff 32%,
            #f8fffb 57%,
            #eefaff 100%
        );
}

/* main flowing green-blue wave */

.tiag-hero::before {
    content: "";
    position: absolute;
    left: -14%;
    right: -10%;
    bottom: -19%;
    height: 56%;

    background:
        linear-gradient(
            95deg,
            rgba(52, 211, 116, .28) 0%,
            rgba(83, 218, 156, .24) 25%,
            rgba(87, 208, 203, .24) 50%,
            rgba(79, 190, 239, .30) 78%,
            rgba(73, 175, 243, .25) 100%
        );

    border-radius: 50% 50% 0 0 / 34% 38% 0 0;

    transform: rotate(-2.5deg);

    filter: blur(1px);

    pointer-events: none;
}

/* broad blue aura */

.tiag-hero::after {
    content: "";
    position: absolute;
    right: -6%;
    top: 10%;
    width: 62%;
    height: 62%;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(91, 202, 244, .20) 0%,
            rgba(91, 202, 244, .10) 34%,
            rgba(91, 202, 244, 0) 72%
        );

    filter: blur(14px);

    pointer-events: none;
}


/* ==================================================
   Hero Glow
================================================== */

.tiag-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.tiag-hero__glow--green {
    left: -9%;
    bottom: -2%;
    width: 560px;
    height: 560px;
    background: rgba(62, 216, 123, .20);
}

.tiag-hero__glow--blue {
    right: 4%;
    top: 18%;
    width: 660px;
    height: 660px;
    background: rgba(82, 194, 244, .18);
}


/* ==================================================
   Hero Light Lines
================================================== */

.tiag-hero__wave {
    position: absolute;
    z-index: 2;
    left: -8%;
    width: 120%;
    height: 3px;
    border-radius: 999px;
    pointer-events: none;
}

.tiag-hero__wave--01 {
    bottom: 25%;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,.50) 10%,
            rgba(255,255,255,.96) 30%,
            rgba(111, 220, 195, .65) 50%,
            rgba(255,255,255,.95) 72%,
            rgba(89, 194, 239, .45) 86%,
            transparent 100%
        );

    transform: rotate(-4deg);

    box-shadow:
        0 0 14px rgba(255,255,255,.90),
        0 0 30px rgba(98,208,225,.32);
}

.tiag-hero__wave--02 {
    bottom: 17%;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(78, 213, 158, .20) 18%,
            rgba(255,255,255,.90) 42%,
            rgba(255,255,255,.95) 60%,
            rgba(78, 190, 239, .28) 82%,
            transparent 100%
        );

    transform: rotate(2.2deg);

    opacity: .8;

    box-shadow:
        0 0 12px rgba(255,255,255,.78),
        0 0 22px rgba(101,197,229,.22);
}


/* ==================================================
   Additional Hero Flow
================================================== */

.tiag-hero .tiag-hero__content::before {
    content: "";
    position: absolute;
    z-index: -1;

    right: -44%;
    top: 10%;

    width: 760px;
    height: 760px;

    border-radius: 50%;

    background:
        conic-gradient(
            from 220deg,
            transparent 0deg,
            rgba(100, 210, 181, .08) 30deg,
            rgba(84, 199, 240, .14) 70deg,
            rgba(255,255,255,.0) 115deg,
            transparent 360deg
        );

    filter: blur(10px);
}


/* ==================================================
   Hero Content
================================================== */

.tiag-hero__content {
    position: relative;
    z-index: 5;

    width: min(1440px, calc(100% - 80px));
    margin: 0 auto;

    padding-left: 3%;

    transform: translateY(-6%);
}

.tiag-hero__title {
    margin: 0;

    color: var(--tiag-navy);

    font-family:
        "Hiragino Mincho ProN",
        "Yu Mincho",
        YuMincho,
        serif;

    font-size: clamp(52px, 5.2vw, 88px);
    font-weight: 400;

    line-height: 1.42;
    letter-spacing: .025em;
}

.tiag-hero__english {
    margin: 24px 0 36px;

    color: rgba(17, 27, 61, .66);

    font-size: 15px;
    letter-spacing: .025em;
}


/* ==================================================
   Common Button
================================================== */

.tiag-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 38px;
    min-width: 178px;

    padding: 15px 21px;

    border: 1px solid rgba(17, 27, 61, .32);
    border-radius: 999px;

    color: var(--tiag-navy);

    font-size: 12px;
    text-decoration: none;

    background: rgba(255, 255, 255, .46);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

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

.tiag-button:hover {
    color: #fff;
    background: var(--tiag-navy);
    border-color: var(--tiag-navy);
    transform: translateY(-2px);
}


/* ==================================================
   Scroll Indicator
================================================== */

.tiag-scroll {
    position: absolute;
    z-index: 5;

    left: 50%;
    bottom: 24px;

    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 8px;

    color: rgba(17, 27, 61, .58);

    font-size: 9px;
    letter-spacing: .18em;
}

.tiag-scroll i {
    display: block;
    width: 1px;
    height: 34px;
    background: rgba(17, 27, 61, .26);
}


/* ==================================================
   WHY TiAG
================================================== */

.tiag-about {
    position: relative;
    min-height: 720px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #ffffff 42%,
            #f7fcfb 60%,
            #eefaff 100%
        );
}


/* ==================================================
   WHY TiAG - Right Visual
================================================== */

.tiag-about__visual {
    position: absolute;
    top: 0;
    right: 0;

    width: 57%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;
}

.tiag-about__visual::before {
    content: "";
    position: absolute;

    width: 780px;
    height: 780px;

    right: -130px;
    top: -80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 45% 48%,
            rgba(255, 255, 255, .98) 0%,
            rgba(237, 255, 251, .90) 16%,
            rgba(198, 245, 235, .60) 27%,
            rgba(128, 222, 218, .32) 40%,
            rgba(90, 197, 239, .22) 56%,
            rgba(90, 197, 239, 0) 74%
        );

    filter: blur(5px);
}

.tiag-about__visual::after {
    content: "";
    position: absolute;

    left: -10%;
    right: -5%;
    bottom: 22%;

    height: 46%;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(255, 255, 255, .68) 40%,
            rgba(255, 255, 255, .88) 47%,
            rgba(120, 220, 213, .12) 53%,
            rgba(92, 196, 235, .16) 67%,
            transparent 100%
        );

    transform:
        perspective(600px)
        rotateX(66deg);

    filter: blur(2px);
}


/* ==================================================
   WHY TiAG - Outer Effects
================================================== */

.tiag-about::before {
    content: "";
    position: absolute;

    right: -10%;
    bottom: -33%;

    width: 72%;
    height: 66%;

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            rgba(64, 208, 132, .10),
            rgba(75, 209, 190, .13),
            rgba(70, 186, 242, .18)
        );

    filter: blur(25px);

    transform: rotate(-6deg);

    pointer-events: none;
}

.tiag-about::after {
    content: "";
    position: absolute;

    right: -5%;
    bottom: 26%;

    width: 60%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(74, 210, 180, .18),
            rgba(255, 255, 255, .95),
            rgba(84, 196, 239, .22),
            transparent
        );

    box-shadow:
        0 0 20px rgba(255, 255, 255, .9);

    transform: rotate(-2deg);

    pointer-events: none;
}


/* ==================================================
   WHY Inner
================================================== */

.tiag-about__inner {
    position: relative;
    z-index: 5;

    width: min(1440px, calc(100% - 80px));
    margin: 0 auto;

    padding: 120px 3%;
}

.tiag-about__content {
    width: 46%;
    max-width: 620px;
}

.tiag-section-label {
    margin: 0 0 24px;

    color: var(--tiag-green);

    font-size: 11px;
    font-weight: 600;

    letter-spacing: .22em;
}

.tiag-about__title {
    margin: 0 0 34px;

    color: var(--tiag-navy);

    font-family:
        "Hiragino Mincho ProN",
        "Yu Mincho",
        YuMincho,
        serif;

    font-size: clamp(38px, 3.5vw, 58px);
    font-weight: 400;

    line-height: 1.5;
    letter-spacing: .025em;
}

.tiag-about__text {
    max-width: 520px;
}

.tiag-about__text p {
    margin: 0 0 18px;

    color: rgba(17, 27, 61, .74);

    font-size: 14px;
    line-height: 2;

    letter-spacing: .035em;
}

.tiag-about__button {
    margin-top: 22px;
}


/* ==================================================
   Tablet
================================================== */

@media (max-width: 900px) {

    .tiag-header {
        padding: 20px 22px;
    }

    .tiag-header__logo {
        width: 102px;
    }

    .tiag-nav {
        display: none;
    }

    .tiag-hero__content {
        width: calc(100% - 44px);
        padding-left: 0;
        transform: translateY(-4%);
    }

    .tiag-hero__title {
        font-size: clamp(40px, 11vw, 64px);
        line-height: 1.45;
    }

    .tiag-hero__english {
        max-width: 280px;
        font-size: 13px;
        line-height: 1.8;
    }

    .tiag-about {
        min-height: auto;

        background:
            linear-gradient(
                180deg,
                #ffffff 0%,
                #ffffff 55%,
                #f1fcf7 78%,
                #edf9ff 100%
            );
    }

    .tiag-about__inner {
        width: calc(100% - 44px);
        padding: 120px 0 360px;
    }

    .tiag-about__content {
        width: 100%;
        max-width: 620px;
    }

    .tiag-about__title {
        font-size: clamp(34px, 8vw, 50px);
    }

    .tiag-about__visual {
        top: auto;
        bottom: 0;

        width: 100%;
        height: 390px;
    }

    .tiag-about__visual::before {
        width: 600px;
        height: 600px;

        right: -140px;
        top: -100px;
    }
}

/* ==================================================
   BUSINESS
================================================== */

.tiag-business {
    position: relative;
    padding: 150px 7% 170px;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdfd 100%
        );
}

.tiag-business__inner {
    width: min(1280px, 100%);
    margin: 0 auto;
}


/* ==================================================
   BUSINESS Heading
================================================== */

.tiag-business__heading {
    margin-bottom: 70px;
    text-align: center;
}

.tiag-business__title {
    margin: 0 0 18px;

    color: var(--tiag-navy);

    font-family:
        "Hiragino Mincho ProN",
        "Yu Mincho",
        YuMincho,
        serif;

    font-size: clamp(40px, 4vw, 60px);
    font-weight: 400;

    line-height: 1.4;
}

.tiag-business__lead {
    margin: 0;

    color: rgba(17, 27, 61, .68);

    font-size: 14px;
    line-height: 2;

    letter-spacing: .03em;
}


/* ==================================================
   BUSINESS Grid
================================================== */

.tiag-business__grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 24px;
}


/* ==================================================
   BUSINESS Card
================================================== */

.tiag-business-card {
    position: relative;

    min-height: 430px;

    overflow: hidden;

    border-radius: 22px;

    padding: 42px;

    border: 1px solid rgba(17, 27, 61, .08);

    box-shadow:
        0 24px 70px rgba(17, 27, 61, .05);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.tiag-business-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 30px 90px rgba(17, 27, 61, .10);
}


/* ==================================================
   Entertainment Card
================================================== */

.tiag-business-card--entertainment {
    background:
        radial-gradient(
            circle at 82% 82%,
            rgba(35, 209, 128, .28),
            rgba(35, 209, 128, 0) 45%
        ),
        linear-gradient(
            135deg,
            #f4fff8 0%,
            #eafaf2 52%,
            #dff8ec 100%
        );
}

.tiag-business-card--entertainment::after {
    content: "";

    position: absolute;

    right: -80px;
    bottom: -110px;

    width: 400px;
    height: 300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(20, 190, 108, .25),
            rgba(20, 190, 108, 0) 70%
        );

    filter: blur(5px);
}


/* ==================================================
   Technology Card
================================================== */

.tiag-business-card--technology {
    background:
        radial-gradient(
            circle at 82% 82%,
            rgba(80, 194, 244, .30),
            rgba(80, 194, 244, 0) 45%
        ),
        linear-gradient(
            135deg,
            #f5fcff 0%,
            #e9f8ff 52%,
            #dcf3ff 100%
        );
}

.tiag-business-card--technology::after {
    content: "";

    position: absolute;

    right: -80px;
    bottom: -110px;

    width: 420px;
    height: 320px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(70, 179, 238, .25),
            rgba(70, 179, 238, 0) 70%
        );

    filter: blur(5px);
}


/* ==================================================
   BUSINESS Number
================================================== */

.tiag-business-card__number {
    position: relative;
    z-index: 2;

    margin-bottom: 48px;

    color: rgba(17, 27, 61, .18);

    font-size: 58px;
    font-weight: 300;

    letter-spacing: -.04em;
}


/* ==================================================
   BUSINESS Content
================================================== */

.tiag-business-card__content {
    position: relative;
    z-index: 2;

    max-width: 470px;
}

.tiag-business-card__label {
    margin: 0 0 12px;

    color: var(--tiag-green);

    font-size: 11px;
    font-weight: 600;

    letter-spacing: .16em;
}

.tiag-business-card--technology
.tiag-business-card__label {
    color: #3baad8;
}

.tiag-business-card h3 {
    margin: 0 0 20px;

    color: var(--tiag-navy);

    font-size: clamp(24px, 2vw, 32px);
    font-weight: 500;

    line-height: 1.5;
}

.tiag-business-card__content > p:not(.tiag-business-card__label) {
    margin: 0;

    color: rgba(17, 27, 61, .70);

    font-size: 14px;
    line-height: 2;

    letter-spacing: .02em;
}


/* ==================================================
   BUSINESS Link
================================================== */

.tiag-business-card__link {
    display: inline-flex;

    align-items: center;

    gap: 36px;

    margin-top: 34px;

    padding: 12px 18px;

    border: 1px solid rgba(17, 27, 61, .22);

    border-radius: 999px;

    color: var(--tiag-navy);

    font-size: 12px;

    text-decoration: none;

    background: rgba(255, 255, 255, .45);

    transition:
        background .25s ease,
        color .25s ease;
}

.tiag-business-card__link:hover {
    background: var(--tiag-navy);

    color: #fff;
}


/* ==================================================
   BUSINESS Tablet
================================================== */

@media (max-width: 900px) {

    .tiag-business {
        padding: 110px 22px 130px;
    }

    .tiag-business__heading {
        margin-bottom: 50px;
    }

    .tiag-business__grid {
        grid-template-columns: 1fr;
    }

    .tiag-business-card {
        min-height: 390px;

        padding: 34px;
    }

}


/* ==================================================
   BUSINESS Smartphone
================================================== */

@media (max-width: 520px) {

    .tiag-business {
        padding-top: 90px;
        padding-bottom: 110px;
    }

    .tiag-business__heading {
        text-align: left;
    }

    .tiag-business__title {
        font-size: 38px;
    }

    .tiag-business__lead {
        font-size: 13px;
    }

    .tiag-business-card {
        min-height: auto;

        padding: 28px 24px;
    }

    .tiag-business-card__number {
        margin-bottom: 34px;

        font-size: 48px;
    }

    .tiag-business-card h3 {
        font-size: 25px;
    }

}


/* ==================================================
   Smartphone
================================================== */

@media (max-width: 520px) {

    .tiag-header {
        padding: 16px 18px;
    }

    .tiag-header__logo {
        width: 92px;
    }

    .tiag-hero {
        min-height: 100svh;
    }

    .tiag-hero__content {
        width: calc(100% - 36px);
        transform: translateY(-2%);
    }

    .tiag-hero__title {
        font-size: 39px;
        line-height: 1.48;
        letter-spacing: .01em;
    }

    .tiag-hero__english {
        margin-top: 20px;
        margin-bottom: 30px;

        font-size: 12px;
    }

    .tiag-scroll {
        bottom: 20px;
    }

    .tiag-about__inner {
        width: calc(100% - 36px);
        padding-top: 100px;
        padding-bottom: 300px;
    }

    .tiag-section-label {
        margin-bottom: 20px;
    }

    .tiag-about__title {
        margin-bottom: 28px;
        font-size: 34px;
        line-height: 1.55;
    }

    .tiag-about__text p {
        margin-bottom: 16px;
        font-size: 13px;
        line-height: 1.95;
    }

    .tiag-about__button {
        margin-top: 18px;
    }

    .tiag-about__visual {
        height: 310px;
    }

    .tiag-about__visual::before {
        width: 470px;
        height: 470px;

        right: -170px;
        top: -70px;
    }
}

/* ==================================================
   OUR VALUE
================================================== */

.tiag-value {
    position: relative;
    padding: 150px 7% 170px;
    background: #ffffff;
    overflow: hidden;
}

.tiag-value::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 20%;
    width: 700px;
    height: 500px;
    transform: translateX(-50%);
    background: radial-gradient(
        circle,
        rgba(45, 201, 137, .045),
        rgba(45, 201, 137, 0) 70%
    );
    pointer-events: none;
}

.tiag-value__inner {
    position: relative;
    z-index: 2;
    width: min(1280px, 100%);
    margin: 0 auto;
}


/* ==================================================
   Heading
================================================== */

.tiag-value__heading {
    margin-bottom: 90px;
    text-align: center;
}

.tiag-value__heading .tiag-section-label {
    margin-bottom: 20px;
}

.tiag-value__title {
    margin: 0;
    color: var(--tiag-navy);

    font-family:
        "Hiragino Mincho ProN",
        "Yu Mincho",
        YuMincho,
        serif;

    font-size: clamp(38px, 3.5vw, 54px);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: .03em;
}


/* ==================================================
   Value Grid
================================================== */

.tiag-value__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: 100%;
}


/* ==================================================
   Value Item
================================================== */

.tiag-value-item {
    position: relative;
    min-height: 270px;
    padding: 10px 32px;
    text-align: center;
}

.tiag-value-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 0;
    width: 1px;
    height: 230px;
    background: rgba(17, 27, 61, .10);
}


/* ==================================================
   Icon
================================================== */

.tiag-value-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 68px;
    margin-bottom: 26px;

    color: rgba(32, 180, 160, .62);

    font-family: Arial, sans-serif;
    font-size: 52px;
    font-weight: 200;
    line-height: 1;
}


/* ==================================================
   Title
================================================== */

.tiag-value-item h3 {
    margin: 0 0 18px;

    color: var(--tiag-navy);

    font-size: 16px;
    font-weight: 600;

    line-height: 1.6;
    letter-spacing: .04em;
}


/* ==================================================
   Description
================================================== */

.tiag-value-item p {
    margin: 0;

    color: rgba(17, 27, 61, .62);

    font-size: 12px;
    line-height: 2;

    letter-spacing: .025em;
}


/* ==================================================
   Tablet
================================================== */

@media (max-width: 1000px) {

    .tiag-value {
        padding: 120px 40px 140px;
    }

    .tiag-value__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }

    .tiag-value-item {
        padding: 40px 25px;
        border-bottom: 1px solid rgba(17, 27, 61, .08);
    }

    .tiag-value-item:not(:last-child)::after {
        display: none;
    }

    .tiag-value-item:nth-child(odd) {
        border-right: 1px solid rgba(17, 27, 61, .08);
    }

}


/* ==================================================
   Smartphone
================================================== */

@media (max-width: 600px) {

    .tiag-value {
        padding: 100px 22px 110px;
    }

    .tiag-value__heading {
        margin-bottom: 55px;
        text-align: left;
    }

    .tiag-value__heading .tiag-section-label {
        margin-bottom: 15px;
    }

    .tiag-value__title {
        font-size: 36px;
    }

    .tiag-value__grid {
        grid-template-columns: 1fr;
    }

    .tiag-value-item {
        min-height: 0;
        padding: 42px 10px;
        text-align: left;
    }

    .tiag-value-item:nth-child(odd) {
        border-right: 0;
    }

    .tiag-value-item__icon {
        justify-content: flex-start;
        height: auto;
        margin-bottom: 20px;
        font-size: 44px;
    }

    .tiag-value-item h3 {
        font-size: 18px;
    }

    .tiag-value-item p {
        font-size: 13px;
    }

}

/* ==================================================
   TOGETHER / RECRUIT
================================================== */

.tiag-together {
    position: relative;

    min-height: 760px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(91, 202, 244, .17),
            rgba(91, 202, 244, 0) 34%
        ),
        radial-gradient(
            circle at 20% 76%,
            rgba(47, 211, 127, .15),
            rgba(47, 211, 127, 0) 34%
        ),
        linear-gradient(
            120deg,
            #f8fffb 0%,
            #effcf6 40%,
            #edf9ff 100%
        );
}


/* ==================================================
   Background Wave
================================================== */

.tiag-together::before {
    content: "";

    position: absolute;

    left: -15%;
    right: -15%;
    bottom: -32%;

    height: 68%;

    border-radius: 50% 50% 0 0 / 45% 45% 0 0;

    background:
        linear-gradient(
            90deg,
            rgba(40, 205, 112, .28) 0%,
            rgba(65, 215, 165, .23) 35%,
            rgba(73, 205, 212, .22) 58%,
            rgba(76, 181, 242, .28) 100%
        );

    transform: rotate(-4deg);

    filter: blur(3px);

    pointer-events: none;
}


/* ==================================================
   Large Light
================================================== */

.tiag-together::after {
    content: "";

    position: absolute;

    right: -10%;
    top: -20%;

    width: 800px;
    height: 800px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, .90) 0%,
            rgba(197, 244, 241, .30) 30%,
            rgba(91, 202, 244, .16) 52%,
            rgba(91, 202, 244, 0) 72%
        );

    pointer-events: none;
}


/* ==================================================
   Glow
================================================== */

.tiag-together__glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(90px);

    pointer-events: none;
}

.tiag-together__glow--green {
    left: -8%;
    bottom: -12%;

    width: 560px;
    height: 560px;

    background: rgba(48, 210, 117, .20);
}

.tiag-together__glow--blue {
    right: -4%;
    top: 10%;

    width: 650px;
    height: 650px;

    background: rgba(79, 190, 242, .18);
}


/* ==================================================
   Light Lines
================================================== */

.tiag-together__line {
    position: absolute;

    left: -10%;

    width: 120%;
    height: 2px;

    border-radius: 999px;

    pointer-events: none;
}

.tiag-together__line--01 {
    bottom: 24%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.92),
            rgba(101,216,190,.60),
            rgba(255,255,255,.94),
            rgba(90,190,239,.42),
            transparent
        );

    box-shadow:
        0 0 18px rgba(255,255,255,.9),
        0 0 30px rgba(90,195,225,.22);

    transform: rotate(-3deg);
}

.tiag-together__line--02 {
    bottom: 15%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(67,210,145,.20),
            rgba(255,255,255,.85),
            rgba(80,188,240,.28),
            transparent
        );

    box-shadow:
        0 0 16px rgba(255,255,255,.7);

    transform: rotate(2deg);

    opacity: .72;
}


/* ==================================================
   Inner
================================================== */

.tiag-together__inner {
    position: relative;
    z-index: 5;

    width: min(1280px, calc(100% - 80px));

    margin: 0 auto;

    padding: 120px 3%;
}


/* ==================================================
   Label
================================================== */

.tiag-together__label {
    margin: 0 0 26px;

    color: var(--tiag-green);

    font-size: 11px;
    font-weight: 600;

    letter-spacing: .24em;
}


/* ==================================================
   Title
================================================== */

.tiag-together__title {
    margin: 0 0 34px;

    color: var(--tiag-navy);

    font-family:
        "Hiragino Mincho ProN",
        "Yu Mincho",
        YuMincho,
        serif;

    font-size: clamp(48px, 5vw, 76px);
    font-weight: 400;

    line-height: 1.45;

    letter-spacing: .025em;
}


/* ==================================================
   Text
================================================== */

.tiag-together__text {
    margin: 0 0 38px;

    color: rgba(17, 27, 61, .68);

    font-size: 14px;

    line-height: 2;

    letter-spacing: .035em;
}


/* ==================================================
   Button
================================================== */

.tiag-together__button {
    display: inline-flex;

    align-items: center;
    justify-content: space-between;

    gap: 46px;

    min-width: 190px;

    padding: 15px 21px;

    border: 1px solid rgba(17, 27, 61, .30);

    border-radius: 999px;

    color: var(--tiag-navy);

    font-size: 12px;

    text-decoration: none;

    background: rgba(255, 255, 255, .45);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.tiag-together__button:hover {
    color: #fff;

    background: var(--tiag-navy);

    transform: translateY(-2px);
}


/* ==================================================
   TOGETHER Tablet
================================================== */

@media (max-width: 900px) {

    .tiag-together {
        min-height: 680px;
    }

    .tiag-together__inner {
        width: calc(100% - 44px);

        padding: 100px 0;
    }

    .tiag-together__title {
        font-size: clamp(42px, 9vw, 62px);
    }

}


/* ==================================================
   TOGETHER Smartphone
================================================== */

@media (max-width: 520px) {

    .tiag-together {
        min-height: 640px;
    }

    .tiag-together__inner {
        width: calc(100% - 36px);

        padding: 90px 0;
    }

    .tiag-together__label {
        margin-bottom: 20px;
    }

    .tiag-together__title {
        margin-bottom: 28px;

        font-size: 39px;

        line-height: 1.55;
    }

    .tiag-together__text {
        font-size: 13px;

        line-height: 1.95;
    }

}

/* ==================================================
   COMPANY
================================================== */

.tiag-company {
    position: relative;

    padding: 160px 7% 180px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfcfd 100%
        );
}


/* ==================================================
   COMPANY Background
================================================== */

.tiag-company::before {
    content: "";

    position: absolute;

    right: -15%;
    top: 5%;

    width: 620px;
    height: 620px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(81, 197, 239, .07),
            rgba(81, 197, 239, 0) 70%
        );

    pointer-events: none;
}


/* ==================================================
   COMPANY Inner
================================================== */

.tiag-company__inner {
    position: relative;
    z-index: 2;

    width: min(1280px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(300px, .8fr)
        minmax(500px, 1.2fr);

    gap: 120px;
}


/* ==================================================
   COMPANY Heading
================================================== */

.tiag-company__heading {
    padding-top: 4px;
}

.tiag-company__heading .tiag-section-label {
    margin-bottom: 22px;
}

.tiag-company__title {
    margin: 0 0 36px;

    color: var(--tiag-navy);

    font-family:
        "Hiragino Mincho ProN",
        "Yu Mincho",
        YuMincho,
        serif;

    font-size: clamp(42px, 4vw, 60px);

    font-weight: 400;

    line-height: 1.4;

    letter-spacing: .03em;
}

.tiag-company__lead {
    margin: 0;

    color: rgba(17, 27, 61, .62);

    font-size: 14px;

    line-height: 2;

    letter-spacing: .04em;
}


/* ==================================================
   COMPANY Content
================================================== */

.tiag-company__content {
    width: 100%;
}


/* ==================================================
   COMPANY List
================================================== */

.tiag-company__list {
    margin: 0;

    border-top: 1px solid rgba(17, 27, 61, .12);
}

.tiag-company__row {
    display: grid;

    grid-template-columns: 150px 1fr;

    gap: 40px;

    padding: 30px 4px;

    border-bottom: 1px solid rgba(17, 27, 61, .12);
}

.tiag-company__row dt {
    margin: 0;

    color: rgba(17, 27, 61, .52);

    font-size: 12px;

    font-weight: 500;

    letter-spacing: .06em;
}

.tiag-company__row dd {
    margin: 0;

    color: var(--tiag-navy);

    font-size: 14px;

    line-height: 2;

    letter-spacing: .035em;
}


/* ==================================================
   COMPANY Tablet
================================================== */

@media (max-width: 900px) {

    .tiag-company {
        padding: 120px 22px 140px;
    }

    .tiag-company__inner {
        grid-template-columns: 1fr;

        gap: 70px;
    }

    .tiag-company__heading {
        padding-top: 0;
    }

}


/* ==================================================
   COMPANY Smartphone
================================================== */

@media (max-width: 520px) {

    .tiag-company {
        padding-top: 100px;
        padding-bottom: 110px;
    }

    .tiag-company__inner {
        gap: 55px;
    }

    .tiag-company__title {
        margin-bottom: 24px;

        font-size: 38px;
    }

    .tiag-company__lead {
        font-size: 13px;
    }

    .tiag-company__row {
        grid-template-columns: 90px 1fr;

        gap: 20px;

        padding: 24px 0;
    }

    .tiag-company__row dt {
        font-size: 11px;
    }

    .tiag-company__row dd {
        font-size: 13px;
    }

}

/* ==================================================
   CONTACT
================================================== */

.tiag-contact {
    position: relative;

    min-height: 560px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    padding: 120px 40px;

    text-align: center;

    background:
        radial-gradient(
            circle at 25% 100%,
            rgba(35, 205, 120, .20),
            rgba(35, 205, 120, 0) 40%
        ),
        radial-gradient(
            circle at 85% 15%,
            rgba(76, 190, 242, .22),
            rgba(76, 190, 242, 0) 40%
        ),
        linear-gradient(
            135deg,
            #111b3d 0%,
            #122446 48%,
            #102b4a 100%
        );
}


/* ==================================================
   CONTACT Light
================================================== */

.tiag-contact::before {
    content: "";

    position: absolute;

    left: -10%;
    bottom: -45%;

    width: 120%;
    height: 70%;

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            rgba(42, 208, 115, .22),
            rgba(61, 211, 175, .17),
            rgba(73, 184, 239, .20)
        );

    transform: rotate(-4deg);

    filter: blur(12px);

    pointer-events: none;
}


.tiag-contact::after {
    content: "";

    position: absolute;

    left: -10%;
    bottom: 18%;

    width: 120%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(75, 215, 162, .22),
            rgba(255, 255, 255, .48),
            rgba(80, 191, 239, .24),
            transparent
        );

    box-shadow:
        0 0 22px rgba(255, 255, 255, .25);

    transform: rotate(-2deg);

    pointer-events: none;
}


/* ==================================================
   CONTACT Glow
================================================== */

.tiag-contact__glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;
}

.tiag-contact__glow--green {
    left: -10%;
    bottom: -20%;

    width: 520px;
    height: 520px;

    background: rgba(32, 200, 117, .20);
}

.tiag-contact__glow--blue {
    right: -8%;
    top: -20%;

    width: 620px;
    height: 620px;

    background: rgba(84, 200, 239, .18);
}


/* ==================================================
   CONTACT Inner
================================================== */

.tiag-contact__inner {
    position: relative;
    z-index: 5;

    width: min(900px, 100%);

    margin: 0 auto;
}


/* ==================================================
   CONTACT Label
================================================== */

.tiag-contact__label {
    margin: 0 0 25px;

    color: rgba(89, 223, 161, .95);

    font-size: 11px;
    font-weight: 600;

    letter-spacing: .24em;
}


/* ==================================================
   CONTACT Title
================================================== */

.tiag-contact__title {
    margin: 0 0 26px;

    color: #ffffff;

    font-family:
        "Hiragino Mincho ProN",
        "Yu Mincho",
        YuMincho,
        serif;

    font-size: clamp(44px, 4.6vw, 70px);

    font-weight: 400;

    line-height: 1.45;

    letter-spacing: .035em;
}


/* ==================================================
   CONTACT Text
================================================== */

.tiag-contact__text {
    margin: 0 0 38px;

    color: rgba(255, 255, 255, .68);

    font-size: 14px;

    line-height: 2;

    letter-spacing: .035em;
}


/* ==================================================
   CONTACT Button
================================================== */

.tiag-contact__button {
    display: inline-flex;

    align-items: center;
    justify-content: space-between;

    gap: 55px;

    min-width: 205px;

    padding: 16px 22px;

    border: 1px solid rgba(255, 255, 255, .38);

    border-radius: 999px;

    color: #ffffff;

    font-size: 12px;

    text-decoration: none;

    background: rgba(255, 255, 255, .06);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.tiag-contact__button:hover {
    background: #ffffff;

    color: var(--tiag-navy);

    transform: translateY(-2px);
}


/* ==================================================
   FOOTER
================================================== */

.tiag-footer {
    position: relative;

    padding: 80px 7% 34px;

    background: #0c1530;

    color: #ffffff;
}


/* ==================================================
   FOOTER Inner
================================================== */

.tiag-footer__inner {
    width: min(1280px, 100%);

    margin: 0 auto;
}


/* ==================================================
   FOOTER Top
================================================== */

.tiag-footer__top {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 80px;

    padding-bottom: 70px;
}


/* ==================================================
   FOOTER Brand
================================================== */

.tiag-footer__brand {
    max-width: 360px;
}

.tiag-footer__logo {
    display: block;

    width: 120px;

    margin-bottom: 28px;
}

.tiag-footer__logo img {
    display: block;

    width: 100%;
    height: auto;

    /*
       元ロゴがネイビーの場合、
       白系に見せるための処理
    */
    filter:
        brightness(0)
        invert(1);

    opacity: .96;
}

.tiag-footer__message {
    margin: 0;

    color: rgba(255, 255, 255, .62);

    font-family:
        "Hiragino Mincho ProN",
        "Yu Mincho",
        YuMincho,
        serif;

    font-size: 17px;

    line-height: 1.9;

    letter-spacing: .04em;
}


/* ==================================================
   FOOTER Navigation
================================================== */

.tiag-footer__nav {
    display: flex;

    gap: 90px;
}

.tiag-footer__nav-column {
    display: flex;

    flex-direction: column;

    gap: 20px;
}

.tiag-footer__nav a {
    color: rgba(255, 255, 255, .74);

    font-size: 12px;

    text-decoration: none;

    letter-spacing: .05em;

    transition: color .25s ease;
}

.tiag-footer__nav a:hover {
    color: #ffffff;
}


/* ==================================================
   FOOTER Bottom
================================================== */

.tiag-footer__bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding-top: 26px;

    border-top: 1px solid rgba(255, 255, 255, .10);
}

.tiag-footer__bottom p {
    margin: 0;

    color: rgba(255, 255, 255, .42);

    font-size: 10px;

    letter-spacing: .06em;
}

.tiag-footer__bottom a {
    color: rgba(255, 255, 255, .42);

    font-size: 10px;

    text-decoration: none;

    letter-spacing: .06em;

    transition: color .25s ease;
}

.tiag-footer__bottom a:hover {
    color: #ffffff;
}


/* ==================================================
   CONTACT / FOOTER Tablet
================================================== */

@media (max-width: 900px) {

    .tiag-contact {
        min-height: 520px;

        padding: 100px 22px;
    }

    .tiag-footer {
        padding: 70px 22px 30px;
    }

    .tiag-footer__top {
        gap: 50px;
    }

    .tiag-footer__nav {
        gap: 50px;
    }

}


/* ==================================================
   CONTACT / FOOTER Smartphone
================================================== */

@media (max-width: 520px) {

    .tiag-contact {
        min-height: 500px;

        padding: 90px 22px;
    }

    .tiag-contact__label {
        margin-bottom: 20px;
    }

    .tiag-contact__title {
        font-size: 38px;

        line-height: 1.55;
    }

    .tiag-contact__text {
        font-size: 13px;

        line-height: 1.9;
    }

    .tiag-contact__text br {
        display: none;
    }


    /* Footer */

    .tiag-footer {
        padding-top: 60px;
    }

    .tiag-footer__top {
        flex-direction: column;

        gap: 55px;

        padding-bottom: 55px;
    }

    .tiag-footer__logo {
        width: 105px;
    }

    .tiag-footer__nav {
        width: 100%;

        justify-content: space-between;

        gap: 30px;
    }

    .tiag-footer__nav-column {
        width: 50%;
    }

    .tiag-footer__bottom {
        align-items: flex-start;

        flex-direction: column;

        gap: 12px;
    }

}
/* ==================================================
   ABOUT PAGE
================================================== */

.tiag-about-page__main {
    overflow: hidden;
}


/* ==================================================
   ABOUT HERO
================================================== */

.tiag-about-hero {
    position: relative;

    min-height: 100vh;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(84, 200, 239, .14),
            rgba(84, 200, 239, 0) 34%
        ),
        radial-gradient(
            circle at 28% 78%,
            rgba(32, 200, 117, .10),
            rgba(32, 200, 117, 0) 32%
        ),
        linear-gradient(
            120deg,
            #ffffff 0%,
            #ffffff 38%,
            #f5fff9 62%,
            #effaff 100%
        );
}

.tiag-about-hero::before {
    content: "";

    position: absolute;

    left: -15%;
    right: -10%;
    bottom: -26%;

    height: 56%;

    border-radius: 50% 50% 0 0 / 40% 44% 0 0;

    background:
        linear-gradient(
            90deg,
            rgba(48, 210, 116, .25),
            rgba(71, 214, 170, .20) 40%,
            rgba(82, 198, 238, .27)
        );

    transform: rotate(-3deg);

    pointer-events: none;
}

.tiag-about-hero::after {
    content: "";

    position: absolute;

    right: -6%;
    top: 10%;

    width: 62%;
    height: 62%;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(80, 195, 243, .18),
            rgba(80, 195, 243, 0) 70%
        );

    filter: blur(12px);

    pointer-events: none;
}

.tiag-about-hero__glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(90px);

    pointer-events: none;
}

.tiag-about-hero__glow--green {
    left: -8%;
    bottom: -8%;

    width: 520px;
    height: 520px;

    background: rgba(47, 213, 120, .20);
}

.tiag-about-hero__glow--blue {
    right: -5%;
    top: 14%;

    width: 620px;
    height: 620px;

    background: rgba(79, 191, 242, .18);
}

.tiag-about-hero__inner {
    position: relative;
    z-index: 5;

    width: min(1440px, calc(100% - 80px));

    margin: 0 auto;

    padding-left: 3%;

    transform: translateY(-4%);
}

.tiag-about-hero h1 {
    margin: 0;

    max-width: 900px;

    color: var(--tiag-navy);

    font-family:
        "Hiragino Mincho ProN",
        "Yu Mincho",
        YuMincho,
        serif;

    font-size: clamp(54px, 5.3vw, 88px);
    font-weight: 400;

    line-height: 1.42;

    letter-spacing: .025em;
}

.tiag-about-hero__lead {
    margin: 28px 0 0;

    color: rgba(17, 27, 61, .62);

    font-size: 15px;

    letter-spacing: .03em;
}


/* ==================================================
   ABOUT STORY
================================================== */

.tiag-about-story {
    position: relative;

    padding: 180px 7% 200px;

    background: #ffffff;
}

.tiag-about-story__inner {
    width: min(1280px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(420px, 1fr)
        minmax(420px, .9fr);

    gap: 110px;
}

.tiag-about-story__heading h2 {
    margin: 0;

    color: var(--tiag-navy);

    font-family:
        "Hiragino Mincho ProN",
        "Yu Mincho",
        YuMincho,
        serif;

    font-size: clamp(44px, 4.2vw, 68px);
    font-weight: 400;

    line-height: 1.55;

    letter-spacing: .025em;
}

.tiag-about-story__body {
    padding-top: 76px;
}

.tiag-about-story__body p {
    margin: 0 0 38px;

    color: rgba(17, 27, 61, .75);

    font-size: 15px;

    line-height: 2.2;

    letter-spacing: .04em;
}


/* ==================================================
   ABOUT BELIEF
================================================== */

.tiag-about-belief {
    position: relative;

    min-height: 780px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f7fffa 0%,
            #edf9ff 100%
        );
}

.tiag-about-belief::before {
    content: "";

    position: absolute;

    right: -10%;
    top: -20%;

    width: 780px;
    height: 780px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, .92) 0%,
            rgba(169, 234, 226, .26) 40%,
            rgba(86, 191, 239, .13) 56%,
            rgba(86, 191, 239, 0) 72%
        );

    pointer-events: none;
}

.tiag-about-belief__glow {
    position: absolute;

    left: -8%;
    bottom: -22%;

    width: 680px;
    height: 680px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(48, 209, 119, .20),
            rgba(48, 209, 119, 0) 70%
        );

    filter: blur(20px);

    pointer-events: none;
}

.tiag-about-belief__inner {
    position: relative;
    z-index: 5;

    width: min(1280px, calc(100% - 80px));

    margin: 0 auto;

    padding: 130px 3%;
}

.tiag-about-belief h2 {
    margin: 0 0 70px;

    color: var(--tiag-navy);

    font-family:
        "Hiragino Mincho ProN",
        "Yu Mincho",
        YuMincho,
        serif;

    font-size: clamp(48px, 4.8vw, 76px);
    font-weight: 400;

    line-height: 1.48;

    letter-spacing: .025em;
}

.tiag-about-belief__body {
    margin-left: 10%;

    max-width: 560px;
}

.tiag-about-belief__body p {
    margin: 0 0 22px;

    color: rgba(17, 27, 61, .70);

    font-size: 16px;

    line-height: 2;

    letter-spacing: .04em;
}

.tiag-about-belief__message {
    margin: 85px 0 0 10%;

    color: var(--tiag-navy);

    font-family:
        "Hiragino Mincho ProN",
        "Yu Mincho",
        YuMincho,
        serif;

    font-size: clamp(30px, 3vw, 46px);
    font-weight: 400;

    line-height: 1.75;

    letter-spacing: .04em;
}


/* ==================================================
   ABOUT FIELDS
================================================== */

.tiag-about-fields {
    padding: 170px 7% 190px;

    background: #ffffff;
}

.tiag-about-fields__inner {
    width: min(1280px, 100%);

    margin: 0 auto;
}

.tiag-about-fields__heading {
    margin-bottom: 80px;

    text-align: center;
}

.tiag-about-fields__heading h2 {
    margin: 0 0 24px;

    color: var(--tiag-navy);

    font-family:
        "Hiragino Mincho ProN",
        "Yu Mincho",
        YuMincho,
        serif;

    font-size: clamp(44px, 4.5vw, 70px);
    font-weight: 400;

    line-height: 1.5;

    letter-spacing: .025em;
}

.tiag-about-fields__heading > p:last-child {
    margin: 0;

    color: rgba(17, 27, 61, .62);

    font-size: 14px;

    line-height: 2;

    letter-spacing: .035em;
}

.tiag-about-fields__cards {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 26px;
}

.tiag-about-field-card {
    position: relative;

    min-height: 460px;

    overflow: hidden;

    padding: 44px;

    border-radius: 24px;

    border: 1px solid rgba(17, 27, 61, .08);

    box-shadow:
        0 24px 70px rgba(17, 27, 61, .05);
}

.tiag-about-field-card--entertainment {
    background:
        radial-gradient(
            circle at 82% 85%,
            rgba(34, 207, 126, .28),
            rgba(34, 207, 126, 0) 46%
        ),
        linear-gradient(
            135deg,
            #f4fff8 0%,
            #e8faf2 55%,
            #def8eb 100%
        );
}

.tiag-about-field-card--technology {
    background:
        radial-gradient(
            circle at 82% 85%,
            rgba(78, 190, 241, .30),
            rgba(78, 190, 241, 0) 46%
        ),
        linear-gradient(
            135deg,
            #f5fcff 0%,
            #e9f7ff 55%,
            #ddf3ff 100%
        );
}

.tiag-about-field-card__number {
    display: block;

    margin-bottom: 56px;

    color: rgba(17, 27, 61, .16);

    font-size: 62px;
    font-weight: 300;

    line-height: 1;
}

.tiag-about-field-card__label {
    margin: 0 0 14px;

    color: var(--tiag-green);

    font-size: 11px;
    font-weight: 600;

    letter-spacing: .17em;
}

.tiag-about-field-card--technology
.tiag-about-field-card__label {
    color: #3da8d5;
}

.tiag-about-field-card h3 {
    margin: 0 0 24px;

    color: var(--tiag-navy);

    font-family:
        "Hiragino Mincho ProN",
        "Yu Mincho",
        YuMincho,
        serif;

    font-size: clamp(28px, 2.5vw, 40px);
    font-weight: 400;

    line-height: 1.6;

    letter-spacing: .025em;
}

.tiag-about-field-card__text {
    margin: 0;

    color: rgba(17, 27, 61, .68);

    font-size: 14px;

    line-height: 2;

    letter-spacing: .025em;
}

.tiag-about-fields__message {
    margin-top: 120px;

    text-align: center;
}

.tiag-about-fields__message p {
    margin: 0 0 20px;

    color: rgba(17, 27, 61, .50);

    font-size: 12px;

    letter-spacing: .08em;
}

.tiag-about-fields__message h3 {
    margin: 0;

    color: var(--tiag-navy);

    font-family:
        "Hiragino Mincho ProN",
        "Yu Mincho",
        YuMincho,
        serif;

    font-size: clamp(34px, 3.4vw, 52px);
    font-weight: 400;

    line-height: 1.7;

    letter-spacing: .03em;
}


/* ==================================================
   ABOUT PURPOSE
================================================== */

.tiag-about-purpose {
    position: relative;

    min-height: 720px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    padding: 120px 40px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #101a3a 0%,
            #102548 50%,
            #11304f 100%
        );
}

.tiag-about-purpose::before {
    content: "";

    position: absolute;

    left: -12%;
    bottom: -45%;

    width: 124%;
    height: 70%;

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            rgba(35, 206, 116, .18),
            rgba(66, 209, 176, .15),
            rgba(77, 182, 240, .18)
        );

    transform: rotate(-4deg);

    filter: blur(16px);

    pointer-events: none;
}

.tiag-about-purpose__glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;
}

.tiag-about-purpose__glow--green {
    left: -8%;
    bottom: -18%;

    width: 560px;
    height: 560px;

    background: rgba(32, 200, 117, .18);
}

.tiag-about-purpose__glow--blue {
    right: -7%;
    top: -16%;

    width: 640px;
    height: 640px;

    background: rgba(84, 200, 239, .18);
}

.tiag-about-purpose__inner {
    position: relative;
    z-index: 5;

    width: min(900px, 100%);

    margin: 0 auto;
}

.tiag-about-purpose__label {
    margin: 0 0 28px;

    color: rgba(92, 222, 161, .95);

    font-size: 11px;
    font-weight: 600;

    letter-spacing: .25em;
}

.tiag-about-purpose h2 {
    margin: 0 0 34px;

    color: #ffffff;

    font-family:
        "Hiragino Mincho ProN",
        "Yu Mincho",
        YuMincho,
        serif;

    font-size: clamp(50px, 5vw, 76px);
    font-weight: 400;

    line-height: 1.5;

    letter-spacing: .035em;
}

.tiag-about-purpose__text {
    margin: 0 0 42px;

    color: rgba(255, 255, 255, .68);

    font-size: 14px;

    line-height: 2;

    letter-spacing: .035em;
}

.tiag-about-purpose__button {
    display: inline-flex;

    align-items: center;
    justify-content: space-between;

    gap: 55px;

    min-width: 190px;

    padding: 16px 22px;

    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;

    color: #ffffff;

    font-size: 12px;

    text-decoration: none;

    background: rgba(255, 255, 255, .06);

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.tiag-about-purpose__button:hover {
    background: #ffffff;

    color: var(--tiag-navy);

    transform: translateY(-2px);
}


/* ==================================================
   ABOUT TABLET
================================================== */

@media (max-width: 900px) {

    .tiag-about-hero__inner {
        width: calc(100% - 44px);

        padding-left: 0;
    }

    .tiag-about-story {
        padding: 120px 22px 140px;
    }

    .tiag-about-story__inner {
        grid-template-columns: 1fr;

        gap: 70px;
    }

    .tiag-about-story__body {
        padding-top: 0;
    }

    .tiag-about-belief__inner {
        width: calc(100% - 44px);

        padding: 110px 0;
    }

    .tiag-about-belief__body {
        margin-left: 0;
    }

    .tiag-about-belief__message {
        margin-left: 0;
    }

    .tiag-about-fields {
        padding: 120px 22px 140px;
    }

    .tiag-about-fields__cards {
        grid-template-columns: 1fr;
    }

    .tiag-about-fields__message {
        margin-top: 80px;
    }

}


/* ==================================================
   ABOUT SMARTPHONE
================================================== */

@media (max-width: 520px) {

    .tiag-about-hero {
        min-height: 100svh;
    }

    .tiag-about-hero__inner {
        width: calc(100% - 36px);

        transform: translateY(-2%);
    }

    .tiag-about-hero h1 {
        font-size: 40px;

        line-height: 1.55;
    }

    .tiag-about-hero__lead {
        font-size: 12px;

        line-height: 1.8;
    }


    .tiag-about-story {
        padding-top: 100px;
        padding-bottom: 110px;
    }

    .tiag-about-story__heading h2 {
        font-size: 36px;

        line-height: 1.6;
    }

    .tiag-about-story__body p {
        font-size: 14px;

        line-height: 2.1;
    }


    .tiag-about-belief {
        min-height: auto;
    }

    .tiag-about-belief__inner {
        width: calc(100% - 36px);

        padding: 100px 0;
    }

    .tiag-about-belief h2 {
        margin-bottom: 55px;

        font-size: 40px;
    }

    .tiag-about-belief__body p {
        font-size: 14px;
    }

    .tiag-about-belief__message {
        margin-top: 60px;

        font-size: 28px;
    }


    .tiag-about-fields {
        padding-top: 100px;
        padding-bottom: 110px;
    }

    .tiag-about-fields__heading {
        margin-bottom: 55px;

        text-align: left;
    }

    .tiag-about-fields__heading h2 {
        font-size: 38px;
    }

    .tiag-about-field-card {
        min-height: auto;

        padding: 30px 24px;
    }

    .tiag-about-field-card__number {
        margin-bottom: 36px;

        font-size: 50px;
    }

    .tiag-about-field-card h3 {
        font-size: 28px;
    }

    .tiag-about-fields__message {
        margin-top: 70px;

        text-align: left;
    }

    .tiag-about-fields__message h3 {
        font-size: 31px;
    }


    .tiag-about-purpose {
        min-height: 620px;

        padding: 90px 22px;
    }

    .tiag-about-purpose h2 {
        font-size: 40px;

        line-height: 1.55;
    }

    .tiag-about-purpose__text {
        font-size: 13px;
    }

    .tiag-about-purpose__text br {
        display: none;
    }

}
/* ==================================================
   ABOUT PAGE - FINAL POLISH
================================================== */

/* HEROを少しだけ上へ詰める */

.tiag-about-hero__inner {
    transform: translateY(-9%);
}

.tiag-about-hero h1 {
    font-size: clamp(52px, 5vw, 84px);
}


/* ==================================================
   STORY READABILITY
================================================== */

.tiag-about-story__body p {
    font-size: 16px;
    line-height: 2.2;
    color: rgba(17, 27, 61, .78);
}


/* ==================================================
   BEYOND EMOTION
================================================== */

.tiag-about-beyond {
    position: relative;

    padding: 180px 7% 200px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7fffb 48%,
            #f1faff 100%
        );
}

.tiag-about-beyond::before {
    content: "";

    position: absolute;

    right: -10%;
    bottom: -30%;

    width: 720px;
    height: 720px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(72, 204, 194, .12),
            rgba(72, 204, 194, 0) 70%
        );

    pointer-events: none;
}

.tiag-about-beyond__inner {
    position: relative;
    z-index: 2;

    width: min(1280px, 100%);

    margin: 0 auto;
}

.tiag-about-beyond__content {
    max-width: 860px;
}

.tiag-about-beyond h2 {
    margin: 0 0 72px;

    color: var(--tiag-navy);

    font-family:
        "Hiragino Mincho ProN",
        "Yu Mincho",
        YuMincho,
        serif;

    font-size: clamp(42px, 4.2vw, 66px);
    font-weight: 400;

    line-height: 1.6;

    letter-spacing: .025em;
}

.tiag-about-beyond__text {
    margin-left: 8%;

    max-width: 520px;
}

.tiag-about-beyond__text p {
    margin: 0 0 22px;

    color: rgba(17, 27, 61, .72);

    font-size: 16px;

    line-height: 2;

    letter-spacing: .04em;
}

.tiag-about-beyond__message {
    margin: 85px 0 0 8%;

    color: var(--tiag-navy);

    font-family:
        "Hiragino Mincho ProN",
        "Yu Mincho",
        YuMincho,
        serif;

    font-size: clamp(30px, 3vw, 46px);
    font-weight: 400;

    line-height: 1.75;

    letter-spacing: .04em;
}


/* ==================================================
   ABOUT TABLET FINAL
================================================== */

@media (max-width: 900px) {

    .tiag-about-hero__inner {
        transform: translateY(-5%);
    }

    .tiag-about-beyond {
        padding: 120px 22px 140px;
    }

    .tiag-about-beyond__text {
        margin-left: 0;
    }

    .tiag-about-beyond__message {
        margin-left: 0;
    }
}


/* ==================================================
   ABOUT MOBILE FINAL
================================================== */

@media (max-width: 520px) {

    .tiag-about-hero__inner {
        transform: translateY(-3%);
    }

    .tiag-about-story__body p {
        font-size: 15px;
    }

    .tiag-about-beyond {
        padding-top: 100px;
        padding-bottom: 110px;
    }

    .tiag-about-beyond h2 {
        margin-bottom: 55px;

        font-size: 36px;
        line-height: 1.65;
    }

    .tiag-about-beyond__text p {
        font-size: 14px;
        line-height: 2.05;
    }

    .tiag-about-beyond__message {
        margin-top: 60px;

        font-size: 28px;
    }
}
/* ==================================================
   ENTERTAINMENT PAGE
================================================== */

.tiag-entertainment-page__main {
    overflow: hidden;
}


/* ==================================================
   ENTERTAINMENT HERO
================================================== */

.tiag-entertainment-hero {
    position: relative;

    min-height: 100vh;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 78% 30%,
            rgba(77, 212, 163, .18),
            rgba(77, 212, 163, 0) 36%
        ),
        radial-gradient(
            circle at 86% 56%,
            rgba(84, 196, 239, .16),
            rgba(84, 196, 239, 0) 35%
        ),
        linear-gradient(
            120deg,
            #ffffff 0%,
            #ffffff 36%,
            #f4fff8 62%,
            #eefaff 100%
        );
}

.tiag-entertainment-hero::before {
    content: "";

    position: absolute;

    left: -14%;
    right: -12%;
    bottom: -23%;

    height: 58%;

    border-radius: 50% 50% 0 0 / 40% 46% 0 0;

    background:
        linear-gradient(
            90deg,
            rgba(42, 210, 114, .30),
            rgba(61, 216, 154, .24) 34%,
            rgba(72, 208, 201, .22) 62%,
            rgba(76, 185, 240, .27) 100%
        );

    transform: rotate(-3deg);

    filter: blur(2px);

    pointer-events: none;
}

.tiag-entertainment-hero::after {
    content: "";

    position: absolute;

    right: -7%;
    top: 12%;

    width: 64%;
    height: 64%;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(79, 199, 238, .20),
            rgba(79, 199, 238, 0) 70%
        );

    filter: blur(14px);

    pointer-events: none;
}

.tiag-entertainment-hero__glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(95px);

    pointer-events: none;
}

.tiag-entertainment-hero__glow--green {
    left: -8%;
    bottom: -10%;

    width: 560px;
    height: 560px;

    background: rgba(45, 211, 116, .22);
}

.tiag-entertainment-hero__glow--blue {
    right: -4%;
    top: 14%;

    width: 650px;
    height: 650px;

    background: rgba(79, 190, 242, .17);
}

.tiag-entertainment-hero__inner {
    position: relative;
    z-index: 5;

    width: min(1440px, calc(100% - 80px));

    margin: 0 auto;

    padding-left: 3%;

    transform: translateY(-5%);
}

.tiag-entertainment-hero h1 {
    margin: 0;

    max-width: 900px;

    color: var(--tiag-navy);

    font-family:
        "Hiragino Mincho ProN",
        "Yu Mincho",
        YuMincho,
        serif;

    font-size: clamp(54px, 5.2vw, 88px);
    font-weight: 400;

    line-height: 1.42;

    letter-spacing: .025em;
}

.tiag-entertainment-hero__lead {
    margin: 28px 0 0;

    color: rgba(17, 27, 61, .62);

    font-size: 15px;

    letter-spacing: .03em;
}


/* ==================================================
   WHY ENTERTAINMENT
================================================== */

.tiag-entertainment-why {
    position: relative;

    padding: 180px 7% 200px;

    background: #ffffff;
}

.tiag-entertainment-why__inner {
    width: min(1280px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(420px, 1fr)
        minmax(420px, .9fr);

    gap: 110px;
}

.tiag-entertainment-why__heading h2 {
    margin: 0;

    color: var(--tiag-navy);

    font-family:
        "Hiragino Mincho ProN",
        "Yu Mincho",
        YuMincho,
        serif;

    font-size: clamp(44px, 4.2vw, 68px);
    font-weight: 400;

    line-height: 1.55;

    letter-spacing: .025em;
}

.tiag-entertainment-why__body {
    padding-top: 76px;
}

.tiag-entertainment-why__body p {
    margin: 0 0 38px;

    color: rgba(17, 27, 61, .76);

    font-size: 15px;

    line-height: 2.2;

    letter-spacing: .04em;
}


/* ==================================================
   WHAT WE CREATE
================================================== */

.tiag-entertainment-create {
    position: relative;

    padding: 170px 7% 190px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #f9fffb 0%,
            #f4fcff 100%
        );
}

.tiag-entertainment-create::before {
    content: "";

    position: absolute;

    left: -10%;
    bottom: -32%;

    width: 720px;
    height: 720px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(48, 211, 116, .10),
            rgba(48, 211, 116, 0) 70%
        );

    pointer-events: none;
}

.tiag-entertainment-create__inner {
    position: relative;
    z-index: 2;

    width: min(1280px, 100%);

    margin: 0 auto;
}

.tiag-entertainment-create__heading {
    margin-bottom: 80px;
}

.tiag-entertainment-create__heading h2 {
    margin: 0 0 24px;

    color: var(--tiag-navy);

    font-family:
        "Hiragino Mincho ProN",
        "Yu Mincho",
        YuMincho,
        serif;

    font-size: clamp(44px, 4.5vw, 70px);
    font-weight: 400;

    line-height: 1.5;

    letter-spacing: .025em;
}

.tiag-entertainment-create__heading > p:last-child {
    margin: 0;

    color: rgba(17, 27, 61, .62);

    font-size: 14px;

    line-height: 2;

    letter-spacing: .035em;
}

.tiag-entertainment-create__grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 24px;
}

.tiag-entertainment-create-card {
    position: relative;

    min-height: 420px;

    overflow: hidden;

    padding: 38px;

    border-radius: 22px;

    border: 1px solid rgba(17, 27, 61, .07);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.92),
            rgba(236,255,246,.82)
        );

    box-shadow:
        0 24px 70px rgba(17, 27, 61, .05);

    transition:
        transform .30s ease,
        box-shadow .30s ease;
}

.tiag-entertainment-create-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 30px 85px rgba(17, 27, 61, .09);
}

.tiag-entertainment-create-card::after {
    content: "";

    position: absolute;

    right: -90px;
    bottom: -100px;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(43, 205, 117, .18),
            rgba(43, 205, 117, 0) 70%
        );
}

.tiag-entertainment-create-card:nth-child(2)::after {
    background:
        radial-gradient(
            circle,
            rgba(63, 207, 186, .17),
            rgba(63, 207, 186, 0) 70%
        );
}

.tiag-entertainment-create-card:nth-child(3)::after {
    background:
        radial-gradient(
            circle,
            rgba(78, 188, 239, .18),
            rgba(78, 188, 239, 0) 70%
        );
}

.tiag-entertainment-create-card__number {
    position: relative;
    z-index: 2;

    display: block;

    margin-bottom: 52px;

    color: rgba(17, 27, 61, .15);

    font-size: 58px;
    font-weight: 300;

    line-height: 1;
}

.tiag-entertainment-create-card__label {
    position: relative;
    z-index: 2;

    margin: 0 0 12px;

    color: var(--tiag-green);

    font-size: 10px;
    font-weight: 600;

    letter-spacing: .17em;
}

.tiag-entertainment-create-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 22px;

    color: var(--tiag-navy);

    font-size: clamp(23px, 2vw, 30px);
    font-weight: 500;

    line-height: 1.5;
}

.tiag-entertainment-create-card > p:last-child {
    position: relative;
    z-index: 2;

    margin: 0;

    color: rgba(17, 27, 61, .68);

    font-size: 13px;

    line-height: 2;

    letter-spacing: .025em;
}


/* ==================================================
   OUR APPROACH
================================================== */

.tiag-entertainment-experience {
    position: relative;

    min-height: 760px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f6fff9 0%,
            #edf9ff 100%
        );
}

.tiag-entertainment-experience::before {
    content: "";

    position: absolute;

    right: -12%;
    top: -18%;

    width: 780px;
    height: 780px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.95) 0%,
            rgba(179, 239, 229, .28) 38%,
            rgba(79, 190, 240, .14) 56%,
            rgba(79, 190, 240, 0) 72%
        );
}

.tiag-entertainment-experience__glow {
    position: absolute;

    left: -7%;
    bottom: -22%;

    width: 660px;
    height: 660px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(49, 209, 118, .18),
            rgba(49, 209, 118, 0) 70%
        );

    filter: blur(18px);
}

.tiag-entertainment-experience__inner {
    position: relative;
    z-index: 5;

    width: min(1280px, calc(100% - 80px));

    margin: 0 auto;

    padding: 130px 3%;
}

.tiag-entertainment-experience h2 {
    margin: 0 0 68px;

    color: var(--tiag-navy);

    font-family:
        "Hiragino Mincho ProN",
        "Yu Mincho",
        YuMincho,
        serif;

    font-size: clamp(46px, 4.7vw, 74px);
    font-weight: 400;

    line-height: 1.5;

    letter-spacing: .025em;
}

.tiag-entertainment-experience__body {
    max-width: 600px;

    margin-left: 8%;
}

.tiag-entertainment-experience__body p {
    margin: 0 0 22px;

    color: rgba(17, 27, 61, .72);

    font-size: 15px;

    line-height: 2;

    letter-spacing: .04em;
}

.tiag-entertainment-experience__message {
    margin: 82px 0 0 8%;

    color: var(--tiag-navy);

    font-family:
        "Hiragino Mincho ProN",
        "Yu Mincho",
        YuMincho,
        serif;

    font-size: clamp(30px, 3vw, 46px);

    line-height: 1.75;

    letter-spacing: .04em;
}


/* ==================================================
   PROJECTS
================================================== */

.tiag-entertainment-projects {
    padding: 170px 7% 190px;

    background: #ffffff;
}

.tiag-entertainment-projects__inner {
    width: min(1280px, 100%);

    margin: 0 auto;
}

.tiag-entertainment-projects__heading {
    margin-bottom: 75px;
}

.tiag-entertainment-projects__heading h2 {
    margin: 0 0 22px;

    color: var(--tiag-navy);

    font-family:
        "Hiragino Mincho ProN",
        "Yu Mincho",
        YuMincho,
        serif;

    font-size: clamp(42px, 4vw, 62px);
    font-weight: 400;

    line-height: 1.45;

    letter-spacing: .025em;
}

.tiag-entertainment-projects__heading > p:last-child {
    margin: 0;

    color: rgba(17, 27, 61, .62);

    font-size: 14px;

    line-height: 2;
}

.tiag-entertainment-projects__grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 28px;
}

.tiag-entertainment-project {
    overflow: hidden;

    border-radius: 22px;

    border: 1px solid rgba(17, 27, 61, .08);

    background: #fff;

    box-shadow:
        0 24px 70px rgba(17, 27, 61, .05);
}

.tiag-entertainment-project__visual {
    position: relative;

    height: 280px;

    overflow: hidden;
}

.tiag-entertainment-project__visual::before,
.tiag-entertainment-project__visual::after {
    content: "";

    position: absolute;

    pointer-events: none;
}

.tiag-entertainment-project__visual--summon {
    background:
        radial-gradient(
            circle at 72% 40%,
            rgba(255,255,255,.85),
            rgba(255,255,255,0) 28%
        ),
        linear-gradient(
            135deg,
            #dff9ea 0%,
            #aeeecb 50%,
            #71d4be 100%
        );
}

.tiag-entertainment-project__visual--summon::before {
    left: -10%;
    bottom: -40%;

    width: 120%;
    height: 75%;

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            rgba(35,197,105,.32),
            rgba(60,213,166,.20),
            rgba(74,186,234,.15)
        );

    transform: rotate(-4deg);
}

.tiag-entertainment-project__visual--festival {
    background:
        radial-gradient(
            circle at 75% 30%,
            rgba(255,255,255,.86),
            rgba(255,255,255,0) 28%
        ),
        linear-gradient(
            135deg,
            #eafaff 0%,
            #bcecff 52%,
            #81cdf2 100%
        );
}

.tiag-entertainment-project__visual--festival::before {
    left: -8%;
    bottom: -36%;

    width: 120%;
    height: 70%;

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            rgba(62,194,157,.18),
            rgba(82,194,221,.22),
            rgba(71,170,235,.30)
        );

    transform: rotate(-3deg);
}

.tiag-entertainment-project__content {
    padding: 30px 32px 34px;
}

.tiag-entertainment-project__content > p {
    margin: 0 0 10px;

    color: var(--tiag-green);

    font-size: 10px;
    font-weight: 600;

    letter-spacing: .16em;
}

.tiag-entertainment-project:nth-child(2)
.tiag-entertainment-project__content > p {
    color: #3baad8;
}

.tiag-entertainment-project__content h3 {
    margin: 0 0 14px;

    color: var(--tiag-navy);

    font-size: 24px;
    font-weight: 500;

    line-height: 1.5;
}

.tiag-entertainment-project__content span {
    display: block;

    color: rgba(17, 27, 61, .66);

    font-size: 13px;

    line-height: 1.9;
}


/* ==================================================
   ENTERTAINMENT CTA
================================================== */

.tiag-entertainment-cta {
    position: relative;

    min-height: 680px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    padding: 120px 40px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #101a3a 0%,
            #102747 50%,
            #103352 100%
        );
}

.tiag-entertainment-cta::before {
    content: "";

    position: absolute;

    left: -12%;
    bottom: -46%;

    width: 124%;
    height: 72%;

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            rgba(34,205,114,.18),
            rgba(63,210,172,.15),
            rgba(76,183,240,.18)
        );

    transform: rotate(-4deg);

    filter: blur(16px);
}

.tiag-entertainment-cta__glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;
}

.tiag-entertainment-cta__glow--green {
    left: -8%;
    bottom: -20%;

    width: 560px;
    height: 560px;

    background: rgba(32,200,117,.18);
}

.tiag-entertainment-cta__glow--blue {
    right: -7%;
    top: -18%;

    width: 640px;
    height: 640px;

    background: rgba(84,200,239,.18);
}

.tiag-entertainment-cta__inner {
    position: relative;
    z-index: 5;

    width: min(900px, 100%);

    margin: 0 auto;
}

.tiag-entertainment-cta__label {
    margin: 0 0 28px;

    color: rgba(92,222,161,.95);

    font-size: 11px;
    font-weight: 600;

    letter-spacing: .25em;
}

.tiag-entertainment-cta h2 {
    margin: 0 0 34px;

    color: #ffffff;

    font-family:
        "Hiragino Mincho ProN",
        "Yu Mincho",
        YuMincho,
        serif;

    font-size: clamp(48px, 5vw, 74px);
    font-weight: 400;

    line-height: 1.5;

    letter-spacing: .035em;
}

.tiag-entertainment-cta__text {
    margin: 0 0 42px;

    color: rgba(255,255,255,.68);

    font-size: 14px;

    line-height: 2;

    letter-spacing: .035em;
}

.tiag-entertainment-cta__button {
    display: inline-flex;

    align-items: center;
    justify-content: space-between;

    gap: 55px;

    min-width: 205px;

    padding: 16px 22px;

    border: 1px solid rgba(255,255,255,.35);
    border-radius: 999px;

    color: #ffffff;

    font-size: 12px;

    text-decoration: none;

    background: rgba(255,255,255,.06);

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.tiag-entertainment-cta__button:hover {
    background: #ffffff;

    color: var(--tiag-navy);

    transform: translateY(-2px);
}


/* ==================================================
   ENTERTAINMENT TABLET
================================================== */

@media (max-width: 900px) {

    .tiag-entertainment-hero__inner {
        width: calc(100% - 44px);

        padding-left: 0;
    }

    .tiag-entertainment-why {
        padding: 120px 22px 140px;
    }

    .tiag-entertainment-why__inner {
        grid-template-columns: 1fr;

        gap: 70px;
    }

    .tiag-entertainment-why__body {
        padding-top: 0;
    }

    .tiag-entertainment-create {
        padding: 120px 22px 140px;
    }

    .tiag-entertainment-create__grid {
        grid-template-columns: 1fr;
    }

    .tiag-entertainment-experience__inner {
        width: calc(100% - 44px);

        padding: 110px 0;
    }

    .tiag-entertainment-experience__body,
    .tiag-entertainment-experience__message {
        margin-left: 0;
    }

    .tiag-entertainment-projects {
        padding: 120px 22px 140px;
    }

    .tiag-entertainment-projects__grid {
        grid-template-columns: 1fr;
    }

}


/* ==================================================
   ENTERTAINMENT SMARTPHONE
================================================== */

@media (max-width: 520px) {

    .tiag-entertainment-hero {
        min-height: 100svh;
    }

    .tiag-entertainment-hero__inner {
        width: calc(100% - 36px);

        transform: translateY(-2%);
    }

    .tiag-entertainment-hero h1 {
        font-size: 40px;

        line-height: 1.55;
    }

    .tiag-entertainment-hero__lead {
        font-size: 12px;

        line-height: 1.8;
    }


    .tiag-entertainment-why {
        padding-top: 100px;
        padding-bottom: 110px;
    }

    .tiag-entertainment-why__heading h2 {
        font-size: 36px;

        line-height: 1.6;
    }

    .tiag-entertainment-why__body p {
        font-size: 14px;

        line-height: 2.1;
    }


    .tiag-entertainment-create {
        padding-top: 100px;
        padding-bottom: 110px;
    }

    .tiag-entertainment-create__heading {
        margin-bottom: 55px;
    }

    .tiag-entertainment-create__heading h2 {
        font-size: 38px;
    }

    .tiag-entertainment-create-card {
        min-height: auto;

        padding: 30px 24px;
    }

    .tiag-entertainment-create-card__number {
        margin-bottom: 36px;

        font-size: 50px;
    }

    .tiag-entertainment-create-card h3 {
        font-size: 26px;
    }


    .tiag-entertainment-experience {
        min-height: auto;
    }

    .tiag-entertainment-experience__inner {
        width: calc(100% - 36px);

        padding: 100px 0;
    }

    .tiag-entertainment-experience h2 {
        margin-bottom: 55px;

        font-size: 39px;
    }

    .tiag-entertainment-experience__body p {
        font-size: 14px;
    }

    .tiag-entertainment-experience__message {
        margin-top: 60px;

        font-size: 28px;
    }


    .tiag-entertainment-projects {
        padding-top: 100px;
        padding-bottom: 110px;
    }

    .tiag-entertainment-projects__heading {
        margin-bottom: 55px;
    }

    .tiag-entertainment-projects__heading h2 {
        font-size: 38px;
    }

    .tiag-entertainment-project__visual {
        height: 210px;
    }

    .tiag-entertainment-project__content {
        padding: 26px 24px 30px;
    }


    .tiag-entertainment-cta {
        min-height: 620px;

        padding: 90px 22px;
    }

    .tiag-entertainment-cta h2 {
        font-size: 39px;

        line-height: 1.55;
    }

    .tiag-entertainment-cta__text {
        font-size: 13px;
    }

    .tiag-entertainment-cta__text br {
        display: none;
    }

}
/* ==================================================
   TECHNOLOGY
================================================== */

.tiag-technology {
    position: relative;

    padding: 170px 7% 190px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f7fcff 0%,
            #eef8ff 52%,
            #f7fffb 100%
        );
}

.tiag-technology::before {
    content: "";

    position: absolute;

    right: -12%;
    top: -20%;

    width: 760px;
    height: 760px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(84, 200, 239, .18),
            rgba(84, 200, 239, 0) 70%
        );

    pointer-events: none;
}

.tiag-technology::after {
    content: "";

    position: absolute;

    left: -15%;
    bottom: -32%;

    width: 760px;
    height: 760px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(45, 207, 130, .10),
            rgba(45, 207, 130, 0) 70%
        );

    pointer-events: none;
}


/* ==================================================
   TECHNOLOGY Glow
================================================== */

.tiag-technology__glow {
    position: absolute;

    right: 10%;
    top: 24%;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.88),
            rgba(115, 211, 239, .12) 35%,
            rgba(84, 190, 239, 0) 70%
        );

    filter: blur(10px);

    pointer-events: none;
}


/* ==================================================
   TECHNOLOGY Inner
================================================== */

.tiag-technology__inner {
    position: relative;
    z-index: 2;

    width: min(1280px, 100%);

    margin: 0 auto;
}


/* ==================================================
   TECHNOLOGY Heading
================================================== */

.tiag-technology__heading {
    max-width: 820px;

    margin-bottom: 80px;
}

.tiag-technology__heading h2 {
    margin: 0 0 28px;

    color: var(--tiag-navy);

    font-family:
        "Hiragino Mincho ProN",
        "Yu Mincho",
        YuMincho,
        serif;

    font-size: clamp(44px, 4.5vw, 70px);
    font-weight: 400;

    line-height: 1.5;

    letter-spacing: .025em;
}

.tiag-technology__heading > p:last-child {
    margin: 0;

    color: rgba(17, 27, 61, .66);

    font-size: 14px;

    line-height: 2;

    letter-spacing: .035em;
}


/* ==================================================
   TECHNOLOGY Grid
================================================== */

.tiag-technology__grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 26px;
}


/* ==================================================
   TECHNOLOGY Card
================================================== */

.tiag-technology-card {
    position: relative;

    min-height: 390px;

    overflow: hidden;

    padding: 42px;

    border-radius: 22px;

    border: 1px solid rgba(17, 27, 61, .07);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.90),
            rgba(232,247,255,.86)
        );

    box-shadow:
        0 24px 70px rgba(17, 27, 61, .05);

    transition:
        transform .30s ease,
        box-shadow .30s ease;
}

.tiag-technology-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 30px 85px rgba(17, 27, 61, .09);
}

.tiag-technology-card::after {
    content: "";

    position: absolute;

    right: -90px;
    bottom: -100px;

    width: 320px;
    height: 320px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(74, 186, 239, .20),
            rgba(74, 186, 239, 0) 70%
        );

    pointer-events: none;
}


/* ==================================================
   TECHNOLOGY Number
================================================== */

.tiag-technology-card__number {
    position: relative;
    z-index: 2;

    display: block;

    margin-bottom: 50px;

    color: rgba(17, 27, 61, .15);

    font-size: 58px;
    font-weight: 300;

    line-height: 1;
}


/* ==================================================
   TECHNOLOGY Label
================================================== */

.tiag-technology-card__label {
    position: relative;
    z-index: 2;

    margin: 0 0 12px;

    color: #3baad8;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: .18em;
}


/* ==================================================
   TECHNOLOGY Title
================================================== */

.tiag-technology-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 22px;

    color: var(--tiag-navy);

    font-size: clamp(24px, 2vw, 31px);
    font-weight: 500;

    line-height: 1.5;
}


/* ==================================================
   TECHNOLOGY Text
================================================== */

.tiag-technology-card > p:last-child {
    position: relative;
    z-index: 2;

    margin: 0;

    max-width: 500px;

    color: rgba(17, 27, 61, .68);

    font-size: 14px;

    line-height: 2;

    letter-spacing: .025em;
}


/* ==================================================
   TECHNOLOGY Message
================================================== */

.tiag-technology__message {
    margin-top: 110px;

    text-align: center;
}

.tiag-technology__message p {
    margin: 0 0 18px;

    color: rgba(17, 27, 61, .45);

    font-size: 11px;

    letter-spacing: .14em;
}

.tiag-technology__message h3 {
    margin: 0;

    color: var(--tiag-navy);

    font-family:
        "Hiragino Mincho ProN",
        "Yu Mincho",
        YuMincho,
        serif;

    font-size: clamp(32px, 3vw, 48px);
    font-weight: 400;

    line-height: 1.7;

    letter-spacing: .035em;
}


/* ==================================================
   TECHNOLOGY Tablet
================================================== */

@media (max-width: 900px) {

    .tiag-technology {
        padding: 120px 22px 140px;
    }

    .tiag-technology__grid {
        grid-template-columns: 1fr;
    }

    .tiag-technology__message {
        margin-top: 80px;
    }

}


/* ==================================================
   TECHNOLOGY Smartphone
================================================== */

@media (max-width: 520px) {

    .tiag-technology {
        padding-top: 100px;
        padding-bottom: 110px;
    }

    .tiag-technology__heading {
        margin-bottom: 55px;
    }

    .tiag-technology__heading h2 {
        font-size: 38px;
    }

    .tiag-technology__heading > p:last-child {
        font-size: 13px;
    }

    .tiag-technology-card {
        min-height: auto;

        padding: 30px 24px;
    }

    .tiag-technology-card__number {
        margin-bottom: 36px;

        font-size: 50px;
    }

    .tiag-technology-card h3 {
        font-size: 26px;
    }

    .tiag-technology__message {
        margin-top: 70px;

        text-align: left;
    }

    .tiag-technology__message h3 {
        font-size: 30px;
    }

}
/* ==================================================
   SPA MOTION
================================================== */


/* Header transition */

.tiag-header {
    transition:
        background .35s ease,
        box-shadow .35s ease,
        padding .35s ease,
        backdrop-filter .35s ease;
}


/* Scroll header */

.tiag-header.is-scrolled {
    padding-top: 16px;
    padding-bottom: 16px;

    background: rgba(255, 255, 255, .82);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 8px 30px rgba(17, 27, 61, .055);
}


/* Active navigation */

.tiag-nav a.is-active:not(.tiag-nav__contact) {
    color: var(--tiag-green);
}


/* ==================================================
   Reveal Animation
================================================== */

.tiag-reveal {
    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity .85s cubic-bezier(.2, .7, .2, 1),
        transform .85s cubic-bezier(.2, .7, .2, 1);
}

.tiag-reveal.is-visible {
    opacity: 1;

    transform: translateY(0);
}


/* Small stagger */

.tiag-business-card:nth-child(2),
.tiag-entertainment-create-card:nth-child(2),
.tiag-technology-card:nth-child(2),
.tiag-value-item:nth-child(2) {
    transition-delay: .08s;
}

.tiag-entertainment-create-card:nth-child(3),
.tiag-value-item:nth-child(3) {
    transition-delay: .16s;
}

.tiag-value-item:nth-child(4) {
    transition-delay: .24s;
}

.tiag-value-item:nth-child(5) {
    transition-delay: .32s;
}


/* ==================================================
   Accessibility
================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .tiag-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .tiag-header,
    .tiag-button,
    .tiag-business-card,
    .tiag-entertainment-create-card,
    .tiag-technology-card {
        transition: none;
    }

}
/* ==================================================
   MOBILE MENU BUTTON
================================================== */

.tiag-menu-button {
    position: relative;
    z-index: 1002;

    display: none;

    width: 46px;
    height: 46px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: rgba(255,255,255,.72);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    cursor: pointer;
}

.tiag-menu-button span {
    position: absolute;

    left: 13px;

    width: 20px;
    height: 1px;

    background: var(--tiag-navy);

    transition:
        top .35s ease,
        transform .35s ease;
}

.tiag-menu-button span:first-child {
    top: 19px;
}

.tiag-menu-button span:last-child {
    top: 26px;
}


/* Close state */

.tiag-menu-button.is-open span:first-child {
    top: 23px;

    transform: rotate(45deg);
}

.tiag-menu-button.is-open span:last-child {
    top: 23px;

    transform: rotate(-45deg);
}


/* ==================================================
   MOBILE MENU
================================================== */

.tiag-mobile-menu {
    position: fixed;

    z-index: 1000;

    inset: 0;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding:
        120px
        max(24px, 7vw)
        42px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(84,200,239,.20),
            rgba(84,200,239,0) 36%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(32,200,117,.16),
            rgba(32,200,117,0) 38%
        ),
        rgba(249,253,252,.97);

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);

    opacity: 0;

    visibility: hidden;

    transform: translateY(-12px);

    transition:
        opacity .35s ease,
        visibility .35s ease,
        transform .35s ease;
}

.tiag-mobile-menu.is-open {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}


/* ==================================================
   MOBILE MENU NAV
================================================== */

.tiag-mobile-menu__nav {
    display: flex;

    flex-direction: column;
}

.tiag-mobile-menu__nav a {
    display: flex;

    align-items: baseline;

    gap: 20px;

    padding: 13px 0;

    color: var(--tiag-navy);

    font-family:
        "Hiragino Mincho ProN",
        "Yu Mincho",
        YuMincho,
        serif;

    font-size: clamp(28px, 7vw, 42px);
    font-weight: 400;

    line-height: 1.25;

    text-decoration: none;

    border-bottom:
        1px solid rgba(17,27,61,.075);
}

.tiag-mobile-menu__nav a span {
    width: 24px;

    color: var(--tiag-green);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: .10em;
}


/* ==================================================
   MOBILE MENU FOOTER
================================================== */

.tiag-mobile-menu__footer {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    padding-top: 36px;
}

.tiag-mobile-menu__footer p {
    margin: 0;

    color: var(--tiag-navy);

    font-family:
        "Hiragino Mincho ProN",
        "Yu Mincho",
        YuMincho,
        serif;

    font-size: 15px;

    line-height: 1.8;

    letter-spacing: .035em;
}

.tiag-mobile-menu__footer > span {
    color: rgba(17,27,61,.40);

    font-size: 9px;

    letter-spacing: .08em;
}


/* ==================================================
   BODY LOCK
================================================== */

body.tiag-menu-open {
    overflow: hidden;
}


/* ==================================================
   MOBILE BREAKPOINT
================================================== */

@media (max-width: 900px) {

    .tiag-menu-button {
        display: block;
    }

}


/* ==================================================
   SMARTPHONE MENU
================================================== */

@media (max-width: 520px) {

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

    .tiag-menu-button span {
        left: 12px;

        width: 18px;
    }

    .tiag-menu-button span:first-child {
        top: 17px;
    }

    .tiag-menu-button span:last-child {
        top: 24px;
    }

    .tiag-menu-button.is-open span:first-child,
    .tiag-menu-button.is-open span:last-child {
        top: 21px;
    }


    .tiag-mobile-menu {
        padding:
            100px
            22px
            30px;
    }

    .tiag-mobile-menu__nav a {
        padding: 11px 0;

        font-size: 27px;
    }

    .tiag-mobile-menu__footer p {
        font-size: 13px;
    }

}
/* ==================================================
   MOBILE MENU - VISIBILITY FIX
================================================== */

.tiag-mobile-menu {
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(84, 200, 239, .16),
            rgba(84, 200, 239, 0) 38%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(32, 200, 117, .13),
            rgba(32, 200, 117, 0) 40%
        ),
        #f8fcfb;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}


/* メニュー表示中は完全に前面へ */

.tiag-mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
}


/* 開いている間、ヘッダー背景も透明にしない */

body.tiag-menu-open .tiag-header {
    background: #f8fcfb;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    box-shadow: none;
}


/* 閉じるボタンを見やすく */

body.tiag-menu-open .tiag-menu-button {
    background: rgba(255, 255, 255, .96);

    box-shadow:
        0 0 0 1px rgba(17, 27, 61, .06),
        0 8px 24px rgba(17, 27, 61, .08);
}


/* メニュー文字の視認性を少し上げる */

.tiag-mobile-menu__nav a {
    color: #111b3d;
}

.tiag-mobile-menu__nav a span {
    color: #20c875;
}


/* 区切り線も少しだけ見やすく */

.tiag-mobile-menu__nav a {
    border-bottom-color: rgba(17, 27, 61, .10);
}
/* ==================================================
   TiAG EXPERIENCE MOTION
================================================== */


/* ==================================================
   HERO BREATHING
================================================== */

.tiag-hero::before {
    animation:
        tiagHeroBreathing 12s
        ease-in-out
        infinite alternate;

    transform-origin: center center;
}

@keyframes tiagHeroBreathing {

    0% {
        transform:
            rotate(-3deg)
            scale(1);
    }

    50% {
        transform:
            rotate(-2deg)
            scale(1.035);
    }

    100% {
        transform:
            rotate(-4deg)
            scale(1.065);
    }

}


/* ==================================================
   HERO POINTER RESPONSE
================================================== */

.tiag-hero__glow--green {
    transform:
        translate3d(
            calc(var(--hero-x, 0) * 45px),
            calc(var(--hero-y, 0) * 30px),
            0
        );

    transition: none;
}

.tiag-hero__glow--blue {
    transform:
        translate3d(
            calc(var(--hero-x, 0) * -65px),
            calc(var(--hero-y, 0) * -40px),
            0
        );

    transition: none;
}

.tiag-hero__wave--01 {
    margin-left:
        calc(var(--hero-x, 0) * 22px);

    margin-bottom:
        calc(var(--hero-y, 0) * 12px);
}

.tiag-hero__wave--02 {
    margin-left:
        calc(var(--hero-x, 0) * -18px);

    margin-bottom:
        calc(var(--hero-y, 0) * -8px);
}


/* ==================================================
   HERO CHARACTER REVEAL
================================================== */

.tiag-hero-char {
    display: inline-block;

    opacity: 0;

    filter: blur(7px);

    transform:
        translateY(24px)
        scale(.98);

    transition:
        opacity 1.15s cubic-bezier(.2,.7,.2,1),
        transform 1.15s cubic-bezier(.2,.7,.2,1),
        filter 1.15s cubic-bezier(.2,.7,.2,1);

    transition-delay: var(--char-delay);
}

.tiag-hero__title.is-ready .tiag-hero-char {
    opacity: 1;

    filter: blur(0);

    transform:
        translateY(0)
        scale(1);
}


/* ==================================================
   IMPROVED REVEAL
================================================== */

.tiag-reveal {
    opacity: 0;

    filter: blur(6px);

    transform:
        translateY(42px)
        scale(.992);

    transition:
        opacity 1.05s cubic-bezier(.16,.8,.25,1),
        transform 1.05s cubic-bezier(.16,.8,.25,1),
        filter 1.05s cubic-bezier(.16,.8,.25,1);
}

.tiag-reveal.is-visible {
    opacity: 1;

    filter: blur(0);

    transform:
        translateY(0)
        scale(1);
}


/* ==================================================
   CARD DEPTH
================================================== */

.tiag-tilt-card {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --card-light-x: 50%;
    --card-light-y: 50%;

    transform:
        perspective(1100px)
        rotateX(var(--tilt-x))
        rotateY(var(--tilt-y))
        translateZ(0);

    transform-style: preserve-3d;

    transition:
        transform .35s cubic-bezier(.2,.7,.2,1),
        box-shadow .35s ease;
}

.tiag-tilt-card:hover {
    transform:
        perspective(1100px)
        rotateX(var(--tilt-x))
        rotateY(var(--tilt-y))
        translateY(-5px);
}


/* 光がカード内部で追従 */

.tiag-tilt-card::before {
    content: "";

    position: absolute;

    z-index: 1;

    inset: 0;

    border-radius: inherit;

    background:
        radial-gradient(
            circle at
            var(--card-light-x)
            var(--card-light-y),
            rgba(255,255,255,.46),
            rgba(255,255,255,.08) 22%,
            rgba(255,255,255,0) 48%
        );

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .35s ease;
}

.tiag-tilt-card:hover::before {
    opacity: 1;
}


/* ==================================================
   SECTION LIGHT AWAKENING
================================================== */

.tiag-together::after,
.tiag-contact::after {
    transition:
        opacity 1.5s ease,
        filter 1.5s ease,
        transform 1.5s ease;
}

.tiag-together:not(.is-section-active)::after,
.tiag-contact:not(.is-section-active)::after {
    opacity: .35;
}

.tiag-together.is-section-active::after,
.tiag-contact.is-section-active::after {
    opacity: 1;

    filter:
        drop-shadow(
            0 0 22px
            rgba(92,220,190,.22)
        );
}


/* ==================================================
   RECRUIT CLIMAX
================================================== */

.tiag-together__title {
    transition:
        letter-spacing 1.4s ease,
        transform 1.4s ease;
}

.tiag-together.is-section-active
.tiag-together__title {
    letter-spacing: .04em;

    transform: translateY(-3px);
}


/* ==================================================
   CONTACT CLIMAX
================================================== */

.tiag-contact__title {
    transition:
        text-shadow 1.5s ease,
        letter-spacing 1.5s ease;
}

.tiag-contact.is-section-active
.tiag-contact__title {
    letter-spacing: .055em;

    text-shadow:
        0 0 42px
        rgba(111,221,208,.14);
}


/* ==================================================
   TiAG LIGHT CURSOR
================================================== */

.tiag-cursor-light {
    position: fixed;

    z-index: 9999;

    left: 0;
    top: 0;

    width: 110px;
    height: 110px;

    margin:
        -55px
        0
        0
        -55px;

    border-radius: 50%;

    pointer-events: none;

    opacity: 0;

    background:
        radial-gradient(
            circle,
            rgba(73,207,169,.10) 0%,
            rgba(84,197,239,.075) 38%,
            rgba(84,197,239,0) 72%
        );

    filter: blur(3px);

    transition:
        opacity .3s ease,
        width .4s ease,
        height .4s ease,
        margin .4s ease,
        background .4s ease;
}

.tiag-cursor-light.is-visible {
    opacity: 1;
}

.tiag-cursor-light.is-hover {
    width: 150px;
    height: 150px;

    margin:
        -75px
        0
        0
        -75px;

    background:
        radial-gradient(
            circle,
            rgba(52,211,137,.15) 0%,
            rgba(76,195,239,.09) 42%,
            rgba(76,195,239,0) 72%
        );
}


/* ==================================================
   LIGHT LINE MOTION
================================================== */

.tiag-hero__wave--01,
.tiag-together__line--01 {
    animation:
        tiagLightFlowOne
        9s
        ease-in-out
        infinite alternate;
}

.tiag-hero__wave--02,
.tiag-together__line--02 {
    animation:
        tiagLightFlowTwo
        11s
        ease-in-out
        infinite alternate;
}

@keyframes tiagLightFlowOne {

    from {
        opacity: .55;
        filter: blur(0);
    }

    to {
        opacity: 1;
        filter: blur(.35px);
    }

}

@keyframes tiagLightFlowTwo {

    from {
        opacity: .35;
    }

    to {
        opacity: .82;
    }

}


/* ==================================================
   BUTTON MICRO INTERACTION
================================================== */

.tiag-button span,
.tiag-business-card__link span,
.tiag-together__button span,
.tiag-contact__button span {
    display: inline-block;

    transition:
        transform .35s
        cubic-bezier(.2,.7,.2,1);
}

.tiag-button:hover span,
.tiag-business-card__link:hover span,
.tiag-together__button:hover span,
.tiag-contact__button:hover span {
    transform: translateX(5px);
}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

    .tiag-hero::before,
    .tiag-hero__wave--01,
    .tiag-hero__wave--02,
    .tiag-together__line--01,
    .tiag-together__line--02 {
        animation: none !important;
    }

    .tiag-hero-char {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        transition: none !important;
    }

    .tiag-reveal {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        transition: none !important;
    }

    .tiag-tilt-card {
        transform: none !important;
    }

    .tiag-cursor-light {
        display: none !important;
    }

}


/* ==================================================
   TOUCH DEVICES
================================================== */

@media (pointer: coarse) {

    .tiag-cursor-light {
        display: none;
    }

    .tiag-tilt-card,
    .tiag-tilt-card:hover {
        transform: none;
    }

}
/* ==================================================
   TiAG JOURNEY LIGHT
   "感動をつなぐ光"
================================================== */

:root {
    --journey-x: 82vw;
    --journey-y: 55vh;

    --journey-green: 32, 200, 117;
    --journey-blue: 84, 200, 239;

    --journey-opacity: .55;
    --journey-size: 440px;
}


/* ==================================================
   LIGHT BODY
================================================== */

.tiag-journey-light {
    position: fixed;

    z-index: 0;

    left: 0;
    top: 0;

    width: var(--journey-size);
    height: var(--journey-size);

    border-radius: 50%;

    pointer-events: none;

    opacity: var(--journey-opacity);

    transform:
        translate3d(
            calc(var(--journey-x) - 50%),
            calc(var(--journey-y) - 50%),
            0
        );

    background:
        radial-gradient(
            circle,
            rgba(
                var(--journey-green),
                .16
            ) 0%,

            rgba(
                var(--journey-blue),
                .11
            ) 30%,

            rgba(
                var(--journey-blue),
                .035
            ) 52%,

            transparent 72%
        );

    filter: blur(12px);

    transition:
        width 1.3s cubic-bezier(.2,.7,.2,1),
        height 1.3s cubic-bezier(.2,.7,.2,1),
        opacity 1.3s ease,
        background 1.3s ease;

    will-change: transform;
}


/* 光の中心 */

.tiag-journey-light__core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    transform: translate(-50%, -50%);

    background:
        rgba(255,255,255,.75);

    box-shadow:
        0 0 20px rgba(255,255,255,.8),
        0 0 45px rgba(71,211,173,.35),
        0 0 90px rgba(84,200,239,.20);

    opacity: .35;

    animation:
        tiagJourneyCore
        4.5s
        ease-in-out
        infinite;
}


@keyframes tiagJourneyCore {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(.75);

        opacity: .20;
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.35);

        opacity: .55;
    }

}


/* ==================================================
   SECTIONS MUST STAY ABOVE LIGHT
================================================== */

.tiag-hero,
.tiag-about,
.tiag-about-belief,
.tiag-business,
.tiag-entertainment-create,
.tiag-entertainment-experience,
.tiag-entertainment-projects,
.tiag-technology,
.tiag-value,
.tiag-together,
.tiag-company,
.tiag-contact {
    position: relative;

    z-index: 1;
}


/* ==================================================
   SECTION AMBIENT REACTION
================================================== */

.tiag-about,
.tiag-business,
.tiag-entertainment-create,
.tiag-technology,
.tiag-value,
.tiag-company {

    transition:
        background-color 1.2s ease,
        box-shadow 1.2s ease;
}


/* Entertainment = Green */

body[data-tiag-scene="entertainment"]
.tiag-journey-light {

    background:
        radial-gradient(
            circle,

            rgba(32,200,117,.22) 0%,

            rgba(82,221,170,.13) 30%,

            rgba(84,200,239,.04) 52%,

            transparent 72%
        );
}


/* Technology = Blue */

body[data-tiag-scene="technology"]
.tiag-journey-light {

    background:
        radial-gradient(
            circle,

            rgba(84,200,239,.23) 0%,

            rgba(93,178,239,.13) 30%,

            rgba(32,200,117,.035) 54%,

            transparent 72%
        );
}


/* Recruit = Green + Blue */

body[data-tiag-scene="recruit"]
.tiag-journey-light {

    background:
        radial-gradient(
            circle,

            rgba(93,224,181,.23) 0%,

            rgba(84,200,239,.15) 34%,

            rgba(255,255,255,.05) 54%,

            transparent 74%
        );
}


/* Contact = Final Light */

body[data-tiag-scene="contact"]
.tiag-journey-light {

    background:
        radial-gradient(
            circle,

            rgba(255,255,255,.25) 0%,

            rgba(68,211,162,.21) 22%,

            rgba(84,200,239,.16) 43%,

            transparent 74%
        );

    filter: blur(18px);
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 900px) {

    :root {
        --journey-size: 300px;
    }

    .tiag-journey-light {
        opacity: .35;
    }

    .tiag-journey-light__core {
        display: none;
    }

}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

    .tiag-journey-light {
        display: none;
    }

    .tiag-journey-light__core {
        animation: none;
    }

}
/* 光の動作確認用 */
.tiag-journey-light {
    opacity: 1 !important;
    width: 500px !important;
    height: 500px !important;

    background: radial-gradient(
        circle,
        rgba(32, 200, 117, .45) 0%,
        rgba(84, 200, 239, .32) 35%,
        rgba(84, 200, 239, .08) 60%,
        transparent 75%
    ) !important;
}

.tiag-journey-light__core {
    opacity: 1 !important;
    width: 20px;
    height: 20px;
}
/* ==================================================
   JOURNEY LIGHT - LAYER FIX
================================================== */

.tiag-journey-light {
    z-index: 20 !important;

    pointer-events: none;

    mix-blend-mode: screen;

    opacity: var(--journey-opacity, .45);
}


/* ヘッダー・メニューは光より上 */
.tiag-header {
    z-index: 100 !important;
}

.tiag-mobile-menu {
    z-index: 1000 !important;
}

.tiag-menu-button {
    z-index: 1002 !important;
}


/* 光はコンテンツの上を通るが、
   かなり柔らかくして文字の邪魔をしない */
.tiag-journey-light {
    filter: blur(20px);

    background:
        radial-gradient(
            circle,
            rgba(32, 200, 117, .16) 0%,
            rgba(84, 200, 239, .12) 30%,
            rgba(84, 200, 239, .04) 52%,
            transparent 72%
        );
}
/* ==================================================
   JOURNEY LIGHT - DEBUG
   動作確認後に削除
================================================== */

.tiag-journey-light {
    opacity: .85 !important;

    width: 420px !important;
    height: 420px !important;

    background:
        radial-gradient(
            circle,
            rgba(32, 200, 117, .38) 0%,
            rgba(84, 200, 239, .28) 32%,
            rgba(84, 200, 239, .08) 58%,
            transparent 75%
        ) !important;
}

.tiag-journey-light__core {
    width: 18px !important;
    height: 18px !important;
    opacity: .8 !important;
}
/* ==================================================
   TiAG HERO - LIVING LIGHT
   Hero背景をゆっくり呼吸するように動かす
================================================== */


/* --------------------------------------------------
   Hero本体
-------------------------------------------------- */

.tiag-hero {
    position: relative;
    isolation: isolate;
}


/* --------------------------------------------------
   下部の大きな緑〜青の波
-------------------------------------------------- */

.tiag-hero::before {
    transform-origin: 50% 70%;

    animation:
        tiagHeroWaveFlow 8s
        ease-in-out
        infinite alternate;

    will-change: transform, opacity;
}


@keyframes tiagHeroWaveFlow {

    0% {
        transform:
            translate3d(-3%, 2%, 0)
            rotate(-4deg)
            scale(1.02, .96);

        opacity: .78;
    }

    35% {
        transform:
            translate3d(2%, -2%, 0)
            rotate(-2deg)
            scale(1.08, 1.02);

        opacity: .92;
    }

    70% {
        transform:
            translate3d(5%, 1%, 0)
            rotate(-4deg)
            scale(1.03, 1.08);

        opacity: .84;
    }

    100% {
        transform:
            translate3d(-1%, -3%, 0)
            rotate(-1deg)
            scale(1.10, 1);

        opacity: 1;
    }
}


/* --------------------------------------------------
   右側の青い光
-------------------------------------------------- */

.tiag-hero::after {
    transform-origin: center;

    animation:
        tiagHeroBlueBreath 7s
        ease-in-out
        infinite alternate;

    will-change: transform, opacity;
}


@keyframes tiagHeroBlueBreath {

    0% {
        transform:
            translate3d(6%, -2%, 0)
            scale(.92);

        opacity: .58;
    }

    45% {
        transform:
            translate3d(-4%, 3%, 0)
            scale(1.12);

        opacity: .92;
    }

    100% {
        transform:
            translate3d(-9%, -4%, 0)
            scale(1.02);

        opacity: .68;
    }
}


/* --------------------------------------------------
   緑のGlow
-------------------------------------------------- */

.tiag-hero__glow--green {
    animation:
        tiagGreenGlowMove 6.5s
        ease-in-out
        infinite alternate;

    will-change: transform, opacity;
}


@keyframes tiagGreenGlowMove {

    0% {
        transform:
            translate3d(-8%, 5%, 0)
            scale(.92);

        opacity: .65;
    }

    50% {
        transform:
            translate3d(12%, -5%, 0)
            scale(1.15);

        opacity: 1;
    }

    100% {
        transform:
            translate3d(22%, 2%, 0)
            scale(1.04);

        opacity: .78;
    }
}


/* --------------------------------------------------
   青のGlow
-------------------------------------------------- */

.tiag-hero__glow--blue {
    animation:
        tiagBlueGlowMove 8s
        ease-in-out
        infinite alternate;

    will-change: transform, opacity;
}


@keyframes tiagBlueGlowMove {

    0% {
        transform:
            translate3d(8%, -6%, 0)
            scale(.95);

        opacity: .62;
    }

    45% {
        transform:
            translate3d(-10%, 7%, 0)
            scale(1.14);

        opacity: .95;
    }

    100% {
        transform:
            translate3d(-18%, -2%, 0)
            scale(1.06);

        opacity: .74;
    }
}


/* ==================================================
   LIGHT WAVES
================================================== */

.tiag-hero__wave {
    transform-origin: center;

    will-change:
        transform,
        opacity,
        filter;
}


/* 1本目 */

.tiag-hero__wave--01 {
    animation:
        tiagLightWave01 5.5s
        ease-in-out
        infinite alternate;
}


@keyframes tiagLightWave01 {

    0% {
        transform:
            translate3d(-5%, 6px, 0)
            rotate(-3deg)
            scaleX(.96);

        opacity: .55;

        filter: brightness(.95);
    }

    50% {
        transform:
            translate3d(3%, -8px, 0)
            rotate(-1.5deg)
            scaleX(1.05);

        opacity: 1;

        filter: brightness(1.35);
    }

    100% {
        transform:
            translate3d(8%, 4px, 0)
            rotate(-4deg)
            scaleX(1.1);

        opacity: .72;

        filter: brightness(1.1);
    }
}


/* 2本目 */

.tiag-hero__wave--02 {
    animation:
        tiagLightWave02 7s
        ease-in-out
        infinite alternate;
}


@keyframes tiagLightWave02 {

    0% {
        transform:
            translate3d(8%, -5px, 0)
            rotate(3deg)
            scaleX(1.08);

        opacity: .35;
    }

    50% {
        transform:
            translate3d(-3%, 9px, 0)
            rotate(1deg)
            scaleX(.98);

        opacity: .72;
    }

    100% {
        transform:
            translate3d(-10%, -3px, 0)
            rotate(4deg)
            scaleX(1.05);

        opacity: .48;
    }
}


/* ==================================================
   Hero全体の光量をわずかに呼吸させる
================================================== */

.tiag-hero__content {
    position: relative;
    z-index: 5;
}


/* ==================================================
   SCROLL INDICATOR
================================================== */

.tiag-scroll i {
    transform-origin: top;

    animation:
        tiagScrollLine 1.8s
        ease-in-out
        infinite;
}


@keyframes tiagScrollLine {

    0% {
        transform: scaleY(.15);
        opacity: .2;
    }

    45% {
        transform: scaleY(1);
        opacity: .7;
    }

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


/* ==================================================
   Reduced Motion
================================================== */

@media (prefers-reduced-motion: reduce) {

    .tiag-hero::before,
    .tiag-hero::after,
    .tiag-hero__glow,
    .tiag-hero__wave,
    .tiag-scroll i {
        animation: none !important;
    }

}
/* ==================================================
   TiAG VALUES - ORIGINAL SVG ICONS
================================================== */

.tiag-value-icon {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 92px;
    height: 92px;

    flex-shrink: 0;

    margin-bottom: 30px;
}


/* 淡い光 */

.tiag-value-icon::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 72px;
    height: 72px;

    border-radius: 50%;

    transform:
        translate(-50%, -50%)
        scale(.65);

    background:
        radial-gradient(
            circle,
            rgba(32, 200, 117, .13) 0%,
            rgba(84, 200, 239, .07) 45%,
            transparent 72%
        );

    opacity: 0;

    filter: blur(5px);

    transition:
        opacity 1.2s ease,
        transform 1.4s cubic-bezier(.2,.7,.2,1);
}


/* SVG */

.tiag-value-icon svg {
    position: relative;
    z-index: 2;

    display: block;

    width: 76px;
    height: 76px;

    overflow: visible;
}


/* SVG共通線 */

.tiag-value-icon svg path,
.tiag-value-icon svg circle,
.tiag-value-icon svg line,
.tiag-value-icon svg polyline {
    fill: none;

    stroke: #20c875;

    stroke-width: 1.35;

    stroke-linecap: round;
    stroke-linejoin: round;

    vector-effect: non-scaling-stroke;

    stroke-dasharray: 220;
    stroke-dashoffset: 220;

    opacity: .82;

    transition:
        stroke-dashoffset 1.7s
        cubic-bezier(.4,0,.2,1),
        opacity .8s ease;
}


/* 一部を水色に */

.tiag-value-icon__orbit,
.tiag-value-icon--future circle {
    stroke: #54c8ef !important;

    opacity: .45 !important;
}


/* 小さい点 */

.tiag-value-icon .tiag-value-icon__dot {
    fill: #54c8ef;

    stroke: none;

    opacity: 0;

    transform-origin: center;

    transition:
        opacity .5s ease 1.15s,
        transform .6s
        cubic-bezier(.2,.8,.2,1)
        1.15s;
}


/* ==================================================
   ICON DRAW
================================================== */

.tiag-value-item.is-visible
.tiag-value-icon svg path,

.tiag-value-item.is-visible
.tiag-value-icon svg circle,

.tiag-value-item.is-visible
.tiag-value-icon svg line,

.tiag-value-item.is-visible
.tiag-value-icon svg polyline {

    stroke-dashoffset: 0;
}


/* Glow */

.tiag-value-item.is-visible
.tiag-value-icon::before {

    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);
}


/* Dot */

.tiag-value-item.is-visible
.tiag-value-icon
.tiag-value-icon__dot {

    opacity: 1;

    transform: scale(1);
}


/* ==================================================
   ICON DELAYS
================================================== */

.tiag-value-item:nth-child(1)
.tiag-value-icon svg * {
    transition-delay: .10s;
}

.tiag-value-item:nth-child(2)
.tiag-value-icon svg * {
    transition-delay: .20s;
}

.tiag-value-item:nth-child(3)
.tiag-value-icon svg * {
    transition-delay: .30s;
}

.tiag-value-item:nth-child(4)
.tiag-value-icon svg * {
    transition-delay: .40s;
}

.tiag-value-item:nth-child(5)
.tiag-value-icon svg * {
    transition-delay: .50s;
}


/* ==================================================
   ICON HOVER
================================================== */

@media (pointer: fine) {

    .tiag-value-icon {
        transition:
            transform .5s
            cubic-bezier(.2,.8,.2,1);
    }

    .tiag-value-item:hover
    .tiag-value-icon {

        transform:
            translateY(-7px)
            scale(1.04);
    }


    .tiag-value-item:hover
    .tiag-value-icon::before {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1.35);
    }


    .tiag-value-item:hover
    .tiag-value-icon svg {

        filter:
            drop-shadow(
                0 7px 13px
                rgba(32,200,117,.13)
            );
    }

}


/* ==================================================
   VALUE CONTENT ENTRANCE
================================================== */

.tiag-value-item__content {
    transition:
        transform .9s
        cubic-bezier(.2,.7,.2,1),
        opacity .9s ease;
}


/* 英語ラベル */

.tiag-value-item__en {
    margin:
        0
        0
        9px;

    color: rgba(32,200,117,.72);

    font-size: 9px;
    font-weight: 600;

    letter-spacing: .16em;
}


/* Number */

.tiag-value-item__number {
    display: block;

    margin-bottom: 20px;

    color: rgba(17,27,61,.18);

    font-size: 11px;
    font-weight: 500;

    letter-spacing: .1em;
}


/* ==================================================
   VALUE CONNECTION LINE
================================================== */

.tiag-value__list {
    position: relative;
}


/* PCだけ5つをつなぐ */

@media (min-width: 901px) {

    .tiag-value__list::before {
        content: "";

        position: absolute;

        z-index: 0;

        left: 5%;
        right: 5%;

        top: 46px;

        height: 1px;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(32,200,117,.15),
                rgba(84,200,239,.17),
                rgba(32,200,117,.15),
                transparent
            );

        transform:
            scaleX(0);

        transform-origin: left;

        animation:
            tiagValueConnection
            2.2s
            cubic-bezier(.2,.7,.2,1)
            forwards;

        animation-play-state: paused;
    }


    .tiag-value__list:has(
        .tiag-value-item.is-visible
    )::before {

        animation-play-state: running;
    }


    .tiag-value-item {
        position: relative;
        z-index: 2;
    }

}


@keyframes tiagValueConnection {

    from {
        transform: scaleX(0);

        opacity: 0;
    }

    to {
        transform: scaleX(1);

        opacity: 1;
    }

}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

    .tiag-value-icon svg path,
    .tiag-value-icon svg circle,
    .tiag-value-icon svg line,
    .tiag-value-icon svg polyline {

        stroke-dashoffset: 0 !important;

        transition: none !important;
    }


    .tiag-value-icon::before {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);

        transition: none;
    }


    .tiag-value__list::before {

        transform:
            scaleX(1) !important;

        animation: none !important;
    }

}
/* ==================================================
   TiAG MOTION SYSTEM
================================================== */


/* ==================================================
   BASIC MOTION
================================================== */

.tiag-motion {
    opacity: 0;

    filter: blur(6px);

    transition:
        opacity 1s cubic-bezier(.16,.8,.25,1),
        transform 1.15s cubic-bezier(.16,.8,.25,1),
        filter 1s cubic-bezier(.16,.8,.25,1);

    transition-delay:
        calc(var(--motion-index, 0) * .09s);
}

.tiag-motion.is-visible {
    opacity: 1;

    filter: blur(0);

    transform:
        translate3d(0,0,0)
        scale(1);
}


/* ==================================================
   SOFT
================================================== */

.tiag-motion--soft {
    transform:
        translate3d(0, 46px, 0)
        scale(.985);
}


/* ==================================================
   LEFT
================================================== */

.tiag-motion--left {
    transform:
        translate3d(-58px, 25px, 0)
        scale(.985);
}


/* ==================================================
   RIGHT
================================================== */

.tiag-motion--right {
    transform:
        translate3d(58px, 25px, 0)
        scale(.985);
}


/* ==================================================
   ENTERTAINMENT CHAIN
================================================== */

.tiag-motion--chain {
    transform:
        translate3d(
            calc(
                -30px +
                var(--motion-index, 0) * 30px
            ),
            55px,
            0
        )
        scale(.96);
}

.tiag-motion--chain.is-visible {
    transform:
        translate3d(0,0,0)
        scale(1);
}


/* ==================================================
   PROJECT
================================================== */

.tiag-motion--project {
    transform:
        translate3d(0, 55px, 0)
        scale(.94);

    transition-duration: 1.15s;
}


/* ==================================================
   TECHNOLOGY
================================================== */

.tiag-motion--tech {
    transform:
        translate3d(0, 38px, 0)
        scale(.96);

    transition:
        opacity .9s ease,
        transform 1s cubic-bezier(.25,.8,.25,1),
        filter .9s ease;
}


/* ==================================================
   VALUE
================================================== */

.tiag-motion--value {
    transform:
        translate3d(-20px, 30px, 0)
        scale(.96);

    transition-delay:
        calc(var(--motion-index, 0) * .14s);
}


/* ==================================================
   COMPANY
================================================== */

.tiag-motion--company {
    transform:
        translate3d(-25px, 0, 0);

    transition-delay:
        calc(var(--motion-index, 0) * .1s);
}


/* ==================================================
   CLIMAX
================================================== */

.tiag-motion--climax {
    transform:
        translate3d(0, 55px, 0)
        scale(.96);

    transition-duration: 1.35s;
}


/* ==================================================
   HERO BACKGROUND LIFE
================================================== */

.tiag-hero::before {
    animation:
        tiagHeroLivingWave
        7s
        ease-in-out
        infinite alternate;

    transform-origin: 50% 70%;
}


@keyframes tiagHeroLivingWave {

    0% {
        transform:
            translate3d(-4%, 3%, 0)
            rotate(-4deg)
            scale(1.02, .96);
    }

    50% {
        transform:
            translate3d(3%, -3%, 0)
            rotate(-2deg)
            scale(1.08, 1.06);
    }

    100% {
        transform:
            translate3d(7%, 2%, 0)
            rotate(-4deg)
            scale(1.04, 1.11);
    }

}


.tiag-hero::after {
    animation:
        tiagHeroLivingBlue
        8s
        ease-in-out
        infinite alternate;
}


@keyframes tiagHeroLivingBlue {

    from {
        transform:
            translate3d(7%, -4%, 0)
            scale(.92);

        opacity: .62;
    }

    to {
        transform:
            translate3d(-9%, 6%, 0)
            scale(1.15);

        opacity: .95;
    }

}


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

.tiag-about::after {
    transform:
        translate3d(
            0,
            calc(
                (
                    var(--section-progress, .5) - .5
                ) * 110px
            ),
            0
        );

    transition:
        transform .1s linear;
}


/* ==================================================
   BUSINESS CARDS
================================================== */

.tiag-business-card {
    overflow: hidden;
}

.tiag-business-card::before {
    content: "";

    position: absolute;

    z-index: 1;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at
            var(--card-light-x, 50%)
            var(--card-light-y, 50%),
            rgba(255,255,255,.58),
            rgba(255,255,255,.08) 26%,
            transparent 50%
        );

    opacity: 0;

    transition:
        opacity .35s ease;
}

.tiag-business-card:hover::before {
    opacity: 1;
}


/* ==================================================
   TILT
================================================== */

.tiag-tilt-card {
    transform:
        perspective(1100px)
        rotateX(var(--tilt-x, 0deg))
        rotateY(var(--tilt-y, 0deg));

    transform-style: preserve-3d;
}

.tiag-tilt-card:hover {
    transform:
        perspective(1100px)
        rotateX(var(--tilt-x, 0deg))
        rotateY(var(--tilt-y, 0deg))
        translateY(-5px);
}


/* ==================================================
   ENTERTAINMENT PROJECT SHINE
================================================== */

.tiag-entertainment-project__visual {
    overflow: hidden;
}

.tiag-entertainment-project__visual::after {
    content: "";

    position: absolute;

    z-index: 5;

    top: -30%;
    left: -55%;

    width: 35%;
    height: 170%;

    transform:
        rotate(18deg)
        translateX(0);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.7),
            transparent
        );

    opacity: 0;
}


.tiag-entertainment-project.is-visible
.tiag-entertainment-project__visual::after {

    animation:
        tiagProjectShine
        1.8s
        cubic-bezier(.2,.7,.2,1)
        .4s
        forwards;
}


@keyframes tiagProjectShine {

    0% {
        transform:
            rotate(18deg)
            translateX(0);

        opacity: 0;
    }

    20% {
        opacity: .6;
    }

    100% {
        transform:
            rotate(18deg)
            translateX(520%);

        opacity: 0;
    }

}


/* ==================================================
   ENTERTAINMENT BACKGROUND
================================================== */

.tiag-entertainment-experience::before {

    transform:
        translate3d(
            calc(
                (
                    var(--section-progress, .5) - .5
                ) * -100px
            ),
            calc(
                (
                    var(--section-progress, .5) - .5
                ) * 70px
            ),
            0
        );

}


/* ==================================================
   TECHNOLOGY
================================================== */

.tiag-technology::before {

    transform:
        translate3d(
            calc(
                (
                    var(--section-progress, .5) - .5
                ) * -90px
            ),
            calc(
                (
                    var(--section-progress, .5) - .5
                ) * 60px
            ),
            0
        );

}


/* ==================================================
   VALUE ICON
================================================== */

.tiag-value-item.is-visible
.tiag-value-icon {

    animation:
        tiagValueFloat
        4.5s
        ease-in-out
        infinite alternate;

    animation-delay:
        calc(
            var(--motion-index, 0) * .3s
        );
}


@keyframes tiagValueFloat {

    from {
        transform:
            translateY(0);
    }

    to {
        transform:
            translateY(-7px);
    }

}


/* ==================================================
   VALUE CONNECTION
================================================== */

.tiag-value__list {
    position: relative;
}

@media (min-width: 901px) {

    .tiag-value__list::after {
        content: "";

        position: absolute;

        z-index: 0;

        left: 6%;
        right: 6%;

        top: 46px;

        height: 1px;

        transform:
            scaleX(
                var(--section-progress, 0)
            );

        transform-origin: left;

        background:
            linear-gradient(
                90deg,
                rgba(32,200,117,.08),
                rgba(32,200,117,.35),
                rgba(84,200,239,.35),
                rgba(32,200,117,.15)
            );

        box-shadow:
            0 0 14px
            rgba(84,200,239,.12);
    }

}


/* ==================================================
   TOGETHER
================================================== */

.tiag-together::before {

    animation:
        tiagTogetherWave
        7s
        ease-in-out
        infinite alternate;

}


@keyframes tiagTogetherWave {

    from {
        transform:
            translate3d(-3%, 2%, 0)
            rotate(-5deg)
            scale(1);
    }

    to {
        transform:
            translate3d(6%, -4%, 0)
            rotate(-2deg)
            scale(1.09);
    }

}


.tiag-together__glow--green {

    animation:
        tiagTogetherGreen
        6s
        ease-in-out
        infinite alternate;

}


@keyframes tiagTogetherGreen {

    from {
        transform:
            translate3d(-10%, 7%, 0)
            scale(.9);
    }

    to {
        transform:
            translate3d(20%, -6%, 0)
            scale(1.15);
    }

}


.tiag-together__glow--blue {

    animation:
        tiagTogetherBlue
        8s
        ease-in-out
        infinite alternate;

}


@keyframes tiagTogetherBlue {

    from {
        transform:
            translate3d(10%, -5%, 0)
            scale(.95);
    }

    to {
        transform:
            translate3d(-16%, 7%, 0)
            scale(1.12);
    }

}


/* ==================================================
   COMPANY ROW
================================================== */

.tiag-company__row {

    transition:
        background .35s ease,
        padding-left .35s ease;

}

@media (pointer: fine) {

    .tiag-company__row:hover {

        padding-left: 12px;

        background:
            rgba(84,200,239,.035);

    }

}


/* ==================================================
   CONTACT CLIMAX
================================================== */

.tiag-contact::before {

    animation:
        tiagContactLight
        6s
        ease-in-out
        infinite alternate;

}


@keyframes tiagContactLight {

    from {
        transform:
            rotate(-5deg)
            scale(.95);

        opacity: .55;
    }

    to {
        transform:
            rotate(-2deg)
            scale(1.12);

        opacity: 1;
    }

}


.tiag-contact__glow--green {

    animation:
        tiagContactGreen
        5.5s
        ease-in-out
        infinite alternate;

}


@keyframes tiagContactGreen {

    from {
        transform:
            translate3d(-15%, 10%, 0)
            scale(.9);
    }

    to {
        transform:
            translate3d(25%, -5%, 0)
            scale(1.2);
    }

}


.tiag-contact__glow--blue {

    animation:
        tiagContactBlue
        7s
        ease-in-out
        infinite alternate;

}


@keyframes tiagContactBlue {

    from {
        transform:
            translate3d(15%, -10%, 0)
            scale(.95);
    }

    to {
        transform:
            translate3d(-22%, 10%, 0)
            scale(1.18);
    }

}


/* ==================================================
   BUTTON
================================================== */

.tiag-button,
.tiag-business-card__link,
.tiag-together__button,
.tiag-contact__button {

    position: relative;

    overflow: hidden;

}


.tiag-button::before,
.tiag-business-card__link::before,
.tiag-together__button::before,
.tiag-contact__button::before {

    content: "";

    position: absolute;

    top: 0;
    left: -130%;

    width: 80%;
    height: 100%;

    transform:
        skewX(-20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.52),
            transparent
        );

    transition:
        left .65s ease;

}


.tiag-button:hover::before,
.tiag-business-card__link:hover::before,
.tiag-together__button:hover::before,
.tiag-contact__button:hover::before {

    left: 140%;

}


/* ==================================================
   CURSOR LIGHT
================================================== */

.tiag-cursor-light {

    position: fixed;

    z-index: 9999;

    left: 0;
    top: 0;

    width: 110px;
    height: 110px;

    margin:
        -55px
        0
        0
        -55px;

    border-radius: 50%;

    pointer-events: none;

    opacity: 0;

    background:
        radial-gradient(
            circle,
            rgba(32,200,117,.11),
            rgba(84,200,239,.075) 40%,
            transparent 72%
        );

    filter: blur(4px);

    transition:
        width .35s ease,
        height .35s ease,
        margin .35s ease,
        opacity .3s ease;

}


.tiag-cursor-light.is-visible {
    opacity: 1;
}


.tiag-cursor-light.is-hover {

    width: 155px;
    height: 155px;

    margin:
        -77.5px
        0
        0
        -77.5px;

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 900px) {

    .tiag-motion--left,
    .tiag-motion--right,
    .tiag-motion--chain,
    .tiag-motion--project,
    .tiag-motion--tech,
    .tiag-motion--value,
    .tiag-motion--company,
    .tiag-motion--climax,
    .tiag-motion--soft {

        transform:
            translate3d(0, 32px, 0)
            scale(.985);

    }


    .tiag-motion.is-visible {

        transform:
            translate3d(0,0,0)
            scale(1);

    }


    .tiag-motion {

        transition-duration: .85s;

        transition-delay:
            calc(
                var(--motion-index, 0)
                * .07s
            );

    }


    .tiag-value-item.is-visible
    .tiag-value-icon {

        animation-duration: 5.5s;

    }

}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

    .tiag-motion {

        opacity: 1 !important;

        filter: none !important;

        transform: none !important;

        transition: none !important;

    }


    .tiag-hero::before,
    .tiag-hero::after,
    .tiag-together::before,
    .tiag-together__glow,
    .tiag-contact::before,
    .tiag-contact__glow,
    .tiag-value-icon {

        animation: none !important;

    }


    .tiag-cursor-light {

        display: none !important;

    }

}
/* ==================================================
   CONTACT FORM
================================================== */

.tiag-contact--form {
    min-height: auto;

    padding:
        150px
        7%
        130px;

    text-align: left;
}


/* ==================================================
   CONTACT FORM INNER
================================================== */

.tiag-contact--form
.tiag-contact__inner {

    width: min(1280px, 100%);

    display: grid;

    grid-template-columns:
        minmax(320px, .85fr)
        minmax(500px, 1.15fr);

    gap: 110px;

    align-items: start;
}


/* ==================================================
   CONTACT HEADING
================================================== */

.tiag-contact__heading {

    position: sticky;

    top: 130px;
}


.tiag-contact--form
.tiag-contact__title {

    margin-bottom: 30px;

    font-size:
        clamp(
            46px,
            4.6vw,
            72px
        );

    line-height: 1.45;
}


.tiag-contact--form
.tiag-contact__text {

    margin: 0;

    max-width: 430px;

    font-size: 14px;

    line-height: 2.1;
}


/* ==================================================
   FORM WRAPPER
================================================== */

.tiag-contact-form {

    position: relative;

    z-index: 5;

    width: 100%;
}


/* Contact Form 7 */

.tiag-contact-form
.wpcf7 {

    width: 100%;
}


/* ==================================================
   FORM LABEL
================================================== */

.tiag-contact-form label {

    display: block;

    margin-bottom: 34px;

    color:
        rgba(
            255,
            255,
            255,
            .72
        );

    font-size: 11px;

    letter-spacing: .08em;
}


/* ==================================================
   INPUT
================================================== */

.tiag-contact-form input[type="text"],
.tiag-contact-form input[type="email"],
.tiag-contact-form select,
.tiag-contact-form textarea {

    display: block;

    width: 100%;

    margin-top: 11px;

    padding:
        15px
        2px;

    border: 0;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .28
        );

    border-radius: 0;

    outline: none;

    color: #ffffff;

    background: transparent;

    font-family: inherit;

    font-size: 15px;

    line-height: 1.7;

    transition:
        border-color .3s ease,
        background .3s ease;
}


/* ==================================================
   TEXTAREA
================================================== */

.tiag-contact-form textarea {

    min-height: 150px;

    resize: vertical;
}


/* ==================================================
   SELECT
================================================== */

.tiag-contact-form select {

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
}


/* select option */

.tiag-contact-form select option {

    color: var(--tiag-navy);

    background: #ffffff;
}


/* ==================================================
   FOCUS
================================================== */

.tiag-contact-form input:focus,
.tiag-contact-form select:focus,
.tiag-contact-form textarea:focus {

    border-bottom-color:
        rgba(
            87,
            224,
            171,
            .95
        );
}


/* ==================================================
   SUBMIT
================================================== */

.tiag-contact-form input[type="submit"] {

    min-width: 190px;

    margin-top: 15px;

    padding:
        16px
        28px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .36
        );

    border-radius: 999px;

    color: #ffffff;

    background:
        rgba(
            255,
            255,
            255,
            .07
        );

    font-family: inherit;

    font-size: 12px;

    letter-spacing: .04em;

    cursor: pointer;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}


.tiag-contact-form
input[type="submit"]:hover {

    color: var(--tiag-navy);

    background: #ffffff;

    transform:
        translateY(-2px);
}


/* ==================================================
   CF7 SPINNER
================================================== */

.tiag-contact-form
.wpcf7-spinner {

    background-color:
        rgba(
            255,
            255,
            255,
            .35
        );
}


/* ==================================================
   RESPONSE
================================================== */

.tiag-contact-form
.wpcf7-response-output {

    margin:
        28px
        0
        0 !important;

    padding:
        16px
        18px !important;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .20
        ) !important;

    border-radius: 8px;

    color:
        rgba(
            255,
            255,
            255,
            .82
        );

    font-size: 12px;

    line-height: 1.8;
}


/* ==================================================
   VALIDATION
================================================== */

.tiag-contact-form
.wpcf7-not-valid-tip {

    margin-top: 8px;

    color: #ffd0d0;

    font-size: 11px;
}


/* ==================================================
   CONTACT TABLET
================================================== */

@media (max-width: 900px) {

    .tiag-contact--form {

        padding:
            110px
            22px
            100px;

    }


    .tiag-contact--form
    .tiag-contact__inner {

        grid-template-columns: 1fr;

        gap: 70px;

    }


    .tiag-contact__heading {

        position: static;

    }

}


/* ==================================================
   CONTACT MOBILE
================================================== */

@media (max-width: 520px) {

    .tiag-contact--form {

        padding-top: 90px;
        padding-bottom: 85px;

    }


    .tiag-contact--form
    .tiag-contact__inner {

        gap: 55px;

    }


    .tiag-contact--form
    .tiag-contact__title {

        font-size: 39px;

    }


    .tiag-contact--form
    .tiag-contact__text {

        font-size: 13px;

        line-height: 2;

    }


    .tiag-contact--form
    .tiag-contact__text br {

        display: none;

    }


    .tiag-contact-form label {

        margin-bottom: 28px;

    }


    .tiag-contact-form input[type="text"],
    .tiag-contact-form input[type="email"],
    .tiag-contact-form select,
    .tiag-contact-form textarea {

        font-size: 16px;

    }


    .tiag-contact-form
    input[type="submit"] {

        width: 100%;

        margin-top: 5px;

    }

}
/* ==================================================
   CONTACT FORM - STRONG FIX
   Contact Form 7 のデフォルトスタイルを上書き
================================================== */

.tiag-contact-form,
.tiag-contact-form .wpcf7,
.tiag-contact-form .wpcf7-form,
.tiag-contact-form .wpcf7-form-control-wrap {
    width: 100%;
}


/* --------------------------------------------------
   Form本体の白背景を消す
-------------------------------------------------- */

.tiag-contact-form .wpcf7,
.tiag-contact-form .wpcf7-form,
.tiag-contact-form form {
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}


/* --------------------------------------------------
   pタグの余計な余白を整理
-------------------------------------------------- */

.tiag-contact-form .wpcf7-form p {
    margin: 0 0 30px !important;
    padding: 0 !important;

    background: transparent !important;
}


/* --------------------------------------------------
   Label
-------------------------------------------------- */

.tiag-contact-form .wpcf7-form label {
    display: block;

    margin: 0 !important;

    color: rgba(255,255,255,.72) !important;

    font-size: 11px;

    line-height: 1.8;

    letter-spacing: .08em;
}


/* --------------------------------------------------
   入力欄共通
-------------------------------------------------- */

.tiag-contact-form .wpcf7-form-control:not(.wpcf7-submit) {
    display: block;

    width: 100% !important;
    max-width: 100% !important;

    margin: 10px 0 0 !important;

    padding: 14px 2px !important;

    box-sizing: border-box !important;

    border: 0 !important;

    border-bottom:
        1px solid rgba(255,255,255,.28) !important;

    border-radius: 0 !important;

    outline: none !important;

    color: #ffffff !important;

    background: transparent !important;

    box-shadow: none !important;

    font-family: inherit !important;

    font-size: 15px !important;

    line-height: 1.7 !important;

    appearance: none;
    -webkit-appearance: none;

    transition:
        border-color .3s ease,
        color .3s ease;
}


/* --------------------------------------------------
   Placeholder
-------------------------------------------------- */

.tiag-contact-form input::placeholder,
.tiag-contact-form textarea::placeholder {
    color: rgba(255,255,255,.28) !important;
}


/* --------------------------------------------------
   Focus
-------------------------------------------------- */

.tiag-contact-form .wpcf7-form-control:not(.wpcf7-submit):focus {
    border-bottom-color:
        rgba(94,226,171,.95) !important;

    background: transparent !important;
}


/* --------------------------------------------------
   Textarea
-------------------------------------------------- */

.tiag-contact-form textarea.wpcf7-form-control {
    min-height: 150px !important;

    resize: vertical !important;
}


/* --------------------------------------------------
   Select
-------------------------------------------------- */

.tiag-contact-form select.wpcf7-form-control {
    cursor: pointer;

    color: #ffffff !important;

    background-color: transparent !important;
}


/* 選択肢だけ白背景 */

.tiag-contact-form select.wpcf7-form-control option {
    color: #111b3d !important;

    background: #ffffff !important;
}


/* --------------------------------------------------
   Submit
-------------------------------------------------- */

.tiag-contact-form .wpcf7-submit {
    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    min-width: 190px;

    margin: 10px 0 0 !important;

    padding: 15px 28px !important;

    border:
        1px solid rgba(255,255,255,.38) !important;

    border-radius: 999px !important;

    color: #ffffff !important;

    background:
        rgba(255,255,255,.06) !important;

    box-shadow: none !important;

    font-family: inherit !important;

    font-size: 12px !important;

    line-height: 1 !important;

    letter-spacing: .05em;

    cursor: pointer;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}


.tiag-contact-form .wpcf7-submit:hover {
    color: #111b3d !important;

    background: #ffffff !important;

    transform: translateY(-2px);
}


/* --------------------------------------------------
   Spinner
-------------------------------------------------- */

.tiag-contact-form .wpcf7-spinner {
    margin-left: 15px !important;

    background-color:
        rgba(255,255,255,.4) !important;
}


/* --------------------------------------------------
   Validation Error
-------------------------------------------------- */

.tiag-contact-form .wpcf7-not-valid-tip {
    margin-top: 7px !important;

    color: #ffcfcf !important;

    font-size: 11px !important;
}


/* --------------------------------------------------
   Response Message
-------------------------------------------------- */

.tiag-contact-form .wpcf7-response-output {
    margin:
        28px
        0
        0 !important;

    padding:
        14px
        16px !important;

    border:
        1px solid rgba(255,255,255,.2) !important;

    border-radius: 8px;

    color:
        rgba(255,255,255,.82) !important;

    background:
        rgba(255,255,255,.04) !important;

    font-size: 12px !important;

    line-height: 1.8;
}


/* --------------------------------------------------
   Contact右側の白いパネルを消す
-------------------------------------------------- */

.tiag-contact-form,
.tiag-contact-form > *,
.tiag-contact-form .wpcf7,
.tiag-contact-form .wpcf7-form {
    background-color: transparent !important;
}


/* ==================================================
   CONTACT FORM PANEL
================================================== */

.tiag-contact-form {
    padding: 10px 0 0;

    border: 0;

    background: transparent !important;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 520px) {

    .tiag-contact-form .wpcf7-form p {
        margin-bottom: 26px !important;
    }

    .tiag-contact-form .wpcf7-form-control:not(.wpcf7-submit) {
        font-size: 16px !important;
    }

    .tiag-contact-form .wpcf7-submit {
        width: 100% !important;
    }

}
/* ==================================================
   PROJECT REAL IMAGES
================================================== */

.tiag-entertainment-project__visual {
    position: relative;
    overflow: hidden;

    height: 340px;

    background: #eef8f8;
}


/* 画像 */

.tiag-entertainment-project__visual img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform 1.1s cubic-bezier(.2,.7,.2,1),
        filter .8s ease;

    will-change: transform;
}


/* PC hover */

@media (pointer: fine) {

    .tiag-entertainment-project:hover
    .tiag-entertainment-project__visual img {

        transform: scale(1.055);

    }

}


/* ==================================================
   既存の仮グラデーションを解除
================================================== */

.tiag-entertainment-project__visual--summon,
.tiag-entertainment-project__visual--festival {

    background: none !important;

}


/* 以前の仮背景装飾を消す */

.tiag-entertainment-project__visual--summon::before,
.tiag-entertainment-project__visual--festival::before {

    display: none;

}


/* ==================================================
   少しだけTiAGらしい光を重ねる
================================================== */

.tiag-entertainment-project__visual::before {

    content: "";

    position: absolute;

    z-index: 2;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.02) 35%,
            rgba(17,27,61,.10) 100%
        );

}


/* ==================================================
   IMAGE SHINE
================================================== */

.tiag-entertainment-project__visual::after {

    content: "";

    position: absolute;

    z-index: 3;

    top: -30%;
    left: -55%;

    width: 30%;
    height: 170%;

    transform: rotate(18deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.58),
            transparent
        );

    opacity: 0;

    pointer-events: none;

}


/* スクロールでカードが表示された時に光が走る */

.tiag-entertainment-project.is-visible
.tiag-entertainment-project__visual::after {

    animation:
        tiagProjectImageShine
        1.6s
        cubic-bezier(.2,.7,.2,1)
        .45s
        forwards;

}


@keyframes tiagProjectImageShine {

    0% {

        left: -55%;
        opacity: 0;

    }

    20% {

        opacity: .65;

    }

    100% {

        left: 125%;
        opacity: 0;

    }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 900px) {

    .tiag-entertainment-project__visual {

        height: 260px;

    }

}


@media (max-width: 520px) {

    .tiag-entertainment-project__visual {

        height: 205px;

    }

}
/* ==================================================
   PROJECT VIDEO
================================================== */

.tiag-entertainment-project__video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform 1.2s cubic-bezier(.2,.7,.2,1),
        filter .8s ease;

    will-change: transform;
}


/* PC */

@media (pointer: fine) {

    .tiag-entertainment-project:hover
    .tiag-entertainment-project__video {

        transform: scale(1.055);

    }

}
/* ==================================================
   SUMMON FESTIVAL SLIDESHOW
================================================== */

.tiag-festival-slider {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


/* 全画像 */

.tiag-festival-slide {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    opacity: 0;

    transform: scale(1.04);

    transition:
        opacity 1.4s ease,
        transform 6s ease;

    will-change:
        opacity,
        transform;
}


/* 表示中 */

.tiag-festival-slide.is-active {
    opacity: 1;

    transform: scale(1.09);
}


/* --------------------------------------------------
   画像の上に少しだけTiAGらしい色を重ねる
-------------------------------------------------- */

.tiag-entertainment-project__visual--festival::before {
    content: "";

    position: absolute;

    z-index: 3;

    inset: 0;

    display: block !important;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(17,27,61,.02),
            rgba(17,27,61,.11)
        );

}


/* --------------------------------------------------
   光が横切る演出
-------------------------------------------------- */

.tiag-entertainment-project__visual--festival::after {
    z-index: 4;
}
/* ==================================================
   SUMMON FESTIVAL SLIDER - FIX
================================================== */

.tiag-entertainment-project__visual--festival {
    position: relative !important;
    overflow: hidden !important;
}

.tiag-festival-slider {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    overflow: hidden !important;
}

.tiag-festival-slide {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center !important;

    opacity: 0 !important;

    transform: scale(1.03);

    transition:
        opacity 1.2s ease,
        transform 5s ease !important;

    z-index: 1;
}

.tiag-festival-slide.is-active {
    opacity: 1 !important;

    transform: scale(1.08);

    z-index: 2;
}
/* ==================================================
   TiAG MVV
================================================== */

.tiag-mvv {
    position: relative;

    width: min(1180px, 100%);

    margin: 120px auto 0;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    border-top:
        1px solid rgba(17,27,61,.12);
}


/* ==================================================
   MVV ITEM
================================================== */

.tiag-mvv__item {
    position: relative;

    min-height: 330px;

    padding:
        45px
        45px
        50px;

    border-right:
        1px solid rgba(17,27,61,.12);

    transition:
        transform .5s cubic-bezier(.2,.8,.2,1),
        background .5s ease;
}


.tiag-mvv__item:first-child {
    border-left:
        1px solid rgba(17,27,61,.12);
}


/* ==================================================
   NUMBER
================================================== */

.tiag-mvv__number {
    display: block;

    margin-bottom: 45px;

    color:
        rgba(17,27,61,.20);

    font-size: 10px;

    letter-spacing: .12em;
}


/* ==================================================
   LABEL
================================================== */

.tiag-mvv__label {
    margin:
        0
        0
        17px;

    color: var(--tiag-green);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .2em;
}


/* ==================================================
   TITLE
================================================== */

.tiag-mvv__item h3 {
    margin:
        0
        0
        26px;

    color: var(--tiag-navy);

    font-family:
        "Hiragino Mincho ProN",
        "Yu Mincho",
        YuMincho,
        serif;

    font-size:
        clamp(
            25px,
            2vw,
            32px
        );

    font-weight: 400;

    line-height: 1.6;

    letter-spacing: .03em;
}


/* ==================================================
   DESCRIPTION
================================================== */

.tiag-mvv__description {
    margin: 0;

    color:
        rgba(17,27,61,.60);

    font-size: 13px;

    line-height: 2;

    letter-spacing: .04em;
}


/* ==================================================
   TOP LIGHT
================================================== */

.tiag-mvv__item::before {
    content: "";

    position: absolute;

    left: 0;
    top: -1px;

    width: 0;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--tiag-green),
            var(--tiag-cyan)
        );

    transition:
        width .7s
        cubic-bezier(.2,.8,.2,1);
}


/* ==================================================
   HOVER
================================================== */

@media (pointer: fine) {

    .tiag-mvv__item:hover {
        transform:
            translateY(-6px);

        background:
            rgba(84,200,239,.025);
    }


    .tiag-mvv__item:hover::before {
        width: 100%;
    }

}


/* ==================================================
   TABLET / MOBILE
================================================== */

@media (max-width: 900px) {

    .tiag-mvv {
        margin-top: 80px;

        grid-template-columns: 1fr;

        border-top:
            1px solid rgba(17,27,61,.12);
    }


    .tiag-mvv__item {
        min-height: auto;

        padding:
            38px
            5px
            45px;

        border-right: 0;

        border-bottom:
            1px solid rgba(17,27,61,.12);
    }


    .tiag-mvv__item:first-child {
        border-left: 0;
    }


    .tiag-mvv__number {
        margin-bottom: 28px;
    }


    .tiag-mvv__item h3 {
        font-size: 27px;
    }

}
/* ==================================================
   TiAG SECTION BOUNDARY SYSTEM
   セクション同士の境界を自然に見せる
================================================== */


/* ==================================================
   COMMON SEPARATOR
================================================== */

.tiag-about,
.tiag-about-belief,
.tiag-business,
.tiag-entertainment-create,
.tiag-entertainment-experience,
.tiag-entertainment-projects,
.tiag-technology,
.tiag-value,
.tiag-together,
.tiag-company,
.tiag-contact {

    border-top:
        1px solid
        rgba(17, 27, 61, .055);

}


/* 最初のHero直下だけ少し柔らかく */

.tiag-about {
    border-top-color:
        rgba(32, 200, 117, .07);
}


/* ==================================================
   WHITE SECTION VARIATION
================================================== */

/* Business */
.tiag-business {
    background-color: #ffffff;
}


/* Projects */
.tiag-entertainment-projects {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfefd 100%
        );
}


/* Values */
.tiag-value {
    background:
        linear-gradient(
            180deg,
            #fbfefd 0%,
            #ffffff 100%
        );
}


/* Company */
.tiag-company {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f9fcfd 100%
        );
}


/* ==================================================
   SECTION EDGE SHADOW
   下にほんの少し奥行きをつける
================================================== */

.tiag-business,
.tiag-entertainment-projects,
.tiag-value,
.tiag-company {

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        inset 0 18px 40px rgba(17,27,61,.012);

}


/* ==================================================
   COLORED SECTION BORDER
================================================== */

/* Entertainment */

.tiag-entertainment-create,
.tiag-entertainment-experience {

    border-top-color:
        rgba(32, 200, 117, .10);

}


/* Technology */

.tiag-technology {

    border-top-color:
        rgba(84, 200, 239, .12);

}


/* Value */

.tiag-value {

    border-top-color:
        rgba(32, 200, 117, .08);

}


/* Together */

.tiag-together {

    border-top-color:
        rgba(73, 207, 169, .13);

}


/* Contact */

.tiag-contact {

    border-top-color:
        rgba(84, 200, 239, .15);

}


/* ==================================================
   DESKTOP - SECTION DEPTH
================================================== */

@media (min-width: 901px) {

    .tiag-business,
    .tiag-entertainment-projects,
    .tiag-value,
    .tiag-company {

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.95),
            inset 0 24px 60px rgba(17,27,61,.015);

    }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 900px) {

    .tiag-about,
    .tiag-about-belief,
    .tiag-business,
    .tiag-entertainment-create,
    .tiag-entertainment-experience,
    .tiag-entertainment-projects,
    .tiag-technology,
    .tiag-value,
    .tiag-together,
    .tiag-company,
    .tiag-contact {

        border-top-width: 1px;

    }

}