#mainvisual .section-inner {
  padding: 0 0 0;
}
#mainvisual .box {
  position: relative;
  overflow: hidden;
}
#mainvisual .box:before {
  content: "";
  display: inline-block;
  padding: 86.9565217391% 0 0;
}
#mainvisual .box .coop {
  position: absolute;
  top: 0;
  left: 2.1739130435%;
  z-index: 2;
  width: 28.2608695652%;
  margin: 1.0869565217% 0 0;
  line-height: 0;
}
#mainvisual .box .item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#mainvisual .box .grad {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-image: -webkit-linear-gradient(90deg, black 0%, black 41%, rgba(0, 0, 0, 0) 100%);
  background-image: -o-linear-gradient(90deg, black 0%, black 41%, rgba(0, 0, 0, 0) 100%);
  background-image: linear-gradient(0deg, black 0%, black 41%, rgba(0, 0, 0, 0) 100%);
  padding: 32.6086956522% 0 0;
}
#mainvisual .box h1 {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-bottom: 3.6956521739%;
  margin-left: -28.5326086957%;
  width: 57.0652173913%;
}

#head {
  text-align: center;
}
#head .section-inner {
  padding: 10.5434782609% 0 0;
}
#head .icon {
  margin: 0 auto;
  width: 14.5652173913%;
}
#head h2 {
  padding: 2.8260869565% 0 0;
}
#head h2 > span {
  display: inline-block;
}
#head h2 .txt1 {
  margin: 0 auto;
  width: 45%;
}
#head h2 .txt2 {
  margin: 0 auto;
  width: 96.3043478261%;
}
#head p {
  letter-spacing: 0.1em;
  padding: 1.7391304348% 0 0;
  font-size: 0.4rem;
  line-height: 1.5em;
  font-weight: 900;
  color: #331900;
}
#head .banner {
  margin: 10.8695652174% auto 0;
  width: 84.7826086957%;
}
#head .banner .box {
  position: relative;
  -webkit-box-shadow: 0em 0em 0.1em 0.02em rgba(0, 0, 0, 0.3);
  box-shadow: 0em 0em 0.1em 0.02em rgba(0, 0, 0, 0.3);
  background-color: #FFF;
  width: 100%;
}
#head .banner .box:before {
  content: "";
  display: inline-block;
  vertical-align: top;
  padding: 30.5128205128% 0 0;
}
#head .banner .box a {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 0;
}
#head .banner .box a > span {
  display: inline-block;
  position: absolute;
  top: 0.1rem;
  left: 0.1rem;
  width: 98.7179487179%;
  padding: 29.4871794872% 0 0;
}
#head .banner .box + .box {
  margin: 1.0869565217% 0 0;
}

#trailer .section-inner {
  padding: 15.2173913043% 0 0;
}
#trailer .movie {
  position: relative;
  margin: 4.347826087% auto 0;
  width: 89.1304347826%;
  padding: 50.2173913043% 0 0;
}
#trailer .movie iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#news .list {
  margin: 4.347826087% auto 0;
  width: 84.7826086957%;
}
#news .list .box {
  padding: 0.5434782609%;
}
#news .list .box .box-inner {
  display: table;
  padding: 3.6263736264%;
}
#news .list .box .box-inner > div {
  display: table-cell;
  vertical-align: top;
  color: #331900;
}
#news .list .box .box-inner .day {
  position: relative;
  display: block;
  font-size: 0.32rem;
  line-height: 1.5em;
  font-weight: 900;
  width: 100%;
}
#news .list .box .box-inner .day i {
  position: absolute;
  top: -0.2em;
  right: 0;
  font-size: 0.32rem;
  padding: 0.2em 1em;
  line-height: 1em;
  margin-top: 0.25em;
  display: inline-block;
  background-color: #d50000;
  border-radius: 0.1875em;
}
#news .list .box .box-inner .day i:before {
  content: "NEW";
  font-style: normal;
  color: #ffffff;
  line-height: 1em;
}
#news .list .box .box-inner .txt {
  display: block;
  font-size: 0.32rem;
  line-height: 1.5em;
  width: 105.0420168067%;
}
#news .list .box .box-inner .txt a {
  color: #d50000;
  text-decoration: underline;
}
#news .list .box + .box {
  margin: 1.0869565217% 0 0;
}
#news .more {
  margin: 5.4347826087% auto 0;
  width: 5.8695652174%;
}
#news .more a {
  display: inline-block;
}

