@charset "UTF-8";
@font-face {
  font-family: Splatoon1;
  src: url(/font/ab3ec448c2439eaed33fcf7f31b70b33.woff2) format("woff2"), url(/font/8ef269f47a5843f5b280f318f31762e4.woff) format("woff");
}

@font-face {
  font-family: Splatoon1;
  src: url(/font/0e12b13c359d4803021dc4e17cecc311.woff2) format("woff2");
}

@font-face {
  font-family: Splatoon2;
  src: url(/font/da3c7139972a0e4e47dd8de4cacea984.woff2) format("woff2");
}

@font-face {
  font-family: Splatoon2;
  src: url(/font/eb82d017016045bf998cade4dac1ec22.woff2) format("woff2");
}

#background {
  position: relative;
  height: 100vh;
  width: 100vw;
}

#background:before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  background: -webkit-gradient(linear, left bottom, left top, from(#343434), to(#494949));
  background: linear-gradient(to top, #343434, #494949);
}

#content {
  margin: 0 auto;
  max-width: 480px;
  -webkit-box-shadow: 0px 0px 20px rgba(20, 20, 20, 0.3);
  box-shadow: 0px 0px 20px rgba(20, 20, 20, 0.3);
  overflow: hidden;
  font-family: 'Splatoon2';
}

.button {
  display: inline-block;
  padding: 8px 60px;
  background: #777 url(/img/bgpattern003.png) 50%;
  background-size: 160px 160px;
  -webkit-mask-image: url(/img/buttonmask001.svg);
  mask-image: url(/img/buttonmask001.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: left top;
  mask-position: left top;
  border-right: solid 1px black;
  border-bottom: solid 1px black;
  font-size: 1.6rem;
  color: white;
  text-shadow: 2px 2px black;
  margin-bottom: 80px;
  cursor: pointer;
  -webkit-transition: 0.15s;
  transition: 0.15s;
}

.button:active {
  -webkit-transform: translateY(3px);
  -ms-transform: translateY(3px);
  transform: translateY(3px);
}

#mainpage .logo-img {
  background-image: url(/img/logo.png);
  background-size: contain;
  background-repeat: no-repeat;
}

#mainpage .title-widget {
  background: #191919 url(/img/bgpattern001.png) top;
  background-size: 240px 240px;
  padding-top: 50px;
  padding-bottom: 40px;
  width: 100%;
}

#mainpage .title-widget .logo-img {
  margin: 0 auto;
  width: 50%;
  height: 0;
  /* (画像の高さ / 画像の横幅) × 100 */
  padding-top: 23.12925%;
}

#mainpage .subspe-widget {
  position: relative;
  text-align: center;
  background: #5D0BC3 url(/img/bgpattern002.png) left top;
  background-size: 150px 150px;
  width: 100%;
  /* Title */
  /* Plate */
}

#mainpage .subspe-widget div {
  position: relative;
}

#mainpage .subspe-widget:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  margin-top: -40px;
  background: #5D0BC3 url(/img/bgpattern002.png) left top 40px;
  background-size: 150px 150px;
  -webkit-mask-image: url(/img/bordermask001.png);
  mask-image: url(/img/bordermask001.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  height: 40px;
  width: 100%;
}

#mainpage .subspe-widget .title {
  -webkit-transform: rotate(-2.5deg);
  -ms-transform: rotate(-2.5deg);
  transform: rotate(-2.5deg);
  padding-top: 40px;
  margin-bottom: 50px;
  color: white;
  text-shadow: 2px 2px black;
  font-size: 2.2rem;
  font-family: 'Splatoon1';
  text-align: center;
  z-index: 10;
}

#mainpage .subspe-widget .title em {
  font-style: normal;
  color: #F9B60C;
}

#mainpage .subspe-widget .image-section {
  width: 100%;
  /* インク */
}

