/* ==========================================================================
   GTMF 2026 TOP page stylesheet
   ※このファイルは index.html 専用。
     他ページ（tokyo.html / archives.html / 各規約ページ / 2025/）は
     従来どおり styles.css を使用しているため、styles.css は変更していません。
   ========================================================================== */

:root {
    --bg: #05080A;
    --bg-soft: #0A0F11;
    --card: #0C1114;
    --line: rgba(255, 255, 255, .1);
    --line-soft: rgba(255, 255, 255, .08);
    --text: #E8EDEB;
    --text-2: #C9D2CF;
    --text-3: #A9B3B0;
    --text-4: #8C9A96;
    --text-5: #7E8B87;
    --text-6: #6F7C78;
    --green: #00D084;
    --green-light: #6EF0BB;
    --font-en: 'Archivo', sans-serif;
    --font-jp: 'Zen Kaku Gothic New', sans-serif;
    --pad-x: clamp(20px, 4vw, 40px);
    --section-y: clamp(52px, 6vw, 76px);
    --max-w: 1060px;
}

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

html { scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-jp);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a { color: var(--green); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--green-light); }

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

/* コンテンツ幅。全セクションの中身はこれで中央に寄せる */
.container { width: 100%; max-width: var(--max-w); margin-inline: auto; }

/* --------------------------------------------------------------- header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 12px var(--pad-x);
    background: rgba(5, 8, 10, .9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line-soft);
}
.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.site-header .brand { display: flex; align-items: center; }
.site-header .brand img { height: 32px; width: auto; }

.global-nav {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.8vw, 24px);
    font-size: 14px;
    font-weight: 500;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.global-nav a { color: var(--text-2); }
.global-nav a:hover { color: var(--green-light); }

.nav-cta {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--green);
    color: var(--bg) !important;
    font-size: 13px;
    font-weight: 700;
    transition: background .2s ease, transform .2s ease;
}
.nav-cta:hover { background: var(--green-light); transform: translateY(-1px); }

/* ----------------------------------------------------------------- hero */

/* HEROは中身なりの高さにして、会場カード（#venues）をできるだけ上に置く。
   以前は画面高に連動する min-height を入れていたが、画面が高いほど
   ボタンと会場カードの間に不自然な黒い余白が伸びるためやめた。
   今はどの画面高でもHEROの高さと下の余白が一定になる。 */
.hero {
    position: relative;
    padding: clamp(36px, 4vw, 56px) var(--pad-x) clamp(30px, 3.2vw, 44px);
    text-align: center;
    overflow: hidden;
}
/* 写真は使わず、控えめなグリーンのグローだけで奥行きを出す */
.hero::before {
    content: '';
    position: absolute;
    top: -32%;
    left: 50%;
    transform: translateX(-50%);
    width: min(1100px, 130%);
    aspect-ratio: 1 / 1;
    background: radial-gradient(circle, rgba(0, 208, 132, .16) 0%, rgba(0, 208, 132, .05) 42%, rgba(0, 208, 132, 0) 68%);
    pointer-events: none;
}
.hero .container { position: relative; }

.hero-logo { margin-bottom: 30px; }
.hero-logo img { width: clamp(270px, 33vw, 440px); margin-inline: auto; }

.hero h1 {
    margin: 0 0 16px;
    font-size: clamp(32px, 4vw, 54px);
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -.03em;
    text-wrap: balance;
}
.hero h1 .accent { color: var(--green); }

.hero-en {
    margin: 0 0 36px;
    font-family: var(--font-en);
    font-size: clamp(15px, 1.3vw, 18px);
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--text-3);
}

/* 来場登録・After Party の申し込みは会場カード内（.venue-actions）に置いているため、
   HEROに残るのは出展・協賛と公式Xの2本のみ */
