@charset "UTF-8";

.result .content-header .period {
  background-image: url(../images/period_result@desktop.png);
}

.result .prize.winner {
  max-width: none;
  padding: 2rem 32px;
}

.result .prize.winner .prize-heading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: calc(1rem - 4px) 0 calc(1rem - 2px);
  border-width: 4px 0;
  font-size: 1.5rem;
  line-height: 2rem;
}

.result .prize.winner .prize-heading::before {
  top: -2.1875rem;
  width: 3.125rem;
  height: 2.1875rem;
}

.result .prize.winner .prize-category {
  font-size: 1.125rem;
}

.result .prize.winner .prize-image {
  max-width: 640px;
  margin: 2rem auto;
}

.result .prize.winner .meta {
  flex-flow: wrap;
  justify-content: center;
}

.result .prize.winner .bodytext {
  max-width: 640px;
  margin: 2em auto 0;
}

.result .prize-more .bodytext {
  max-width: 640px;
  margin: 2rem auto 0;
}

.result #message .balloon>.text>p {
  display: flex;
  flex-flow: column;
  align-items: center;
}

.result #message .balloon>.text>p:not(:first-child) {
  margin-top: 1rem;
}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
   -768px
   mobile, tablet
   @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

@media screen and (max-width: 768px) {

  .result .content-header .period {
    background-image: none;
  }

  .result .prize.winner {
    padding: 2rem 16px;
  }

  .result .prize.winner .prize-heading {
    display: block;
  }

  .result .prize.winner .meta {
    margin-top: -1rem;
  }

  .result .prize.winner .meta>.label,
  .result .prize.winner .meta>.title {
    margin: 1rem 4px 0;
  }

  .result #message .balloon>.text>p {
    display: block;
  }

}