@charset "UTF-8";

/* ============================================================
   Technophere — 汎用コンポーネント（全ページ共通）
   ------------------------------------------------------------
   ページをまたいで使い回すパーツだけを置く。
   特定ページ専用の見た目は各ページのCSS（home.css / message.css …）へ。

   読み込み順: tokens.css → base.css → header-footer.css → 【ここ】 → 各ページCSS
   値はすべて tokens.css の var(--…) を経由する。生の色を直接書かないこと。

   使い方（ページ側マークアップ）:
     <div class="tp-page">            ← ページ全体のスコープ（トップは .tp-home）
       <section class="tp-section">
         <div class="tp-container">
           <div class="tp-section-head animation">
             <p class="tp-eyebrow tp-eyebrow--dark">ABOUT</p>
             <h2 class="tp-section-title">見出し</h2>
             <p class="tp-section-lead">リード文<strong class="tp-lead-hl">強調</strong>。</p>
           </div>
           …
           <a class="tp-btn tp-btn--primary" href="#">ボタン</a>
         </div>
       </section>
     </div>

   ダーク背景のセクションでは --light 修飾子を併用する:
     .tp-eyebrow（既定でダーク面用）/ .tp-section-title--light / .tp-section-lead--light
   ライト背景では .tp-eyebrow--dark を足す。
   ============================================================ */

/* ---------- スコープ ----------
   外部リセットCSSの読み込み状態に依存せず、paddingを表示幅の内側に収める */
/* ---------- スコープ ----------
   外部リセットCSSの読み込み状態に依存せず、paddingを表示幅の内側に収める */
.tp-home,
.tp-home *,
.tp-home *::before,
.tp-home *::after,
.tp-page,
.tp-page *,
.tp-page *::before,
.tp-page *::after {
    box-sizing: border-box;
}

/* ---------- レイアウト ---------- */
.tp-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
    position: relative;
    z-index: 1;
}

.tp-section {
    position: relative;
    width: 100%;
}

/* ---------- セクション見出し ---------- */

/* eyebrow は既定がダーク帯用。ライト面では .tp-eyebrow--dark を併用する */
.tp-section-head {
    margin-bottom: 56px;
}

.tp-eyebrow {
    font-family: var(--f-mono);
    font-size: 13px;
    letter-spacing: 0.35em;
    color: var(--c-periwinkle);
    margin-bottom: 16px;
}

.tp-eyebrow--dark {
    color: var(--c-cobalt);
}

.tp-section-title {
    font-family: var(--f-body);
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.025em;
    color: var(--c-ink);
}

.tp-section-title--light {
    color: #fff;
}

.tp-section-lead {
    max-width: 720px;
    margin-top: 20px;
    font-size: 16px;
    line-height: 2;
    color: var(--c-ink-soft);
}

.tp-section-lead--light {
    color: var(--c-on-dark);
}

/* ---------- リード文中の強調ハイライト ----------
   下線が左から伸びるアニメーション。親が .visible になったタイミングで走る
   （.animation → .visible は corporate.js の共通コントラクト）。
   1段落につき1箇所まで。--hl-d で開始を後ろへずらせる */
.tp-lead-hl {
    position: relative;
    font-weight: 700;
    color: var(--c-cobalt-deep);
    background-image: linear-gradient(rgba(37, 87, 245, 0.14), rgba(37, 87, 245, 0.14));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 40%;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: 0 2px;
}

.tp-section-lead--light .tp-lead-hl {
    color: #fff;
    background-image: linear-gradient(rgba(36, 198, 217, 0.3), rgba(36, 198, 217, 0.3));
}

.visible .tp-lead-hl {
    animation: tp-lead-hl-sweep 0.85s cubic-bezier(0.3, 0.8, 0.4, 1) forwards;
    animation-delay: var(--hl-d, 0.2s);
}

