/* 株式会社MizeLy — mizely.jp 先行公開用スタイル。
   色は本体サイト（mizely-hp/src/styles/globals.css）の @theme と同じ値を使う。 */
@import url('fonts.css');

:root {
    --bg: #0a0a0a;
    --fg: #ffffff;
    --fg-dim: #c4c7c8;
    --fg-faint: #6a6d6e;
    --line: #242525;
    --accent: #ff5ba8;
    --display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    /* 和文は本体サイトと同じくシステムフォントに任せる（欧文サブセットのみ自己ホスト） */
    --jp: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Noto Sans JP', sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg-dim);
    font-family: var(--body), var(--jp);
    font-size: 16px;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.wrap {
    max-width: 44rem;
    margin: 0 auto;
    padding: 6rem 1.5rem 4rem;
}

/* ロックアップ＝正式シンボル ＋ MizeLy ＋ ™。
   --h がロックアップの高さで、他は全部そこからの比率で決まる。
   ™ の比率は正式ロックアップの実測（高さ＝字高×0.20 ／ 間隔＝字高×0.235）。
   位置は landing 側で fixed にしている。 */
.brandmark {
    --h: 25px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--h) * 0.30);
}
.brandmark .mark { display: block; height: var(--h); width: auto; }
.brandmark .wordmark {
    font-family: var(--display), var(--jp);
    font-weight: 700;
    font-size: calc(var(--h) * 0.78);
    letter-spacing: -0.018em;
    line-height: 1;
    color: var(--fg);
    white-space: nowrap;
}
/* ™ は素の 3.6 倍。記号ではなくロゴの一部として読ませる。
   上端をワードマークのキャップハイトに揃えてあるので、大きくしても
   ロックアップの高さは M の天を超えない（＝左上の余白計算が崩れない）。
     ずらす量 = -(0.569 - 0.562 × font-size[em])
       0.569 = 0.78(ワードマーク) × 0.73(PJS のキャップ比)
       0.562 = 0.78 × 0.72(™ グリフが自分の em に占める高さ)
   --h に対する比率で持つので、ロックアップを拡大しても比率が保たれる。 */
.brandmark .wordmark sup {
    font-size: 0.72em;
    margin-left: 0.05em;
    line-height: 1;
    vertical-align: baseline;
    position: relative;
    top: calc(var(--h) * -0.1644);
}

/* 欧文専用。商号「株式会社MizeLy」には使わない（MIZELY になってしまう）。 */
.eyebrow {
    margin: 0;
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--fg-faint);
}

/* 商号を出す行。L は大文字。text-transform は絶対にかけない（MIZELY になる）。 */
.brandline {
    margin: 0;
    font-family: var(--display), var(--jp);
    font-size: 0.86rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--fg-dim);
}

h1 {
    margin: 0;
    font-family: var(--display), var(--jp);
    font-weight: 800;
    color: var(--fg);
    letter-spacing: -0.03em;
    line-height: 1.05;
}

hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 3rem 0;
}

.meta {
    font-size: 0.78rem;
    line-height: 2;
    color: var(--fg-faint);
}

/* 折り返した2行目が dt の下に回り込まないよう、行ごとに flex にする。 */
.meta div { display: flex; gap: 0.75rem; }

.meta dt { flex: 0 0 4.25rem; color: var(--fg-faint); }

/* 所在地。番地までと建物名を別行にする。1行で流すと狭い画面で
   建物名の途中で折り返し、「1st 2階」だけが孤立する。 */
.meta .addr { display: block; }

.meta dd { flex: 1 1 auto; margin: 0; color: var(--fg-dim); }

.meta div + div { margin-top: 0.15rem; }

/* 320px 級では dt が 4.25rem を占めるせいで dd の幅が足りず、
   建物名が折り返して「1st 2階」だけが孤立する（実測 320px で再現）。
   この幅だけ見出しを上に積んで、dd に横幅を全部渡す。 */
@media (max-width: 359px) {
    .meta div { display: block; }
    .meta dt { margin-bottom: 0.1rem; }
    .meta div + div { margin-top: 0.7rem; }
}

.colophon {
    margin-top: 4rem;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--fg-faint);
}

/* ── COMING SOON ───────────────────────────────────────── */
/* 白背景はこのページだけ。--bg などのトークンは /public-notice と 404 が
   共有しているので :root は触らず、landing の中でだけ上書きする。 */
.landing-body {
    --bg-deep: #ffffff;
    --fg: #0e0e10;
    --fg-dim: #45484b;
    --fg-faint: #9a9ea1;
    --line: #e6e7e8;
    overflow-x: hidden;
    background: var(--bg-deep);
    color: var(--fg-dim);
}

