@charaset "utf-8";

* { margin: 0; padding: 0; }

 html {
	   height: 100%;
      }


  body:before {
		content: '';
		display: inline-block;
		vertical-align: middle;
		height: 100%;
}

/* メインコンテンツをレスポンシブ対応に */
main {
  padding-top : 150px!important;
  display: inline-block;
  vertical-align: middle;
  opacity : 0.8;
  font-family: 'Press Start 2P', cursive;
 
  padding: 5vw;               /* ← 画面幅に応じて余白を可変に */
  max-width: 90vw;            /* ← 幅を画面の90%に制限 */
  width: 100%;                /* ← 画面幅に追随 */
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  box-shadow: 0 5px 15px rgba(0,0,0,0.5);
  border-radius: 10px;
  box-sizing: border-box;     /* ← paddingを含めて調整 */

}

/* タイトルなども縮小対応 */
h1 {
  font-size: clamp(18px, 5vw, 32px);   /* ← 小画面では自動で小さく */
  padding: 10px;
	  color          : #ffffff;            /* 文字の色 */
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
       2px  2px 1px #003366,
      -2px  2px 1px #003366,
       2px -2px 1px #003366,
      -2px -2px 1px #003366,
       2px  0px 1px #003366,
       0px  2px 1px #003366,
      -2px  0px 1px #003366,
       0px -2px 1px #003366;        /* 文字の影 */
	  z-index: 3;   
}
h2 {
  font-size: clamp(14px, 3.5vw, 18px);
	  color          : #ffffff;            /* 文字の色 */
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
       2px  2px 1px #003366,
      -2px  2px 1px #003366,
       2px -2px 1px #003366,
      -2px -2px 1px #003366,
       2px  0px 1px #003366,
       0px  2px 1px #003366,
      -2px  0px 1px #003366,
       0px -2px 1px #003366;        /* 文字の影 */
}

/* ボタンやテキストブロックも可変幅に */
.btn-flat-border, #contents p {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

p {
	  color: #fff;
	  font-family: 'Press Start 2P', cursive;
	  text-align: left;
	  line-height: 1.5;
	  padding-left: 10px;
	  padding-right: 10px;
	  padding-top: 20px!important;
	  padding-bottom: 20px!important;
	  border-radius: 8px;
	  display        : inline-block;
         letter-spacing : 4px;  
         text-shadow    : 
            2px  2px 1px #003366,
           -2px  2px 1px #003366,
            2px -2px 1px #003366,
            -2px -2px 1px #003366,
            2px  0px 1px #003366,
             0px  2px 1px #003366,
            -2px  0px 1px #003366,
            0px -2px 1px #003366;        /* 文字の影 */
	  z-index: 3;   
}

a {
	color: #fff;
	text-decoration: none;
}

pre {
	text-align: left;
	margin-top: 20px;
}
.profile {
    text-align: center;
    margin: 20px auto;
}
.profile img {
    width: 200px;
    max-width: 80%;
    border-radius: 50%; /* */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
	  z-index: 3;   
}
.profile p {
    color: #fff;
    margin-top: 10px;
}

.error {
	  display: none;
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  background: #000;
	  color: #f00;
	  padding: 5px;
	  max-width: 50%;
}

.btn-flat-border {
	  display: inline-block;
	  padding: 0.3em 4em;
	  text-decoration: none;  
	  border-radius: 8px;
	  line-height: 1.5;
	  transition: .4s;
}

.btn-flat-border:hover {
	  background: #67c5ff;
	  color: white;
}


.disable {
		position: fixed;
		bottom: 0;
		right: 0;
}

.rk-footer-menu {
	padding-top: 50px!important;
	padding-bottom: 10px;
	font-family: 'Press Start 2P', cursive;
	  text-align: left;
	  line-height: 1.5;
	  padding-left: 10px;
	  padding-right: 10px;
	  padding-top: 20px!important;
	  padding-bottom: 20px!important;
	  border-radius: 8px;
	  display        : inline-block;
          color          : #ffffff;            /* 文字の色 */
          letter-spacing : 4px;                /* 文字間 */
         text-shadow    : 
       2px  2px 1px #003366,
      -2px  2px 1px #003366,
       2px -2px 1px #003366,
      -2px -2px 1px #003366,
       2px  0px 1px #003366,
       0px  2px 1px #003366,
      -2px  0px 1px #003366,
       0px -2px 1px #003366;        /* 文字の影 */
	  z-index: 3; 
}


