/* =========================================================
   Tech Journey
   style.css

   共通レイアウト・カラー・コンポーネント
========================================================= */


/* =========================================================
   Variables
========================================================= */

:root {

    /* Color */

    --color-bg:
        #f7f9fc;

    --color-surface:
        #ffffff;

    --color-text:
        #172033;

    --color-text-sub:
        #64748b;

    --color-text-light:
        #94a3b8;

    --color-border:
        #e2e8f0;

    --color-primary:
        #2563eb;

    --color-primary-dark:
        #1d4ed8;

    --color-accent:
        #06b6d4;

    --color-dark:
        #172033;

    --color-dark-sub:
        #cbd5e1;


    /* Shadow */

    --shadow-card:
        0 10px 30px rgba(
            15,
            23,
            42,
            0.06
        );

    --shadow-card-hover:
        0 16px 40px rgba(
            15,
            23,
            42,
            0.10
        );


    /* Layout */

    --container-width:
        1200px;

    --container-padding:
        20px;


    /* Radius */

    --radius-small:
        8px;

    --radius:
        12px;

    --radius-large:
        16px;


    /* Transition */

    --transition:
        0.2s ease;
}


/* =========================================================
   Reset / Base
========================================================= */

*,
*::before,
*::after {

    box-sizing:
        border-box;
}


html {

    margin:
        0;

    padding:
        0;

    scroll-behavior:
        smooth;
}


body {

    margin:
        0;

    padding:
        0;

    background:
        var(--color-bg);

    color:
        var(--color-text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Noto Sans JP",
        "Hiragino Kaku Gothic ProN",
        "Yu Gothic",
        Meiryo,
        sans-serif;

    font-size:
        16px;

    line-height:
        1.8;

    -webkit-font-smoothing:
        antialiased;
}


img {

    max-width:
        100%;

    height:
        auto;

    display:
        block;
}


a {

    color:
        inherit;

    text-decoration:
        none;
}


button {

    font:
        inherit;

    color:
        inherit;
}


/* =========================================================
   Container
========================================================= */

.container {

    width:
        min(
            calc(100% - 40px),
            var(--container-width)
        );

    margin:
        0 auto;
}


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

header,
.site-header {

    position:
        relative;

    z-index:
        100;

    width:
        100%;

    min-height:
        72px;

    background:
        rgba(
            255,
            255,
            255,
            0.92
        );

    border-bottom:
        1px solid
        var(--color-border);

    backdrop-filter:
        blur(12px);
}


.header-inner {

    width:
        min(
            calc(100% - 40px),
            var(--container-width)
        );

    min-height:
        72px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;
}


/* =========================================================
   Logo
========================================================= */

.logo,
.site-logo {

    color:
        var(--color-text);

    font-size:
        22px;

    font-weight:
        800;

    letter-spacing:
        0.04em;

    white-space:
        nowrap;
}


.logo:hover,
.site-logo:hover {

    color:
        var(--color-primary);

    opacity:
        1;
}


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

nav,
.global-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        28px;
}


nav a,
.global-nav a {

    position:
        relative;

    color:
        var(--color-text-sub);

    font-size:
        14px;

    font-weight:
        600;

    transition:
        color var(--transition);
}


nav a:hover,
.global-nav a:hover {

    color:
        var(--color-primary);

    opacity:
        1;
}


nav a::after,
.global-nav a::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -6px;

    width:
        0;

    height:
        2px;

    background:
        var(--color-primary);

    transition:
        width var(--transition);
}


nav a:hover::after,
.global-nav a:hover::after {

    width:
        100%;
}


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

.menu-toggle {

    display:
        none;

    padding:
        6px;

    color:
        var(--color-text);

    cursor:
        pointer;
}


/* =========================================================
   Main
========================================================= */

main {

    width:
        100%;
}


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

.hero {

    position:
        relative;

    min-height:
        650px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #eff6ff 0%,
            #f8fafc 55%,
            #ecfeff 100%
        );
}


.hero::before {

    content:
        "";

    position:
        absolute;

    width:
        520px;

    height:
        520px;

    top:
        -220px;

    right:
        -100px;

    border-radius:
        50%;

    background:
        rgba(
            37,
            99,
            235,
            0.08
        );

    pointer-events:
        none;
}


.hero::after {

    content:
        "";

    position:
        absolute;

    width:
        360px;

    height:
        360px;

    left:
        -180px;

    bottom:
        -180px;

    border-radius:
        50%;

    background:
        rgba(
            6,
            182,
            212,
            0.08
        );

    pointer-events:
        none;
}


.hero-inner {

    position:
        relative;

    z-index:
        1;

    width:
        min(
            calc(100% - 40px),
            var(--container-width)
        );

    margin:
        0 auto;

    padding:
        100px 0;
}


.eyebrow {

    margin:
        0 0 16px;

    color:
        var(--color-primary);

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        0.12em;

    line-height:
        1.5;
}


