html {
  scroll-behavior: smooth;
}

body {
  background: #bfe7b9;
  color: #333;
  font-size: 10px;
  padding-top: 50px;
  padding-bottom: 50px;
}
@media screen and (max-width: 767px) {
  main {
    padding: 0 15px 50px;
  }
}

/* Util */
.area-title {
  font-size: 2rem;
  margin-bottom: 20px;
}

[class$="-area"] + [class$="-area"] {
  margin-top: 50px;
}

[class$="-area"] a {
  font-size: 1rem;
  color: #333;
}
[class$="-area"] a:hover {
  opacity: .5;
  transition: 0.1s ease all;
}

a[href$=".pdf"],
.link-pdf {
  /* background: url(images/icon-pdf.png) no-repeat left center; */
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xml%3Aspace%3D%22preserve%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20x%3D%220%22%20y%3D%220%22%20style%3D%22enable-background%3Anew%200%200%20300%20300%22%20version%3D%221.1%22%20viewBox%3D%220%200%20300%20300%22%3E%3Cstyle%3E.st2%7Bfill%3A%23fff%7D%3C%2Fstyle%3E%3Cpath%20d%3D%22M111.5%2090h93v120h-93z%22%20style%3D%22fill%3Anone%3Bstroke%3A%23333%3Bstroke-width%3A8%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A10%22%2F%3E%3Cpath%20d%3D%22M95.5%20132h83v36h-83z%22%20style%3D%22fill%3A%23333%3Bstroke%3A%23333%3Bstroke-width%3A8%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A10%22%2F%3E%3Cpath%20d%3D%22M106.17%20137.42h8.26c5.58%200%209.86%201.94%209.86%207.89%200%205.75-4.32%208.33-9.72%208.33h-3.37v8.94h-5.03v-25.16zm8.06%2012.24c3.47%200%205.13-1.46%205.13-4.35%200-2.92-1.84-3.91-5.3-3.91h-2.86v8.26h3.03zM128.28%20137.42h6.9c7.68%200%2012.44%203.98%2012.44%2012.48%200%208.46-4.76%2012.68-12.17%2012.68h-7.17v-25.16zm6.6%2021.11c4.69%200%207.62-2.52%207.62-8.63%200-6.15-2.92-8.46-7.62-8.46h-1.56v17.1h1.56zM152.33%20137.42h15.5v4.18h-10.47v6.56h8.94v4.22h-8.94v10.2h-5.03v-25.16z%22%20class%3D%22st2%22%2F%3E%3C%2Fsvg%3E');
  background-size: 2.4rem 2.4rem;
  background-position: center right;
  background-repeat: no-repeat;
  padding-right: 2em;
}
@media screen and (max-width: 767px) {
  .area-title {
    font-size: 1.5rem;
  }
}

.pagetop {
  transition: none!important;
  height: 50px;
  width: 50px;
  position: fixed;
  right: 30px;
  bottom: 30px;
  background: #fff;
  border: solid 2px #295784;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  box-shadow: 0 4px 6px rgb(0 0 0 / 30%);
}

.pagetop__arrow {
  height: 10px;
  width: 10px;
  border-top: 3px solid #295784;
  border-right: 3px solid #295784;
  transform: translateY(20%) rotate(-45deg);
}

.fixed-header {
  background: #ffffff9d;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 999;
}

.header-nav {
  max-width: 1280px;
  margin: 0 auto;
}
.header-nav .nav-list {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 5px 0;
}
.header-nav .list-item {
  width: calc(100% / 2);
  text-align: center;
  font-size: 1.2rem;
  border-left: 2px solid #ffd9ea;
}
.header-nav .list-item:last-of-type {
  border-right: 2px solid #ffd9ea;
}
.header-nav .list-item>a {
  display: block;
  width: 100%;
  text-decoration: none;
  color: #333;
}
.header-nav .list-item>a:hover {
  opacity: .5;
  transition: 0.1s ease all;
}

/* MV */
.mv-area {
  /* width: 250px; */
  margin: 10px auto -20px;
  text-align: center;
}
.mv-area h1 a img,
.mv-area h1 img {
  width: 80%;
  max-width: 450px;
  margin: 0 auto;
}

/* Member */
.member-area {
  margin: 0 auto;
  max-width: 1280px;
}

.member-list-wrap {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}

.list-block {
  width: calc(100% / 4 - 8px);
  background: #fef4e8;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #333;
  border: 2px solid #8ebfad;
  box-shadow: 5px 5px 5px #d5d5d57d;
  border-radius: 8px;
  overflow: hidden;
}