#mainpage .subspe-widget .image-section:before {
  position: absolute;
  content: "";
  width: 80%;
  height: 80%;
  top: -23%;
  right: -30%;
  background: #23B700;
  -webkit-mask-image: url(/img/inkmask001.svg);
  mask-image: url(/img/inkmask001.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

#mainpage .subspe-widget .image-section:after {
  position: absolute;
  content: "";
  width: 80%;
  height: 80%;
  bottom: -27%;
  left: 0%;
  background: #FF00B2;
  -webkit-mask-image: url(/img/inkmask002.svg);
  mask-image: url(/img/inkmask002.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

#mainpage .subspe-widget .plate {
  position: relative;
  -webkit-transform: rotate(0.8deg);
  -ms-transform: rotate(0.8deg);
  transform: rotate(0.8deg);
  background: #777 50%;
  background-image: url(/img/bgpattern003.png), url(/img/bgpattern004.png);
  background-size: 160px 160px, 50px 50px;
  width: 70%;
  border-radius: 40px;
  margin: 0px auto;
  padding: 10px 20px;
  margin-bottom: 40px;
  -webkit-mask-image: url(/img/platemask001.png);
  mask-image: url(/img/platemask001.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 500px 800px;
  mask-size: 500px 800px;
  -webkit-mask-position: center top;
  mask-position: center top;
  z-index: 10;
}

#mainpage .subspe-widget .plate .subspe-image {
  margin: 0 auto;
  width: 100%;
  height: 0;
  /* (画像の高さ / 画像の横幅) × 70 */
  padding-top: 80.4%;
  background-image: url(/img/subspe.png);
  background-size: contain;
  background-repeat: no-repeat;
}

#mainpage .subspe-widget .button {
  margin-bottom: 90px;
}

#mainpage .subspe-widget .footer {
  padding-bottom: 30px;
  color: #eee;
  text-shadow: 1px 1px #000;
}

#mainpage .subspe-widget .footer .link {
  text-decoration: underline;
  margin-bottom: 1rem;
  cursor: pointer;
}

#mainpage .subspe-widget .footer .link a {
  color: #eee;
}

#mainpage .subspe-widget .footer .link a:visited {
  color: #eee;
}

#aboutpage {
  background: #191919 url(/img/bgpattern001.png) top;
  background-size: 240px 240px;
  color: #ccc;
  padding: 60px 0px;
  text-align: center;
}

#aboutpage .box {
  text-align: left;
  width: 80%;
  margin: 0 auto;
  margin-bottom: 80px;
}

#aboutpage .box h2 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

#aboutpage .box p {
  margin-bottom: 0.5rem;
  line-height: 1.5rem;
}

#aboutpage a {
  color: #eee;
}

#aboutpage a:visited {
  color: #eee;
}

#subspe-selectpage {
  background: #191919 url(/img/bgpattern001.png) top;
  background-size: 240px 240px;
  min-height: 100vh;
}

#subspe-selectpage .question {
  padding-top: 70px;
  margin-bottom: 40px;
  width: 100%;
  text-align: center;
}

#subspe-selectpage .question h2 {
  -webkit-transform: rotate(-2.5deg);
  -ms-transform: rotate(-2.5deg);
  transform: rotate(-2.5deg);
  color: white;
  text-shadow: 2px 2px black;
  line-height: 3rem;
  font-size: 1.8rem;
  font-family: 'Splatoon1';
  margin-bottom: 10px;
}

#subspe-selectpage .question .image img {
  width: 40%;
}

#subspe-selectpage .question .logo-img {
  margin: 0 auto;
  width: 50%;
  height: 0;
  /* (画像の高さ / 画像の横幅) × 100 */
  padding-top: 23.12925%;
}

#subspe-selectpage .label {
  -webkit-transform: rotate(-4deg);
  -ms-transform: rotate(-4deg);
  transform: rotate(-4deg);
  margin-bottom: 50px;
}

#subspe-selectpage .label h3 {
  display: inline-block;
  padding: 10px;
  padding-right: 50px;
  padding-left: 40px;
  -webkit-mask-image: url(/img/labelmask001.png);
  mask-image: url(/img/labelmask001.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center right;
  mask-position: center right;
  -webkit-mask-size: cover;
  mask-size: cover;
  background: #cdf523;
  font-size: 1.5rem;
  margin-left: -20px;
}

#subspe-selectpage .weaponlist, #subspe-selectpage .subweapon .subweaponlist, #subspe-selectpage .specialweapon .specialweaponlist {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 90%;
  margin: 0 auto;
}

#subspe-selectpage .weapon-button, #subspe-selectpage .subweapon .subweapon-button, #subspe-selectpage .specialweapon .specialweapon-button {
  position: relative;
  padding: 15px;
  width: 25%;
  /** @note clickable */
  cursor: pointer;
  -webkit-transition: 0.15s;
  transition: 0.15s;
  /* 選択時インク */
  z-index: 0;
}

#subspe-selectpage .weapon-button img, #subspe-selectpage .subweapon .subweapon-button img, #subspe-selectpage .specialweapon .specialweapon-button img {
  width: 100%;
}

