:root {
  --balloon-bg:#a0d8ef;
  --caution-bg:#fac;
  --input-button:#46f;
  --input-hover:#35e;
  --list-bg1:rgb(0 0 0 / 4%);
  --list-bg2:rgb(0 0 0 / 8%);
  --list-hover:#fac;
  --main-text:rgb(0 0 0 / 70%);
  --main-bg:#eed;
  --main-bar:#7d7d7d;
  --shadow:rgb(0 0 0 / 50%);
  --sub-bg:#fff;
  --tag-bg:#f46;
  --tag-text:#fff;
}
@media (prefers-color-scheme:dark) {
  :root {
    --balloon-bg:#113;
    --caution-bg:#333;
    --input-button:#333;
    --input-hover:#222;
    --list-bg1:rgb(255 255 255 / 4%);
    --list-bg2:rgb(255 255 255 / 8%);
    --list-hover:#333;
    --main-text:rgb(120 220 120 / 80%);
    --main-bg:#112;
    --main-bar:#393;
    --shadow:rgb(0 0 0 / 50%);
    --sub-bg:#333;
    --tag-bg:#333;
    --tag-text:#7c7;
  }
}

body {
  background-color:var(--main-bg);
  color:var(--main-text);
  font-family:"Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  letter-spacing:0.1em;
  margin:0px;
  overflow-wrap:break-word; 
}

a {
  color:var(--main-text);
  text-underline-offset:3px;
}
a:hover {
  text-decoration:none;
}

nav ul, .emphasisList ul {
  display:flex;
  justify-content:center;
  margin:0px;
  padding:0px;
  overflow:hidden;
  white-space:nowrap;
  user-select:none;
  -webkit-user-select: none;
}

nav li, .emphasisList li {
  list-style:none;
  padding:15px;
}

nav li a, .emphasisList li a {
  background-image: linear-gradient(90deg,var(--main-text), var(--main-bg));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 1px;
  font-weight:bold;
  text-decoration:none;
  transition:background-size 0.5s;
}

nav li a:hover, .emphasisList li a:hover {
  background-size: 100% 1px;
}

nav li span, .emphasisList li span {
  border-radius:3px;
  box-shadow:0px 0px 5px var(--shadow);
  color:var(--tag-text);
  padding:5px 15px;
  position:relative;

  &::after {
    position:absolute;
    content:'';
  }

}

nav li span, .emphasisList li span {
  background-color:var(--tag-bg);
}


[data-position='lower-right']::after {
  aspect-ratio:1;
  background-color:var(--tag-text);
  clip-path:polygon(100% 0,100% 100%,0 100%);
  inline-size:8px;
  inset-block-end:4px;
  inset-inline-end:4px;
  margin-block:auto;
}

#header {
  margin:0px auto;
  max-width:750px;
  user-select:none;
  -webkit-user-select: none;
}
#header h1 {
  margin:0px;
  padding:10px 0px;
}

#contents {
  background-color:var(--sub-bg);
  border-radius:5px;
  box-shadow:0px 0px 5px var(--shadow);
  clear:both;
  margin:25px auto;
  padding:10px 20px;
  max-width:740px;
  user-select:none;
  -webkit-user-select: none;
}
#contents h2 {
}
#contents h3 {
  background:linear-gradient(transparent 88%, var(--main-bar) 12%);
  margin-top:40px;
  padding-left:5px;
}
#contents h4 {
  padding-top:40px;
}
#contents p {
}
#contents section {
  padding-bottom:20px;
}
#contents section img {
  border:solid 1px;
  margin:10px;
}

#contentsTop1 {
  display:flex;
  justify-content:normal;
  margin:20px auto;
  max-width:750px;
  user-select:none;
  -webkit-user-select: none;
}

#caution {
  background-color:var(--sub-bg);
  border:solid 1px;
  display:block;
  margin:20px auto;
  max-width:700px;
  user-select:none;
  -webkit-user-select: none;
}
#caution h3 {
  background-color:var(--caution-bg);
  border-bottom:solid 1px;
  font-weight:normal;
  margin:0px;
  padding:5px 10px;
}
#caution p {
  margin:0px;
  padding:5px 10px;
}