.hero h1 {

    max-width:
        900px;

    margin:
        0 0 28px;

    color:
        var(--color-text);

    font-size:
        clamp(
            38px,
            6vw,
            72px
        );

    font-weight:
        800;

    line-height:
        1.25;

    letter-spacing:
        -0.03em;
}


.hero h1 span {

    color:
        var(--color-primary);
}


.hero-description {

    max-width:
        720px;

    margin:
        0;

    color:
        var(--color-text-sub);

    font-size:
        17px;

    line-height:
        2;
}


/* =========================================================
   Actions
========================================================= */

.actions {

    margin-top:
        36px;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;
}


.btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        50px;

    padding:
        0 24px;

    border:
        1px solid
        transparent;

    border-radius:
        var(--radius-small);

    font-size:
        14px;

    font-weight:
        700;

    transition:
        transform var(--transition),
        background var(--transition),
        border-color var(--transition),
        color var(--transition);
}


.btn:hover {

    transform:
        translateY(-2px);

    opacity:
        1;
}


.btn.primary {

    background:
        var(--color-primary);

    border-color:
        var(--color-primary);

    color:
        #ffffff;

    box-shadow:
        0 8px 20px
        rgba(
            37,
            99,
            235,
            0.20
        );
}


.btn.primary:hover {

    background:
        var(--color-primary-dark);

    border-color:
        var(--color-primary-dark);
}


.btn.secondary {

    background:
        rgba(
            255,
            255,
            255,
            0.75
        );

    border-color:
        var(--color-border);

    color:
        var(--color-text);
}


.btn.secondary:hover {

    background:
        #ffffff;

    border-color:
        #bfdbfe;

    color:
        var(--color-primary);
}


/* =========================================================
   Section
========================================================= */

.section {

    width:
        min(
            calc(100% - 40px),
            var(--container-width)
        );

    margin:
        0 auto;

    padding:
        100px 0;
}


.section + .section {

    border-top:
        1px solid
        transparent;
}


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

.heading {

    margin-bottom:
        40px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        24px;
}


.heading h2 {

    margin:
        0;

    color:
        var(--color-text);

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

    line-height:
        1.35;

    letter-spacing:
        -0.02em;
}


.heading > a {

    color:
        var(--color-primary);

    font-size:
        14px;

    font-weight:
        700;

    white-space:
        nowrap;
}


.heading > a:hover {

    opacity:
        1;
}


/* =========================================================
   About
========================================================= */

.intro {

    display:
        grid;

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

    gap:
        80px;

    align-items:
        start;
}


.intro h2 {

    margin:
        0;

    color:
        var(--color-text);

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

    line-height:
        1.4;

    letter-spacing:
        -0.025em;
}


.intro > div:last-child {

    padding-top:
        32px;
}


.intro > div:last-child p {

    margin:
        0 0 20px;

    color:
        var(--color-text-sub);

    font-size:
        16px;

    line-height:
        2;
}


/* =========================================================
   Common Grid
========================================================= */

.grid {

    display:
        grid;

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

    gap:
        20px;
}


.grid-3 {

    display:
        grid;

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

    gap:
        20px;
}


/* =========================================================
   Common Card
========================================================= */

.card {

    position:
        relative;

    min-height:
        210px;

    display:
        flex;

    flex-direction:
        column;

    padding:
        28px;

    background:
        var(--color-surface);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow-card);

    overflow:
        hidden;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}


.card::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        4px;

    height:
        100%;

    background:
        var(--color-primary);

    transform:
        scaleY(0);

    transform-origin:
        bottom;

    transition:
        transform var(--transition);
}


.card:hover {

    transform:
        translateY(-5px);

    border-color:
        #bfdbfe;

    box-shadow:
        var(--shadow-card-hover);

    opacity:
        1;
}


.card:hover::before {

    transform:
        scaleY(1);

    transform-origin:
        top;
}


.card b {

    margin-bottom:
        18px;

    color:
        var(--color-primary);

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        0.08em;
}


.card h3 {

    margin:
        0 0 10px;

    color:
        var(--color-text);

    font-size:
        20px;

    line-height:
        1.4;
}


.card p {

    margin:
        0;

    color:
        var(--color-text-sub);

    font-size:
        14px;

    line-height:
        1.8;
}


/* =========================================================
   Featured Card
========================================================= */

.card.featured {

    background:
        linear-gradient(
            145deg,
            #eff6ff,
            #ffffff
        );

    border-color:
        #bfdbfe;
}


.card.featured::after {

    content:
        "FIELD";

    position:
        absolute;

    top:
        20px;

    right:
        20px;

    color:
        rgba(
            37,
            99,
            235,
            0.12
        );

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.1em;
}


/* =========================================================
   Story / Highlight Section
========================================================= */

