@charset "UTF-8";

/* ==========================================================================
   Pattern 09: Grid Brutalist (無骨・構造美・太線グリッド)
   Designer: "構造の美しさを際立たせるテック系UIクリエイター"
   Concept: 黒の太線（3px）、要素の敷き詰め、モノスペース風サンセリフ、原色アクセント
   ========================================================================== */

:root {
    --c-black: #111111;
    --c-white: #FFFFFF;
    --c-bg: #F4F4F4;
    /* 真っ白ではなく工業的なライトグレー */
    --c-accent: #FF3300;
    /* 警告色のような強烈なオレンジ・レッド */
    --c-border: #111111;

    --border-w: 3px;
    /* ブルータリズムの要となる境界線の太さ */

    --font-en: 'Space Grotesk', sans-serif;
    --font-ja: 'Noto Sans JP', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-ja);
    color: var(--c-black);
    background-color: var(--c-bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s, color 0.2s;
}

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

ul {
    list-style: none;
}

h1,
h2,
h3,
h4,
.c-logo {
    font-family: var(--font-en);
    text-transform: uppercase;
}

/* =========================================
   Grid Container & Borders (The Brutalist Core)
========================================= */
.l-grid-container {
    max-width: 100%;
    margin: 0 auto;
    border: var(--border-w) solid var(--c-border);
    background-color: var(--c-border);
    /* グリッドの線を背景色で表現 */
    display: flex;
    flex-direction: column;
    gap: var(--border-w);
    /* 要素の間に線の太さ分の隙間（=罫線）を入れる */
}

/* すべてのメインブロックは白背景 */
.l-header,
.p-hero-text,
.p-hero-visuals__main,
.p-hero-visuals__sub .sub-img,
.p-hero-visuals__sub .sub-text,
.p-system__header,
.c-card-brutal,
.p-components__visual,
.data-block,
.data-action,
.l-footer__col {
    background-color: var(--c-bg);
}

/* =========================================
   Components
========================================= */
.c-logo {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.05em;
}

.c-logo--giant {
    font-size: clamp(40px, 8vw, 120px);
    line-height: 0.85;
    word-break: break-all;
}

.c-btn-brutal {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 30px;
    background-color: var(--c-black);
    color: var(--c-white);
    font-family: var(--font-en);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.05em;
    border: var(--border-w) solid var(--c-black);
}

.c-btn-brutal:hover {
    background-color: var(--c-accent);
    color: var(--c-black);
    border-color: var(--c-black);
}

.c-btn-brutal--full {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 24px;
    font-size: 20px;
}

.c-btn-brutal .arrow {
    margin-left: 10px;
    font-weight: 900;
}

.c-label-brutal {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: var(--c-accent);
    color: var(--c-black);
    font-family: var(--font-en);
    font-weight: 700;
    padding: 8px 16px;
    font-size: 14px;
    border: var(--border-w) solid var(--c-black);
}

.c-label-brutal--light {
    background-color: var(--c-bg);
}

/* =========================================
   Header
========================================= */
.l-header {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    /* ボタンの高さを揃えるため */
}

.l-header .c-logo {
    padding: 20px 40px;
    display: flex;
    align-items: center;
    border-right: var(--border-w) solid var(--c-border);
}

.l-header__nav {
    flex: 1;
    display: flex;
}

.l-header__nav a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-en);
    font-weight: 700;
    font-size: 18px;
    border-right: var(--border-w) solid var(--c-border);
    transition: background-color 0s;
    /* ブルータリズムはアニメーションなしでパッと変わる */
}

.l-header__nav a:hover {
    background-color: var(--c-black);
    color: var(--c-white);
}

.l-header .c-btn-brutal {
    border: none;
    /* コンテナの罫線に依存 */
}

/* =========================================
   Hero Text Ticker
========================================= */
.p-hero-text {
    padding: 20px 0;
    overflow: hidden;
    white-space: nowrap;
    border-bottom: var(--border-w) solid var(--c-border);
    /* グリッド外の内部ボーダー */
}

.p-hero-text h2 {
    display: inline-block;
    font-size: clamp(32px, 5vw, 64px);
    font-weight: 900;
    letter-spacing: -0.02em;
    padding-right: 50px;
}

.js-ticker {
    display: inline-block;
    animation: ticker 20s linear infinite;
}

@keyframes ticker {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

    /* innerHTMLで2倍にしているので50%で一周 */
}

/* =========================================
   Hero Visuals (Split Layout)
========================================= */
.p-hero-visuals {
    display: flex;
    height: 70vh;
}

.p-hero-visuals__main {
    flex: 7;
    position: relative;
    border-right: var(--border-w) solid var(--c-border);
    overflow: hidden;
}

.p-hero-visuals__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.2) grayscale(0.2);
}

.p-hero-visuals__sub {
    flex: 3;
    display: flex;
    flex-direction: column;
}

.p-hero-visuals__sub .sub-img {
    flex: 1;
    border-bottom: var(--border-w) solid var(--c-border);
    position: relative;
}

.p-hero-visuals__sub .sub-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p-hero-visuals__sub .sub-text {
    flex: 1;
    padding: 40px;
    display: flex;
    align-items: center;
    font-size: 24px;
    font-weight: 700;
}

