.caution {
  z-index: 100;
  align-items: center;
  justify-content: center;
  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
}
.main {
  width: 100%;
  max-width: 812px;
  margin: auto
}
.main__container,
.main__stage {
  position: relative;
  width: 100%;
  padding: 0 15.0246305419%
}
.main__stage {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%
}
.main__stage .stage {
  position: relative
}
.main__stage .stage__iframe {
  position: relative;
  width: 100%
}
.main__stage .stage__iframe::before,
.main__stage .stage__tag::before {
  display: block;
  width: 100%;
  padding-bottom: 56.3247863248%;
  content: ""
}
.main__stage .stage__iframe iframe {
  border: 1px solid #237b31
}
.main__stage .stage__tag {
  position: absolute;
  top: 0;
  right: 1px;
  width: 3.4188034188%;
  -webkit-transform: translateX(100%);
  transform: translateX(100%)
}
.main__stage .stage__tag::before {
  padding-bottom: 350%
}
.main__stage .stage__iframe iframe,
.main__stage .stage__tag img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}
.main__stage .stage__timeline {
  position: absolute;
  top: 0;
  right: 0;
  width: 28.3450704225%;
  margin: 1.4084507042% 1.4084507042% 0 0
}
.main__stage .stage__timeline .timeline__comment .user-comment {
  display: flex;
  color: #fff;
  letter-spacing: 0
}
.main__stage .stage__timeline .timeline__comment .user-comment__icon {
  width: 14.9068322981%
}
.main__stage .stage__timeline .timeline__comment .user-comment__icon .icon {
  display: inline-block;
  line-height: 1
}
.main__stage .stage__timeline .timeline__comment .user-comment__icon img,
.modal__image img {
  width: 100%;
  height: auto
}
.main__stage .stage__timeline .timeline__comment .user-comment__body {
  width: 85.4838709677%;
  margin: 0 0 0 1.6129032258%
}
.main__stage .stage__timeline .timeline__comment .user-comment__name {
  font-weight: 500;
  font-size: .9852216749vw
}
.main__stage .stage__timeline .timeline__comment .user-comment__text {
  margin: 1.6129032258% 0 0;
  line-height: 1.2;
  background: rgba(0,0,0,.3);
  border-radius: 100px;
  font-size: 1.2315270936vw
}
.main__stage .stage__timeline .timeline__comment .user-comment__text-inner {
  padding: 5.9701492537% 11.9402985075%;
  overflow-wrap: break-word
}
.main__stage .stage__timeline .timeline__comment .user-comment + .user-comment {
  margin: 3.2258064516% 0 0
}
.main__stage .stage__timeline .timeline__comment .user-comment:nth-child(2) {
  opacity: .3
}
.main__stage .stage__timeline .timeline__comment .user-comment:nth-child(3),
.main__stage .stage__timeline .timeline__comment .user-comment:nth-child(4) {
  opacity: 0
}
.main__utility {
  pointer-events: none
}
.main__utility .utility {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 0 3.5211267606%
}
.main__utility .utility::before {
  display: block;
  width: 100%;
  padding-bottom: 56.3247863248%;
  content: ""
}
.main__utility .utility__announce {
  width: 50%;
  pointer-events: auto
}
.main__utility .utility__announce .announce {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 2.8169014085%;
  visibility: hidden;
  border-bottom: 1px solid #237b31;
  border-left: 1px solid #237b31;
  border-bottom-left-radius: 10px;
  opacity: 0
}
.main__utility .utility__announce .announce__head {
  position: relative;
  width: 8.9887640449%;
  margin: 0 2.9962546816% 0 0
}
.main__utility .utility__announce .announce__head::before {
  display: block;
  width: 100%;
  padding-bottom: 166.6666666667%;
  content: ""
}
.main__utility .utility__announce .announce__head,
.main__utility .utility__announce .announce__icon {
  display: flex;
  align-items: center;
  justify-content: center
}
.main__utility .utility__announce .announce__icon .icon {
  position: relative;
  width: 100%
}
.main__utility .utility__announce .announce__icon .icon::before,
.main__utility .utility__reaction .reaction__body .reaction-list__button::before,
.main__utility .utility__twitter::before {
  display: block;
  width: 100%;
  padding-bottom: 100%;
  content: ""
}
.main__utility .utility__announce .announce__icon,
.main__utility .utility__announce .announce__icon .icon img,
.main__utility .utility__reaction .reaction__body .reaction-list__button img,
.main__utility .utility__reaction .reaction__head img,
.main__utility .utility__twitter .twitter img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}
.main__utility .utility__announce .announce__body {
  flex: 1
}
.main__utility .utility__announce .announce__text {
  font-weight: 700;
  line-height: 1.25;
  color: #237b31;
  font-size: 1.4778325123vw
}
.main__utility .utility__announce .announce.is-active {
  visibility: visible;
  opacity: 1
}
.main__utility .utility__reaction {
  position: absolute;
  top: 0;
  left: 100%;
  width: 9.8591549296%;
  pointer-events: auto
}
.main__utility .utility__reaction .reaction__head {
  position: relative;
  width: 100%
}
.main__utility .utility__reaction .reaction__head::before {
  display: block;
  width: 100%;
  padding-bottom: 28.5714285714%;
  content: ""
}
.main__utility .utility__reaction .reaction__body {
  background: #fff;
  border-top: 1px solid #237b31;
  border-right: 1px solid #237b31;
  border-bottom: 1px solid #237b31;
  border-bottom-right-radius: 10px
}
.main__utility .utility__reaction .reaction__body .reaction-list {
  width: 100%;
  height: 100%;
  padding: 5.3571428571% 0
}
.main__utility .utility__reaction .reaction__body .reaction-list__item {
  width: 100%;
  padding: 7.1428571429% 14.2857142857%;
  line-height: 0
}
.main__utility .utility__reaction .reaction__body .reaction-list__button {
  position: relative;
  width: 100%
}
.main__utility .utility__reaction .reaction__body .reaction-list__button:active {
  -webkit-transform: scale(1.15);
  transform: scale(1.15)
}
.main__utility .utility__comment {
  width: 50%;
  pointer-events: auto
}
.main__utility .utility__comment .comment {
  position: relative;
  display: flex;
  height: 100%
}
.main__utility .utility__comment .comment__error {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0 0 -5.2083333333% 2.0833333333%;
  color: red;
  font-size: 1.2315270936vw
}
.main__utility .utility__comment .comment__input {
  position: relative;
  flex: 1
}
.main__utility .utility__comment .comment__input .counter {
  position: absolute;
  right: 8px;
  bottom: 8px;
  color: rgba(35,123,49,.4);
  font-size: 1.2315270936vw
}
.main__utility .utility__comment .comment__input .input {
  width: 100%;
  height: 100%;
  padding: 0 23.2142857143% 0 2.8571428571%;
  font-size: 16px;
  color: #237b31;
  border-bottom: 1px solid #237b31;
  border-left: 1px solid #237b31
}
.main__utility .utility__comment .comment__input .input::-webkit-input-placeholder {
  color: rgba(35,123,49,.4)
}
.main__utility .utility__comment .comment__input .input:-ms-input-placeholder,
.main__utility .utility__comment .comment__input .input::-ms-input-placeholder {
  color: rgba(35,123,49,.4)
}
.main__utility .utility__comment .comment__input .input::placeholder {
  color: rgba(35,123,49,.4)
}
.main__utility .utility__comment .comment__button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19.7183098592%;
  font-weight: 700;
  color: rgba(255,255,255,.4);
  background: #237b31;
  border-bottom-right-radius: 10px;
  font-size: 1.8472906404vw
}
.main__utility .utility__comment .comment__button.is-active {
  color: #fff
}
.main__utility .utility__comment .comment__button::before {
  display: block;
  width: 100%;
  padding-bottom: 71.4285714286%;
  content: ""
}
.main__utility .utility__comment .comment__button-text {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%
}
.main__utility .utility__twitter {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 7.0422535211%;
  margin: 0 0 3.5211267606% -9.1549295775%;
  background: #fff;
  border: 1px solid #237b31;
  border-radius: 50%
}
.main__utility .utility__twitter .twitter {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%)
}
.main__utility .utility__twitter .twitter::before,
.modal__button .button::before {
  display: block;
  width: 100%;
  padding-bottom: 80%;
  content: ""
}
.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
}
.modal__container {
  width: 37.4384236453%;
  margin: auto;
  background: #fff;
  border: 2px solid #237b31;
  border-radius: 24px
}
.modal__inner {
  padding: 9.3457943925%;
  color: #237b31;
  text-align: center
}
.modal__hdg {
  font-family: "Montserrat Alternates",sans-serif;
  font-weight: 800;
  letter-spacing: 0;
  font-size: 3.4482758621vw
}
.modal__text {
  margin: 2.9069767442% 0 0;
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0;
  font-size: 1.724137931vw
}
.modal__image {
  margin: 2.994011976% 0 0
}
.modal__button {
  margin: 8.7209302326% 0 0
}
.modal__button .button {
  position: relative;
  width: 53.7313432836%;
  margin: 0 auto
}
.modal__button .button::before {
  padding-bottom: 24.4444444444%
}
.modal.is-active,
.page.is-view {
  visibility: visible;
  opacity: 1
}
.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  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
}
.page,
.pages-container {
  display: flex
}
@media (min-width:927px) {
  .main {
    max-width: 1400px
  }
  .main__container {
    padding: 0 8.2142857143%
  }
  .main__stage {
    position: static;
    padding: 0
  }
  .main__stage .stage__timeline {
    width: 21.1965811966%;
    margin: 2.0512820513% 2.0512820513% 0 0
  }
  .main__stage .stage__timeline .timeline__comment .user-comment__icon {
    width: 12.9032258065%
  }
  .main__stage .stage__timeline .timeline__comment .user-comment__name {
    font-size: .7142857143vw
  }
  .main__stage .stage__timeline .timeline__comment .user-comment__text {
    font-size: .8571428571vw
  }
  .main__stage .stage__timeline .timeline__comment .user-comment__text-inner {
    padding: 2.4193548387% 6.4516129032%
  }
  .main__stage .stage__timeline .timeline__comment .user-comment:nth-child(2),
  .main__stage .stage__timeline .timeline__comment .user-comment:nth-child(3) {
    opacity: 1
  }
  .main__stage .stage__timeline .timeline__comment .user-comment:nth-child(4) {
    opacity: .3
  }
  .main__utility .utility {
    align-items: stretch;
    padding: 0
  }
  .main__utility .utility::before {
    content: none
  }
  .main__utility .utility__announce {
    width: 30.7692307692%
  }
  .main__utility .utility__announce .announce {
    height: auto;
    padding: 0 2.2222222222%
  }
  .main__utility .utility__announce .announce__head {
    width: 6.9970845481%;
    margin: 0 2.332361516% 0 0
  }
  .main__utility .utility__announce .announce__head::before {
    padding-bottom: 195.8333333333%
  }
  .main__utility .utility__announce .announce__text {
    font-size: .8571428571vw
  }
  .main__utility .utility__reaction {
    position: static;
    flex: 1;
    width: auto;
    margin: -.6837606838% 0 0
  }
  .main__utility .utility__reaction .reaction {
    display: flex
  }
  .main__utility .utility__reaction .reaction__head {
    width: 5%
  }
  .main__utility .utility__reaction .reaction__head::before {
    padding-bottom: 366.6666666667%
  }
  .main__utility .utility__reaction .reaction__body {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    border-top-right-radius: 10px
  }
  .main__utility .utility__reaction .reaction__body .reaction-list {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0
  }
  .main__utility .utility__reaction .reaction__body .reaction-list__item {
    display: inline-block;
    width: 15.7894736842%;
    padding: 0 1.7543859649%
  }
  .main__utility .utility__reaction .reaction__body .reaction-list__button {
    transition: transform .25s cubic-bezier(.175,.885,.32,1.275);
    transition: transform .25s cubic-bezier(.175,.885,.32,1.275),-webkit-transform .25s cubic-bezier(.175,.885,.32,1.275)
  }
  .main__utility .utility__reaction .reaction__body .reaction-list__button:hover {
    -webkit-transform: scale(1.15);
    transform: scale(1.15)
  }
  .main__utility .utility__comment,
  .main__utility .utility__twitter {
    width: 31.6239316239%;
    -webkit-transform: none;
    transform: none
  }
  .main__utility .utility__comment .comment {
    height: auto
  }
  .main__utility .utility__comment .comment__error {
    margin: 0 0 -5.9523809524% 1.4880952381%;
    font-size: .7142857143vw
  }
  .main__utility .utility__comment .comment__input .counter {
    font-size: .7142857143vw
  }
  .main__utility .utility__comment .comment__input .input {
    padding: 0 16.0714285714% 0 2.8571428571%;
    border-left: none
  }
  .main__utility .utility__comment .comment__button {
    width: 15.1351351351%;
    font-size: 1.1428571429vw
  }
  .main__utility .utility__comment .comment__button::before {
    padding-bottom: 85.7142857143%
  }
  .main__utility .utility__twitter {
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
    width: 3.4188034188%;
    margin: .3418803419% -4.4444444444% 0 0
  }
  .modal__container {
    width: 30.5714285714%
  }
  .modal__hdg {
    font-size: 2vw
  }
  .modal__text {
    font-size: 1vw
  }
}