@charset "utf-8";

@media only screen and (max-width: 767px) {
  .youso {
    width: 100%;
  }
}

@media only screen and (min-width: 768px) {
  .youso {
    width: 40vw;
  }
}

body[theme=""] {
  --youso-bg: rgba(0, 13, 26, 0.9);
  --t-bg: #012;
  --bgwrap: rgba(0, 17, 34, 1);
  --bgloaded: rgba(0, 17, 34, 0);
  --youso-shadow: 8px 8px 8px #000;
  --yoko: url(_images/yoko_d.svg);
  --yajirusi: url(_images/yajirusi_d.svg);
}

body[theme="white"] {
  --youso-bg: #fff;
  --t-bg: #fff;
  --bgwrap: rgba(255, 255, 255, 1);
  --bgloaded: rgba(255, 255, 255, 0);
  --youso-shadow: 8px 8px 8px #666;
  --yoko: url(_images/yoko_w.svg);
  --yajirusi: url(_images/yajirusi_w.svg);
}

html[fsize=""] {
  --link-fsize: 1.2rem;
}

html[fsize="dai"] {
  --link-fsize: x-large;
  --title-shadow: none;
}

.subtitle {
  text-align: left;
  font-size: var(--m-fsize);
  border-bottom: 1px solid var(--m-color);
  margin-bottom: var(--padH);
  padding: var(--padH) 0;
}

.yoko {
  display: inline-block;
  background-image: var(--yoko);
  background-position: right center;
  background-repeat: no-repeat;
  width: 0.75rem;
  height: 0.75rem;
  padding-left: var(--padH);
  vertical-align: middle;
}

.text {
  display: inline-block;
  color: var(--link-color);
  font-size: var(--link-fsize);
  border-radius: 4px;
  margin-top: var(--text-top);
  margin-bottom: var(--padH);
  padding: var(--padH);
  text-decoration: none;
  line-height: 2;
  background-color: var(--t-bg);
  box-shadow: var(--link-shadow);
}

.youso {
  padding: var(--pad);
  padding-top: 30vmin;
  border-radius: 4px;
  box-shadow: var(--youso-shadow);
  background-color: var(--youso-bg);
  background-size: 30vmin;
  background-position: 95% 5%;
}

.setsumei {
  border-radius: 4px;
  padding: var(--padH);
  background-color: var(--t-bg);
}

ul {
  list-style: disc;
}

.icon {
  background-color: #fff;
  border-radius: 50%;
  border: 2px solid #fff;
  width: 41px;
  height: 41px;
}

.snslink {
  display: inline-flex;
  align-items: center;
  gap: var(--padH);
}

.snstext {
  display: inline-block;
  white-space: nowrap;
}

#twitter {
  background-image: url(_images/twitter.svg);
  background-size: cover;
  background-repeat: no-repeat;
}

.retsu {
  padding: var(--pad);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: var(--pad);
}

.namae {
  padding-bottom: var(--padH);
}

.profile {
  text-align: center;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  padding-top: var(--pad);
  padding-bottom: var(--pad);
  margin-top: var(--pad);
  margin-bottom: var(--pad);
}

.owari {
  padding: var(--pad);
  list-style: none;
}

.yajirusi {
  display: inline-block;
  width: var(--pad);
  height: var(--pad);
  background-image: var(--yajirusi);
  margin-right: var(--padH);
  margin-bottom: var(--padQ);
  vertical-align: middle;
}

li {
  padding: var(--padH);
}

.bunlink {
  padding-bottom: var(--padQ);
  color: var(--sub-color);
  border-bottom: 1px dashed var(--sub-color);
}

.mainbg {
  background: url(_images/bg.webp);
}

.tarot {
  background-image: url(_images/tarot.svg);
}

.geo {
  background-image: url(_images/geo.svg);
}

.mondema{
  background-image: url(_images/lucky.svg);
}

.emp{
  background: red;
}

.update {
  padding-bottom: var(--padH);
  margin-bottom: var(--padH);
  border-bottom: 1px solid var(--m-color);
}

.update ul {
  list-style: inside;
}