Newer
Older
2024-C1230565 / shiken.css
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f0f0;
}

.a {
  position: relative;
  width: 800px; 
  height: 1130px; 
  background-color: #CD5C5C;
  overflow: hidden;
}

.f { 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
 

}

.b {
  position: absolute;
  top: 250px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 60px;
  white-space: nowrap;
}

.c {
  position: absolute;
  top: 350px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 80px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
}

.d {
  position: absolute;
  top: 380px;
  left: 280px;
  font-size: 30px;
  color: yellow;
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
  transform: rotate(-15deg);
  transform-origin: top left;
}

.e {
  position: absolute;
  bottom: 0; 
  width: 100%;
  text-align: center;
  font-size: 24px;
  white-space: nowrap;
  background-color: #f0f0f0; 
  
}





.g {
  position: absolute;
  bottom: 20px; /* 下からの距離を調整 */
  right: 20px; /* 右からの距離を調整 */
  background-color: black;
  color: white;
  padding: 10px 15px;
  display: flex;
  flex-direction: column; /* テキストを縦に並べる */
  align-items: center; /* 中央揃え */
}

.h {
  font-size: 18px;
  white-space: nowrap;
}

.i {
  font-size: 18px;
  white-space: nowrap;
  margin-top: 5px; /* テキスト間のスペース */
}