.member-img-wrap {
  width: 100px;
  flex-basis: 100px;
  position: relative;
  z-index: 110;
  overflow: hidden;
}

.member-img {
  transform-origin: top right;
  transform: skew(-5deg);
  overflow: hidden;
  border-right: 2px solid #8ebfad;
}
.member-img>img {
  max-width: 105px;
  transform-origin: top right;
  transform: skew(5deg);
  margin-left: -5px;
  margin-top: -3%;
  position: relative;
  z-index: 100;
}

.member-txt-item {
  width: 65%;
}
.member-subtext {
  font-size: .7rem;
  line-height: 1;
  margin-bottom: 5px;
}
.member-name {
  font-size: 1.1rem;
  line-height: 1;
}
.member-links {
  list-style: none;
  padding-left: 0;
  margin-top: 5px;
}
.member-links>li>a {
  display: block;
  width: 100%;
}
.member-links>li>a:hover {
  border-left: 5px solid #8ebfad;
  padding-left: 5px;
}

@media screen and (max-width: 767px) {
  .member-list-wrap {
    justify-content: center;
  }
  .list-block {
    width: 100%;
  }
}

/* Rule */
.rule-area {
  margin: 50px auto 0;
  max-width: 1280px;
}

/* rule page */
#rule-page {
  font-size: 1rem;
  max-width: 1280px;
  margin: 0 auto;
  /* font-family: "Yusei Magic", sans-serif; */
  font-family: "Murecho", sans-serif;
  line-height: 2;
}

#rule-page .mv-area {
  margin-bottom: -20px;
}

.entry-content {
  margin-top: 50px;
}
.entry-content .table-of-contents {
  position: relative;
  margin: 0;
  padding: 2em 2.5em 1.5em 2em;
  font-size: 100%;
  border: solid 2px #ffd9ea;
  border-radius: 8px;
  background: #fffcfd;
  color: #be6fb5;
  box-shadow: 5px 5px 5px #d5d5d57d;
}
.entry-content .table-of-contents::before {
  content: "目次";
  display: block;
  position: absolute;
  top: -16px;
  left: 30px;
  width: 120px;
  height: 35px;
  margin: 0;
  padding: 0;
  line-height: 27px;
  text-align: center;
  color: #be6fb5;
  background: #ffd4e7;
  background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0);
  background-position: 3px 3px, 10px 10px;
  background-size: 15px 15px;
  border-bottom: dotted 3px #e796c7;
  border-top: dotted 3px #e796c7;
  font-size: 1.3rem;
  font-weight: bold;
  transform: rotate(-5deg);
}
.entry-content .table-of-contents ul {
  padding-left: 0;
}
.entry-content .table-of-contents li {
  margin: .2em 0 1em 1em;
  list-style-type: decimal;
  line-height: 1.6em;
  font-weight: bold;
}
.entry-content .table-of-contents li ul {
  margin: 0 0 1em .5em;
  padding: 0;
}
.entry-content .table-of-contents li ul li {
  margin: .2em 0 0 1em;
  list-style-type: disc;
  font-weight: normal;
  font-size: 100%;
}
.entry-content .table-of-contents a {
  color: #be6fb5;
  display: block;
  text-decoration: none;
  border-bottom: solid 2px #be6fb5;
}
.entry-content .table-of-contents ul li a {
  border-bottom: dotted 1px #be6fb5;
}

.rule-area {
  color: #333;
}