/* =========================================
   System
========================================= */
.p-system__header {
    padding: 30px 40px;
}

.p-system__header h3 {
    font-size: 24px;
    font-weight: 900;
}

.p-system__grid {
    display: flex;
}

.c-card-brutal {
    flex: 1;
    border-right: var(--border-w) solid var(--c-border);
    display: flex;
    flex-direction: column;
}

.c-card-brutal:last-child {
    border-right: none;
}

.c-card-brutal__img {
    height: 300px;
    border-bottom: var(--border-w) solid var(--c-border);
}

.c-card-brutal__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    transition: filter 0.1s;
}

.c-card-brutal:hover .c-card-brutal__img img {
    filter: grayscale(0);
}

.c-card-brutal__body {
    padding: 40px;
    flex: 1;
}

.c-card-brutal__body h4 {
    font-size: 24px;
    margin-bottom: 15px;
    font-weight: 900;
}

.c-card-brutal__body p {
    font-size: 16px;
    font-weight: 700;
}

/* =========================================
   Components (Visual + Data)
========================================= */
.p-components {
    display: flex;
}

.p-components__visual {
    flex: 6;
    border-right: var(--border-w) solid var(--c-border);
    position: relative;
}

.p-components__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 400px;
}

.p-components__data {
    flex: 4;
    display: flex;
    flex-direction: column;
}

.data-block {
    flex: 1;
    padding: 40px;
    border-bottom: var(--border-w) solid var(--c-border);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.data-block span {
    font-family: var(--font-en);
    font-weight: 700;
    color: var(--c-accent);
    margin-bottom: 5px;
}

.data-block strong {
    font-family: var(--font-en);
    font-size: 48px;
    font-weight: 900;
    line-height: 1;
}

.data-action {
    background-color: var(--c-black);
}

/* =========================================
   Footer
========================================= */
.l-footer {
    display: flex;
}

.l-footer__col {
    padding: 60px 40px;
    border-right: var(--border-w) solid var(--c-border);
}

.l-footer__col:last-child {
    border-right: none;
}

.l-footer__col--brand {
    flex: 5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.brand-info {
    font-family: var(--font-en);
    font-weight: 700;
    margin-top: 40px;
}

.copyright {
    font-size: 12px;
    margin-top: 10px;
}

.l-footer__col--links {
    flex: 2;
}

.l-footer__col--links h4,
.l-footer__col--contact h4 {
    margin-bottom: 30px;
    font-size: 18px;
    color: var(--c-accent);
}

.l-footer__col--links a {
    display: block;
    font-family: var(--font-en);
    font-weight: 900;
    font-size: 20px;
    margin-bottom: 15px;
}

.l-footer__col--links a:hover {
    padding-left: 10px;
    color: var(--c-accent);
    transition: padding 0.1s;
}

.l-footer__col--contact {
    flex: 3;
}

.mail-link {
    font-family: var(--font-en);
    font-size: 24px;
    font-weight: 700;
    border-bottom: var(--border-w) solid var(--c-black);
    display: inline-block;
    margin-bottom: 40px;
}

.mail-link:hover {
    color: var(--c-white);
    background-color: var(--c-black);
}

.status {
    font-family: var(--font-en);
    background-color: var(--c-accent);
    color: var(--c-black);
    padding: 10px;
    font-weight: 700;
    display: inline-block;
    animation: blink 2s infinite;
}

@keyframes blink {

    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}

/* =========================================
   Responsive
========================================= */
@media screen and (max-width: 1000px) {
    .l-header {
        flex-wrap: wrap;
    }

    .l-header .c-logo,
    .l-header__nav,
    .l-header .c-btn-brutal {
        width: 100%;
        border-right: none;
        border-bottom: var(--border-w) solid var(--c-border);
    }

    .l-header__nav {
        border-bottom: none;
    }

    /* flex row keeps borders internally */

    .p-hero-visuals {
        flex-direction: column;
        height: auto;
    }

    .p-hero-visuals__main {
        border-right: none;
        border-bottom: var(--border-w) solid var(--c-border);
        height: 50vh;
    }

    .p-system__grid {
        flex-direction: column;
    }

    .c-card-brutal {
        border-right: none;
        border-bottom: var(--border-w) solid var(--c-border);
    }

    .c-card-brutal:last-child {
        border-bottom: none;
    }

    .p-components {
        flex-direction: column;
    }

    .p-components__visual {
        border-right: none;
        border-bottom: var(--border-w) solid var(--c-border);
    }

    .l-footer {
        flex-direction: column;
    }

    .l-footer__col {
        border-right: none;
        border-bottom: var(--border-w) solid var(--c-border);
    }
}

/* --- Hover Interaction Updates --- */
.c-card-brutal__img, .sub-img, .p-components__visual { overflow: hidden; }
.c-card-brutal:hover .c-card-brutal__img img, .sub-img:hover img, .p-components__visual:hover img { transform: scale(1.05); filter: grayscale(0) contrast(1); }
.c-card-brutal__img img, .sub-img img, .p-components__visual img { transition: transform 0.4s, filter 0.4s; }