.avatar {
  background: url(../../../images/pages/page-bg_avatar.png) center/cover no-repeat
}
.avatar .container {
  width: 100%;
  margin: auto
}
.avatar .container__hdg {
  color: #fff;
  text-align: center;
  letter-spacing: 0;
  opacity: 0;
  transition: opacity .5s cubic-bezier(.39,.575,.565,1)
}
.avatar .container__figure .figure img.is-active,
.avatar .container__hdg.is-active {
  opacity: 1
}
.avatar .container__hdg .main,
.avatar .container__hdg .sub {
  display: block;
  line-height: 1
}
.avatar .container__hdg .main {
  font-family: "Montserrat Alternates",sans-serif;
  font-weight: 800;
  font-size: 3.4482758621vw
}
.avatar .container__hdg .sub {
  margin: .8571428571% 0 0;
  font-weight: 700;
  font-size: 1.4778325123vw
}
.avatar .container__figure {
  margin: 1.2315270936% 0 0;
  text-align: center
}
.avatar .container__figure .figure {
  position: relative;
  width: 8.6206896552%;
  margin: 0 auto
}
.avatar .container__figure .figure::before {
  display: block;
  width: 100%;
  padding-bottom: 326.4462809917%;
  content: ""
}
.avatar .container__figure .figure img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity .3s cubic-bezier(.39,.575,.565,1)
}
.avatar .container__setting {
  position: relative;
  margin: -24.6305418719% 0 0
}
.avatar .container__type {
  margin: 9.8522167488% 0 0;
  position: absolute;
  bottom: 0;
  left: 0
}
.avatar .container__type .type {
  display: flex;
  align-items: center;
  justify-content: center
}
.avatar .container__type .type__item {
  width: 9.3596059113%;
  padding: 0 .7389162562%
}
.avatar .container__type .type__item input {
  display: none
}
.avatar .container__type .type__item .img {
  position: relative
}
.avatar .container__type .type__item .img__inner {
  overflow: hidden;
  background: #fff;
  border-radius: 50%
}
.avatar .container__type .type__item .img::after,
.avatar .container__type .type__item .img::before {
  position: absolute;
  pointer-events: none;
  content: "";
  opacity: 0
}
.avatar .container__type .type__item .img::before {
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  border: 2px solid #237b31;
  border-radius: 50%
}
.avatar .container__type .type__item .img::after {
  right: 0;
  bottom: 0;
  width: 25%;
  padding-bottom: 25%;
  background: url(../../../images/pages/icon_check.svg) center/contain no-repeat
}
.avatar .container__type .type__item .img img,
.waiting-room .container__figure .figure img {
  width: 100%;
  height: auto
}
.avatar .container__type .type__item input:checked + .img::after,
.avatar .container__type .type__item input:checked + .img::before {
  opacity: 1
}
.avatar .container__user-name .user-name {
  width: 47.2906403941%;
  margin: 0 auto;
  background: rgba(255,255,255,.7);
  border: 2px solid #237b31;
  border-radius: 24px
}
.avatar .container__user-name .user-name__container {
  padding: 6.25%
}
.avatar .container__user-name .user-name__input {
  position: relative
}
.avatar .container__user-name .user-name__input::before {
  display: block;
  width: 100%;
  padding-bottom: 14.4578313253%;
  content: ""
}
.avatar .container__user-name .user-name__input .input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 2.380952381%;
  font-size: 16px;
  font-weight: 500;
  color: #237b31;
  background: #fff;
  border: 2px solid #237b31;
  border-radius: 10px
}
.avatar .container__user-name .user-name__input .input::-webkit-input-placeholder {
  font-size: 16px;
  color: rgba(35,123,49,.4)
}
.avatar .container__user-name .user-name__input .input:-ms-input-placeholder,
.avatar .container__user-name .user-name__input .input::-ms-input-placeholder {
  font-size: 16px;
  color: rgba(35,123,49,.4)
}
.avatar .container__user-name .user-name__input .input::placeholder {
  font-size: 16px;
  color: rgba(35,123,49,.4)
}
.avatar .container__user-name .user-name__input .error {
  position: absolute;
  bottom: -2px;
  left: 0;
  color: red;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  font-size: 1.2315270936vw
}
.avatar .container__user-name .user-name__caution {
  margin: 6.2111801242% 0 0;
  font-weight: 700;
  color: #237b31;
  text-align: center;
  font-size: 1.4778325123vw
}
.avatar .container__type,
.avatar .container__user-name {
  width: 100%;
  visibility: hidden;
  opacity: 0;
  transition: opacity .5s cubic-bezier(.39,.575,.565,1),visibility .5s cubic-bezier(.39,.575,.565,1)
}
.avatar .container__type.is-active,
.avatar .container__user-name.is-active {
  visibility: visible;
  opacity: 1
}
.avatar .container__button,
.caution {
  align-items: center;
  justify-content: center
}
.avatar .container__button {
  display: flex;
  margin: 1.8472906404% 0 0
}
.avatar .container__button .button {
  position: relative;
  width: 22.1674876847%;
  margin: 0 .7857142857%
}
.avatar .container__button .button::before {
  display: block;
  width: 100%;
  padding-bottom: 24.4444444444%;
  content: ""
}
.avatar.is-view.is-active {
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(.39,.575,.565,1) 2s,transform 1.2s cubic-bezier(.39,.575,.565,1) 2s,-webkit-transform 1.2s cubic-bezier(.39,.575,.565,1) 2s;
  -webkit-transform: scale(1.2);
  transform: scale(1.2)
}
.caution {
  z-index: 10000;
  background: #fff
}
.caution .container {
  color: #237b31;
  text-align: center
}
.caution .container__ttl {
  font-family: "Montserrat Alternates",sans-serif;
  font-size: 28px;
  font-weight: 800
}
.caution .container__text {
  margin: 15px 0 0;
  font-size: 16px;
  font-weight: 700
}
.caution .container__button {
  position: relative;
  width: 180px;
  height: 40px;
  margin: 35px auto 0
}
.caution .container__button .c-button {
  font-size: 14px
}
.openning {
  position: relative
}
.openning .video,
.openning::before {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}
.openning::before {
  content: "";
  background: rgba(0,0,0,.7);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px)
}
.openning .video {
  z-index: -1;
  line-height: 0
}
.openning .video video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover
}
.openning .logo {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 14.7783251232%;
  margin: 0 2.9556650246% 2.9556650246% 0
}
.openning .logo::before,
.openning .message__button::before {
  display: block;
  width: 100%;
  padding-bottom: 16.7664670659%;
  content: ""
}
.openning .logo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}
.openning .message {
  position: relative;
  width: 100%;
  margin: auto
}
.openning .message__container {
  color: #fff;
  text-align: center
}
.openning .message__hdg {
  font-family: "Montserrat Alternates",sans-serif;
  font-weight: 800;
  letter-spacing: 0;
  font-size: 3.4482758621vw
}
.openning .message__text {
  margin: 1.4778325123% 0 0;
  font-weight: 700;
  line-height: 2;
  font-size: 1.4778325123vw
}
.openning .message__button {
  position: relative;
  width: 22.1674876847%;
  margin: 3.078817734% auto 0
}
.openning .message__button::before {
  padding-bottom: 24.4444444444%
}
.openning.is-active::before {
  background: 0 0;
  transition-timing-function: cubic-bezier(.39,.575,.565,1);
  transition-duration: .3s;
  transition-property: background-color backdrop-filter;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0)
}
.openning.is-active .logo,
.openning.is-active .message,
.page {
  opacity: 0;
  transition: opacity .3s cubic-bezier(.39,.575,.565,1)
}
.page {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  transition: visibility .5s cubic-bezier(.39,.575,.565,1),opacity .5s cubic-bezier(.39,.575,.565,1)
}
.page.is-view {
  overflow: auto;
  pointer-events: auto;
  visibility: visible;
  opacity: 1
}
.pages-container {
  width: 100vw;
  max-width: 1920px;
  max-height: 1080px;
  margin: auto;
  overflow: hidden
}
.pages-container,
.waiting-room {
  position: relative
}
.waiting-room .container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden
}
.waiting-room .container__bg,
.waiting-room .container__bg::before {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%)
}
.waiting-room .container__bg {
  background: url(../../../../assets/images/pages/page-bg_waiting-room.png) center/100% auto no-repeat;
  width: 926px;
  height: 428px
}
.waiting-room .container__bg::before {
  width: 300px;
  height: 170px;
  margin: -32px 0 0;
  content: "";
  background: url(../../../../assets/images/pages/announce_bg.jpg) center/cover no-repeat
}
.waiting-room .container__announce,
.waiting-room .container__figure {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}
.waiting-room .container__figure {
  height: 170px;
  z-index: 2;
  width: 170px;
  margin: -117px 0 0
}
.waiting-room .container__announce .announce__icon img,
.waiting-room .container__figure .figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}
.waiting-room .container__figure .figure--active,
.waiting-room .container__figure.is-active .figure--default {
  opacity: 0
}
.waiting-room .container__figure.is-active .figure--active {
  opacity: 1
}
.waiting-room .container__announce {
  z-index: 3;
  width: 284px;
  margin: 0 0 -.3571428571%
}
.waiting-room .container__announce .announce {
  display: flex;
  align-items: center;
  visibility: hidden;
  opacity: 0
}
.waiting-room .container__announce .announce__icon {
  position: relative;
  width: 24px
}
.waiting-room .container__announce .announce__icon::before {
  display: block;
  width: 100%;
  padding-bottom: 100%;
  content: ""
}
.waiting-room .container__announce .announce__body {
  flex: 1;
  padding: 1.6574585635% 3.3149171271%;
  margin: 0 0 0 4px;
  background: rgba(255,255,255,.8);
  border: 1px solid #237b31;
  border-radius: 100px
}
.waiting-room .container__announce .announce__text {
  font-size: 10px;
  font-weight: 700;
  color: #237b31
}
.waiting-room .container__announce .announce.is-active {
  visibility: visible;
  opacity: 1
}
.waiting-room .container__gallery {
  position: absolute;
  bottom: -20px;
  left: 0;
  z-index: 3;
  width: 100%;
  pointer-events: none
}
.waiting-room .container__gallery img,
.waiting-room .container__user-comment .user-comment__icon img {
  width: 100%;
  height: auto
}
.waiting-room .container__user-comment {
  position: relative;
  z-index: 4;
  display: flex;
  width: 100%;
  height: 100%;
  pointer-events: none
}
.waiting-room .container__user-comment::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-bottom: 27.5%;
  content: "";
  background: linear-gradient(180deg,transparent 0,rgba(0,0,0,.4) 100%)
}
.waiting-room .container__user-comment .user-comment-wrap {
  position: relative;
  width: 100%;
  max-width: 812px;
  height: 100%;
  margin: 0 auto
}
.waiting-room .container__user-comment .user-comment {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  width: 19.8275862069%;
  color: #fff;
  letter-spacing: 0;
  opacity: 0;
  transition: opacity .4s cubic-bezier(.39,.575,.565,1),transform .4s cubic-bezier(.175,.885,.32,1.275),-webkit-transform .4s cubic-bezier(.175,.885,.32,1.275);
  -webkit-transform: translate3d(0,15px,0);
  transform: translate3d(0,15px,0)
}
.waiting-room .container__user-comment .user-comment__icon {
  width: 15%
}
.waiting-room .container__user-comment .user-comment__icon .icon {
  display: inline-block;
  width: 100%;
  line-height: 1
}
.waiting-room .container__user-comment .user-comment__body {
  width: 83.75%;
  margin: 0 0 0 1.25%
}
.waiting-room .container__user-comment .user-comment__name {
  font-weight: 500;
  font-size: .9852216749vw
}
.waiting-room .container__user-comment .user-comment__text {
  margin: 1.4925373134% 0 0;
  line-height: 1.2;
  background: rgba(0,0,0,.3);
  border-radius: 100px;
  font-size: 1.2315270936vw
}
.waiting-room .container__user-comment .user-comment__text-inner {
  padding: 2.2388059701% 5.9701492537%;
  overflow-wrap: break-word
}
.waiting-room .container__user-comment .user-comment--1 {
  margin: 0 0 17.5% -46.8571428571%
}
.waiting-room .container__user-comment .user-comment--2 {
  margin: 0 0 10.3571428571% -38.5714285714%
}
.waiting-room .container__user-comment .user-comment--3 {
  margin: 0 0 2.5% -42.1428571429%
}
.waiting-room .container__user-comment .user-comment--4 {
  margin: 0 0 12.8571428571% -12.8571428571%
}
.waiting-room .container__user-comment .user-comment--5 {
  margin: 0 0 3.5714285714% -12.1428571429%
}
.waiting-room .container__user-comment .user-comment--6 {
  margin: 0 0 17.8571428571% 24.6428571429%
}
.waiting-room .container__user-comment .user-comment--7 {
  margin: 0 0 8.9285714286% 12.8571428571%
}
.waiting-room .container__user-comment .user-comment.is-active {
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0)
}
.waiting-room .container__comment {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 5;
  width: 29.5566502463%;
  margin: 0 2.5714285714% 2.1428571429% 0
}
.waiting-room .container__comment .comment {
  position: relative;
  display: flex
}
.waiting-room .container__comment .comment__error {
  position: absolute;
  bottom: 0;
  left: 5px;
  margin: 0 0 -6.25%;
  color: red;
  font-size: 1.2315270936vw
}
.waiting-room .container__comment .comment__input {
  position: relative;
  flex: 1
}
.waiting-room .container__comment .comment__input .counter {
  position: absolute;
  right: 8px;
  bottom: 8px;
  color: rgba(35,123,49,.4);
  font-size: 1.2315270936vw
}
.waiting-room .container__comment .comment__input .input {
  width: 100%;
  height: 100%;
  padding: 0 23.2142857143% 0 2.8571428571%;
  font-size: 16px;
  color: #237b31;
  background: #fff;
  border: 1px solid #237b31;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px
}
.waiting-room .container__comment .comment__input .input::-webkit-input-placeholder {
  color: rgba(35,123,49,.4)
}
.waiting-room .container__comment .comment__input .input:-ms-input-placeholder,
.waiting-room .container__comment .comment__input .input::-ms-input-placeholder {
  color: rgba(35,123,49,.4)
}
.waiting-room .container__comment .comment__input .input::placeholder {
  color: rgba(35,123,49,.4)
}
.waiting-room .container__comment .comment__button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23.3333333333%;
  font-weight: 700;
  color: rgba(255,255,255,.4);
  background: #237b31;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  font-size: 1.8472906404vw
}
.waiting-room .container__comment .comment__button.is-active {
  color: #fff
}
.waiting-room .container__comment .comment__button::before {
  display: block;
  width: 100%;
  padding-bottom: 71.4285714286%;
  content: ""
}
.waiting-room .container__comment .comment__button-text {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%
}
.waiting-room .modal {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  display: flex;
  width: 100%;
  height: 100%;
  visibility: hidden;
  background: rgba(0,0,0,.6);
  opacity: 0
}
.waiting-room .modal__container {
  width: 52.7093596059%;
  margin: auto;
  background: #fff;
  border: 2px solid #237b31;
  border-radius: 24px
}
.waiting-room .modal__inner {
  padding: 9.3457943925%;
  color: #237b31;
  text-align: center
}
.waiting-room .modal__hdg {
  font-family: "Montserrat Alternates",sans-serif;
  font-weight: 800;
  letter-spacing: 0;
  font-size: 2.9556650246vw
}
.waiting-room .modal__text {
  margin: 2.9069767442% 0 0;
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0;
  font-size: 1.4778325123vw
}
.waiting-room .modal__button {
  margin: 8.7209302326% 0 0
}
.waiting-room .modal__button .button {
  position: relative;
  width: 53.7313432836%;
  margin: 0 auto
}
.waiting-room .modal__button .button::before {
  display: block;
  width: 100%;
  padding-bottom: 24.4444444444%;
  content: ""
}
.waiting-room .modal.is-active {
  visibility: visible;
  opacity: 1
}
@media (min-width:927px) {
  .avatar .container__hdg .main {
    font-size: 3.1428571429vw
  }
  .avatar .container__hdg .sub,
  .avatar .container__user-name .user-name__input .input {
    font-size: 1.1428571429vw
  }
  .avatar .container__figure {
    margin: 3.1428571429% 0 0
  }
  .avatar .container__figure .figure {
    width: 8.6428571429%
  }
  .avatar .container__setting {
    margin: -8.9285714286% 0 0
  }
  .avatar .container__type {
    margin: 0
  }
  .avatar .container__type .type__item {
    width: 8.2857142857%;
    padding: 0 .7142857143%
  }
  .avatar .container__user-name .user-name {
    width: 27.4285714286%
  }
  .avatar .container__user-name .user-name__input .input::-webkit-input-placeholder {
    font-size: 1.1428571429vw
  }
  .avatar .container__user-name .user-name__input .input:-ms-input-placeholder,
  .avatar .container__user-name .user-name__input .input::-ms-input-placeholder {
    font-size: 1.1428571429vw
  }
  .avatar .container__user-name .user-name__input .input::placeholder {
    font-size: 1.1428571429vw
  }
  .avatar .container__user-name .user-name__input .error {
    font-size: .7857142857vw
  }
  .avatar .container__user-name .user-name__caution {
    font-size: .8571428571vw
  }
  .avatar .container__button {
    margin: 2.5714285714% 0 0
  }
  .avatar .container__button .button {
    width: 12.8571428571%
  }
  .openning .logo {
    width: 11.9285714286%;
    margin: 0 2.5714285714% 2.5714285714% 0
  }
  .openning .message__hdg {
    font-size: 3.1428571429vw
  }
  .openning .message__text {
    margin: 2% 0 0;
    font-size: 1.1428571429vw
  }
  .openning .message__button {
    width: 12.8571428571%;
    margin: 3.9285714286% auto 0
  }
  .waiting-room .container__bg {
    width: 1920px;
    height: 1080px
  }
  .waiting-room .container__bg::before {
    width: 620px;
    height: 348px;
    margin: -67px 0 0
  }
  .waiting-room .container__figure {
    width: 300px;
    height: 300px;
    margin: -194px 0 0
  }
  .waiting-room .container__announce {
    width: 580px
  }
  .waiting-room .container__announce .announce__icon {
    width: 40px
  }
  .waiting-room .container__announce .announce__body {
    margin: 0 0 0 8px
  }
  .waiting-room .container__announce .announce__text {
    font-size: 16px
  }
  .waiting-room .container__gallery {
    bottom: 0
  }
  .waiting-room .container__user-comment .user-comment-wrap {
    max-width: 1920px
  }
  .waiting-room .container__user-comment .user-comment {
    width: 22.8571428571%
  }
  .waiting-room .container__user-comment .user-comment__name {
    font-size: .8571428571vw
  }
  .waiting-room .container__user-comment .user-comment__text {
    font-size: 1.1428571429vw
  }
  .waiting-room .container__comment {
    width: 24%
  }
  .waiting-room .container__comment .comment__error {
    margin: 0 0 -5.9523809524%;
    font-size: .7142857143vw
  }
  .waiting-room .container__comment .comment__input .counter {
    font-size: .7142857143vw
  }
  .waiting-room .container__comment .comment__input .input {
    padding: 0 16.0714285714% 0 2.8571428571%
  }
  .waiting-room .container__comment .comment__button {
    width: 16.6666666667%;
    font-size: 1.1428571429vw
  }
  .waiting-room .container__comment .comment__button::before {
    padding-bottom: 82.7586206897%
  }
  .waiting-room .modal__container {
    width: 30.5714285714%
  }
  .waiting-room .modal__hdg {
    font-size: 2vw
  }
  .waiting-room .modal__text {
    font-size: 1vw
  }
}