@keyframes tp-lead-hl-sweep {
    from {
        background-size: 0% 40%;
    }

    to {
        background-size: 100% 40%;
    }
}

/* ---------- ボタン ---------- */
.tp-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: var(--radius-md);
    font-family: var(--f-body);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) ease;
    will-change: transform;
}

.tp-btn--primary {
    background-color: var(--c-cobalt);
    color: #fff;
    box-shadow: 0 8px 22px rgba(30, 69, 198, 0.24);
}

.tp-btn--ghost {
    border: 1px solid rgba(23, 28, 51, 0.4);
    color: var(--c-ink);
}

.tp-btn--large {
    padding: 20px 44px;
    font-size: 17px;
}

.tp-btn-icon {
    width: 14px;
    height: 14px;
    flex: none;
    transition: transform var(--dur-fast) ease;
}

.tp-btn:focus-visible,
.tp-text-link:focus-visible {
    outline: 2px solid var(--c-cyan);
    outline-offset: 3px;
}

/* ホバーアニメーションはマウス等のファインポインタでのみ有効化する。
   タッチデバイスはタップ後もホバー状態が残ってしまう（sticky hover）ため無効化 */
@media (hover: hover) and (pointer: fine) {
    .tp-btn--primary:hover {
        background-color: var(--c-cobalt-deep);
        box-shadow: 0 12px 30px rgba(30, 69, 198, 0.32);
        transform: translateY(-2px);
    }

    .tp-btn--ghost:hover {
        background-color: var(--c-ink);
        border-color: var(--c-ink);
        color: var(--c-paper);
    }

    .tp-btn:hover .tp-btn-icon,
    .tp-text-link:hover .tp-btn-icon {
        transform: translateX(4px);
    }
}

/* ---------- 幾何モチーフの基底 ----------
   円・半円・四分円をヒーローの背後に散らすための最小の器。
   サイズ・位置・色はページ側の修飾子で決める
   （トップ = home.css の .tp-geo--*、下層 = page-shell.css の .page-geo--*）。

   このクラスは corporate.js のモーション対象を選ぶ目印も兼ねている。
   transform は JS（スクロールドリフト＋ポインタ追従＋アイドル漂い）が
   書き込むので、CSS 側から transform を当てないこと。 */
.tp-geo {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}

/* ---------- テキストリンク（ホバーで下線が伸びる） ---------- */
.tp-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--c-cobalt);
    text-decoration: none;
    padding-bottom: 2px;
    background-image: linear-gradient(var(--c-cobalt), var(--c-cobalt));
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0 1px;
    transition: background-size var(--dur-base) ease;
}

@media (hover: hover) and (pointer: fine) {
    .tp-text-link:hover {
        background-size: 100% 1px;
    }
}

/* ============================================================
   カードタイル .tp-tile — 下層ページの一覧に共通で使う部品
   ------------------------------------------------------------
   ホームの幾何モチーフと同じ思想（影で浮かせない・枠線が締まる）を、
   「Corner Sphere」で表す。

   ★ シグネチャ: 右下の角だけ大きな四分円カット（--radius-corner）。
   ヒーローの .page-geo--quarter（本文の地が四分円になってヒーローへ
   せり上がる）と同じ「角を円で受ける」発想を、カードサイズに縮小して
   反復したもの。Technophere（techno + sphere）というブランド名の
   視覚化。ホバーは枠線の締まりだけで合図する（過去にはこの窪みへ
   コバルトの小球を置いていたが、装飾が過多という判断で撤去した）。

   構成:
     <a class="tp-tile tp-tile--media">
       <div class="tp-tile-media"><img …></div>
       <div class="tp-tile-body">
         <p  class="tp-tile-tag">SYSTEM</p>
         <h2 class="tp-tile-title">…</h2>
         <p  class="tp-tile-text">…</p>
         <p  class="tp-tile-meta">2025.03.15</p>
       </div>
     </a>
   ============================================================ */
