@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(font/sora_regular_latin_ext.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(font/sora_regular_latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.clickable {
  cursor: pointer;
}

body {
  color: #4e1129;
  background-color: #2e3025;
  -webkit-text-size-adjust: 100%;
}

.main_box {
  --bgcolor: #383333;
  top: 0;
  left: 0;
  margin: 0 24px;
  width: calc(100% - 32px - 16px);
  position: absolute;
  background-color: var(--bgcolor);
  /* border-left: #db5b88 8px solid; */
  /* border-right: #db5b88 8px solid; */
  min-height: 100%;
  padding: auto;
  box-shadow: 2px 0 12px 2px var(--bgcolor), -2px 0 12px 2px var(--bgcolor);
  text-align: center;
}

.main_box .writable {
  width: 70rem;
  max-width: 90%;
  padding: auto;
  margin: auto;
}

.game_title {
  text-align: center;
  font-family: "Sora", sans-serif;
}

.game_title img {
  min-width: 15rem;
  width: 30%;
  margin: 1rem auto 2rem auto;
}

#game_screenshot {
  width: 70rem;
  max-width: 90%;
  box-shadow: 0 0 16px 1px #686767;
  transition: opacity 0.5s ease;
}

.catch_copy {
  margin: 2rem 0;
  font-size: 1.3rem;
  font-family: serif;
  word-break: keep-all;
  line-break: strict;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.flex-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.wrap_bt_small {
  max-width: 15rem;
  width: 30%;
  min-width: calc(6rem + 24px);
  text-align: center;
  font-weight: bold;
}

.headline {
  font-size: 1.5rem;
  font-family: serif;
}

#detail_area {
  margin: 2rem 0;
  transition: opacity 0.3s ease-out;
  opacity: 0;
}

.wrap_box3-1_selected {
  background-color: #f1ecee;
}

.wrap_box3-1_unselected {
  background-color: #bbb6b8;
}

.about_detail {
  box-sizing: border-box;
  font-family: serif;
}

.about_detail dt {
  display: inline-block;
  width: 6rem;
  font-weight: bold;
  text-align: left;
}

.about_detail dd {
  width: 12rem;
  text-align: left;
  display: inline-block;
}

#copyright {
  font-size: 0.8rem;
  margin: 3rem 0;
  font-family: serif;
}

#story_about {
  font-family: serif;
  word-break: keep-all;
  line-break: strict;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

#charas {
  width: 50rem;
  max-width: 60%;
  padding: auto;
  margin: auto;
  text-align: left;
  font-family: serif;
}

.spilt_line {
  border: 1px solid #949494;
  margin: 1rem 0;
}

#latest-news {
  font-family: serif;
  font-size: x-large;
  font-weight: bold;
}

#change-fontsize {
  font-family: serif;
}

#change-fontsize button {
  font-size: 0.8rem;
  margin: 0 0.5rem;
}