#subspe-selectpage .weapon-button:active img, #subspe-selectpage .subweapon .subweapon-button:active img, #subspe-selectpage .specialweapon .specialweapon-button:active img {
  -webkit-transform: translateY(3px);
  -ms-transform: translateY(3px);
  transform: translateY(3px);
}

#subspe-selectpage .weapon-button::before, #subspe-selectpage .subweapon .subweapon-button::before, #subspe-selectpage .specialweapon .specialweapon-button::before {
  position: absolute;
  content: "";
  display: block;
  width: 120%;
  height: 120%;
  top: 50%;
  left: 58%;
  -webkit-transform: translate(-50%, -50%) scale(0);
  -ms-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
  -webkit-transition: 0.15s;
  transition: 0.15s;
  z-index: -1;
  background: #00B3FF;
  -webkit-mask-image: url(/img/inkmask003.svg);
  mask-image: url(/img/inkmask003.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

@-webkit-keyframes onSelected {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
  }
  70% {
    -webkit-transform: translate(-50%, -50%) scale(1.3);
    transform: translate(-50%, -50%) scale(1.3);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes onSelected {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
  }
  70% {
    -webkit-transform: translate(-50%, -50%) scale(1.3);
    transform: translate(-50%, -50%) scale(1.3);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
  }
}

#subspe-selectpage .weapon-button.selected::before, #subspe-selectpage .subweapon .selected.subweapon-button::before, #subspe-selectpage .specialweapon .selected.specialweapon-button::before {
  -webkit-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  -webkit-animation: onSelected 0.2s ease-in;
  animation: onSelected 0.2s ease-in;
}

#subspe-selectpage .subweapon {
  margin-bottom: 70px;
}

#subspe-selectpage .subweapon .label {
  -webkit-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}

#subspe-selectpage .specialweapon {
  margin-bottom: 50px;
}

#subspe-selectpage .specialweapon .label {
  -webkit-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

#subspe-selectpage .ink-button {
  display: inline-block;
  -webkit-mask-image: url(/img/inkbutton.svg);
  mask-image: url(/img/inkbutton.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center right;
  mask-position: center right;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background-color: #ffa500;
  font-family: 'Splatoon1';
  font-size: 1.8rem;
  text-shadow: 2px 2px black;
  color: #ffffff;
  padding: 50px 90px;
  margin-bottom: 60px;
  cursor: pointer;
  -webkit-transition: 0.15s;
  transition: 0.15s;
}

#subspe-selectpage .ink-button:active {
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}

#subspe-selectpage .ink-button.disable {
  background-color: #535353;
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
}

#subspe-selectpage .ink-button.disable:active {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
}

@-webkit-keyframes onEnabled {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  70% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes onEnabled {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  70% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

#subspe-selectpage .ink-button.enable {
  -webkit-animation: onEnabled 0.3s ease-in;
  animation: onEnabled 0.3s ease-in;
}

#subspe-selectpage .ink-button-wrapper {
  width: 100%;
  text-align: center;
}

#answerpage {
  background: #333 url(/img/bgpattern005.png) top;
  background-size: 120px 60px;
  text-align: center;
  min-height: 100vh;
}

#answerpage .answer-widget {
  padding-top: 120px;
  margin-bottom: 60px;
}

#answerpage .answer-widget .answer-tag {
  position: relative;
  border-radius: 40px;
  width: 70%;
  margin: 0 auto;
  background: #777 url(/img/bgpattern003.png) 50%;
  background-size: 140px 140px;
  padding-bottom: 15px;
  -webkit-transform: rotate(1.5deg);
  -ms-transform: rotate(1.5deg);
  transform: rotate(1.5deg);
}

#answerpage .answer-widget .answer-tag::after {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 29.14285714px;
  top: -28.14285714px;
  left: 0;
  background-color: #777;
  background-size: 40px 40px;
  -webkit-mask-image: url(/img/tag001.png);
  mask-image: url(/img/tag001.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 36px 29.14285714px;
  mask-size: 36px 29.14285714px;
  -webkit-mask-position: center top;
  mask-position: center top;
  background-position: 0 0;
}

#answerpage .answer-widget .answer-tag .result-ink {
  position: absolute;
  width: 70%;
  height: 70%;
  top: -30%;
  left: -16%;
  background: #ff00a9;
  -webkit-mask-image: url(/img/inkmask003.svg);
  mask-image: url(/img/inkmask003.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}

#answerpage .answer-widget .answer-tag .result-ink::before {
  position: absolute;
  display: block;
  content: "WIN!";
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  left: 32%;
  font-family: 'Splatoon1';
  font-size: 1.5rem;
  text-shadow: 2px 2px black;
  color: #ffffff;
}