.tp-tile-grid {
    width: 100%;
    display: grid;
    align-items: stretch;
    gap: 24px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* 列数を固定したいとき（auto-fit だと最終行が伸びてしまう一覧向け） */
.tp-tile-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tp-tile-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

.tp-tile {
    /* バリアント側は --tile-corner だけ上書きすればカット量を変えられる
       （例: .tp-tile--news { --tile-corner: 18px; }）。値そのものは
       tokens.css の --radius-corner を既定にする */
    --tile-corner: var(--radius-corner);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: visible;
    background-color: var(--c-card);
    border: 1px solid var(--c-line);
    /* 右下だけ大きな四分円カット（Corner Sphere）。他の3角は通常の角丸 */
    border-radius: var(--radius-md) var(--radius-md) var(--tile-corner) var(--radius-md);
    color: var(--c-ink);
    text-decoration: none;
    transition: border-color var(--dur-fast) ease;
}

.tp-tile:focus-visible,
.tp-tile:focus-within {
    border-color: var(--c-ink);
}

.tp-tile:focus-visible {
    outline: 2px solid var(--c-cyan);
    outline-offset: 3px;
}

/* リンクではないタイル（ゲーム一覧・特徴の説明など）。
   ホバーで反応するとクリックできそうに見えてしまうので、枠を動かさない */
.tp-tile--static:focus-within {
    border-color: var(--c-line);
}

/* ホバーアニメーションはマウス等のファインポインタでのみ有効化する。
   タッチデバイスはタップ後もホバー状態が残ってしまう（sticky hover）ため無効化 */
@media (hover: hover) and (pointer: fine) {
    .tp-tile:hover {
        border-color: var(--c-ink);
    }

    .tp-tile--static:hover {
        border-color: var(--c-line);
    }

    .tp-tile:hover .tp-tile-media img {
        transform: scale(1.04);
    }

    .tp-tile:hover .tp-tile-title {
        background-size: 100% 1px;
    }
}

/* ---------- 画像帯 ---------- */
.tp-tile-media {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* 親の border-radius から枠線1pxぶん内側 */
    border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0;
    background-color: var(--c-paper-tint);
}

.tp-tile-media img {
    display: block;
    width: 100%;
    height: 184px;
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    object-fit: cover;
    filter: none;
    transition: transform 0.6s var(--ease-out);
}

/* ---------- 日付バッジ（お知らせカード .tp-tile--news、画像左上に重ねる） ---------- */
.tp-tile-datebadge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 12px 7px;
    background-color: var(--c-ink-deep);
    color: #fff;
    /* 画像の丸角（.tp-tile-media）に左上を合わせ、右下だけ小さく丸める */
    border-top-left-radius: calc(var(--radius-md) - 1px);
    border-bottom-right-radius: var(--radius-sm);
}

.tp-tile-datebadge-year {
    font-family: var(--f-mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.16em;
    line-height: 1;
    color: var(--c-on-dark-mute);
    margin: 0 0 2px;
}

.tp-tile-datebadge-date {
    font-family: var(--f-disp);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
    margin: 0;
}

/* ---------- 本文 ---------- */
.tp-tile-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    width: 100%;
    padding: 26px 24px 26px;
}

/* mono の小さなラベル。塗りつぶしのピルではなく、空の枠で軽く置く */
.tp-tile-tag {
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.18em;
    color: var(--c-cobalt);
    background-color: transparent;
    border: 1px solid var(--c-sky);
    border-radius: 0;
    padding: 6px 10px;
    margin-bottom: 16px;
}

.tp-tile-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--f-body);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.015em;
    color: var(--c-ink);
    margin: 0 0 12px;
    /* ホバーで下線が左から伸びる（.tp-text-link と同じ挙動） */
    background-image: linear-gradient(var(--c-ink), var(--c-ink));
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0 1px;
    transition: background-size var(--dur-base) var(--ease-out);
}

