@charset "utf-8";

/* https://codepen.io/AlexWarnes/pen/jXYYKL */

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Goblin+One&family=Oi&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Righteous&family=Sarina&family=WDXL+Lubrifont+JP+N&display=swap');

/* --- 基本スタイル --- */
html {
  overflow-x: hidden;
}

body {
  margin: 2em 3em 3em 7em;
  color: #444;
  background-color: white;
  overflow-x: hidden;
  animation: fadeIn 3s ease 0s 1 normal;
  -webkit-animation: fadeIn 3s ease 0s 1 normal;
}

body > *:not(nav):not(nav ~ *) {
  font-size: 0px;
  color: rgba(255, 255, 255, 0);
}

a,
a:visited {
  color: #bbb;
  text-decoration: none;
}

hr {
  margin: 2em 0;
  border: none;
  border-top: 1px solid #eee;
}

* {
  box-sizing: border-box;
}

/* --- レイアウト要素 --- */
.leftbox {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  width: ; /* 値が空ですがそのまま維持 */
  height: 10000px;
  padding: 2rem 0.8rem 0.8rem 0.8rem;
  overflow: hidden;
  color: #fff;
  font-family: "Righteous", "WDXL Lubrifont JP N", serif;
  font-size: 220%;
  letter-spacing: 0.1rem;
  writing-mode: vertical-rl;
  background: rgba(12, 111, 114, 1);
}

.topbox {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 5em;
  background: rgba(255, 255, 255, 1);
}

.dialymenu {
  position: fixed;
  left: 1.5em;
  bottom: 4em;
  z-index: 101;
  color: #fff;
  writing-mode: vertical-rl;
  background: rgba(255, 255, 255, 0);
}

#overlayParent_1775 {
  opacity: 0.9;
}

/* --- 麻雀ログ関連（名前・日付） --- */

/* 記事番号 */
a:has(+ .name) {
  display: inline-block;
  padding-right: 0.2em;
  color: rgba(12, 111, 114, 1);
  font-weight: bold;
  font-size: 150%;
  vertical-align: -2px;
}

/* 名前 */
.name {
  display: inline-block;
  color: rgba(12, 111, 114, 1);
}

/* 改行を消す */
.name + br {
  display: none;
}

/* 日付 */
.name + br + font {
  display: inline-block;
  padding-left: 0.2em;
  color: #ddd;
  vertical-align: 1px;
}

/* 表紙日付 */
center:has(+ font)  {
  color: #fff;
  font-size:10%;
}

/* --- ローディング画面 --- */
#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-color: #fff;
  animation: fadeOut 1.5s forwards;
  transition: opacity 0.5s ease-out, visibility 0.5s;
}

.loader {
  width: 50px;
  height: 50px;
  border: 3px solid #333;
  border-top: 3px solid #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loaded {
  visibility: hidden;
  opacity: 0;
}

/* --- アニメーション・特殊効果 --- */
.solar-system {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 250px;
}

.orbit {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #aaa;
  border-radius: 50%;
}

.earth-orbit {
  width: 165px;
  height: 165px;
  -webkit-animation: spin 12s linear 0s infinite;
}

.venus-orbit {
  width: 120px;
  height: 120px;
  -webkit-animation: spin 7.4s linear 0s infinite;
}

.mercury-orbit {
  width: 90px;
  height: 90px;
  -webkit-animation: spin 3s linear 0s infinite;
}

.planet {
  position: absolute;
  top: -5px;
  width: 10px;
  height: 10px;
  background-color: #3ff9dc;
  border-radius: 50%;
}

.sun {
  width: 35px;
  height: 35px;
  background-color: #ffab91;
  border-radius: 50%;
}

.leo {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.blue-orbit {
  width: 165px;
  height: 165px;
  border: 1px solid #91daffa5;
  -webkit-animation: spin3D 3s linear .2s infinite;
}

.green-orbit {
  width: 120px;
  height: 120px;
  border: 1px solid #91ffbfa5;
  -webkit-animation: spin3D 2s linear 0s infinite;
}

.red-orbit {
  width: 90px;
  height: 90px;
  border: 1px solid #ffca91a5;
  -webkit-animation: spin3D 1s linear 0s infinite;
}

.white-orbit {
  width: 60px;
  height: 60px;
  border: 2px solid #ffffff;
  -webkit-animation: spin3D 10s linear 0s infinite;
}

.w1 { transform: rotate3D(1, 1, 1, 90deg); }
.w2 { transform: rotate3D(1, 2, .5, 90deg); }
.w3 { transform: rotate3D(.5, 1, 2, 90deg); }

.three-quarter-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid #ccc;
  border-top: 3px solid transparent;
  border-radius: 50%;
  animation: spin .5s linear 0s infinite;
}

#container {
  color: transparent;
}


/* Keyframes */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes fadeOut {
  90% { visibility: visible; opacity: 1; }
  100% { visibility: hidden; opacity: 0; }
}

@keyframes spin3D {
  from { transform: rotate3d(.5, .5, .5, 360deg); }
  to { transform: rotate3d(0deg); }
}

@keyframes configure-clockwise {
  0% { transform: rotate(0); }
  25% { transform: rotate(90deg); }
  50% { transform: rotate(180deg); }
  75% { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}

@keyframes configure-xclockwise {
  0% { transform: rotate(45deg); }
  25% { transform: rotate(-45deg); }
  50% { transform: rotate(-135deg); }
  75% { transform: rotate(-225deg); }
  100% { transform: rotate(-315deg); }
}

@keyframes pulse {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(.75); opacity: .25; }
}




/* --- メディアクエリ --- */
@media screen and (max-width: 480px) {
  body {
    margin: 2em 2em 3em 5.5em;
  }

  .leftbox {
    font-size: 150%;
  }

  .dialymenu {
    left: 1em;
  }

  .topbox {
  height: 5em;
  background: rgba(255, 255, 255, 1);
  }
}