#answerpage .answer-widget .answer-tag .result-ink.lose {
  background-color: #501CE3;
}

#answerpage .answer-widget .answer-tag .result-ink.lose::before {
  content: "LOSE";
}

#answerpage .answer-widget .answer-tag .weapon-image {
  text-align: center;
}

#answerpage .answer-widget .answer-tag .weapon-image img {
  width: 40%;
}

#answerpage .answer-widget .answer-tag .border {
  width: 90%;
  height: 1px;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 15px;
  background-image: linear-gradient(to right, #eee, #eee 3px, transparent 3px, transparent 8px);
  background-size: 8px 1px;
  background-repeat: repeat-x;
}

#answerpage .answer-widget .answer-tag .subspe {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

#answerpage .answer-widget .answer-tag .subspe .subweapon, #answerpage .answer-widget .answer-tag .subspe .specialweapon {
  width: 20%;
  margin: 0 20px;
  padding: 8px;
  border-radius: 15px;
  background-color: #2B2B2B;
}

#answerpage .answer-widget .answer-tag .subspe .subweapon img, #answerpage .answer-widget .answer-tag .subspe .specialweapon img {
  width: 100%;
}

#answerpage .answer-widget .name-label {
  width: 110%;
  text-align: right;
  -webkit-transform: rotate(-6deg);
  -ms-transform: rotate(-6deg);
  transform: rotate(-6deg);
  margin-bottom: 50px;
}

#answerpage .answer-widget .name-label h3 {
  display: inline-block;
  padding: 8px;
  padding-right: 65px;
  padding-left: 55px;
  -webkit-mask-image: url(/img/labelmask002.png);
  mask-image: url(/img/labelmask002.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center left;
  mask-position: center left;
  -webkit-mask-size: cover;
  mask-size: cover;
  background: #cdf523;
  font-size: 1.3rem;
  margin-left: -20px;
}

#answerpage .button {
  display: inline-block;
  padding: 8px 60px;
  background: #777 url(/img/bgpattern003.png) 50%;
  background-size: 160px 160px;
  -webkit-mask-image: url(/img/buttonmask001.svg);
  mask-image: url(/img/buttonmask001.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: left top;
  mask-position: left top;
  border-right: solid 1px black;
  border-bottom: solid 1px black;
  font-size: 1.6rem;
  color: white;
  text-shadow: 2px 2px black;
  margin-bottom: 80px;
}

#resultpage {
  overflow: hidden;
  text-align: center;
}

#resultpage .result-widget {
  position: relative;
  padding-bottom: 50px;
  background-image: url(/img/stage001.png);
  background-size: cover;
}

#resultpage .result-widget .result-card {
  width: 60%;
  min-width: 18rem;
  padding-top: 35px;
  padding-bottom: 10px;
  margin: 0 auto;
  border-radius: 30px;
  -webkit-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  transform: rotate(-5deg);
  margin-bottom: 10px;
  background: #a51ee1 url(/img/bgpattern006.png) 0 0 no-repeat;
  background-size: 408px 245px;
  -webkit-mask-image: url(/img/platemask001.png);
  mask-image: url(/img/platemask001.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 200%;
  mask-size: 200%;
  -webkit-mask-position: center top;
  mask-position: center top;
  -webkit-mask-position: 50% 0.5%;
  mask-position: 50% 0.5%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#resultpage .result-widget .result-card .win, #resultpage .result-widget .result-card .lose {
  padding: 5px 0;
  width: 6rem;
  color: white;
  text-shadow: 2px 2px black;
}

#resultpage .result-widget .result-card .win .sub, #resultpage .result-widget .result-card .lose .sub {
  padding-bottom: 8px;
  font-size: 0.8rem;
}

#resultpage .result-widget .result-card .win .main, #resultpage .result-widget .result-card .lose .main {
  font-size: 3rem;
}

#resultpage .result-widget .result-card .win {
  border-right: solid 1px #aaa;
}

#resultpage .result-widget .button-wrapper {
  text-align: right;
  padding: 0 30px;
}

#resultpage .result-widget .button {
  -webkit-transform: rotate(1deg);
  -ms-transform: rotate(1deg);
  transform: rotate(1deg);
  font-size: 1rem;
  padding-left: 40px;
  padding-right: 40px;
  margin-bottom: 10px;
}

#resultpage .result-widget .button:active {
  -webkit-transform: rotate(1deg) translateY(2px);
  -ms-transform: rotate(1deg) translateY(2px);
  transform: rotate(1deg) translateY(2px);
}