/* 唯一トークン化されていない色。白地では沈むので landing だけ上げる。 */
.landing-body .until { color: #b8bcbe; }

/* 中黒は CSS 側に持たせる。モバイルで2行に分ける時に消したいので、
   JS が書く文字列には入れない。 */
.until::before { content: '\00b7\00a0'; }

/* モバイルは日付とカウントを意図的な2行にする。
   放っておくと中黒が行末に取り残されて折り返し事故に見えるため。 */
@media (max-width: 639px) {
    .until { display: block; margin-left: 0; margin-top: 0.4em; }
    .until::before { content: none; }
}

/* 正式ロックアップ。左上に固定する。 */
/* 左上に固定。 */
.landing-body .brandmark { position: fixed; top: 1.9rem; left: 2.2rem; z-index: 4; }

/* 糸。虫より後ろに置くことで、留め点までの区間が頭の後ろへ自然に隠れる。 */
.thread-layer {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* 吊られたてんとう虫。位置と回転は JS が transform だけで動かす。
   本文より前に置く（後ろだと本文が当たり判定を奪って掴めなくなる）。 */
.bug-wrap {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    cursor: grab;
    touch-action: none;
    will-change: transform;
    -webkit-tap-highlight-color: transparent;
}
.bug-wrap.is-held { cursor: grabbing; }
.bug-wrap svg { display: block; overflow: visible; }

/* 登場。transform は JS が握っているので opacity だけを動かす。 */
.thread-layer, .bug-wrap { animation: fade-in 0.9s ease 0.15s both; }
@keyframes fade-in { from { opacity: 0; } }

.landing {
    position: relative;
    z-index: 2;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    /* 糸のぶんの最低限だけ確保する。位置決めは .center の margin に任せる。 */
    padding-top: clamp(48px, 8vh, 96px);
    /* 下寄せなので、ここを増やしたぶんだけ構図全体が上へ動く。
       .wrap の 4rem を landing だけ上書きする（公告・404 はそのまま）。
       2.8rem が元の下余白、後ろの項が構図全体の持ち上げ分。
       px で足しているのは、見出しと同じくブラウザの文字サイズ設定に
       左右されず、どの環境でも同じ量だけ動かすため。

       持ち上げ量は画面の高さに応じて縮める。320x568 では中身が入りきらず、
       72px 固定のままだと 41px はみ出してスクロールが出る。糸と虫は
       position:fixed なので、スクロールすると虫だけ取り残されて
       見出しから離れてしまう。620px を切ったところから 0 へ落とす。
       620px 以上ある画面（360x740 以上・PC）では 72px のまま変わらない。 */
    padding-bottom: calc(2.8rem + min(72px, max(0px, 100svh - 620px)));
}

.landing .center {
    /* 上だけ auto ＝ 入るところまで下げる。余白を px や vh で決めると画面の高さが
       変わった時に必ず破綻する（29vh が 936px 画面で 271px になり、収まる上限
       253px を超えて実際にはみ出した）。余りは全部上へ寄せ、下端を基準にする。
       フォームが開いて本文が伸びた時も、上の余白が自動で縮んで吸収する。
       虫の吊り位置は bug.js が本文の上端から毎フレーム測るので追随する。 */
    margin: auto 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.6rem;
}

/* 行ごとの立ち上がり。基準の見た目が「表示された状態」で、
   アニメーションはそこへ向かう。動きを止めた環境でも中身は必ず見える。 */
.line { display: block; overflow: hidden; padding-bottom: 0.06em; }

.rise { animation: rise 0.95s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s) both; }

@keyframes rise { from { transform: translateY(115%); opacity: 0; } }

.headline {
    margin: 0;
    font-family: var(--display), var(--jp);
    font-weight: 800;
    color: var(--fg);
    /* ここだけ rem を使わない。rem はブラウザの既定フォントサイズに乗るため、
       文字サイズを「大」(20px) にしている人には 5.4rem = 108px、既定(16px)の人には
       86px と、同じ CSS で 2 割違う見出しになってしまう。
       この構図は寸法で決めているので、誰が見ても同じ 86px に固定する。 */
    font-size: clamp(38px, 8.6vw, 86px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    text-transform: uppercase;
}

/* 色を差すのはこの1点だけ。ロゴの球体と同じ役目。 */
.headline em { font-style: normal; color: var(--accent); margin-left: -0.06em; }

.founding {
    margin: 0.3rem 0 0;
    font-family: var(--body);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-faint);
}

/* 残り日数。本文より一段落として、日付のほうを主にする。 */
/* カウントダウン。1秒ごとに数字が変わるので等幅数字にして幅を固定する。 */
.until {
    margin-left: 0.6rem;
    color: #4e5152;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}



.landing footer {
    position: relative;
    z-index: 2;
    padding-top: 1.8rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: baseline;
    justify-content: center;
    font-family: var(--body);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    color: var(--fg-faint);
}

/* 大文字化はリンクだけ。商号にかけると MIZELY INC. になる。 */
.landing footer a {
    color: var(--fg-dim);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.63rem;
    text-decoration: none;
    transition: color 0.3s ease;
}
.landing footer a:hover { color: var(--fg); }

/* ── 問い合わせフォーム ─────────────────────────────────── */
/* 普段は1行のピル。開くとカードになる。高さは grid-template-rows で伸ばす。
   filter / box-shadow はアニメーションさせない（毎フレーム再合成でちらつく）。 */
.contact { width: 26.8rem; max-width: calc(100vw - 3rem); text-align: left; }

.contact form {
    /* DOM 順は Email → Message → Send（タブ順のため）。
       見た目だけ grid で Send を1行目の右へ戻す。 */
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 0.5rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    padding: 0.3rem 0.3rem 0.3rem 0.9rem;
    transition: border-radius 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                padding 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.2s ease;
}
.contact:hover form { border-color: #d5d7d8; }
.contact.open form { border-radius: 16px; padding: 0.7rem 0.7rem 0.6rem; border-color: #d5d7d8; }

.contact .row { grid-column: 1; grid-row: 1; }
.contact .more { grid-column: 1 / -1; grid-row: 2; }
.contact .send { grid-column: 2; grid-row: 1; }

.contact input[name=email],
.contact textarea {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--fg);
    font-family: var(--body), var(--jp);
    font-size: 0.875rem;
    padding: 0.4rem 0;
    resize: none;
}
.contact input::placeholder, .contact textarea::placeholder { color: var(--fg-faint); }
.contact input[name=email]:focus-visible, .contact textarea:focus-visible { outline: 0; }

.contact .send {
    flex: 0 0 auto;
    width: 1.7rem;
    height: 1.7rem;
    border: 0;
    border-radius: 50%;
    background: var(--fg);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.18s ease;
}
.contact .send:hover { background: var(--accent); }
.contact .send:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.contact .send:disabled { opacity: 0.45; cursor: default; }

.contact .more {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.contact.open .more { grid-template-rows: 1fr; }
.contact .more-inner { overflow: hidden; }

.contact textarea { border-top: 1px solid var(--line); margin-top: 0.3rem; padding-top: 0.6rem; }

.contact .note {
    margin: 0.5rem 0 0;
    min-height: 1em;
    font-family: var(--body);
    font-size: 0.7rem;
    color: var(--fg-faint);
}
.contact[data-state=sent] .note { color: #2e7d5b; }
.contact[data-state=error] .note { color: #c0392b; }

/* ハニーポット。画面にも読み上げにも出さない。 */
.contact .trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* 動きを止めた環境では開閉させず、最初から開いた状態で見せる。 */
@media (prefers-reduced-motion: reduce) {
    .contact .more { grid-template-rows: 1fr; }
}

/* タッチ環境だけ、当たり判定を 44px 以上にする（Apple / Google の推奨値）。
   見た目の寸法と配置は変えない。擬似要素を広げているだけ。
   pointer:coarse なので PC のマウス操作には一切影響しない。 */
@media (pointer: coarse) {
    .contact .send { position: relative; }
    .contact .send::after {
        content: '';
        position: absolute;
        inset: -6px;            /* 34px + 12px = 46px */
    }
    .contact input[name=email],
    .contact textarea { padding-top: 0.65rem; padding-bottom: 0.65rem; }
    .landing footer a { display: inline-block; padding: 0.62rem 0; }
    .landing footer { padding-top: 1.1rem; }   /* 上のパディングぶんを相殺する */
}

/* 320px 級（iPhone SE 第1世代など）だけの扱い。
   1画面に全部収めることを諦め、構図の維持を優先する。
   本文を下げて「糸 → 虫 → 余白 → 見出し」を 360px 版と同じ関係で確保し、
   フッターが画面外に出ることは許容する。

   スクロールが発生するので、固定していた3つを content と一緒に動かす。
   fixed のままだと、スクロール中にロゴと見出し、虫と見出しが衝突する。
   bug.js は本文の位置を document 座標（getBoundingClientRect + scrollY）で
   測っているので、absolute にすると座標系が一致する。 */
@media (max-width: 359px) {
    .landing { padding-top: 210px; }
    .landing-body .brandmark,
    .thread-layer,
    .bug-wrap { position: absolute; }
}

/* ── 公告 ──────────────────────────────────────────────── */
.back {
    display: inline-block;
    margin-bottom: 3.5rem;
    font-family: var(--jp);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: var(--fg-faint);
    text-decoration: none;
    transition: color 0.3s ease;
}

.back:hover { color: var(--fg); }

.notice h1 { font-size: clamp(2rem, 7vw, 3.2rem); margin-bottom: 0.6rem; }

.notice .company {
    font-family: var(--jp);
    font-size: 1rem;
    color: var(--fg);
    margin: 0 0 0.25rem;
}

/* 公告が0件のときの表示 */
.empty {
    font-family: var(--jp);
    font-size: 1rem;
    color: var(--fg-dim);
    margin: 0;
}

/* 公告が1件以上あるときのリスト */
.notices { list-style: none; margin: 0; padding: 0; }

/* リストの外枠は前後の <hr> が担当する。ここは項目の間だけ罫線を引く。 */
.notices li + li { border-top: 1px solid var(--line); }

.notices a {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 1.25rem;
    padding: 1.4rem 0;
    text-decoration: none;
    font-family: var(--jp);
    transition: color 0.3s ease;
}

.notices a:hover { color: var(--fg); }
.notices time { flex: 0 0 7.5rem; font-family: var(--body); font-size: 0.78rem; color: var(--fg-faint); }
.notices .title { flex: 1 1 14rem; color: var(--fg); font-size: 0.95rem; }
.notices .file { font-family: var(--body); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}