.hero-actions-sub {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* --------------------------------------------------------------- buttons */

.btn {
    display: inline-block;
    padding: 16px 28px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.4;
    transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary { background: var(--green); color: var(--bg) !important; }
.btn-primary:hover { background: var(--green-light); }

.btn-ghost { border: 1.5px solid rgba(255, 255, 255, .32); color: #FFFFFF !important; }
.btn-ghost:hover { border-color: var(--green); color: var(--green-light) !important; }

.btn-dark { background: var(--bg); color: #FFFFFF !important; }
.btn-dark:hover { background: #12181B; }

.btn-sm { padding: 14px 24px; font-size: 14px; }

.btn-outline { border: 1px solid rgba(255, 255, 255, .28); color: var(--text) !important; }
.btn-outline:hover { border-color: var(--green); color: var(--green-light) !important; }

/* 有料（懇親会つき）はホワイトで無料枠と差をつける */
.btn-white { background: #FFFFFF; color: var(--bg) !important; }
.btn-white:hover { background: #E9F5F0; }

/* --------------------------------------------------------------- venues */

.venues { padding: 0 var(--pad-x); }

.venue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 18px;
}

.venue-card {
    border-radius: 20px;
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--line);
}

.venue-head {
    padding: 20px 24px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.venue-head.osaka { background: var(--green); color: var(--bg); }
.venue-head.tokyo { background: #FFFFFF; color: var(--bg); }
.venue-head h2 { margin: 0; font-size: 19px; font-weight: 900; }
.venue-date {
    margin: 0;
    font-family: var(--font-en);
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -.02em;
}
.venue-date span { font-size: 15px; font-weight: 700; }

.venue-body { padding: 20px 24px; }
.venue-name { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.6; }
.venue-address { margin: 8px 0 0; font-size: 13px; line-height: 1.7; color: var(--text-4); }

.venue-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.tag-party {
    font-size: 12px;
    font-weight: 700;
    color: var(--bg);
    background: var(--green-light);
    border-radius: 999px;
    padding: 4px 10px;
}
.venue-meta .venue-meta-text { font-size: 13px; color: var(--text-3); }

/* 会場カード内の申し込み導線。フォームが会場別に分かれているためここに置く */
.venue-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.venue-actions .btn { padding: 13px 18px; font-size: 13px; }


.venues-note { margin: 16px 0 0; font-size: 13px; color: var(--text-5); }

/* -------------------------------------------------------------- sections */

.section { padding: var(--section-y) var(--pad-x) 0; }

.eyebrow {
    margin: 0 0 10px;
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--green);
}

.section-title {
    margin: 0 0 24px;
    font-size: clamp(26px, 2.6vw, 34px);
    font-weight: 900;
    letter-spacing: -.02em;
}

.lead {
    margin: 0 0 28px;
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.75;
    font-weight: 700;
    letter-spacing: -.01em;
    text-wrap: pretty;
}
.lead .accent { color: var(--green); }

/* 説明文は2カラムに割らず、1カラムで通す */
.about-body { max-width: 860px; }
.about-body p {
    margin: 0;
    font-size: 15px;
    line-height: 2;
    color: var(--text-3);
    text-wrap: pretty;
}
.about-body p + p { margin-top: 20px; }

/* ------------------------------------------------------- venue photo grid */

.gallery { padding: 36px var(--pad-x) 0; }

/* 元画像の解像度がまちまちなので、すべて同じセルサイズ・小さめに揃える。
   クリックでライトボックス拡大。 */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.gallery-grid button {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--card);
    cursor: zoom-in;
    aspect-ratio: 16 / 9;
    transition: transform .2s ease, box-shadow .2s ease;
}
.gallery-grid button:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0, 0, 0, .5); }
.gallery-grid button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; }

.gallery-note { margin: 12px 0 0; font-size: 12px; color: var(--text-6); }

/* ライトボックス */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(3, 5, 6, .92);
}
.lightbox.is-open { display: flex; }
.lightbox img {
    width: auto;
    height: auto;
    max-width: min(92vw, 760px);
    max-height: 86vh;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
.lightbox-close {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: #FFFFFF;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.lightbox-close:hover { background: rgba(255, 255, 255, .14); }

/* ------------------------------------------------------------- exhibitors
   ロゴの並びは 2025 サイト（https://gtmf.jp/2025/）に準拠：
   白カード＋ロゴ画像のみ・中央寄せの折り返し・ティアごとにカードサイズを変える
   -------------------------------------------------------------------------- */

.tier { margin-bottom: 44px; }

.tier-title {
    margin: 0 0 18px;
    font-family: var(--font-en);
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -.01em;
    text-align: center;
}
.tier-title::after {
    content: '';
    display: block;
    width: 66px;
    height: 3px;
    margin: 11px auto 0;
    border-radius: 999px;
    background: currentColor;
    opacity: .55;
}
.tier-title.pearl { color: #E7E3FF; }
.tier-title.gold { color: #F2D06B; }
.tier-title.silver { color: #D2DAD8; }
.tier-title.committee {
    color: var(--text-4);
    font-family: var(--font-jp);
    font-size: 17px;
}

.tier-title .order-note {
    display: inline-block;
    margin-left: 8px;
    font-family: var(--font-jp);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-5);
    letter-spacing: 0;
}

.logo-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.logo-card {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
    transition: transform .25s ease, box-shadow .25s ease;
}
.logo-card:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(0, 208, 132, .18); }
.logo-card img { width: auto; max-width: 100%; object-fit: contain; }
.logo-card a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

/* Pearl → Gold → Silver の順に枠を段階的に小さくして格の差を出す。
   Gold は 1060px のコンテンツ幅にちょうど3列、Silver は5社が1列に並ぶ寸法。 */
.tier.pearl-tier .logo-card { width: 380px; height: 230px; padding: 46px; }
.tier.gold-tier .logo-card { width: 260px; height: 158px; padding: 30px; }
.tier.silver-tier .logo-card { width: 180px; height: 108px; padding: 20px; }
.tier.committee-tier .logo-card { width: 220px; height: 128px; padding: 24px; }

/* Pearl はさらに影を強めて浮かせる */
.tier.pearl-tier .logo-card { box-shadow: 0 8px 30px rgba(0, 0, 0, .45); }

/* ロゴ画像ごとの表示サイズ調整
   支給ロゴはマークの縦横比がばらばら（横長のワードマーク〜正方形のシンボル）なため、
   「マーク部分の見た目の大きさ」がティア内で揃うよう、カード内寸に対する %
   で max-width / max-height を個別指定している。比率は auto で維持。
   ロゴを差し替えたら、この数値も見直すこと。 */

.tier.pearl-tier .logo-card img[src$="silicon-studio.png"] { max-width: 85.4%; max-height: 50.1%; }
.tier.pearl-tier .logo-card img[src$="k-id.png"] { max-width: 47.4%; max-height: 84.1%; }

.tier.gold-tier .logo-card img[src$="sony.png"] { max-width: 86.0%; max-height: 31.2%; }
.tier.gold-tier .logo-card img[src$="gs2.png"] { max-width: 51.1%; max-height: 81.6%; }
.tier.gold-tier .logo-card img[src$="hitachi-solutions-technology.png"] { max-width: 86.0%; max-height: 29.3%; }
.tier.gold-tier .logo-card img[src$="speech-graphics.png"] { max-width: 86.0%; max-height: 37.7%; }
.tier.gold-tier .logo-card img[src$="meshy.png"] { max-width: 86.0%; max-height: 49.0%; }
.tier.gold-tier .logo-card img[src$="incredibuild-japan.png"] { max-width: 86.0%; max-height: 79.6%; }
.tier.gold-tier .logo-card img[src$="audiokinetic.png"] { max-width: 86.0%; max-height: 28.6%; }
.tier.gold-tier .logo-card img[src$="khronos-group.png"] { max-width: 86.0%; max-height: 30.8%; }
.tier.gold-tier .logo-card img[src$="softbank.png"] { max-width: 86.0%; max-height: 26.5%; }

.tier.silver-tier .logo-card img[src$="geolocation-technology.png"] { max-width: 87.1%; max-height: 53.8%; }
.tier.silver-tier .logo-card img[src$="spark.png"] { max-width: 87.1%; max-height: 49.1%; }
.tier.silver-tier .logo-card img[src$="toshiba.png"] { max-width: 87.1%; max-height: 28.5%; }
.tier.silver-tier .logo-card img[src$="toyo-technica.png"] { max-width: 87.1%; max-height: 27.1%; }

.tier.committee-tier .logo-card img[src$="criware.png"] { max-width: 38.4%; max-height: 82.5%; }
.tier.committee-tier .logo-card img[src$="iid.png"] { max-width: 62.2%; max-height: 82.5%; }

/* 出展・協賛の問い合わせ導線（運営委員会の下） */
.sponsor-cta { text-align: center; padding-top: 8px; }

/* ------------------------------------------------------------------- news */

.news-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.news-head .section-title { margin: 0; }
.news-link { font-size: 14px; font-weight: 700; }

.news-list { display: grid; gap: 12px; }

.news-item {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px 24px;
    border-radius: 16px;
    background: var(--card);
    border: 1px solid rgba(255, 255, 255, .09);
    flex-wrap: wrap;
    color: inherit;
}
a.news-item { transition: border-color .2s ease, transform .2s ease; }
a.news-item:hover { border-color: rgba(0, 208, 132, .5); transform: translateY(-2px); color: inherit; }

.news-date {
    font-family: var(--font-en);
    font-size: 15px;
    font-weight: 700;
    color: var(--green);
    flex: 0 0 auto;
}
.news-item h3 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.6; }
.news-arrow { margin-left: auto; color: var(--green); font-size: 16px; font-weight: 700; flex: 0 0 auto; }

/* ------------------------------------------------------------- past events */

.past { padding: 56px var(--pad-x) 80px; }

.past-inner {
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .12);
    padding: clamp(22px, 2.6vw, 32px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}
.past-inner h3 { margin: 0 0 8px; font-size: 21px; font-weight: 900; }
.past-inner p { margin: 0; font-size: 14px; color: var(--text-4); }
.past-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ----------------------------------------------------------------- footer */

.site-footer { padding: 48px var(--pad-x) 28px; background: var(--bg-soft); }

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 28px;
}
.footer-grid h3 {
    margin: 0 0 8px;
    font-family: var(--font-en);
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.02em;
}
.footer-grid h4 { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--text-5); }
.footer-grid p { margin: 0; font-size: 13px; color: var(--text-5); }
.footer-grid ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 9px;
    font-size: 13px;
}
.footer-grid ul a { color: var(--text-2); }
.footer-grid ul a:hover { color: var(--green-light); }
.footer-contact p { color: var(--text-3); }
.footer-contact p + p { margin-top: 8px; }