.rule-item {
  box-shadow: 5px 5px 5px #d5d5d57d;
  border-radius: 8px;
  padding: 25px 50px;
  background-color: #fcfcfc;
  background-image: radial-gradient(#eee 10%, transparent 20%), radial-gradient(#eee 10%, transparent 20%);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}
.rule-item+.rule-item {
  margin-top: 20px;
}
@media screen and (max-width: 767px) {
  .rule-item {
    padding: 15px 10px;
  }
}

.rule-item .item-wrap {
  background: rgb(255 255 255 / 65%);
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

.rule-item .item-wrap .text-block {
  display: inline-block;
  text-align: left;
}

.rule-item .item-ttl {
  font-size: 1.5rem;
  margin-bottom: 10px;
  text-align: center;
  /* font-family: "Murecho", sans-serif; */
  font-family: "Yusei Magic", sans-serif;
}
.rule-item .item-sub-ttl {
  font-size: 1.25rem;
  margin-bottom: 10px;
  text-align: center;
  /* font-family: "Murecho", sans-serif; */
  font-family: "Yusei Magic", sans-serif;
}

.rule-item .item-sub-ttl:not(:first-child) {
  margin-top: 1em;
}

.marker-pink {
  background: linear-gradient(transparent 50%, #f4cccc 50%);
}
.marker-orange {
  background: linear-gradient(transparent 50%, #fff2cc 50%);
}
.marker-blue {
  background: linear-gradient(transparent 50%, #cfe2f3 50%);
}
.marker-purple {
  background: linear-gradient(transparent 50%, #d9d2e9 50%);
}

.tBold {
  font-weight: bold !important;
}

.mt00 {
  margin-top: 0 !important;
}

.mt05em {
  margin-top: .5em;
}
.mb05em {
  margin-bottom: .5em;
}
.mt1em {
  margin-top: 1em;
}

.tL {
  text-align: left !important;
}
.tC {
  text-align: center !important;
}
.tR {
  text-align: right !important;
}

.tdU {
  text-decoration: underline;
}

.fs1_2 {
  font-size: 1.2em;
}
.fs1_5 {
  font-size: 1.5em;
}
.fs2 {
  font-size: 2em;
}

.dIb {
  display: inline-block !important;
}
.db {
  display: block !important;
}

.dF {
  display: flex;
}

.dFg20 {
  display: flex;
  gap: 20px;
}

.w40 {
  width: 40%;
}
.w50 {
  width: 50%;
}
.w60 {
  width: 60%;
}
.w80 {
  width: 80%;
}
.w100px {
  width: 100px;
}
.spContent {
  display: none;
}
@media screen and (max-width: 767px) {
  .spW100p {
    width: 100%;
  }
  .spContent {
    display: block;
  }
}

.mlrAuto {
  margin-left: auto;
  margin-right: auto;
}

.list-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: left;
}
.rule-item .item-wrap ul,
.rule-item .item-wrap ol {
  list-style: none;
  list-style-position: inside;
  padding-left: 0;
  margin-bottom: 0.5em;
}
.rule-item .item-wrap ul>li,
.rule-item .item-wrap ol>li {
  margin-top: 1em;
  position: relative;
  padding-left: 1em;
  text-indent: 0em;
}
.rule-item .item-wrap ul>li:before {
  content: "";
  position: absolute;
  top: .65em;
  left: 0;
  width: .8em;
  height: .8em;
  background-color: #fdc3b4;
  border-radius: 9999px;
}
.rule-item .item-wrap ol {
  list-style-type: decimal;
  list-style-position: outside;
  padding-left: 1em;
}
.rule-item .item-wrap ol>li {
  padding-left: 0;
}
.rule-item .item-wrap ol>li::marker {
  /* content: ""; */
  position: absolute;
  top: .4em;
  left: 0;
}

.rule-item .item-wrap dl {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.rule-item .item-wrap dl>dt {
  flex-basis: 35%;
}
.rule-item .item-wrap dl>dd {
  flex-basis: calc(65% - 1em);
}
@media screen and (max-width: 767px) {
  .rule-item .item-wrap dl {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }
  .rule-item .item-wrap dl>dt {
    margin-top: 0.7em;
    width: 100%;
    background: #d9d2e9;
    font-weight: bold;
  }
  .rule-item .item-wrap dl>dd {
    width: 100%;
  }
}

.rule-item .update-wrap {
  background: rgb(255 255 255 / 65%);
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}
.rule-item .update-block {
  overflow-y: scroll;
  height: 5em;
}
.rule-item .update-item {
  display: flex;
  flex-wrap: wrap;
  text-align: left;
  width: 80%;
  margin: 0 auto;
  border-bottom: 1px dotted #ccc;
}
.rule-item .update-item dt {
  width: 15%;
}
.rule-item .update-item dd {
  width: 80%;
}
@media screen and (max-width: 767px) {
  .rule-item .update-item {
    flex-direction: column;
    width: 100%;
  }
  .rule-item .update-item dt {
    width: 100%;
  }
  .rule-item .update-item dd {
    width: 100%;
  }
}

.live-area {
  margin: 0 auto;
  max-width: 1280px;
}

#channels {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: #333;
  margin-top: 30px;
}

.channel {
  width: calc(100% / 5 - 8px);
  text-align: center;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 5px 5px 5px #d5d5d57d;
  background: #fef4e8;
}

.channel a {
  text-decoration: none;
  color: #333;
}

.user-name {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 10px;
}
.user-name::before {
  content: "●";
  color: red;
  margin-right: 5px;
}

.user-img {
  width: 150px;
  margin: 0 auto;
}

/*  */
.gorori-area {
  max-width: 1280px;
  margin: 0 auto;
}

.gorori-area p {
  font-size: 1.5rem;
}