#ticket .list {
  width: 89.1304347826%;
  margin: 3.2608695652% auto 0;
  letter-spacing: -.4em;
  text-align: center;
}
#ticket .list .box {
  display: inline-block;
  letter-spacing: normal;
  vertical-align: top;
  width: 31.7073170732%;
  padding: 0.6097560976%;
  color: #331900;
}
#ticket .list .box .box-inner {
  padding: 13.2% 0;
  text-align: center;
  position: relative;
}
#ticket .list .box a {
  display: inline-block;
  width: 100%;
  height: 100%;
  color: #331900;
  text-decoration: none;
}
#ticket .list .box .name {
  font-size: 0.48rem;
  line-height: 1em;
  font-weight: 900;
}
#ticket .list .box .day {
  font-size: 0.36rem;
  line-height: 1em;
  font-weight: 600;
  margin: 6.8% auto 0;
}
#ticket .list .box .day .tilde {
  background: url("../img/tilde_img.png") no-repeat center;
  background-size: contain;
  width: 1.6%;
  padding: 6.8% 0 0;
  margin: 2% auto;
}
#ticket .list .box + .box {
  margin-left: 2.0652173913%;
}
#ticket .list .box:nth-child(3n+1) {
  margin-left: 0;
}
#ticket .list .box:nth-child(n+4) {
  margin-top: 2.1739130435%;
}

#story .text {
  margin: 5.4347826087% 0 0;
  font-size: 0.4rem;
  line-height: 1.5em;
  text-align: center;
  color: #331900;
}
#story .text p + p {
  padding: 3.2608695652% 0 0;
}

#character .list {
  width: 80.4347826087%;
  margin: 20.1086956522% auto 0;
}
#character .list .box {
  width: 52.7027027027%;
  color: #331900;
  position: relative;
}
#character .list .box .name {
  position: relative;
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1em;
  padding: 0 0 0 8.2051282051%;
  white-space: nowrap;
}
#character .list .box .name:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 5.8974358974%;
  padding: 8.7179487179% 0 0 0;
  margin: -3.8461538462% auto 0;
  background: url("/fgo2019/img/linettl_icon_head.png") center no-repeat;
  background-size: contain;
}
#character .list .box .txt {
  font-size: 0.32rem;
  font-weight: 500;
  line-height: 1.5em;
  margin-top: 7.6923076923%;
}
#character .list .box .img {
  position: absolute;
  top: 0;
}
#character .list .box + .box {
  margin-top: 36.9565217391%;
}
#character .list .box:nth-child(odd) {
  padding: 0 0 0 47.2972972973%;
}
#character .list .box:nth-child(odd) .img {
  left: 0;
}
#character .list .box:nth-child(even) {
  padding: 0 47.2972972973% 0 0;
}
#character .list .box:nth-child(even) .img {
  right: 0;
}
#character .list .box:nth-child(1) .img {
  top: -3.08rem;
  width: 37.8378378378%;
}
#character .list .box:nth-child(2) .img {
  top: -4.12rem;
  right: 2.1rem;
  width: 19.8648648649%;
}
#character .list .box:nth-child(3) .img {
  top: -3.64rem;
  left: -0.4rem;
  width: 46.8918918919%;
}
#character .list .box:nth-child(4) .img {
  top: -4.12rem;
  right: 0.6rem;
  width: 37.7027027027%;
}
#character .list .box:nth-child(5) .img {
  top: -4.04rem;
  left: -0.4rem;
  width: 49.1891891892%;
}