.story {

    position:
        relative;

    padding:
        64px;

    background:
        var(--color-dark);

    color:
        #ffffff;

    border-radius:
        var(--radius-large);

    overflow:
        hidden;
}


.story::before {

    content:
        "";

    position:
        absolute;

    width:
        420px;

    height:
        420px;

    right:
        -180px;

    top:
        -180px;

    border-radius:
        50%;

    background:
        rgba(
            37,
            99,
            235,
            0.18
        );

    pointer-events:
        none;
}


.story::after {

    content:
        "";

    position:
        absolute;

    width:
        280px;

    height:
        280px;

    right:
        -80px;

    bottom:
        -140px;

    border-radius:
        50%;

    background:
        rgba(
            6,
            182,
            212,
            0.15
        );

    pointer-events:
        none;
}


.story > * {

    position:
        relative;

    z-index:
        1;
}


.story .eyebrow {

    color:
        #67e8f9;
}


.story h2 {

    max-width:
        800px;

    margin:
        0 0 28px;

    color:
        #ffffff;

    font-size:
        clamp(
            30px,
            5vw,
            52px
        );

    line-height:
        1.35;

    letter-spacing:
        -0.025em;
}


.story p {

    max-width:
        800px;

    margin:
        0 0 18px;

    color:
        var(--color-dark-sub);

    font-size:
        16px;

    line-height:
        2;
}


.story a {

    display:
        inline-block;

    margin-top:
        18px;

    color:
        #67e8f9;

    font-size:
        14px;

    font-weight:
        700;
}


.story a:hover {

    color:
        #ffffff;

    opacity:
        1;
}


/* =========================================================
   Latest / Article Cards
========================================================= */

.articles {

    display:
        grid;

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

    gap:
        20px;
}


.articles > a {

    display:
        block;

    padding:
        30px;

    background:
        var(--color-surface);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow-card);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}


.articles > a:hover {

    transform:
        translateY(-4px);

    border-color:
        #bfdbfe;

    box-shadow:
        var(--shadow-card-hover);

    opacity:
        1;
}


.articles span {

    display:
        inline-block;

    margin-bottom:
        14px;

    color:
        var(--color-primary);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.12em;
}


.articles h3 {

    margin:
        0 0 12px;

    color:
        var(--color-text);

    font-size:
        20px;

    line-height:
        1.5;
}


.articles p {

    margin:
        0;

    color:
        var(--color-text-sub);

    font-size:
        14px;

    line-height:
        1.8;
}


/* =========================================================
   Footer
========================================================= */

footer,
.site-footer {

    margin-top:
        40px;

    padding:
        40px 20px;

    background:
        #eef2f7;

    border-top:
        1px solid
        var(--color-border);

    color:
        var(--color-text-sub);
}


.footer-inner {

    width:
        min(
            calc(100% - 40px),
            var(--container-width)
        );

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}


footer p {

    margin:
        0;

    font-size:
        13px;
}


footer a {

    margin-left:
        20px;

    color:
        var(--color-text-sub);

    font-size:
        13px;
}


footer a:hover {

    color:
        var(--color-primary);

    opacity:
        1;
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 1100px) {

    .grid {

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

    }

}


@media (max-width: 900px) {

    .grid {

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

    }


    .grid-3 {

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

    }


    .intro {

        grid-template-columns:
            1fr;

        gap:
            20px;

    }


    .intro > div:last-child {

        padding-top:
            0;

    }


    header nav {

        display:
            none;

    }


    .menu-toggle {

        display:
            block;

        background:
            transparent;

        border:
            0;

        font-size:
            1.4rem;

    }


    .articles {

        grid-template-columns:
            1fr;

    }


    .hero {

        min-height:
            570px;

    }


    .hero-inner {

        padding:
            80px 0;

    }


    .section {

        padding:
            80px 0;

    }

}


@media (max-width: 600px) {

    .container {

        width:
            calc(100% - 32px);

    }


    .header-inner {

        width:
            calc(100% - 32px);

        min-height:
            64px;

    }


    .site-logo,
    .logo {

        font-size:
            19px;

    }


    .section {

        width:
            calc(100% - 32px);

        padding:
            70px 0;

    }


    .hero-inner {

        width:
            calc(100% - 32px);

        padding:
            70px 0;

    }


    .hero h1 {

        font-size:
            38px;

    }


    .hero-description {

        font-size:
            15px;

    }


    .grid,
    .grid-3 {

        grid-template-columns:
            1fr;

        gap:
            14px;

    }


    .card {

        min-height:
            auto;

        padding:
            24px;

    }


    .actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .btn {

        width:
            100%;

        text-align:
            center;

    }


    .heading {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            12px;

    }


    .story {

        padding:
            36px 28px;

    }


    .story h2 {

        font-size:
            30px;

    }


    footer {

        padding:
            32px 16px;

    }


    .footer-inner {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    footer a {

        margin-left:
            0;

        margin-right:
            18px;

    }

}