#contentsTop2 {
  display:flex;
  justify-content:normal;
  margin:20px auto;
  max-width:750px;
  user-select:none;
  -webkit-user-select: none;
}

#topImage {
  height:300px;
  width:390px;
  overflow:visible;
}

#whatsNew {
  margin:10px 0px 0px;
  width:350px;
}
#whatsNew h3 {
  background-color:var(--main-text);
  color:var(--sub-bg);
  font-weight:normal;
  display:flex;
  justify-content:space-between;
  margin:0px;
  padding:5px 10px;
}
#whatsNew h3 > a {
  background-color:var(--sub-bg);
  border-radius:3px;
  box-shadow:0px 0px 5px rgb(0 0 0 / 0%);
  color:var(--main-text);
  font-size:smaller;
  padding:2px 5px;
  text-decoration:none;
  transition:all 0.3s;
}
#whatsNew h3 > a:hover {
  background:var(--caution-bg);
  box-shadow:0px 0px 5px var(--shadow);
  transition:all 0.5s;
}

#reportList {
  min-height:160px;
  width:250px;
}
#reportList h3 {
  background-color:var(--main-text);
  color:var(--sub-bg);
  font-weight:normal;
  margin:0px;
  padding:5px 15px;
}

.listStyle {
  background-color:var(--sub-bg);
}
.listStyle a {
  box-shadow:0px 0px 5px rgb(0 0 0 / 0%);
  display:block;
  padding:10px 15px;
  text-decoration:none;
  transition:all 0.3s;
}
#caution p:nth-of-type(odd), .listStyle a:nth-of-type(odd) {
  background-color:var(--list-bg1);
}
#caution p:nth-of-type(even), .listStyle a:nth-of-type(even){
  background-color:var(--list-bg2);
}
.listStyle a:hover {
  background-color:var(--caution-bg);
  box-shadow:0px 0px 5px var(--shadow);
  transition:all 0.5s;
}
#whatsNew .listStyle {
  font-size:smaller;
}
#reportList .listStyle {
  font-size:smaller;
}

#emphasisWrap{
  display:flex;
  justify-content:normal;
  width:500px
}
.emphasis {
  background-color:var(--sub-bg);
  border-radius:15px;
  box-shadow:0px 0px 5px var(--shadow);
  margin-right:20px;
  width:230px;
}
.emphasis h3 {
  margin:15px;
  text-align:right;
}
.emphasis h4 {
  margin:15px;
}
.emphasis p {
  font-size:smaller;
  margin:15px
}
.emphasis a {
  background-color:var(--list-bg1);
  border-radius:0px 0px 15px 15px;
  color:var(--main-text);
  display:block;
  font-size:larger;
  padding:15px;
  text-align:center;
  text-decoration:none;
  transition:all 0.3s;
}
.emphasis a:hover {
  background-color:var(--caution-bg);
  transition:all 0.5s;
}

.balloon {
  background-color:var(--balloon-bg);
  border-radius:15px;
  margin:10px;
  padding:5px 20px;
}

.floatText {
  background-color:var(--sub-bg);
  border-radius:15px;
  padding:5px 10px;
} 

input {
  background-color:var(--sub-bg);
  border:none;
  color:currentcolor;
  margin:5px 0px;
  padding:5px 0px;
  width:100%;
}
.button {
  background-color:var(--input-button);
  border-radius:20px;
  box-shadow:0px 0px 5px rgb(0 0 0 / 0%);
  color:var(--tag-text);
  width:20%;
  transition:all 0.5s;
}
.button:active {
  background-color:var(--input-hover);
  box-shadow:0px 0px 5px var(--shadow);
}
.button:hover {
  background-color:var(--input-hover);
  box-shadow:0px 0px 5px var(--shadow);
  transition:all 0.5s;
}

select, textarea {
  background-color:var(--sub-bg);
  color:var(--main-text);
} 

#footer {
  text-align:center;
  user-select:none;
  -webkit-user-select: none;
}

#footer p {
  font-size:smaller;
}