#howtoplay .section-inner {
  padding: 38.0434782609% 0 0;
}
#howtoplay .list {
  margin: 4.347826087% auto 0;
  width: 89.1304347826%;
}
#howtoplay .list .box {
  padding: 0.6097560976%;
  color: #331900;
}
#howtoplay .list .box .box-inner {
  padding: 4.0740740741%;
}
#howtoplay .list .box .table {
  display: table;
}
#howtoplay .list .box .table > div {
  display: table-cell;
  vertical-align: top;
}
#howtoplay .list .box .txt {
  width: 54.3209876543%;
  padding: 0 5.5555555556% 0 0;
}
#howtoplay .list .box .img {
  width: 37.037037037%;
}
#howtoplay .list .box .ttl {
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1em;
}
#howtoplay .list .box p {
  font-size: 0.32rem;
  font-weight: 500;
  line-height: 1.5em;
}
#howtoplay .list .box p a {
  color: #d50000;
  text-decoration: underline;
}
#howtoplay .list .box p.sm {
  font-size: 0.28rem;
  line-height: 1.7142857143em;
  padding-top: 0.6rem;
}
#howtoplay .list .box .ttl + p {
  padding-top: 0.32rem;
}
#howtoplay .list .box p + .table {
  padding-top: 0.7rem;
}
#howtoplay .list .box .note {
  padding-top: 0.8rem;
}
#howtoplay .list .box .linettl {
  position: relative;
  letter-spacing: -.4em;
  font-size: 0.48rem;
}
#howtoplay .list .box .linettl span,
#howtoplay .list .box .linettl i {
  letter-spacing: normal;
  display: inline-block;
  vertical-align: top;
  height: 1em;
}
#howtoplay .list .box .linettl span {
  width: 10.8108108108%;
}
#howtoplay .list .box .linettl i {
  width: 89.1891891892%;
  position: relative;
}
#howtoplay .list .box .linettl i:before, #howtoplay .list .box .linettl i:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
}
#howtoplay .list .box .linettl i:before {
  width: 97.2727272727%;
  left: 0;
  padding: 0.303030303% 0 0;
  margin: -0.1515151515% 0 0;
  background-color: #331900;
}
#howtoplay .list .box .linettl i:after {
  width: 2.7272727273%;
  right: 0;
  padding: 2.4242424242% 0 0;
  margin: -1.2121212121% 0 0;
  background: url("../img/linettl_icon.png") center no-repeat;
  background-size: contain;
}
#howtoplay .list .box + .box {
  margin: 1.0869565217% 0 0;
}
#howtoplay .list .servant {
  margin: 5.4054054054% 0 0;
  position: relative;
  padding: 52.7027027027% 0 0;
}
#howtoplay .list .servant:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../img/servant_flame.png") center no-repeat;
  background-size: contain;
}
#howtoplay .list .servant .servant-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#howtoplay .list .servant .servant-inner .servant-ttl {
  text-align: center;
  font-size: 0.64rem;
  line-height: 1em;
  font-weight: 900;
  margin: 5.4054054054% 0 0;
}
#howtoplay .list .servant .servant-inner .servant-ttl span {
  display: inline-block;
  position: relative;
}
#howtoplay .list .servant .servant-inner .servant-ttl span:before, #howtoplay .list .servant .servant-inner .servant-ttl span:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  width: 0.8125em;
  height: 0.875em;
  margin: -0.40625em 0 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#howtoplay .list .servant .servant-inner .servant-ttl span:before {
  left: -0.9375em;
  background-image: url("../img/servant_ttl_left.png");
}
#howtoplay .list .servant .servant-inner .servant-ttl span:after {
  right: -0.9375em;
  background-image: url("../img/servant_ttl_right.png");
}
#howtoplay .list .servant .servant-inner p {
  text-align: center;
  font-size: 0.32rem;
  margin: 2.7027027027% 0 0;
  line-height: 1em;
}
#howtoplay .list .servant .servant-inner .servant-list {
  width: 89.1891891892%;
  margin: 5.4054054054% auto 0;
  letter-spacing: -.4em;
}
#howtoplay .list .servant .servant-inner .servant-list .servant-box {
  width: 15.1515151515%;
  display: inline-block;
  letter-spacing: normal;
  vertical-align: top;
}
#howtoplay .list .servant .servant-inner .servant-list .servant-box a {
  display: inline-block;
  width: 100%;
  line-height: 0;
  color: #331900;
}
#howtoplay .list .servant .servant-inner .servant-list .servant-box a img {
  -webkit-box-shadow: 0em 0.06em 0.16em 0em rgba(0, 0, 0, 0.3);
  box-shadow: 0em 0.06em 0.16em 0em rgba(0, 0, 0, 0.3);
}
#howtoplay .list .servant .servant-inner .servant-list .servant-box a span {
  display: inline-block;
  line-height: 1em;
  margin: 15% 0 0;
  font-size: 0.32rem;
  width: 100%;
  text-align: center;
}
#howtoplay .list .servant .servant-inner .servant-list .servant-box + .servant-box {
  margin: 0 0 0 1.8181818182%;
}