.tp-tile-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.9;
    letter-spacing: 0.02em;
    color: var(--c-ink-soft);
    margin: 0 0 18px;
}

/* お知らせカードはコンパクトに：画像を低く、本文の余白・行数を詰める。
   .tp-tile--news にスコープし、page-blog.php 等の既存タイルには影響させない */
.tp-tile--news .tp-tile-media img {
    height: 148px;
}

.tp-tile--news .tp-tile-body {
    padding: 20px 22px;
}

.tp-tile--news .tp-tile-tag {
    margin-bottom: 12px;
}

.tp-tile--news .tp-tile-title {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    margin-bottom: 8px;
}

.tp-tile--news .tp-tile-text {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    margin-bottom: 14px;
}

.tp-tile--static .tp-tile-title,
.tp-tile--static .tp-tile-text {
    display: block;
    overflow: visible;
    -webkit-line-clamp: none;
    line-clamp: none;
}

.tp-tile-meta {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    line-height: 1.5;
    color: var(--c-ink-mute);
    margin: auto 0 0;
}

.tp-tile-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--c-cobalt);
    padding-bottom: 2px;
    background-image: linear-gradient(var(--c-cobalt), var(--c-cobalt));
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0 1px;
    transition: background-size var(--dur-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .tp-tile:hover .tp-tile-more {
        background-size: 100% 1px;
    }
}

/* base.css の汎用 i{} ルール（padding/margin/font-size）を打ち消す */
.tp-tile-more i {
    padding: 0;
    margin-left: 0;
    font-size: 12px;
}

/* お知らせカードだけ、抜粋の有無に関わらず続きを読むを下端に揃える。
   常時表示・下線の伸びるホバーアニメーションなし（静的なテキスト+アイコン）。
   .tp-tile--news にスコープし、page-blog.php 等の既存タイルには影響させない */
.tp-tile--news .tp-tile-more {
    margin-top: auto;
    background-image: none;
}

/* タイル内の箇条書き。行頭はコバルトの小さな四角（角の語彙） */
.tp-tile-list {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

.tp-tile-list li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 8px;
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--c-ink-soft);
}

.tp-tile-list li::before {
    content: "";
    position: absolute;
    top: 0.72em;
    left: 0;
    width: 5px;
    height: 5px;
    background-color: var(--c-cobalt);
}

.tp-tile-list li:last-child {
    margin-bottom: 0;
}

/* Font Awesome のアイコンを添えるタイル。base.css の i {display:flex} を打ち消す */
/* Font Awesome のアイコンを添えるタイル。base.css の i{display:flex} を打ち消す */
.tp-tile-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 18px;
    border: 1px solid var(--c-sky);
    color: var(--c-cobalt);
    flex: none;
}

.tp-tile-glyph i {
    display: block;
    padding: 0;
    margin: 0;
    font-size: 16px;
}

/* ---------- 一覧のページ送り ----------
   paginate_links() の出力（.page-numbers）をタイルと同じ語彙で組む。
   丸ボタンにはせず、mono の数字＋ヘアラインの箱にする */
.tp-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 48px;
}

.tp-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    font-family: var(--f-mono);
    font-size: 13px;
    letter-spacing: 0.08em;
    line-height: 1;
    color: var(--c-ink-soft);
    text-decoration: none;
    background-color: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-sm);
    transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
    .tp-pagination a.page-numbers:hover {
        border-color: var(--c-ink);
        color: var(--c-ink);
    }
}

.tp-pagination .page-numbers.current {
    background-color: var(--c-cobalt);
    border-color: var(--c-cobalt);
    color: #fff;
}

.tp-pagination .page-numbers.dots {
    border-color: transparent;
    background-color: transparent;
    min-width: 0;
    padding: 0 4px;
}

.tp-pagination .page-numbers:focus-visible {
    outline: 2px solid var(--c-cyan);
    outline-offset: 2px;
}