#resultpage .result-widget .result-ink {
  position: relative;
  width: 50%;
  margin: 0 auto;
  background-color: black;
  -webkit-mask-image: url(/img/inkmask004.svg);
  mask-image: url(/img/inkmask004.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-transform: translateY(-5%);
  -ms-transform: translateY(-5%);
  transform: translateY(-5%);
  margin-bottom: -18%;
}

#resultpage .result-widget .result-ink::after {
  position: relative;
  content: "";
  display: block;
  padding-bottom: 100%;
}

#resultpage .result-widget .result-ink::before {
  position: absolute;
  content: "リザルト";
  text-align: center;
  font-family: 'Splatoon1';
  font-size: 1.7rem;
  text-shadow: 2px 2px black;
  color: #AFED39;
  top: 45%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#resultpage .ikabg {
  position: relative;
  background: #191919 url(/img/bgpattern001.png) left top;
  background-size: 240px 240px;
}

#resultpage .ikabg:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  margin-top: -40px;
  background: #5D0BC3 url(/img/bgpattern001.png) left top 40px;
  background-size: 240px 240px;
  -webkit-mask-image: url(/img/bordermask002.png);
  mask-image: url(/img/bordermask002.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  height: 40px;
  width: 100%;
}

#resultpage .answer-widget {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0 10px;
  padding-top: 15px;
  margin-bottom: 50px;
}

#resultpage .answer-widget .answer-tag {
  position: relative;
  border-radius: 15px;
  width: 25%;
  margin: 0 10px;
  margin-top: 50px;
  margin-bottom: 20px;
  background: #777 url(/img/bgpattern003.png) 50%;
  background-size: 70px 70px;
  padding-bottom: 8px;
}

#resultpage .answer-widget .answer-tag::before {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 19.14285714px;
  top: -18.14285714px;
  left: 0;
  background-color: #777;
  background-size: 40px 40px;
  -webkit-mask-image: url(/img/tag001.png);
  mask-image: url(/img/tag001.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 23px 19.14285714px;
  mask-size: 23px 19.14285714px;
  -webkit-mask-position: center top;
  mask-position: center top;
  background-position: 0 0;
}

#resultpage .answer-widget .answer-tag .result-ink {
  position: absolute;
  width: 70%;
  padding-bottom: 70%;
  top: -30%;
  left: -26%;
  background: #ff00a9;
  -webkit-mask-image: url(/img/inkmask003.svg);
  mask-image: url(/img/inkmask003.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  transform: rotate(-5deg);
}

#resultpage .answer-widget .answer-tag .result-ink::before {
  position: absolute;
  display: block;
  content: "WIN!";
  top: 50%;
  left: 45%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-family: 'Splatoon1';
  font-size: 0.5rem;
  text-shadow: 1px 1px black;
  color: #ffffff;
}

#resultpage .answer-widget .answer-tag .result-ink.lose {
  background-color: #501CE3;
}

#resultpage .answer-widget .answer-tag .result-ink.lose::before {
  content: "LOSE";
}

#resultpage .answer-widget .answer-tag .weapon-image {
  text-align: center;
}

#resultpage .answer-widget .answer-tag .weapon-image img {
  width: 65%;
}

#resultpage .answer-widget .answer-tag .border {
  width: 90%;
  height: 1px;
  margin: 0 auto;
  margin-top: 8px;
  margin-bottom: 8px;
  background-image: linear-gradient(to right, #eee, #eee 2px, transparent 2px, transparent 3px);
  background-size: 6px 1px;
  background-repeat: repeat-x;
}

#resultpage .answer-widget .answer-tag .subspe {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

#resultpage .answer-widget .answer-tag .subspe .subweapon, #resultpage .answer-widget .answer-tag .subspe .specialweapon {
  width: 35%;
  margin: 0 3px;
  padding: 6px;
  border-radius: 7px;
  background-color: #2B2B2B;
}

#resultpage .answer-widget .answer-tag .subspe .subweapon img, #resultpage .answer-widget .answer-tag .subspe .specialweapon img {
  width: 100%;
}

#resultpage .button {
  display: inline-block;
  padding: 8px 60px;
  background: #777 url(/img/bgpattern003.png) 50%;
  background-size: 160px 160px;
  -webkit-mask-image: url(/img/buttonmask001.svg);
  mask-image: url(/img/buttonmask001.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: left top;
  mask-position: left top;
  border-right: solid 1px black;
  border-bottom: solid 1px black;
  font-size: 1.6rem;
  color: white;
  text-shadow: 2px 2px black;
  margin-bottom: 80px;
}