@charset "UTF-8";
/* CSS Document */
html{
     scroll-behavior: smooth;
}


#secret{
  width: 100%;
  margin: 0 auto;
  padding-top: 100vh;
  background: #000000;
background: linear-gradient(0deg, rgb(0 0 0 / 58%) 0%, rgb(67 8 8) 60%, rgba(255, 255, 255, 1) 100%);
overflow: hidden;
padding-bottom: 50px;
position: relative;
}


/* 赤いノイズ（血っぽい） */
#secret::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(180, 0, 0, 0.08) 0px,
      rgba(180, 0, 0, 0.08) 1px,
      transparent 1px,
      transparent 3px
    );
  animation: noiseMove 0.4s infinite linear;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* グリッチの切れ */
#secret::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 0, 50, 0.12);
  animation: glitchSlice 0.25s infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}

@keyframes noiseMove {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-8px, 8px); }
}

@keyframes glitchSlice {
  0%   { clip-path: inset(85% 0 5% 0); transform: translate(2px, 0); }
  20%  { clip-path: inset(10% 0 80% 0); transform: translate(-3px, 1px); }
  40%  { clip-path: inset(60% 0 20% 0); transform: translate(3px, -1px); }
  60%  { clip-path: inset(30% 0 50% 0); transform: translate(-2px, 2px); }
  80%  { clip-path: inset(75% 0 10% 0); transform: translate(1px, -1px); }
  100% { clip-path: inset(85% 0 5% 0); transform: translate(0, 0); }
}

/* チラつき（軽め） */
@keyframes flicker {
  0%, 100% { opacity: 1; }
  48% { opacity: 0.9; }
  50% { opacity: 0.6; }
  52% { opacity: 1; }
}



    /* 画面 */
    .screen {
      width: 100%;
      height: 100%;
      background: #fff;
      border-radius: 20px;
      overflow: hidden;
      position: relative;
    }

/* ===== 2ch風UI ===== */
    .view {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      padding: 10px;
      box-sizing: border-box;
    }

    .hidden {
      display: none;
    }

    .thread {
      padding: 8px;
      border-bottom: 1px solid #ccc;
      cursor: pointer;
            text-align: left;
    }


    .thread:hover {
      background: #eee;
    }

    .title {
      color: #00f;
      font-size: 14px;
    }

    .meta {
      font-size: 12px;
      color: #555;
    }

    .post {
      margin-bottom: 12px;
      font-size: 13px;
    }

    .post>.name {
      color: green;
      font-size: 13px;
    }

    .back {
      color: red;
      cursor: pointer;
      margin-bottom: 10px;
      display: inline-block;
    }

        #thread{
      text-align: left;
    }

    #thread p{
      color: #000;
      border-bottom: 1px solid #ccc;
    }

    .post_img{
          border-bottom: 1px solid #ccc;
    }

    .post_img img{
      margin-bottom: 5px;
    }


/* -------------------------------------------------------------------------------------------------------------------
SP 縦-                                                                                                           
------------------------------------------------------------------------------------------------------------------- */
@media (orientation: portrait) {
  .pc {
    display:none;
  }
  .tb {
    display: block;
  }
  .sp {
    display: block;
  }
  .pcBr {
    display: none;
  }
  .spBr {
    display: block;
  }



   /* スマホ本体 */
    .phone {
      width: 90%;
      height: 80vh;
      background: #000;
      border-radius: 40px;
      padding: 15px;
      box-shadow: 0 0 30px rgba(0,0,0,0.7);
      position: relative;
      margin: 0 auto;
    }


    

}

/* -------------------------------------------------------------------------------------------------------------------
SP 横-                                                                                                           
------------------------------------------------------------------------------------------------------------------- */
@media (orientation: landscape) {
  .pc {
    display:none;
  }
  .tb {
    display: block;
  }
  .sp {
    display: block;
      margin: 0 auto;
  }
  .pcBr {
    display: none;
  }
  .spBr {
    display: block;
  }
    
    
}

/* -------------------------------------------------------------------------------------------------------------------
iPad 縦-                                                                                                           
------------------------------------------------------------------------------------------------------------------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
  .pc {
    display:none;
  }
  .tb {
    display: block;
  }
  .sp {
    display: block;
  }
  .pcBr {
    display: none;
  }
  .spBr {
    display: block;
  }
    





}






/* -------------------------------------------------------------------------------------------------------------------
961px-                                                                                                           
------------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 960px) {
	.pc {
		display: block;
	}
  .sp {
	  display: none;
	}


 /* スマホ本体 */
    .phone {
      width: 300px;
      height: 600px;
      background: #000;
      border-radius: 40px;
      padding: 15px;
      box-shadow: 0 0 30px rgba(0,0,0,0.7);
      position: relative;
      margin: 0 auto;
    }

    
}