#modal .box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 1em;
  display: none;
  opacity: 0;
  z-index: 2;
  will-change: opacity;
}
#modal .box .box-inner {
  position: relative;
}
#modal .box:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46.3333333333%;
  padding: 46.9166666667% 0 0;
  margin: -23.4583333333% 0 0 -23.1666666667%;
  background: url("../img/modal_box_bg.png") center no-repeat;
  background-size: contain;
  z-index: 1;
  pointer-events: none;
}
#modal .box .img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
}
#modal .box .txt {
  position: relative;
  z-index: 2;
  padding: 14.5833333333% 0 0 54%;
  color: #fff;
  opacity: 0;
}
#modal .box .txt .type {
  width: 90.7608695652%;
}
#modal .box .txt .name {
  font-size: 0.84em;
  line-height: 1em;
  margin: 3.6231884058% 0 0;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
#modal .box .txt p {
  margin: 3.6231884058% 0 0;
  font-size: 0.32em;
  line-height: 1.5em;
}
#modal .box.n1 .img {
  top: 0.6em;
  left: 5.75%;
  width: 42.5833333333%;
}
#modal .box.n2 .img {
  top: 0.48em;
  left: 7%;
  width: 40.25%;
}
#modal .box.n3 .img {
  top: 0.48em;
  left: 7.4166666667%;
  width: 39.2916666667%;
}
#modal .box.n4 .img {
  top: 0.62em;
  left: 10.8333333333%;
  width: 32.5833333333%;
}
#modal .box.n5 .img {
  top: 0.4em;
  left: 6.8333333333%;
  width: 40.5%;
}
#modal .box.n6 .img {
  top: 1em;
  left: 10.5%;
  width: 33.2083333333%;
}

@media (min-width: 1201px) {
  #mainvisual.section {
    width: 100%;
  }
}
@media (min-width: 769px) {
  .onlyPc {
    display: block;
  }

  img.onlyPc {
    display: inline-block;
  }

  .onlySp,
  img.onlySp {
    display: none !important;
  }

  #head .banner .box a:after {
    content: "";
    display: inline-block;
    vertical-align: top;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f2d861;
    opacity: 0;
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
    z-index: 2;
  }

  #head .banner .box a:hover:after {
    opacity: 0.3;
  }

  #head .banner .box a:after {
    content: "";
    display: inline-block;
    vertical-align: top;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f2d861;
    opacity: 0;
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
    z-index: 2;
  }

  #head .banner .box a:hover:after {
    opacity: 0.3;
  }

  #ticket .list .box .box-inner {
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }

  #ticket .list .box a:hover .box-inner {
    opacity: 0.5;
  }

  #howtoplay .list .box p a:hover {
    text-decoration: none;
  }

  #howtoplay .list .servant .servant-inner .servant-list .servant-box a {
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
  }
  #howtoplay .list .servant .servant-inner .servant-list .servant-box a img {
    -webkit-transition: transform 0.2s;
    -moz-transition: transform 0.2s;
    -ms-transition: transform 0.2s;
    -o-transition: transform 0.2s;
    transition: transform 0.2s;
  }

  #howtoplay .list .servant .servant-inner .servant-list .servant-box a:hover {
    opacity: 0.7;
  }
  #howtoplay .list .servant .servant-inner .servant-list .servant-box a:hover img {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}
