:root {

  --font-size: 24px;
  --font-sizeS: 18px;
  --font-sizeL: 36px;
  --test-border: 0px solid #000;

  --color-ja: #144;
  --color-en: #2c0;
  --color-bg: #dff;
}

a:hover{
  text-decoration: none;
}

body{
  background: var(--color-bg);
  font-size: var(--font-size);
  color: var(--color-ja);
  margin: 30px;
  padding: 30px;
  line-height: 180%;
  font-weight: normal;
  font-family: 'Times New Roman', "Yu Mincho", "Hiragino Mincho Pro", "Hiragino Mincho ProN", "Noto Serif CJK JP", "Source Han Serif JP", "IPAMincho", "TakaoMincho", "Kozuka Mincho Pr6N", "Yu Mincho Medium", "Hiragino Mincho Pro W3", "Hiragino Mincho ProN W3", "Noto Serif CJK JP Regular", "Source Han Serif JP Regular", "IPAMincho Regular", "TakaoMincho Regular", "Kozuka Mincho Pr6N Regular", serif;
  overflow: auto;
  overflow-x: scroll;
  writing-mode: vertical-rl;

}

#slider{
  border: 2px dotted #000;
  border-radius: 10px;
  position: fixed;
  padding: 10px;
  top: 20px;
  left: 20px;
  z-index: 1000;
  writing-mode: horizontal-tb;
  button{
    cursor: pointer;
    font-size: var(--font-sizeS);
  }
}

ruby{
}
rt{
  font-size: var(--font-size);
  padding: 5px;
  color: var(--color-en);
}

.container{
  position: relative;
  top: 0px;
  padding: 0;
  margin: 0;
  border: var(--test-border);
  transition: transform 0.5s ease, left 0.5s ease, top 0.5s ease;

}

.honbun{
  position: absolute;
  right : 0px;
  top: 80px;
  height: 500px;
  
  border: var(--test-border);
}


.ja{
  color: var(--color-ja);
  text-orientation: upright;
}

.en{
  color: var(--color-en);
}

button{
    font-size: var(--font-size);
    background: transparent;
    border: 0;
    ruby{
      padding: 20px;
      border: 1px solid #000;
      border-radius: 50px;
    }
    rt{
      padding: 20px;
      border: 1px solid #000;
      border-radius: 50px;
    }
}

h1{
  font-size: var(--font-sizeL);
  margin-left: 50px;
  rt{
    color: var(--color-en);
    font-size: var(--font-sizeL);
  }
}

h2{
    font-size: var(--font-size);
    padding: 0;
    margin: 0;
    margin-right: 50px;
    rt{
      color: var(--color-en);
    }
}
p{
    padding: 0;
    margin: 0;
}

footer{
  border-right: 5px dotted var(--color-en);
  border-left: 5px dotted var(--color-en);
  corner-shape: superellipse(-1);
  font-size: var(--font-sizeL);
  padding-right: 50px;
  padding-left: 30px;
  margin-right: 100px;
  margin-left: 100px;
}

.intro{
  border-left: 5px dotted var(--color-en);
  padding-left: 80px;
}

.buttonTop{
  margin-left: 10px;
}

.direction{
  transition: none;
  font-size: var(--font-sizeL);
  color: var(--color-en);
  position: absolute;
  top: 600px;
  right: 630px;
  scale: 1 1;
  animation: blur-anime 5s steps(1,start) infinite;
}

@keyframes blur-anime {
  0%,50%  {top:600;right:630px;text-shadow: 20px 20px 5px var(--color-ja); color: var(--color-en);}
  100%  {top:620px;right:650px;text-shadow: -20px -20px 5px var(--color-en); color: var(--color-ja);}
}