/* ========================================================================= ニャンズゲームス ポータル 共通スタイル ブランド: make_x_profile.py 準拠 背景 #05060c / シアン #3df0ff / パープル #b46bff / インク #eef1f8 / サブ #96a0b9 見出し: Dela Gothic One（Google Fonts）／ 本文: Noto Sans JP / システムフォント 方針: 超軽量・高速・モバイルファースト。装飾より速度。 ========================================================================= */ :root { --bg: #05060c; --bg-soft: #0b0e1a; /* パネル背景（少し明るいダーク） */ --cyan: #3df0ff; --purple: #b46bff; --ink: #eef1f8; /* 本文の主色 */ --sub: #96a0b9; /* 補助文字 */ --line: rgba(255, 255, 255, .12); --panel: rgba(14, 18, 32, .72); --radius: 18px; --maxw: 720px; /* PC幅でも中央寄せ・読みやすい最大幅 */ --font-head: "Dela Gothic One", system-ui, sans-serif; --font-body: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Segoe UI", sans-serif; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.8; letter-spacing: .01em; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* 静的な放射グラデを土台に敷く（canvasが無い/切れても世界観が残る） */ background-image: radial-gradient(120% 80% at 82% -10%, rgba(61, 240, 255, .10), transparent 55%), radial-gradient(90% 70% at 10% 8%, rgba(180, 107, 255, .08), transparent 60%); background-attachment: fixed; } /* 3D粒子背景の canvas（トップのみ設置）。viz.js が id="vizcv" を掴む。 最背面・全画面固定・タップ透過。3D起動前は body の静的グラデが透ける。 */ #vizcv { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; display: block; /* 粒子を減光して本文を読みやすく（背景として控えめに）。 opacity で暗い下地へ溶かし、brightness で発光を抑える。 */ opacity: 0.5; filter: brightness(0.7); } /* 3Dが使えない／reduced-motion／読み込み失敗の時は canvas を隠し、 body の静的グラデ背景を見せる。.no-viz は JS が に付ける。 */ html.no-viz #vizcv { display: none; } /* 文節折り返し（budouxのを活かす土台）。見出しに付与 */ .wrap-phrase { word-break: keep-all; overflow-wrap: anywhere; } /* リンク */ a { color: var(--cyan); text-underline-offset: .2em; } a:hover { color: #7ff6ff; } /* ---- レイアウト土台 ---- */ .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } main { display: block; } section { padding: 40px 0; } /* ---- ヘッダー（全ページ共通の小さなブランド帯） ---- */ .site-header { padding: 16px 0; border-bottom: 1px solid var(--line); background: rgba(5, 6, 12, .55); backdrop-filter: blur(6px); position: sticky; top: 0; z-index: 20; } .site-header .container { display: flex; align-items: center; gap: 10px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 17px; color: var(--ink); text-decoration: none; letter-spacing: .02em; } .brand:hover { color: var(--ink); } /* ブランドの象徴＝粒子リングを小さなマークで表現（CSSのみ・軽量） */ .brand-mark { width: 22px; height: 22px; border-radius: 50%; flex: none; background: radial-gradient(circle at 50% 50%, var(--ink) 0 2px, transparent 3px), conic-gradient(from 0deg, var(--cyan), var(--purple), var(--cyan)); box-shadow: 0 0 10px rgba(61, 240, 255, .5); -webkit-mask: radial-gradient(circle at 50% 50%, transparent 4px, #000 5px); mask: radial-gradient(circle at 50% 50%, transparent 4px, #000 5px); } /* リング穴の中央にコアを別要素で置くのは重いので、上のマスクで表現 */ /* ---- 見出し ---- */ h1 { font-family: var(--font-head); font-weight: 400; /* Dela Gothic One は単一ウェイト */ font-size: clamp(26px, 7.2vw, 40px); line-height: 1.35; margin: 0 0 14px; color: var(--ink); text-wrap: pretty; line-break: strict; } /* 区切り記号「｜」を前の語にくっつけ、行頭に落とさない（禁則の代わり） */ .nb { white-space: nowrap; } h2 { font-family: var(--font-head); font-weight: 400; font-size: clamp(20px, 5.4vw, 26px); line-height: 1.4; margin: 0 0 18px; color: var(--cyan); text-shadow: 0 0 18px rgba(61, 240, 255, .35); } h3 { font-family: var(--font-body); font-weight: 800; font-size: clamp(16px, 4.4vw, 18px); line-height: 1.5; margin: 0 0 8px; color: var(--ink); } p { margin: 0 0 14px; color: var(--ink); } .lead { font-size: clamp(15px, 4vw, 17px); color: var(--ink); opacity: .95; } /* ---- ヒーロー ---- */ .hero { padding: 48px 0 32px; text-align: center; } .hero h1 { margin-bottom: 12px; } .hero .lead { color: var(--sub); max-width: 34em; margin: 0 auto 8px; } /* ヒーロー背景の放射光（トップだけ強め） */ .hero-glow { position: relative; } /* ---- CTAボタン（全ページ統一文言「今すぐ遊ぶ（無料・登録不要）」） ---- */ .cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: 800; font-size: 17px; line-height: 1.3; text-decoration: none; text-align: center; padding: 15px 26px; border-radius: 14px; color: #04121a; /* 濃い文字でコントラスト確保 */ background: linear-gradient(135deg, var(--cyan), #6ad9ff); border: none; cursor: pointer; box-shadow: 0 6px 22px rgba(61, 240, 255, .35), 0 2px 0 rgba(0, 0, 0, .2); transition: transform .06s ease, box-shadow .2s ease, filter .2s ease; } .cta:hover { color: #04121a; filter: brightness(1.06); } .cta:active { transform: translateY(2px); } .cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } .cta .arrow { font-size: 15px; } /* 副次ボタン（詳しく見る・戻る等） */ .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-body); font-weight: 700; font-size: 15px; text-decoration: none; padding: 13px 22px; border-radius: 14px; color: var(--ink); background: transparent; border: 1.5px solid var(--line); cursor: pointer; transition: background .2s ease, border-color .2s ease; } .btn-secondary:hover { background: rgba(255, 255, 255, .05); color: var(--ink); border-color: rgba(255,255,255,.25); } .btn-secondary:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; } /* ボタンを縦積み（スマホ）→横並び（広い幅）にする行 */ .btn-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; } .btn-row.left { justify-content: flex-start; } /* ---- ゲームカード（トップ） ---- */ .cards { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 640px) { .cards { grid-template-columns: 1fr 1fr; } } .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .card:hover { transform: translateY(-3px); border-color: rgba(61, 240, 255, .4); box-shadow: 0 14px 40px rgba(0, 0, 0, .45); } .card-media { position: relative; aspect-ratio: 1200 / 630; background: #0a0d18; overflow: hidden; } .card-media img, .card-media video { width: 100%; height: 100%; object-fit: cover; display: block; } .card-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .card-body h3 { font-family: var(--font-head); font-weight: 400; font-size: 18px; line-height: 1.45; color: var(--cyan); margin: 0; } .card-body p { color: var(--sub); font-size: 14.5px; margin: 0; flex: 1; } .card-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .card-actions .cta { width: 100%; } .card-actions .btn-secondary { width: 100%; } /* ---- 特徴リスト（3つの特徴 / 各ゲームの特徴） ---- */ .feature-list { display: grid; grid-template-columns: 1fr; gap: 16px; list-style: none; padding: 0; margin: 0; } .feature-list li { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 16px; } .feature-list li h3 { color: var(--ink); } .feature-list li p { color: var(--sub); font-size: 14.5px; margin: 0; } /* ---- 収録ゲーム（トップの詳しめ2ブロック） ---- */ .game-blocks { display: grid; grid-template-columns: 1fr; gap: 22px; } .game-block { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; } .game-block h3 { font-family: var(--font-head); font-weight: 400; font-size: 17px; color: var(--cyan); line-height: 1.5; margin-bottom: 10px; } .game-block p { color: var(--ink); opacity: .95; font-size: 15px; } /* ---- 特設サイト（世界観）への導線バナー ---- */ .world-banner { display: grid; grid-template-columns: 1fr; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); text-decoration: none; color: var(--ink); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .world-banner:hover { transform: translateY(-3px); border-color: rgba(61, 240, 255, .5); box-shadow: 0 12px 44px rgba(61, 240, 255, .18); } .world-banner:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; } .world-banner__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; } .world-banner__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .world-banner__body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; justify-content: center; } .world-banner__tag { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: #04121a; background: linear-gradient(135deg, var(--cyan), #6ad9ff); padding: 4px 12px; border-radius: 999px; } .world-banner__body h2 { font-family: var(--font-head); font-weight: 400; font-size: clamp(19px, 5vw, 26px); line-height: 1.4; margin: 0; color: var(--ink); } .world-banner__body p { color: var(--sub); font-size: 14.5px; margin: 0; } .world-banner__cta { margin-top: 4px; color: var(--cyan); font-weight: 700; font-size: 15px; } .world-banner:hover .world-banner__cta { text-decoration: underline; } @media (min-width: 640px) { .world-banner { grid-template-columns: 1.05fr 1fr; align-items: stretch; } .world-banner__media { aspect-ratio: auto; } } /* ---- 遊び方ステップ ---- */ .steps { counter-reset: step; display: grid; gap: 14px; padding: 0; margin: 0; list-style: none; } .step { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; } .step h3 { color: var(--ink); } .step p { color: var(--sub); font-size: 14.5px; margin: 0; } /* ---- プレビュー動画（紹介ページ上部） ---- */ .preview { position: relative; margin: 0 auto 8px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #0a0d18; max-width: 340px; /* 縦動画なので幅を抑える */ } .preview.wide { max-width: 520px; aspect-ratio: 720 / 630; } .preview video { width: 100%; height: 100%; display: block; object-fit: cover; } /* プレビューに動画でなく画像（横長OG画像）を置く場合。枠に全体を収める。 */ .preview.shot { max-width: 560px; } .preview.shot img { width: 100%; height: auto; display: block; } /* 再生ボタン（自動再生させない） */ .play-btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(5, 6, 12, .35); border: none; color: var(--ink); font-family: var(--font-body); font-weight: 800; font-size: 15px; cursor: pointer; transition: background .2s ease; } .play-btn:hover { background: rgba(5, 6, 12, .2); } .play-btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: -4px; } .play-btn .icon { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--cyan), #6ad9ff); color: #04121a; font-size: 22px; box-shadow: 0 0 24px rgba(61, 240, 255, .5); } .play-btn.hidden { display: none; } /* ---- FAQ（詳細折りたたみ） ---- */ .faq { display: grid; gap: 12px; } .faq details { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 18px; } .faq summary { font-weight: 800; font-size: 16px; color: var(--ink); cursor: pointer; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "＋"; color: var(--cyan); font-weight: 700; font-size: 18px; flex: none; transition: transform .2s ease; } .faq details[open] summary::after { content: "－"; } .faq summary:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 8px; } .faq details p { color: var(--sub); font-size: 14.5px; margin: 0 0 14px; line-height: 1.85; } /* ---- 関連リンク（紹介ページ末尾） ---- */ .related { border-top: 1px solid var(--line); padding-top: 28px; text-align: center; } .related h2 { font-size: clamp(18px, 5vw, 22px); } /* ---- フッター ---- */ .site-footer { border-top: 1px solid var(--line); padding: 28px 0 40px; color: var(--sub); font-size: 13px; text-align: center; line-height: 1.9; } .site-footer a { color: var(--sub); } .site-footer a:hover { color: var(--ink); } .site-footer .footer-nav { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin-bottom: 14px; } .site-footer .credit { opacity: .7; font-size: 12px; margin-top: 10px; } /* セクション見出しの上マージン微調整 */ .section-head { margin-bottom: 4px; } /* スクリーンリーダー専用（視覚的に隠すが読み上げる） */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================= ガイド用コンポーネント（スクショ・端末フレーム・数字付きコツ・目次） 実プレイ画面を「スマホ／PCで実際に見える画面比」で見せるための土台。 ========================================================================= */ /* ---- 目次（ページ内ジャンプ・SEOのスキャン性） ---- */ .toc { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; margin: 0 0 4px; } .toc h2 { font-family: var(--font-body); font-weight: 800; font-size: 15px; color: var(--ink); text-shadow: none; margin: 0 0 8px; } .toc ol { margin: 0; padding-left: 1.3em; color: var(--sub); font-size: 14.5px; } .toc li { margin: 5px 0; } .toc a { color: var(--cyan); } /* ---- 図＋キャプション共通 ---- */ figure.shot { margin: 0; } figure.shot figcaption { margin-top: 10px; text-align: center; font-size: 13.5px; color: var(--sub); line-height: 1.7; } figure.shot figcaption b { color: var(--cyan); font-weight: 700; } /* 単体ショット（セクション内・中央寄せ） */ .shot-inline { margin: 20px auto 4px; } .shot-inline.wide { max-width: 560px; } /* ---- スマホ枠（縦長・実機の画面比 9:19.5 相当） ---- */ .device.phone { width: 100%; max-width: 250px; margin-inline: auto; padding: 9px; background: linear-gradient(160deg, #1a1f33, #0b0e1a); border: 1px solid var(--line); border-radius: 30px; box-shadow: 0 12px 34px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .04); } /* 受話口/カメラの小さな印 */ .device.phone::before { content: ""; display: block; width: 42px; height: 5px; margin: 1px auto 7px; border-radius: 5px; background: rgba(255, 255, 255, .16); } .device.phone .screen { border-radius: 22px; overflow: hidden; background: #05060c; aspect-ratio: 9 / 19.5; } .device.phone .screen img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---- ブラウザ枠（横長・PCで実際に見える画面） ---- */ .device.browser { width: 100%; margin-inline: auto; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #0c0f1c; box-shadow: 0 12px 34px rgba(0, 0, 0, .45); } .device.browser .bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: rgba(255, 255, 255, .03); border-bottom: 1px solid var(--line); } .device.browser .dots { display: flex; gap: 6px; flex: none; } .device.browser .dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .2); } .device.browser .url { flex: 1; min-width: 0; text-align: center; font-size: 12px; color: var(--sub); background: rgba(255, 255, 255, .05); border-radius: 7px; padding: 3px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .device.browser .screen img { width: 100%; height: auto; display: block; background: #05060c; } /* ---- スクショのギャラリー（スマホ枠を並べる） ---- */ .shot-gallery { display: grid; gap: 22px 16px; grid-template-columns: 1fr; margin: 8px 0 4px; justify-items: center; } @media (min-width: 520px) { .shot-gallery.cols-2 { grid-template-columns: repeat(2, 1fr); } .shot-gallery.cols-3 { grid-template-columns: repeat(3, 1fr); } } .shot-gallery .device.phone { max-width: 230px; } /* ---- スマホでもPCでも（スマホ枠＋ブラウザ枠の対比） ---- */ .cross-device { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: center; margin-top: 6px; } @media (min-width: 640px) { .cross-device { grid-template-columns: 230px 1fr; } } /* ---- 数字付きの「上達のコツ」（reference の guide 風） ---- */ .tips { counter-reset: tip; display: grid; gap: 14px; padding: 0; margin: 0; list-style: none; } .tips > li { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px 16px 62px; } .tips > li::before { counter-increment: tip; content: counter(tip); position: absolute; left: 16px; top: 16px; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 16px; color: #04121a; background: linear-gradient(135deg, var(--cyan), #6ad9ff); box-shadow: 0 0 14px rgba(61, 240, 255, .4); } .tips > li h3 { color: var(--ink); margin: 0 0 6px; } .tips > li p { color: var(--sub); font-size: 14.5px; margin: 0; } /* ---- 初心者向けワンポイント ---- */ .hint { margin: 10px 0 0; padding: 12px 14px; background: rgba(180, 107, 255, .08); border-left: 3px solid var(--purple); border-radius: 8px; font-size: 14px; color: var(--ink); line-height: 1.75; } .hint b { color: var(--purple); } /* ---- 動きを減らす設定の人には静止背景 ---- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } #vizcv { display: none; } /* 3D粒子を止め、CSSの静止グラデのみに */ * { transition: none !important; animation: none !important; } } /* ---- 印刷 ---- */ @media print { #vizcv { display: none; } body { background: #fff; color: #000; } }