@media (max-width: 768px) {
  #mainvisual .box:before {
    content: "";
    display: inline-block;
    padding: 133.3333333333% 0 0;
  }
  #mainvisual .box .grad {
    background-image: -webkit-linear-gradient(90deg, black 0%, black 56%, rgba(0, 0, 0, 0) 100%);
    background-image: -o-linear-gradient(90deg, black 0%, black 56%, rgba(0, 0, 0, 0) 100%);
    background-image: linear-gradient(0deg, black 0%, black 56%, rgba(0, 0, 0, 0) 100%);
    padding: 53.3333333333% 0 0;
  }
  #mainvisual .box .coop {
    position: absolute;
    top: 0;
    left: 2.6666666667%;
    z-index: 2;
    width: 32.5333333333%;
    margin: 2.6666666667% 0 0;
  }
  #mainvisual .box h1 {
    margin-bottom: 4.2666666667%;
    margin-left: -47.3333333333%;
    width: 94.6666666667%;
  }

  #head {
    text-align: center;
  }
  #head .section-inner {
    padding: 13.3333333333% 0 0;
  }
  #head .icon {
    margin: 0 auto;
    width: 17.8666666667%;
  }
  #head h2 {
    padding: 3.4666666667% 0 0;
  }
  #head h2 > span {
    display: inline-block;
  }
  #head h2 .txt1 {
    margin: 0 auto;
    width: 55.2%;
  }
  #head h2 .txt2 {
    margin: 0 auto;
    width: 100%;
  }
  #head p {
    letter-spacing: 0.1em;
    padding: 2.1333333333% 0 0;
    font-size: 0.64rem;
    line-height: 1.5em;
    font-weight: 900;
  }
  #head .banner {
    margin: 12% auto 0;
    width: 89.3333333333%;
  }
  #head .banner .box {
    position: relative;
    -webkit-box-shadow: 0em 0em 0.1em 0.02em rgba(0, 0, 0, 0.3);
    box-shadow: 0em 0em 0.1em 0.02em rgba(0, 0, 0, 0.3);
  }
  #head .banner .box:before {
    padding: 30.447761194% 0 0;
  }
  #head .banner .box + .box {
    margin: 2.6666666667% 0 0;
  }

  #trailer .section-inner {
    padding: 20% 0 0;
  }
  #trailer .movie {
    position: relative;
    margin: 5.3333333333% auto 0;
    width: 89.3333333333%;
    padding: 50.4% 0 0;
  }

  #news .section-inner {
    padding: 21.3333333333% 0 0;
  }
  #news .list {
    margin: 5.3333333333% auto 0;
    width: 89.3333333333%;
  }
  #news .list .box {
    padding: 0.7462686567%;
  }
  #news .list .box .box-inner {
    display: block;
    padding: 4.9253731343%;
  }
  #news .list .box .box-inner > div {
    display: block;
    vertical-align: top;
    color: #331900;
  }
  #news .list .box .box-inner .day {
    font-size: 0.56rem;
    line-height: 1.6071428571em;
    font-weight: 900;
    width: 100%;
    position: relative;
  }
  #news .list .box .box-inner .day i {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.48rem;
    line-height: 1em;
    padding: 0.1em 1em 0.2em;
    margin-top: 0.25em;
    border-radius: 0.125em;
  }
  #news .list .box .box-inner .txt {
    font-size: 0.48rem;
    line-height: 1.5em;
    width: 100%;
    padding: 0.8431703204%;
  }
  #news .list .box + .box {
    margin: 2.6666666667% 0 0;
  }
  #news .more {
    margin: 5.6% auto 0;
    width: 10.6666666667%;
  }

  #ticket .list {
    width: 89.3333333333%;
    margin: 5.3333333333% auto 0;
  }
  #ticket .list .box {
    width: 48.5074626866%;
    padding: 0.7462686567%;
  }
  #ticket .list .box .box-inner {
    padding: 10.1538461538% 7.6923076923%;
  }
  #ticket .list .box .name {
    font-size: 0.72rem;
  }
  #ticket .list .box .day {
    font-size: 0.48rem;
    margin: 6.1538461538% auto 0;
  }
  #ticket .list .box .day .tilde {
    margin: 3.0769230769% auto;
  }
  #ticket .list .box + .box {
    margin-left: 2.6666666667%;
  }
  #ticket .list .box:nth-child(3n+1) {
    margin-left: 2.6666666667%;
  }
  #ticket .list .box:nth-child(2n+1) {
    margin-left: 0;
  }
  #ticket .list .box:nth-child(n+4) {
    margin-top: 0;
  }
  #ticket .list .box:nth-child(n+3) {
    margin-top: 2.6666666667%;
  }

  #story .text {
    width: 89.3333333333%;
    margin: 5.3333333333% auto 0;
    font-size: 0.56rem;
    line-height: 1.5em;
  }
  #story .text p + p {
    padding: 6.5217391304% 0 0;
  }

  #character .list {
    width: 89.3333333333%;
    margin: 6% auto 0;
  }
  #character .list .box {
    width: 100%;
  }
  #character .list .box .name {
    position: relative;
    font-size: 0.96rem;
    padding: 0 0 0 7.4626865672%;
  }
  #character .list .box .name:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 5.3731343284%;
    padding: 8.0597014925% 0 0 0;
    margin: -4.0298507463% auto 0;
  }
  #character .list .box .txt {
    font-size: 0.48rem;
    font-weight: 500;
    line-height: 1.5em;
    margin-top: 5.223880597%;
  }
  #character .list .box .img {
    position: static;
    margin: 0 auto 3.7313432836%;
  }
  #character .list .box + .box {
    margin-top: 14.9253731343%;
  }
  #character .list .box:nth-child(odd) {
    padding: 0 0 0 0;
  }
  #character .list .box:nth-child(even) {
    padding: 0 0 0 0;
  }
  #character .list .box:nth-child(1) .img {
    width: 52.2388059701%;
  }
  #character .list .box:nth-child(2) .img {
    width: 28.3582089552%;
  }
  #character .list .box:nth-child(3) .img {
    width: 64.776119403%;
  }
  #character .list .box:nth-child(4) .img {
    width: 52.0895522388%;
  }
  #character .list .box:nth-child(5) .img {
    width: 68.6567164179%;
  }

  #howtoplay .section-inner {
    padding: 20% 0 0;
  }
  #howtoplay .list {
    margin: 5.3333333333% auto 0;
    width: 89.3333333333%;
  }
  #howtoplay .list .box {
    padding: 0.7462686567%;
    color: #331900;
  }
  #howtoplay .list .box .box-inner {
    padding: 5.1515151515%;
  }
  #howtoplay .list .box .table {
    display: block;
  }
  #howtoplay .list .box .table > div {
    display: block;
    vertical-align: top;
  }
  #howtoplay .list .box .txt {
    width: 100%;
    padding: 0 0 0 0;
  }
  #howtoplay .list .box .img {
    width: 100%;
    margin: 5.9121621622% 0 0 0;
  }
  #howtoplay .list .box .ttl {
    font-size: 0.96rem;
    font-weight: 900;
    line-height: 1.1875em;
    text-indent: -1em;
    padding-left: 1em;
  }
  #howtoplay .list .box p {
    font-size: 0.48rem;
    font-weight: 500;
    line-height: 1.5em;
  }
  #howtoplay .list .box p.sm {
    font-size: 0.48rem;
    line-height: 1.5em;
    padding-top: 0.9rem;
  }
  #howtoplay .list .box .ttl + p {
    padding-top: 0.32rem;
  }
  #howtoplay .list .box p + .table {
    padding-top: 0.7rem;
  }
  #howtoplay .list .box .note {
    padding-top: 0.8rem;
  }
  #howtoplay .list .box .linettl {
    position: relative;
    letter-spacing: -.4em;
    font-size: 0.84rem;
    text-indent: 0;
    padding-left: 0;
  }
  #howtoplay .list .box .linettl span,
  #howtoplay .list .box .linettl i {
    height: 1em;
  }
  #howtoplay .list .box .linettl span {
    width: 22.8040540541%;
    line-height: 1em;
  }
  #howtoplay .list .box .linettl i {
    width: 77.1959459459%;
    position: relative;
  }
  #howtoplay .list .box .linettl i:before {
    width: 92.5601750547%;
    padding: 0.875273523% 0 0;
    margin: -0.4376367615% 0 0;
  }
  #howtoplay .list .box .linettl i:after {
    width: 7.2210065646%;
    padding: 7.2210065646% 0 0;
    margin: -3.6105032823% 0 0;
  }
  #howtoplay .list .box + .box {
    margin: 2.9850746269% 0 0;
  }
  #howtoplay .list .servant {
    margin: 6.7796610169% 0 0;
    padding: 145.0847457627% 0 0;
  }
  #howtoplay .list .servant:before {
    background: url("../img/sp/servant_flame.png") center no-repeat;
    background-size: contain;
  }
  #howtoplay .list .servant .servant-inner .servant-ttl {
    font-size: 0.84rem;
    margin: 7.9661016949% 0 0;
  }
  #howtoplay .list .servant .servant-inner .servant-ttl span {
    display: inline-block;
    position: relative;
  }
  #howtoplay .list .servant .servant-inner .servant-ttl span:before, #howtoplay .list .servant .servant-inner .servant-ttl span:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    width: 0.8125em;
    height: 0.875em;
    margin: -0.40625em 0 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  #howtoplay .list .servant .servant-inner .servant-ttl span:before {
    left: -0.9375em;
  }
  #howtoplay .list .servant .servant-inner .servant-ttl span:after {
    right: -0.9375em;
  }
  #howtoplay .list .servant .servant-inner p {
    font-size: 0.48rem;
    margin: 3.7288135593% 0 0;
  }
  #howtoplay .list .servant .servant-inner .servant-list {
    width: 86.4406779661%;
    margin: 6.7796610169% auto 0;
  }
  #howtoplay .list .servant .servant-inner .servant-list .servant-box {
    width: 29.6078431373%;
  }
  #howtoplay .list .servant .servant-inner .servant-list .servant-box a span {
    margin: 13.2450331126% 0 0;
    font-size: 0.48rem;
  }
  #howtoplay .list .servant .servant-inner .servant-list .servant-box + .servant-box {
    margin-left: 4.9152542373%;
  }
  #howtoplay .list .servant .servant-inner .servant-list .servant-box:nth-child(3n+1) {
    margin-left: 0;
  }
  #howtoplay .list .servant .servant-inner .servant-list .servant-box:nth-child(n+4) {
    margin-top: 6.7796610169%;
  }

  #modal .box {
    overflow: scroll;
  }
  #modal .box .box-inner {
    position: relative;
  }
  #modal .box:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 2.8em;
    left: 50%;
    width: 74%;
    padding: 75.0666666667% 0 0;
    margin: 0 0 0 -37%;
    background: url("../img/modal_box_bg.png") center no-repeat;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
  }
  #modal .box .img {
    position: relative;
    margin: 0 auto;
    padding: 16.9333333333% 0 0;
  }
  #modal .box .txt {
    position: relative;
    z-index: 2;
    padding: 0;
    color: #fff;
    opacity: 0;
  }
  #modal .box .txt .type {
    width: 88.9333333333%;
    margin: 5.3333333333% auto 0;
  }
  #modal .box .txt .name {
    font-size: 0.96em;
    line-height: 1em;
    margin: 2.6666666667% 0 0;
    letter-spacing: 0.2em;
    text-align: center;
  }
  #modal .box .txt p {
    margin: 4.6666666667% auto 19.3333333333%;
    width: 89.3333333333%;
    font-size: 0.48em;
    line-height: 1.5em;
  }
  #modal .box.n1 .img {
    top: auto;
    left: auto;
    width: 68.1333333333%;
  }
  #modal .box.n2 .img {
    top: auto;
    left: auto;
    width: 64.4%;
  }
  #modal .box.n3 .img {
    top: auto;
    left: auto;
    width: 62.9333333333%;
  }
  #modal .box.n4 .img {
    top: auto;
    left: auto;
    width: 52.1333333333%;
  }
  #modal .box.n5 .img {
    top: auto;
    left: auto;
    width: 64.8%;
  }
  #modal .box.n6 .img {
    top: auto;
    left: auto;
    width: 53.2%;
  }
}

/*# sourceMappingURL=index.css.map */