/* 「前へ」「次へ」は和文なので body フォントに戻す */
.tp-pagination .prev,
.tp-pagination .next {
    font-family: var(--f-body);
    font-weight: 700;
}

/* ---------- 変種: コンパクト（アイコン＋名前＋メタ） ---------- */
.tp-tile--compact .tp-tile-body {
    align-items: center;
    text-align: center;
    padding: 24px 18px;
}

.tp-tile-icon {
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    background-color: var(--c-paper-tint);
    flex: none;
}

.tp-tile-icon img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    object-fit: cover;
    filter: none;
}

.tp-tile--compact .tp-tile-title {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 10px;
    background-image: none;
}

.tp-tile--compact .tp-tile-tag {
    margin: 0 0 8px;
}

.tp-tile--compact .tp-tile-meta {
    margin: 0;
}

/* ---------- 変種: ステップ（順序が情報である一覧にだけ使う） ----------
   L ブラケットの代わりに mono の連番を角に置く。
   news やゲーム一覧のように順序が意味を持たない一覧には使わないこと。 */
.tp-tile--step::before,
.tp-tile--step::after {
    content: none;
}

.tp-tile--step {
    border-top-width: 2px;
    border-top-color: var(--c-cobalt);
}

.tp-tile-num {
    font-family: var(--f-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1;
    color: var(--c-cobalt);
    margin-bottom: 14px;
}

/* ---------- スクロールリビール ----------
   .animation → .visible は corporate.js の共通コントラクト。
   --d を要素に付けると開始を遅らせられる（カードの時間差表示など）。

   下層ページ（.tp-page）では、ヒーローの写真とタイトル群は
   page-shell.css が独自のリビールを持っている（写真は scale、タイトルは
   個別のディレイ）。ここで一律に translateY を当てると、position: fixed の
   .background がずれ、タイトルのディレイも上書きされてしまうため除外する。 */
.tp-home .animation,
.tp-page .animation:not(.background):not(.page-eyebrow):not(.page-title):not(.page-title-jp):not(.page-sub-title) {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.9s ease var(--d, 0s), transform 0.9s var(--ease-out) var(--d, 0s);
}

.tp-home .animation.visible,
.tp-page .animation.visible:not(.background):not(.page-eyebrow):not(.page-title):not(.page-title-jp):not(.page-sub-title) {
    opacity: 1;
    transform: none;
}

/* ---------- タブレット ---------- */
/* ---------- タブレット ---------- */
@media screen and (max-width: 1080px) {
    .tp-container {
        padding: 0 var(--gutter-md);
    }

    .tp-tile-grid {
        gap: 20px;
    }

    .tp-tile-grid--4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- スマートフォン ---------- */
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 768px) {
    .tp-container {
        padding: 0 var(--gutter-sm);
    }

    .tp-tile-grid,
    .tp-tile-grid--2 {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .tp-tile-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .tp-tile-body {
        padding: 22px 20px;
    }

    .tp-tile-media img {
        height: 200px;
    }

    .tp-tile-icon {
        width: 46px;
        height: 46px;
        margin-bottom: 12px;
    }

    .tp-tile--compact .tp-tile-title {
        font-size: 14px;
    }

    .tp-section-head {
        margin-bottom: 40px;
    }

    .tp-btn {
        padding: 14px 20px;
        font-size: 14px;
    }

    .tp-btn--large {
        padding: 17px 34px;
        font-size: 15px;
    }
}

/* ---------- reduced motion ---------- */
/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .tp-home .animation,
    .tp-page .animation {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .tp-lead-hl,
    .visible .tp-lead-hl {
        animation: none;
        background-size: 100% 40%;
    }

    .tp-tile,
    .tp-tile::before,
    .tp-tile::after,
    .tp-tile-title,
    .tp-tile-more,
    .tp-tile-media img {
        transition: none;
    }

    .tp-tile:hover .tp-tile-media img {
        transform: none;
    }
}