@charset "UTF-8";
/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

html, body {
scrollbar-color: #00f #000;
  background-color: #000; 
  color: #eee;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family:  Courier New ,"游ゴシック", YuGothic, sans-serif;
}

a:link {color: #ffffff; text-decoration: none; }
a:visited { color: #ffffff; text-decoration: none; }
a:hover {  color: #ff0000; text-decoration: underline; }
a:active {  color: #ff5500; }

img {
  image-rendering: crisp-edges;
}

/*非表示できるアレ*/
details {
  border: 1px solid #aaaaaa;
  margin-bottom: 16px;
  background: #222;
  border-radius: 6px;
  padding: 10px 20px;
  interpolate-size: allow-keywords;
  transition: all .3s ease;
  overflow: hidden; 
}
summary {
  color: #eee;
  font-weight: bold;
  padding: 0.5em;
  cursor: pointer;
}
details:hover {
  background: #111111;
}
details[open] {
  color: #eee;
  padding: 20px;
}
details[open] summary {
  border-bottom: 1px dashed #aaaaaa;
  margin-bottom: 20px;
}



/* ===ここから下class=== */



/* =TV枠,位置調整= */

/* tv画像と中身の横幅を同期 */
.tv-content {
  position: relative;
  margin: 0 auto; /* 画面の左右中央に配置 */
  width: calc(100vh * (6/ 5)); 
   max-width: 100%; 
   min-height: 100vh; 
  box-sizing: border-box;
  container-type: inline-size;
}
/* 枠の横幅が800px未満までは中身の横幅も800pxで固定 */
@media (max-height: calc(800px * (5 / 6))) {
  .tv-content {
    width: 800px;
  }
}

/* 中身設定*/
.tv-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: blue;
  z-index: 1;
}
.tv-body {
  position: relative;
  z-index: 2;
  margin: 0; 
  padding: 10cqw 10cqw 15cqw 10cqw; 
  box-sizing: border-box;
}

/* tv画像（画面中央に完全固定） */
.tv-frame {
  position: fixed; /* スクロールしても画面に固定 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100vh;
  width: auto;
  min-width: calc(100vh * (7 / 5)); /* 中身divの通常幅と一致 */
  flex-shrink: 0;
  z-index: 20; 
  pointer-events: none; /* 下のコンテンツを触れるようにする */
  /* 通常時は表示（トランジション設定） */
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
/* 画面の高さが縮み、画像横幅が800px未満になる領域では、画像の縮小を止める */
@media (max-height: calc(800px * (5 / 6))) {
  .tv-frame {
    min-width: 800px;
    height: calc(800px * (5 / 6));
  }
}

/* tv画像消去 */
/* 条件1: 縦長画面になった場合 */
@media (orientation: portrait) {
  .tv-frame {
    opacity: 0;
    visibility: hidden;
  }
}
/* 条件2: 画像横幅が 800px 未満になる画面の高さになった場合 */
@media (max-height: calc(800px * (5 / 6))) {
  .tv-frame {
    opacity: 0;
    visibility: hidden;
  }
}

/* =スクロールお知らせ= */
.scroll {
  position: absolute;
  left: 0px;
  width : 100%;
  line-height: 3.5em;
  text-align : center;
  border : 2px solid #eee;
  border-left : none; 
  border-right : none; 
  color : #ffffff;
  background : #133;
  background: linear-gradient(-20deg, #d558c8 0%, #24d292 100%);
  overflow : hidden;
  z-index: 8;
}
.scroll span{
  width      : 100vh;
  display     : inline-block;
  padding-left: 100%;
  padding-right: 100%;
  white-space : nowrap;
  line-height : 1em;
  animation   : scrollAnime 30s linear infinite;
}
@keyframes scrollAnime{
    0% { transform: translateX(0)}
  100% { transform: translateX(-100%)}
}


/* =バナー= */
.bn-home {
  background: black;
  aspect-ratio: 3 / 3;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.bn-home-crousel {
  display: flex;
  width: 400%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: slide-animation 30s infinite ease-in-out;
}
.bn-home-crousel li {
  width: 25%;
  height: 100%;
}
.bn-home-crousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes slide-animation {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(0); }
  25%  { transform: translateX(-25%); } 
  45%  { transform: translateX(-25%); } 
  50%  { transform: translateX(-50%); } 
  70%  { transform: translateX(-50%); }
  75%  { transform: translateX(-75%); } 
  100% { transform: translateX(-75%); } 
}


/* =サイドバー= */
/*PC*/
@media (orientation: landscape){
.sb-home {
  background-color: #000;
  padding:0 1em;
  width: 30%;
  flex-direction: column;/*縦一列*/
}
.sb-home a{
  padding:0.5em 1em;
  margin:0.2em;
  border: 0.1em dotted #aaa;
  border-radius: 0 1em 0 1em;
}
.sb-home a:hover{
  border: 0.1em dotted #eeeeee;
  border-radius: 0 1em 0 1em;
  background-color:blue;
  background-image: url(img/head1.gif); 
  background-repeat: no-repeat;
  background-position: right 0 bottom 0;
  }
}
/*smf*/
@media (orientation: portrait) {
.sb-home {
  position: fixed;
  background-color: #000;
  border-bottom: 1px solid #fff;
  left:0;
  top:0;
  width: 100%;
  z-index: 10; 
  } 
.sb-home a{
  margin:0 1em;
  }
}



 /* =文字装飾設定= */
.yokokaiten{
  display  : inline-block;
  animation: yokokaitenAnime 3s linear infinite;
}
@keyframes yokokaitenAnime{
 100%{ transform: rotateY(360deg); }
 }


 /* =いろんなコンテンツ背景設定= */
 
/* シンプル黒（後で変える） */
.divbase-1{
   background: black;
   padding: 0.5em 1em;
   margin:0 1px 1px 0;
 }
 
 /* ホームページ名の装飾 */
.h1-base-home{
  position:absolute;
  width: calc( 30rem + 10cqw);
  max-width:100%;
  height:3.5em;
  top: calc( 1rem + 10cqw);
  left:0;
  border-bottom-right-radius:4em;
  corner-shape: round round bevel round;
  background: linear-gradient(90deg, #12c2e9 0%, #c471ed 25%, #f64f59 50%, #12c2e9 100%);
  animation: gradientMove 6s linear infinite;
  background-size: 200% 100%;
  filter: drop-shadow(0px 8px  rgba(0, 0, 0, 0.8));  
}
@keyframes gradientMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -200% 0%;
  }
}

 /* ホーム背景 */
.bg-sky{
  position:absolute;
  background-image:url(img/sky.gif);
  background-size: cover;
  background-attachment: fixed;
  width:100%;
  height:100%;
  min-height:100vh;
  left:0;
  top:0;
  z-index: -2;
  -webkit-animation: bgroop 240s linear infinite;
  animation: bgroop-x 240s linear infinite;
   }
@-webkit-keyframes bgroop-x {
    from {background-position: 0  0;}
    to {background-position: -1600px 0;}
}
@keyframes bgroop-x {
    from { background-position: 0 0; }
    to { background-position: -1600px 0; }
}
 
.bg-scanline{
  position:absolute;
  background-image:url(img/scanline.png);

  background-attachment: fixed;
  width:100%;
  height:100%;
  min-height:100vh;
  left:0;
  top:0;
  z-index: -2;
  -webkit-animation: bgroop 240s linear infinite;
  animation: bgroop-y 240s linear infinite;
   }
@-webkit-keyframes bgroop-y {
    from {background-position: 0  0;}
    to {background-position: -1600px 0;}
}
@keyframes bgroop-y {
    from { background-position: 0 0; }
    to { background-position: -1600px 0; }
}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/* = */