.rk-footer__copy {
	
}

.outline-text {
	color:#fff;
	font-family: 'Press Start 2P', cursive;
	margin-top: 6px;
	border: solid;
	border-radius: 8px;
	
}


html, body { height: 100%; min-height: 100%; }

body {
  color: #fff;
  line-height: 1.5;
  font-size: 16px;
  font-family: 'Press Start 2P', cursive;
  text-align: center;

  /* 背面は“静止”にしたいなら画像は外すのが確実 */
  /* background-image: url('img/bg2.png');  ← ← いったん消す */
  background: #fff; /* 静止の無地（必要なら色は変更） */

  /* ※ 以前の height:100vh は削除（スマホで不安定になる） */
}

/* =======================================================
   背景エフェクトON/OFFボタン（最前面に固定）
   ======================================================= */
.ripples-toggle {
  position: fixed;
  top: 40px;                 /* ← 画面の上からの距離 */
  left: 50%;                 /* ← 中央に配置 */
  transform: translateX(-50%);
  z-index: 10000;            /* ← どんな要素よりも最前面 */
  background: rgba(255, 255, 255, 0.9);
  color: #000;
  border: 2px solid #fff;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 12px;
  font-family: 'Press Start 2P', cursive;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.ripples-toggle:hover {
  background: #67c5ff;
  color: #fff;
  border-color: #fff;
}

@media (max-width: 600px) {
  .ripples-toggle {
    top: 10%;
  }
}

/* ここにエフェクトを掛けます（前面レイヤー） */
#ripples-foreground{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url('img/bg2.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
  z-index: 0;            /* ← 背景として一番下） */
}


/* コンテンツは下の層に（前面レイヤーより低く） */
body > main { position: relative; z-index: 1; }

/* ==============================
   main全体を画面中央に配置
   ============================== */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* main の最終形（置き換え） */
main {
  position: relative;
  z-index: 1;

  /* 横センター寄せ＋上下の余白を画面サイズで自動調整 */
  width: min(92vw, 1000px);
  margin: clamp(24px, 6vh, 64px) auto;   /* 上下/左右 */

  /* 内側余白も可変に */
  padding: clamp(12px, 3vw, 40px);

  /* 見た目は今のまま */
  opacity: 0.9;
  background-image: url('img/bg.jpg');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain;   /* ← ここがポイント！ */
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,.5);
  box-sizing: border-box;
}

#ripples-foreground { z-index: 0; pointer-events: none; }
main                 { z-index: 1; }
.ripples-toggle      { z-index: 10000; }

/* 1) 余計な横スクロールを封じる（はみ出し対策） */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;                 /* ← これが効きます */
}

/* 2) main を厳密に中央へ（モバイル最適） */
main {
  width: min(92vw, 800px);            /* 画面に合わせて縮む */
  margin-inline: auto;                /* 左右センター */
  padding: clamp(12px, 3vw, 40px);
  box-sizing: border-box;
}

/* 3) iPhone の “安全領域” を考慮（ノッチで左右差が出るのを抑える） */
@supports (padding: max(0px)) {
  body {
    padding-left:  max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
}

/* 4) 背景レイヤーの見え方を安定（中心基準に） */
#ripples-foreground {
  background-position: center center; /* 横ズレしづらい */
}

/* ===============================
   文字のはみ出し防止（スマホ対策）
   =============================== */
main, main * {
  word-wrap: break-word;         /* 長い英単語を折り返す */
  overflow-wrap: anywhere;       /* 自動で改行を許可 */
  white-space: normal;           /* 強制的な改行を可能に */
  max-width: 100%;               /* 要素がはみ出さないよう制限 */
  box-sizing: border-box;
}

/* ボタンやリンクのテキストも調整 */
a, button {
  text-overflow: ellipsis;       /* 長すぎる文字を省略（必要に応じて） */
  white-space: normal;
  overflow: hidden;
}


.code-string { color:#ec7600 }
.code-cbracket { font-weight:bold }
.code-number { color:#ffcd22 }