html{
width: 720px;
user-select: none;
height: 750px;
overflow: hidden;
}
body{
font-family: "Noto Sans JP", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
background-color: #040204;
touch-action: manipulation;
}
#g_console{
padding-top: 1em;
left: 100px;
width: 470px;
height: 700px;
overflow: hidden;
position: relative;
transform-origin: center bottom;
transition: transform 3s cubic-bezier(0.6, -0.28, 0.74, 0.05);
background-color: #040204;
transform: rotateX(0deg);
opacity: 100;
filter: brightness(0);
cursor: none;
}
.right-align {
text-align: right; /* 右寄せ */
}
#customCursor {
position: absolute;
left: -900px;
top: -900px;
width: 141px; /* ここで画像のサイズを大きく指定 */
height: 162px;
pointer-events: none; /* 画像が他の要素に干渉しないようにする */
z-index: 1000; /* 他の要素の上に表示 */
background: url('obj/cursol1.png') no-repeat center center;
background-size: contain;
opacity: 90%;
}
.hanaseru{
transition: box-shadow 0.3s ease !important;
background-color: rgb(255 173 148) !important;
}
.hanaseru:hover {
box-shadow: 0 0 10px rgba(52, 152, 219, 0.6), 0 0 20px rgba(52, 152, 219, 0.4);
}
#container{
width: 450px;
height: 298px;
font-size: small;
overflow: hidden;
position: relative;
}
#container_oou{
width: 450px;
height: 298px;
font-size: small;
overflow: hidden;
position: relative;
border-style: double;
border-color: antiquewhite;
}
table{
line-height: 1.2em;
border-collapse: collapse;
border: solid thick #666;
font-size: 1.15em;
}
td,th {
border: solid thin #333;
}
#haikei{
width: 640px;
position: absolute;
}
ul{
padding-inline-start: 1em;
}
#haikeiimg, #ikdmr_t, #me, #exm ,#pctuizui, #pal_f, #pal_b,
#noiz, #tatami, #dareka, #veruca_tuizui, #iori, #veruca, #abni, #noiz2,
#himeri, #alca, #alca_hukidashi, #armnr_hukidashi, #yjrs, #noiz3,
#omef, #okm, #endhaikei, #endchar, #endhkds1, #endhkds2, #endhkds3,
#endhkds4, #endhkds5, #endhaikei_d, #endchar2, #kaiwa_a, #oou {
position: absolute;
}
#oou{
left: 0px;
top: 0px;
width: calc(100% - 4em);
height: calc(100% - 4em);
background-color: #040204;
opacity: 0;
transition: 10s all;
z-index: 10200;
color: aliceblue;
padding: 2em;
}
a {
color: rgb(224, 141, 46);
}
#kaiwa_a{
left: 85%;
top: 1.5em;
}
#endhaikei_d{
width: 100%;
height: 100%;
}
#endchar, #endchar2{
transition: opacity 0.5s ;
}
#endchar2{
opacity: 0;
}
#noiz3{
left: -40px;
top: -50px;
}
#yjrs{
top: 366px;
left: 576px;
transition: all 1s;
}
#alca{
left: 100px;
transition: opacity 1s ease-in;
}
#alca_hukidashi{
background-color: aliceblue;
font-family: "Zen Old Mincho", serif;
padding: .5em;
border-radius: 10%;
-webkit-border-radius: 10px;
z-index: 9999;
}
#armnr_hukidashi{
background-color: rgb(240, 255, 241);
font-family: "Kaisei Opti", serif;
padding: .5em;
border-radius: 10%;
-webkit-border-radius: 10px;
top: 200px;
left: 300px;
z-index: 9998;
transition: left 1s ease-in, top 1s ease-out;
}
.hidden-preload_arm {
font-family: "Kaisei Opti", serif;
position: absolute;
left: -9999px;
visibility: hidden;
white-space: nowrap;
}
.hidden-preload {
position: absolute;
left: -9999px;
visibility: hidden;
white-space: nowrap;
}
.hidden-preload_alc {
font-family: "Zen Old Mincho", serif;
position: absolute;
left: -9999px;
visibility: hidden;
white-space: nowrap;
}
#pal_f, #pal_b, #iori, #veruca {
filter: grayscale(90%);
}
#veruca_tuizui{
top: 0px;
left: 0px;
transition: left 0.5s linear, top 0.2s linear;
}
#iori{
top: 0px;
left: 0px;
transition: top 2s ease-out;
}
#exm{
left: -35px;
top: -80px;
}
#pctuizui{
top: 200px;
left: calc(50% - 4px);
}
#ikdmr_t{
transition: all 4s;
}
#snmnkanbn{
position: absolute;
transform-origin: 17px 456px;
transition: all 40s;
}
#gyouretu{
position: absolute;
}
#button{
color: antiquewhite;
width: 640px;
padding: .5em;
margin-left: 2em;
}
.button{
padding: 1em;
border: 2px solid #333;
}
.zyuuji{
border-radius: 10%;
background-color: dimgrey;
display: inline-flex;
justify-content: center;
align-items: center;
width: 3em;
height: 3em;
padding: initial;
position: absolute;
}
.maru{
border-radius: 50%;
background-color: rgb(115, 173, 159);
position: relative;
display: inline-block;
width: 1em;
height: 1em;
}
.selected{
background-color: rgb(168, 115, 173) !important;
}
.yohaku{
width: calc(3em + 4px);
height: calc(3em + 4px);
display: inline-block;
}
.hanyohaku{
width: calc((3em + 4px)/2);
height: calc((3em + 4px)/2);
display: inline-block;
}
.nagabutton{
rotate: 45deg;
background-color: dimgray;
height: 3em;
width: 0.5em;
border-radius: 20%;
display: inline-block;
border: 2px solid #333;
margin: calc(1em + 4px);
position: relative;
}
.buttonmoji{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.nagabutton .buttonmoji{
rotate: -45deg;
left: 0px;
}
.hidden{
display: none;
}
.v_hidden{
visibility: hidden;
}
#steitas, #bo-do_nakami{
position: absolute;
width: 300px;
height: 260px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: cornsilk;
padding: 1em;
line-height: 1.5em;
}
#pc{
position: absolute;
top: 200px;
left: 50%;
transform: translate(-50%, -50%);
transform-origin: 0px 35px;
}
#bo-do{
position: absolute;
top: 0px;
left: 0px;
}
#bo-do_a{
position: absolute;
top: 0px;
left: 0px;
}
#multiply {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #000;
mix-blend-mode: multiply; /* 乗算合成 */
transition: all 1s ease-out;
}
#multiply2 {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #00000000;
mix-blend-mode: multiply; /* 乗算合成 */
transition: all 15s ease-out;
}
#pclight {
position: absolute;
width: 115px;
height: 115px;
filter: blur(15px);
transform: translate(-50%, -50%);
background-color: #ffffff;
border-radius: 50%;
mix-blend-mode: soft-light; /* 合成 */
opacity: 0;
transition: opacity 0.5s ease-in-out;
transform-origin: 0 0;
}
#migi {
left: 9em;
}
#coordinates, #dokuhaku, #mikaiketu{
color: antiquewhite;
}
#dokuhaku {
height: 3em;
line-height: 1.5em;
width: calc(100% - 2em);
padding: .5em;
background-color: #272727;
}
.cntr{
text-align: center;
}
.flash {
animation: flash 1s ease-in-out;
}
@keyframes flash {
0% {
box-shadow: 0 0 5px 5px rgba(255, 255, 255, 0.5);
}
100% {
box-shadow: none;
}
}
.jump {
animation: jump 0.2s ease-in-out;
}
@keyframes jump {
0% {
transform: translateY(0); /* 初期位置 */
}
50% {
transform: translateY(-20px); /* 上にジャンプ */
}
100% {
transform: translateY(0); /* 戻る */
}
}
.jump_iik {
animation: jump_iik 2s ease-in-out infinite;
}
@keyframes jump_iik {
0% {
transform: translateY(0); /* 初期位置 */
}
50% {
transform: translateY(5px); /* 上にジャンプ */
}
100% {
transform: translateY(0); /* 戻る */
}
}
.jump_arm {
animation: jump_arm 2s ease-in-out infinite;
}
@keyframes jump_arm {
0% {
transform: translateY(10px); /* 初期位置 */
}
75% {
transform: translateY(0px); /* 上にジャンプ */
}
100% {
transform: translateY(10px); /* 戻る */
}
}
.lalmitai{
animation: flatRotate 1s linear;
}
@keyframes flatRotate {
0% {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* 初期状態の正三角形 */
}
50% {
clip-path: polygon(40% 60%, 60% 60%, 50% 40%); /* 小さくなった三角形 */
}
100% {
clip-path: polygon(50% 50%, 50% 50%, 50% 50%); /* ほぼ点に縮小 */
}
}
#dareka{
animation: moveD 13s ease-out infinite;
}
@keyframes moveD {
0% {
transform: translateY(-8000px);
}
50%{
transform: translateY(2000px);
}
100%{
transform: translateY(-8000px);
}
}
.credits {
position: absolute;
bottom: -70%; /* 初期位置は画面外 */
width: 100%;
text-align: center;
animation: scrollUp 10s linear forwards; /* スクロールするアニメーション */
transition: opacity 2s;
}
@keyframes scrollUp {
0% {
bottom: -70%; /* 最初は下に隠れている */
}
100% {
bottom: 40%; /* 上にスクロールして完全に消える */
}
}
.mahi{
animation: mahi_a 5s ease-out infinite;
}
@keyframes mahi_a {
0% {
filter: sepia(0);
}
50%{
filter: sepia(1);
}
100%{
filter: sepia(0);
}
}
#kaiwa_window{
position: absolute;
width: 85%;
height: 4em;
top: 76%;
left: 50%;
background-color: #00CDBC;
border: 3px solid #01FE9A;
border-radius: 10%;
-webkit-border-radius: 10px;
transform: translate(-50%, 0%);
}
#kaiwa_ctn{
height: 100%;
width: 90%;
position: absolute;
padding: .5em;
box-sizing: border-box;
line-height: 1.5em;
font-weight: bold;
color: #626262;
text-shadow: 1px 1px #D5D6CB;
left: 50%;
transform: translate(-50%, 0%);
border-radius: 10%;
-webkit-border-radius: 10px;
background-color: #FFF;
}
.flipped {
transform: scaleY(-1);
}
#waveCanvas{
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 4s;
}
.buruburu {
animation: hurueru .2s infinite;
}
@keyframes hurueru {
0% {transform: translate(0px, 0px) rotateZ(0deg)}
25% {transform: translate(1px, 1px) rotateZ(0.5deg)}
50% {transform: translate(0px, 1px) rotateZ(0deg)}
75% {transform: translate(1px, 0px) rotateZ(-0.5deg)}
100% {transform: translate(0px, 0px) rotateZ(0deg)}
}
.marua{
position: absolute;
bottom: 1px;
right: 5px;
}
#gamen {
position: relative;
width: 320px;
height: 320px;
top: -10px;
left: 65px;
overflow: hidden;
background-color: rgb(255, 255, 255);
}
#gamen_o {
position: absolute;
width: 320px;
height: 320px;
background-color: rgb(255, 255, 255);
transition: all 5s;
opacity: 0;
}
.container_sntu {
position: absolute;
width: 314px;
height: 43px;
top: 260px;
border: 3px double #000;
border-radius: 4px;
-moz-border-radius: 4px; /* Firefox */
-webkit-border-radius: 4px; /* Chrome, Safari */
-khtml-border-radius: 4px; /* Konqueror */
-icab-border-radius: 4px; /* iCab */
-o-border-radius: 4px; /* Opera */
background: #fefefe;
display: block;
line-height: 1.4em;
border-bottom: 2px solid #000;
}
.inner_sntu {
height: 40px;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
padding: 0 4px;
margin-bottom: 1px;
}
.bar{
position: absolute;
width: 108px;
height: 20px;
background-color: rgb(83, 209, 45);
transition: all 0.5s;
}
#p_hp_b.bar{
top: 211px;
left: 205px;
transform-origin: left;
}
#f_hp_b.bar{
top: 69px;
left: 52px;
transform-origin: right;
}
.abs{
position: absolute;
}
#p_g{
top: 0px;
left: -200px;
transition: top 1s,left 2s linear;
}
#f_p{
top: 0px;
left: 360px;
transition: top 1s,left 2s linear;
}
@keyframes blink_s {
0%, 50% {
opacity: 0;
}
25%, 75% {
opacity: 1;
}
}
@keyframes blink_l {
0%, 50% {
opacity: 0;
}
50%{
opacity: 1;
}
100% {
opacity: 0;
}
}
.blinking {
animation: blink_s .4s steps(1, end) 2;
}
#loader{
animation: blink_l 2s infinite;
position: absolute;
top: 250px;
left: 300px;
}
#loader_cnt{
background-color: #000;
color: #666;
font-size: large;
top: 0px;
left: 0px;
transition: all 2s;
position: absolute;
width: 100%;
height: 100%;
}