/* 調整用スタイル */ * { margin: 0; padding: 0; box-sizing: border-box !important; } @font-face { font-family: 'NoteSansL'; /* 好きな名前をつける */ src: url('../font/NotoSansJP-Light.ttf') format('truetype'); /* ファイルへのパス */ font-display: swap; /* 読み込みまで代わりのフォントを出す設定（推奨） */ } a { text-decoration: none; } ul, li { list-style: none; } /*body{ color: #b6dff8; }*/ /* 全体レイアウト */ /* 通常の背景（common.cssに書いてあるもの） */ body { background-color: #1a1a1a; color: #bababa; } body.san-danger { background-color: #1a1a1a; /* 背景も赤黒く */ background-image: url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me1.png'), url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me2.png'), url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me3.png'), url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me4.png'), url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me5.png'), url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me6.png'), url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me7.png'), url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me1.png'), url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me2.png'), url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me3.png'), url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me4.png'), url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me5.png'), url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me6.png'), url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me7.png'); background-repeat: no-repeat; background-attachment: fixed; /* 中央を避け、四隅と外周に寄せる配置 */ background-position: /* 上側の縁 */ 10% -20px, 50% 5px, 90% -10px, /* 下側の縁 */ 15% 105%, 85% 102%, /* 左側の縁 */ -30px 30%, -10px 70%, 5% 50%, /* 右側の縁 */ 105% 25%, 102% 75%, 95% 45%, /* 四隅の強調 */ -20px -20px, 105% -20px, 50% 98%; /* サイズも少し大きめにして「覗き込み感」を出す */ background-size: 200px auto, 150px auto, 180px auto, 220px auto, 190px auto, 160px auto, 170px auto, 140px auto, 180px auto, 210px auto, 130px auto, 250px auto, 230px auto, 120px auto;} /* SAN値 50以下の時の背景 */ body.san-warning { /* 背景色は変えず、画像だけを追加 */ background-image: url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me4.png'), url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me5.png'), url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me6.png'); background-repeat: no-repeat; background-attachment: fixed; /* 端っこの方に配置（中央は空ける） */ background-position: 99% 95%, /* 左上：端から1% / 上から5% */ 99% 5%, /* 右上：端から99% / 上から5% */ 1% 5% ; /* 右下：端から99% / 下から95% */ /* 控えめなサイズ */ background-size: 80px auto, 70px auto, 90px auto; } /* -300以下：前段階 + 新規画像追加 */ body.san-severe { background-color: #1a1a1a; background-image: /* 新規追加：-300以下の画像（重ね順を先に、前面に来る） */ url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me8.png'), /* 上半分真ん中：口（大きく、前面） */ url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me12.png'), /* 左下：指（大きく） */ url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me9.png'), /* 散らす：目1（大きく） */ url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me9.png'), /* 散らす：目2（大きく） */ url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me10.png'), /* 散らす：目3（大きく） */ url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me10.png'), /* 散らす：目4（大きく） */ url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me11.png'), /* 真ん中：人影（小さく） */ /* 既存の -150以下の画像（me1～me7を2セット、背後に） */ url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me1.png'), url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me2.png'), url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me3.png'), url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me4.png'), url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me5.png'), url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me6.png'), url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me7.png'), url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me1.png'), url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me2.png'), url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me3.png'), url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me4.png'), url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me5.png'), url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me6.png'), url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me7.png'); background-repeat: no-repeat; background-attachment: fixed; background-position: /* 新規画像の位置 */ 50% 30%, /* me8: 上半分真ん中：口（前面） */ left bottom, /* me12: 左下：指（画面左下にピッタリ） */ 15% 20%, /* me9: 散らす1（位置変更） */ 80% 80%, /* me9: 散らす2（位置変更） */ 25% 35%, /* me10: 散らす3（位置変更） */ 88% 40%, /* me10: 散らす4（位置変更） */ 50% 50%, /* me11: 真ん中：人影（小さく） */ /* 既存画像の位置（me1～me7 × 2セット） */ 10% -20px, 50% 5px, 90% -10px, 15% 105%, 85% 102%, -30px 30%, -10px 70%, 5% 50%, 105% 25%, 102% 75%, 95% 45%, -20px -20px, 105% -20px, 50% 98%; background-size: /* 新規画像のサイズ */ 400px auto, /* me8: 口（大きく） */ 180px auto, /* me12: 指（大きく） */ 200px auto, /* me9: 目1（大きく） */ 140px auto, /* me9: 目2（大きく） */ 160px auto, /* me10: 目3（大きく） */ 135px auto, /* me10: 目4（大きく） */ 20px auto, /* me11: 人影（小さく） */ /* 既存画像のサイズ */ 200px auto, 150px auto, 180px auto, 220px auto, 190px auto, 160px auto, 170px auto, 140px auto, 180px auto, 210px auto, 130px auto, 250px auto, 230px auto, 120px auto; } /* -500以下：me11（人影）のみ、真ん中に大きく */ body.san-critical { background-color: #0a0a0a; position: relative; } body.san-critical::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('http://aeoluss.sakura.ne.jp/red_am/Junkai/asset/img/haikei/me11.png'); background-repeat: no-repeat; background-attachment: fixed; background-position: center center; background-size: 100px auto; filter: blur(3px); z-index: -1; /* コンテンツの背後に */ pointer-events: none; /* クリック貫通 */ } html, body { height: 100%; } section{ text-align: center; } main { /* text-align: center; */ /* background: linear-gradient(to bottom, #0A0A0F 0%, #1B1F2A 100%); /* ← 以前のグラデーションは削除 */ background: transparent; /* 背景を透明にする */ height: 100%; justify-content: center; align-items: flex-start; } .main { padding-top: 70px; text-align: center; }