.footer-bottom {
    margin-top: 32px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .09);
}
.footer-bottom p { margin: 0; font-size: 12px; color: var(--text-6); }
.footer-bottom a { color: var(--text-6); }

/* ------------------------------------------------------------ scroll-in */

.animate-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
}
.animate-in.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .animate-in { opacity: 1; transform: none; transition: none; }
    .btn:hover, .nav-cta:hover, .logo-card:hover,
    .gallery-grid button:hover, a.news-item:hover { transform: none; }
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 860px) {
    .venue-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    /* モバイルでは3段になって画面を占有するため sticky を解除 */
    .site-header { position: static; }
    .site-header .container { flex-direction: column; align-items: flex-start; gap: 12px; }
    .site-header .brand img { height: 26px; }
    .global-nav { justify-content: flex-start; gap: 14px; font-size: 13px; }
    /* HEROに同じボタンがあるため、ヘッダーが3段になるモバイルでは省く */
    .nav-cta { display: none; }
    /* モバイルは min-height が効かず中身の自然高になるため、
       会場カードとの間隔は padding-bottom がそのまま効く */
    .hero { padding-top: 32px; padding-bottom: 40px; }
    .hero-logo { margin-bottom: 22px; }
    .hero-logo img { width: 250px; }
    .hero h1 { font-size: 28px; }
    .hero-en { margin-bottom: 28px; }
    .hero-actions-sub { flex-direction: column; gap: 10px; }
    .hero-actions-sub .btn { width: 100%; }
    .venue-actions { flex-direction: column; }
    .venue-actions .btn { width: 100%; text-align: center; }
    .btn { padding: 15px 22px; font-size: 14px; }
    .logo-row { gap: 12px; }
    /* モバイルは2列固定なので、格の差は高さと余白で出す */
    .tier.pearl-tier .logo-card { width: 100%; max-width: 320px; height: 182px; padding: 32px; }
    .tier.gold-tier .logo-card { width: calc(50% - 6px); height: 118px; padding: 18px; }
    .tier.silver-tier .logo-card { width: calc(50% - 6px); height: 92px; padding: 14px; }
    .tier.committee-tier .logo-card { width: calc(50% - 6px); height: 108px; padding: 18px; }
    .news-item { gap: 8px 16px; padding: 18px 20px; }
    .news-arrow { margin-left: 0; }
    .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}