@charset "utf-8";

/* -------------------------
  1. common
  2. top
  3. about
  4. charalist / chara
  6. creators
  7. contest
  8. vote
  9. history
------------------------- */

/* -------------------------
  1. common
------------------------- */

@font-face {
  font-family: "Noto Sans Japanese";
  font-weight: 400;
  src: local("NotoSansJP-Regular.otf"),
    url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.otf) format("opentype");
}

@font-face {
  font-family: "Noto Sans Japanese";
  font-weight: 700;
  src: local("NotoSansJP-Bold.otf"),
    url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.otf) format("opentype");
}

*::-moz-selection {
  background: rgba(0, 2, 153, .3);
}

*::selection {
  background: rgba(0, 2, 153, .3);
}

body {
  background: #141414;
  font: 400 16px / 1 "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img {
  width: 100%;
}

a {
  color: #0c8af5;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: all .2s;
}

a:hover {
  opacity: .7;
}

/* loading */

#loading{
  background: #0000a0 url(../img/loading-bg.gif);
  height: 120%;
  position: fixed;
  width: 100%;
  z-index: 9999;
}

#loading .caution{
  margin: 3.8vw auto 0;
  width: 88vw;
}

#loading ul{
  display: -webkit-flex;
  display: flex;
  margin: 4vw auto 0;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 50vw;
}

#loading ul li{
  height: 16.8%;
  width: 45%;
}

#loading ul li a{
  cursor: pointer;
  display: block;
  height: 100%;
  width: 100%;
}

#loading .progress{
  background: url(../img/loading-logo-off.png)no-repeat;
  background-size: contain;
  margin: 26vh auto 0;
  width: 300px;
}

#loading #percent{
  height: 0%;
  overflow: hidden;
}

#bgm-btn-load {
  border: none;
  bottom: 0;
  cursor: pointer;
  height: 7.733vw;
  left: 4.5vw;
  position: absolute;
  top: 2vh;
  width: 9.733vw;
}

#bgm-btn-load.on {
  background: url(../img/icon-loadbgm-on.png) no-repeat 0 0 / cover;
}

#bgm-btn-load.off {
  background: url(../img/icon-loadbgm-off.png) no-repeat 0 0 / cover;
}


@media (min-width: 600px) {
  
  #loading .caution{
    top: 240px;
    width: 500px;
  }
  
  #loading .progress{
    width: 370px;
  }
  
  #loading ul{
    width: 280px;
  }
  
  #loading ul li{
    width: 120px;
  }
  
}

@media (min-width: 768px) {
  
  #loading .caution{
    top: 250px;
    width: 580px;
  }
  
  #bgm-btn-load {
    height: 26px;
    left: 30px;
    width: 33px;
  }
  
}

@media (min-width: 960px) {
  
  #loading .caution{
    top: 260px;
    width: 600px;
  }
  
  #loading .progress{
    height: 194px;
    width: 340px;
  }
  
}

@media (min-width: 1200px) {
  
  #loading .caution{
    top: 280px;
    width: 600px;
  }
  
  #loading .progress{
    height: 211px;
    width: 370px;
  }
  
  #bgm-btn-load {
    right: 30px;
    left: auto;
  }
  
}

/* header */

#header {
  background: rgba(255, 255, 255, .8);
  height: 12vw;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

@media (min-width: 768px) {
  
  #header {
    height: 50px;
  }
  
}

/* nav */

#nav-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  height: 12vw;
  padding: 0 1vw;
  position: absolute;
  right: 0;
  top: 0;
  width: 17vw;
}

#nav-btn span {
  background: #000;
  display: block;
  height: 1vw;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  transition: background .1s, transform .2s;
  width: 8.75vw;
}

#nav-btn .iTop {
  top: 2.813vw;
}

#nav-btn .iMdl {
  top: 5.633vw;
}

#nav-btn .iBtm {
  bottom: 2.813vw;
}

#nav-btn.active .iMdl {
  background: transparent;
  transform: translateX(100px);
}

#nav-btn.active .iTop,
#nav-btn.active .iBtm {
  transform: translateX(-100px);
}

#nav-btn.active .iTop {
  transform: translateY(2.813vw) rotate(-45deg);
}

#nav-btn.active .iBtm {
  transform: translateY(-2.513vw) rotate(45deg);
}

#nav {
  background: rgba(255, 255, 255, .8);
  height: 0;
  opacity: 0;
  position: fixed;
  top: 12vw;
  transition: all .2s;
  width: 100%;
}

#nav > .inr {
  display: none;
  padding-bottom: 60px;
}

#nav.active {
  height: 100vh;
  opacity: 1;
  overflow-y: scroll;
}

#nav.active > .inr {
  display: block;
}

#nav .ttl {
  margin: 8vw 4vw 0;
  text-align: center;
}

#nav .ttl img {
  max-width: 600px;
}

#nav ul {
  margin-top: 6vw;
}

#nav li {
  font-size: 5.333vw;
  margin: 0 4vw;
  position: relative;
  text-align: center;
}

#nav li ~ li {
  margin-top: .8vw;
}

#nav li a {
  background: #fff;
  color: #000;
  display: block;
  padding: 4vw 0;
  text-decoration: none;
}

/* NEWマーク */
#nav li:nth-of-type(5)::before,
#nav li:nth-of-type(6)::before {
  bottom: 0;
  color: #ff6500;
  content: "NEW";
  font-size: 2.933vw;
  height: 1em;
  left: 4vw;
  margin: auto;
  position: absolute;
  top: 0;
}

@media (min-width: 768px) {
  
  #nav-btn {
    height: 50px;
    padding: 0;
    width: 100px;
  }
  
  #nav-btn span {
    height: 4px;
    width: 37px;
  }
  
  #nav-btn .iTop {
    top: 11px;
  }

  #nav-btn .iMdl {
    top: 23px;
  }

  #nav-btn .iBtm {
    bottom: 11px;
  }
  
  #nav-btn.active .iMdl {
    background: transparent;
    transform: translateX(50px);
  }

  #nav-btn.active .iTop,
  #nav-btn.active .iBtm {
    transform: translateX(-50px);
  }

  #nav-btn.active .iTop {
    transform: translateY(12px) rotate(-45deg);
  }

  #nav-btn.active .iBtm {
    transform: translateY(-12px) rotate(45deg);
  }
  
  #nav {
    top: 50px;
  }
  
  #nav .ttl {
    margin-top: 20px;
  }
  
  #nav ul {
    margin-left: auto;
    margin-right: auto;
    max-width: 700px;
  }
  
  #nav li a {
    font-size: 20px;
    padding: 20px 0;
  }
  
  /* NEWマーク */
  #nav li:nth-of-type(4)::before,
  #nav li:nth-of-type(5)::before,
  #nav li:nth-of-type(6)::before {
    font-size: 16px;
    left: 60px;
  }
  
}

@media (min-width: 1200px) {
  
  #nav-btn {
    display: none;
  }
  
  #nav,
  #nav.active {
    height: 50px;
    opacity: 1;
    overflow: hidden;
    top: 0;
  }
  
  #nav > .inr,
  #nav.active > .inr {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin-right: 180px;
    padding: 0;
  }
  
  #nav .ttl {
    margin: 17px 0 0 30px;
  }
  
  #nav .ttl img {
    width: 333px;
  }
  
  #nav ul {
    display: -webkit-flex;
    display: flex;
    margin: 0;
  }
  
  #nav li {
    background: transparent;
    margin: 0;
  }
  
  /* NEWマーク */
  #nav li:nth-of-type(4)::before,
  #nav li:nth-of-type(5)::before,
  #nav li:nth-of-type(6)::before {
    bottom: inherit;
    font-size: 8px !important;
    left: 0;
    right: 0;
    top: 9px;
  }
  
  #nav li ~ li {
    margin: 0 0 0 40px;
  }
  
  #nav li a {
    background: transparent;
    box-sizing: border-box;
    font-size: 14px;
    height: 50px;
    padding: 21px 0 0;
    position: relative;
  }
  
  #nav li a::after {
    background: url(../img/nav-icon.png);
    content: "";
    display: block;
    height: 19px;
    left: -28px;
    opacity: 0;
    position: absolute;
    top: 19px;
    transition: all .3s;
    width: 28px;
  }
  
  #nav li a:hover::after {
    opacity: 1;
    transform: rotateX(360deg);
  }
  
}

/* bgm */

#bgm {
  bottom: 0;
  left: 4vw;
  position: absolute;
  top: 0;
}

#bgm-btn {
  border: none;
  bottom: 0;
  cursor: pointer;
  height: 7.733vw;
  left: 2vw;
  margin: auto;
  position: absolute;
  top: 0;
  width: 9.733vw;
}

#bgm-btn.on {
  background: url(../img/icon-bgm-on.png) no-repeat 0 0 / cover;
}

#bgm-btn.off {
  background: url(../img/icon-bgm-off.png) no-repeat 0 0 / cover;
}

.bgmListWrap {
  bottom: 0;
  height: 22px;
  left: 14vw;
  margin: auto;
  position: absolute;
  top: 0;
}

.bgmListWrap:before {
  bottom: 0;
  content: "▼";
  font-size: 10px;
  height: 10px;
  margin: auto;
  pointer-events: none;
  position: absolute;
  right: 1.2vw;
  top: 0;
}

#bgmList {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 1px solid #000;
  font-size: 14px;
  outline: none;
  padding-left: 4px;
  width: 5em;
}

@media (min-width: 768px) {
  
  #bgm-btn {
    height: 26px;
    left: 30px;
    width: 33px;
  }
  
  .bgmListWrap {
    left: 73px;
  }
  
}

@media (min-width: 1200px) {
  
  #bgm {
    left: auto;
    right: 60px;
    width: 113px;
  }
  
  .bgmListWrap:before {
    right: 8px;
  }
  
}

/* barba-container */

.barba-container {
  overflow: hidden;
}

/* footer */

#footer {
  background: #141414;
  padding-bottom: 8vw;
}

@media (min-width: 768px) {
  
  #footer {
    padding-bottom: 26px;
    position: relative;
    z-index: 10;
  }
  
}

/* btmNews */

#btmNews {
  background: #001464;
  padding: 8vw 0 4vw;
  position: relative;
}

#btmNews h2 {
  background: #fff;
  text-align: center;
  top: -2.656vw;
  padding: 3.733vw 4vw 3.87vw;
  position: relative;
}

#btmNews h2::before {
  background: url(../img/top/btmNews-top.png) no-repeat 50% 0 / auto 100%;
  content: "";
  display: block;
  height: 10px;
  left: 0;
  position: absolute;
  top: -10px;
  width: 100%;
}

#btmNews .logo {
  display: none;
}

.btmNewsBn {
  background: #001464;
  margin-top: -2.656vw;
}

.btmNewsBn li {
  margin: 4vw 4vw 0;
}

@media (min-width: 768px) {
  
  #btmNews {
    padding-bottom: 0;
  }
  
  #btmNews h2 {
    padding: 10px 0 10px;
    top: -10px;
  }
  
  #btmNews h2 img {
    max-width: 400px;
  }
  
  .btmNewsBn {
    display: -webkit-flex;
    display: flex;
    margin: -10px auto 0;
  }
  
  .btmNewsBn li {
    margin: 0;
  }
  
}

@media (min-width: 1040px) {
  
  #btmNews {
    background: #323232;
    padding: 0 0 30px;
  }
  
  #btmNews h2 {
    display: none;
  }
  
  #btmNews .logo {
    display: block;
    margin: 0 auto;
    text-align: center;
    width: 960px;
  }
  
  #btmNews .logo img {
    margin-top: -95px;
    width: 330px;
  }
  
  .btmNewsBn {
    background: transparent;
    margin-top: 15px;
    width: 1000px;
  }
  
  .btmNewsBn li ~ li {
    margin-left: 50px;
  }
  
}

/* share */

#share {
  background: #323232;
}

#share ul {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  padding-bottom: 4vw;
}

#share li {
  margin-top: 4vw;
}

#share li ~ li {
  margin-left: 4vw;
}

#share a {
  border-radius: 50%;
  display: block;
  height: 16.667vw;
  padding: 0;
  position: relative;
  transition: all .2s;
  width: 16.667vw;
}

#share img {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
}

#share .tw a {
  background: #55acee;
}

#share .tw img {
  bottom: -.5vw;
  right: -.8vw;
  width: 10.8vw;
}

#share .fb a {
  background: #4a5999;
}

#share .fb img {
  left: -.8vw;
  width: 6.533vw;
}

#share .li a {
  background: #00b900;
}

#share .li img {
  right: -.4vw;
  width: 12.4vw;
}

@media (min-width: 768px) {
  
  #share ul {
    padding-bottom: 20px;
  }
  
  #share li {
    margin-top: 20px;
  }
  
  #share li ~ li {
    margin-left: 28px;
  }
  
  #share a {
    height: 70px;
    width: 70px;
  }
  
  #share .tw img {
    bottom: -1px;
    right: -2px;
    width: 45px;
  }
  
  #share .fb img {
    left: -2px;
    width: 27px;
  }
  
  #share .li img {
    right: -1px;
    width: 52px;
  }
  
}

@media (min-width: 1040px) {
  
  #share {
    background: transparent;
    left: 0;
    margin: auto;
    position: absolute;
    right: 40px;
    top: 277px;
    width: 1000px;
  }
  
  #share ul {
    padding: 0;
    margin-left: auto;
    position: relative;
    width: 190px;
    z-index: 1;
  }
  
  #share li {
    margin-top: 0;
  }
  
  #share li ~ li {
    margin-left: 20px;
  }
  
  #share a {
    height: 50px;
    width: 50px;
  }
  
  #share .tw img {
    width: 32px;
  }
  
  #share .fb img {
    width: 19px;
  }
  
  #share .li img {
    width: 37px;
  }
  
}

/* footerBtm */

@media (min-width: 1040px) {
  
  .footerBtm {
    margin: 0 auto;
    position: relative;
    width: 920px;
  }
  
}

/* btmBn */

#btmBn {
  margin: 0 auto;
  width: 80vw;
}

#btmBn li {
  margin-top: 4vw;
}

@media (min-width: 768px) {
  
  #btmBn {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 0 30px;
    width: auto;
  }
  
  #btmBn li {
    margin-top: 26px;
    max-width: 200px;
    width: 32%;
  }
  
  #btmBn li ~ li {
    margin-left: 20px;
  }
  
}

@media (min-width: 1040px) {
  
  #btmBn {
    margin-left: 70px;
    padding: 0;
    width: 640px;
  }
  
}

/* copy */

#footer .copy {
  color: #fff;
  font-size: 12px;
  margin-top: 8vw;
  text-align: center;
}

#footer .copy img {
  margin-bottom: 3.333vw;
  width: 16vw;
}

@media (min-width: 768px) {
  
  #footer .copy {
    font-size: 12px;
    margin-top: 26px;
  }
  
  #footer .copy img {
    margin-bottom: 10px;
    width: 50px;
  }
  
}

@media (min-width: 1040px) {
  
  #footer .copy {
    margin-top: 6px;
  }
  
  #footer .copy a {
    display: block;
    height: 47px;
    left: 0;
    position: absolute;
    top: 26px;
    width: 47px;
  }
  
  #footer .copy img {
    margin-bottom: 0;
    width: 47px;
  }
  
}

/* to top */

#totop,
#totop a {
  display: none;
}

@media (min-width: 1040px) {
  
  #totop,
  #totop a {
    height: 129px;
    width: 129px;
  }
  
  #totop {
    bottom: 30px;
    margin: auto;
    position: fixed;
    right: 30px;
    z-index: 10;
  }

  #totop a {
    display: block;
  }

  #totop a img {
    transition: opacity .3s;
  }

  #totop a:hover img {
    opacity: .8;
    transition: opacity .3s;
  }
  
}

/* -------------------------
  2. top
------------------------- */

#hero {
  background: #fff url(../img/visual181120-sp.jpg)no-repeat 50% 0 / 200% auto;
  /* background: #fff; */
  height: 140vw;
  position: relative;
  text-align: right;
}

#hero h1 {
  bottom: 0;
  left: 0;
  margin: auto;
  padding: 0 1.333vw;
  position: absolute;
  right: 0;
  text-align: center;
  z-index: 1;
}

#hero .heroImg {
  cursor: all-scroll;
  left: 0;
  top: 0;
  height: 100%;
  width: auto;
}

@media (min-width: 470px) {
/*  #hero .heroImg {left: -690px;}
*/}

@media (min-width: 530px) {
/*  #hero .heroImg {left: -630px;}
*/}

@media (min-width: 570px) {
/*  #hero .heroImg {left: -570px;}
*/}

@media (min-width: 630px) {
/*  #hero .heroImg {left: -510px;}
*/}

@media (min-width: 690px) {
/*  #hero .heroImg {left: -450px;}
*/}

/*@media (max-width: 767px) and (max-height: 800px) {
  
  #hero {
    background-position: 50% 40%;
    background-size: auto 110%;
  }
  
}*/

@media (max-width: 767px) and (max-height: 510px) {
  
  #hero {
    /*background-position: 50% 0;*/
    height: 800px;
  }
  
  #hero h1 {
    bottom: 180px;
  }
  
  #hero .heroImg {
    top: -588px;
  }
  
}

@media (max-width: 767px) and (max-height: 610px) {
  
  #hero .heroImg {
    top: -588px;
  }
  
}

@media (min-width: 768px) {
  
  #hero {
    background: url(../img/visual181120-pc.jpg) no-repeat 55% 0 / cover;
    height: 120vh;
  }
  
  #hero h1 {
    bottom: 60px;
    max-width: 671px;
    width: 66%;
    z-index: 5;
  }
  
  #hero .heroImg {
    top: -300px;
  }
  
}

@media (min-width: 820px) {
  /*#hero .heroImg {left: -900px;}*/
}

@media (min-width: 1040px) and (max-height: 800px) {
  
  #hero {
    background-position: 50% 0;
    height: 900px !important;
  }
  
}

@media (min-width: 1000px) {
  
  #hero .heroImg {
    /*left: -800px;
    top: -40px;*/
  }
  
}

@media (min-width: 1040px) {
  
  #hero {
    background: url(../img/visual181120-pc.jpg) no-repeat 58% 50% / cover;
    height: 103vh;
  }
  
  #hero h1 {
    bottom: 10px;
  }

}

/*@media (min-width: 1100px) {
  #hero .heroImg {left: -700px;}
}

@media (min-width: 1200px) {
  #hero .heroImg {left: -600px;}
}

@media (min-width: 1300px) {
  #hero .heroImg {left: -500px;}
}

@media (min-width: 1400px) {
  #hero .heroImg {left: -400px;}
}

@media (min-width: 1500px) {
  #hero .heroImg {left: -300px;}
}

@media (min-width: 1600px) {
  
  #hero {
    height: 102vh;
  }
  
  #hero .heroImg {
    left: -200px;
  }

}

@media (min-width: 1700px) {
  #hero .heroImg {left: -100px;}
}

@media (min-width: 1800px) {
  #hero .heroImg {left: 0;}
}*/

/* topCont */

#topCont {
  margin-top: -7vh;
  padding: 7vh 4vw 9.402vw 4vw;
  position: relative;
}

#topCont::before,
#topCont::after {
  content: "";
  display: block;
  left: 0;
  position: absolute;
  width: 100%;
}

#topCont::before {
  background: url(../img/top/bg-top-sp.png) no-repeat 50% 0;
  height: 136px;
  top: -136px;
}

#topCont::after {
  background: #00029a url(../img/top/bg-tex-sp.png) 50% 0;
  height: 100%;
  top: 0;
}

#topCont > * {
  position: relative;
  z-index: 1;
}

#topCont .lb,
#topCont .rb {
  text-align: center;
}

#topCont .lb {
  margin-top: .8vw;
}

#topCont .rb {
  margin-top: 4vw;
}

#topCont .lb.end{
  filter: grayscale(100%);
  pointer-events: none;
  opacity: .7;
}

@media (max-width: 767px) and (max-height: 510px) {
  
  #topCont {
    margin-top: -200px;
    padding-top: 200px;
  }
  
  #topCont .lb {
    margin-top: -180px;
  }
  
}

@media (min-width: 768px) {
  
  #topCont {
    margin-top: 0;
    padding: 0 30px 64px;
  }
  
  #topCont::before {
    background: url(../img/top/bg-top-pc.png) no-repeat 50% 0;
    height: 357px;
    top: -357px;
  }
  
  #topCont::after {
    background: #00029a url(../img/top/bg-tex-pc.png) 50% 0;
  }
  
  #topCont .lb,
  #topCont .rb {
    position: absolute;
    top: -33vw;
    max-width: 231px;
    width: 23.1%;
  }
  
  #topCont .lb {
    left: 5.5vw;
    margin: 0px 0 0 -71px;
    max-width: 231px;
    width: 24.2%;
  }
  
  #topCont .rb {
    margin: 0 -22px 0 0;
    right: -0.83vw;
    max-width: 223px;
  }
  
}

@media (min-width: 880px) {
  
  /*#topCont .lb,
  #topCont .rb {
    top: -65%;
  }*/
  
}

@media (min-width: 1040px) {
  
  #topCont {
    padding-left: 0;
    padding-right: 0;
  }
  
  #topCont > .inr {
    margin: 0 auto;
    width: 1000px;
  }
  
  #topCont .lb,
  #topCont .rb {
    top: -316px;
  }
  
  #topCont .lb {
    left: 0.5vw;
  }
  
}

/* info */

#info {
  margin-top: 8vw;
}

#info h2 {
  margin: 0 auto;
  text-align: center;
  width: 54.933vw;
}

.newsBox {
  background: #000005;
  border: .267vw solid #40cbf5;
  box-sizing: border-box;
  color: #fff;
  margin-top: -.133vw;
  overflow: hidden;
  padding-bottom: 4.133vw;
  position: relative;
}

.newsBox li {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  margin: 4.133vw 4vw 0;
}

.newsBox .new {
  color: #ff7800;
  font-size: 10px;
  position: relative;
  top: -.3vw;
}

.newsBox p {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  margin-top: .533vw;
}

@media (min-width: 768px) {
  
  #info {
    background: #000005;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin: -52px 0 0;
  }
  
  #info h2,
  #info h2 img {
    width: 235px;
  }

  #info h2 {
    margin: 0;
    text-align: left;
  }
  
  .newsBox {
    background: transparent;
    border: 1px solid #40cbf5;
    border-left: 0;
    height: 59px !important;
    margin: 0;
    padding: 0;
    width: 72%;
  }
  
  .newsBox li {
    display: none;
    font-size: 15px;
    margin: 20px 0 0;
    overflow: hidden;
    text-align: left;
    width: 100%;
  }
  
  .newsBox .date {
    box-sizing: border-box;
    display: block;
    float: left;
    padding-left: 1em;
    width: 30%;
  }
  
  .newsBox .new {
    font-size: 10px;
    top: -1px;
  }
  
  .newsBox p {
    float: left;
    font-size: 13px;
    margin: -1px 0 0;
    width: 70%;
  }
  
}

@media (min-width: 880px) {
  
  .newsBox {
    width: 76%;
  }
  
  .newsBox .date {
    width: 24%;
  }
  
  .newsBox p {
    width: 76%;
  }
  
}

@media (min-width: 1040px) {
  
  #info {
    margin-top: 1px;
  }
  
  .newsBox {
    width: 765px;
  }
  
  .newsBox li {
    font-size: 18px;
    margin-top: 18px;
  }
  
  .newsBox .date {
    margin-left: 20px;
    text-align: left;
    width: 160px;
  }
  
  .newsBox .new {
    margin-left: 10px;
  }
  
  .newsBox p {
    font-size: 16px;
  }
  
}

/* twWidget */


.twWidget {
  margin-top: 8vw;
  width: 100%;
}
  
.twWrap_btn{
  margin-top: 20px;
  margin-bottom: 40px
}

.twWrap_btn a{
  display: block;
  width: 100%;
  height: 100%;
}

.twWidget .box {
  background: url(../img/top/twWidget-bg-sp.png) no-repeat 50% 100% / cover;
  padding: 0 1px 0 2px;
}

iframe[id^="twitter-widget-"] {
  min-height: 317px !important;
  height: 317px !important;
  width: 100% !important;
}

@media (min-width: 768px) {
  
  .twWrap {
    margin-top: 40px;
    overflow: hidden;
    text-align: center;
  }
  
  .twWidget {
    margin-top: 0;
    width: 48%;
  }

  .twWrap_btn{
    display: inline-block;
    margin: 20px auto 0;
    width: 40vw;
    max-width: 486px;
  }
  
  .twWidget:nth-of-type(1) {
    float: left;
  }
  
  .twWidget:nth-of-type(2) {
    float: right;
  }
  
  .twWidget .box {
    background: url(../img/top/twWidget-bg-pc.png) no-repeat 50% 100% / 100% 100%;
    padding: 0 2px;
  }
  
  #twitter-widget-0,
  #twitter-widget-1 {
    min-height: 320px !important;
    height: 320px !important;
  }
  
}

@media (min-width: 1040px) {
  
  .twWidget {
    width: 480px;
  }

  .twWrap_btn{
    display: inline-block;
    margin: 40px auto 0;
    width: 25vw;
    max-width: 486px;
  }
  
}

/* btmNews */

#top #btmNews {
  padding: 0 0 4vw;
}

@media (min-width: 768px) {
  
  #top #btmNews {
    padding: 0;
  }
  
}

@media (min-width: 1040px) {
  
  #top #btmNews {
    background: #001464;
  }
  
  #top #btmNews h2 {
    display: block;
  }
  
  #top .btmNewsBn {
    margin-top: -10px;
  }
  
  #top .btmNewsBn li ~ li {
    margin-left: 0;
  }
  
}

/* share */

@media (min-width: 1040px) {
  
  #top #share {
    background: #323232;
    margin: 0;
    position: static;
    top: none;
    width: auto;
  }
  
  #top #share ul {
    padding-bottom: 20px;
    width: auto;
  }
  
  #top #share li {
    margin-top: 20px;
  }
  
  #top #share li ~ li {
    margin-left: 20px;
  }
  
  #top #share a {
    height: 70px;
    width: 70px;
  }
  
  #top #share .tw img {
    width: 45px;
  }

  #top #share .fb img {
    width: 27px;
  }

  #top #share .li img {
    width: 52px;
  }
  
}

/* footerBtm */

@media (min-width: 1040px) {
  
  #top .footerBtm {
    width: 707px;
  }

  #top #btmBn {
    margin: 0 0 0 auto;
  }

}

/* -------------------------
  3. about
------------------------- */

#about h1 {
  background: #a7c7eb;
  padding: 17.467vw 0 44vw;
  text-align: center;
}

#about h1 img {
  margin-top: 0 4vw;
  width: 90vw;
}

#about div[class*="Box"] p {
  font-size: 14px;
  line-height: 1.8;
  margin: 0 4vw;
}

#about div[class*="Box"] h2 + p {
  margin-top: 4.5vw;
}

#about div[class*="Box"] p ~ p {
  margin-top: 4vw;
}

#about .br {
  display: block;
}

#about .whtBox {
  background: #fff;
  position: relative;
}

#about .whtBox::before,
#about .whtBox::after {
  background: #fff;
  content: "";
  display: block;
  height: 34vw;
  left: -10%;
  position: absolute;
  transform: rotate(-5.6deg);
  width: 120%;
}

#about .whtBox::before {
  top: -10vw;
}

#about .whtBox::after {
  bottom: -10vw
}

#about .whtBox h2,
#about .whtBox p {
  position: relative;
  z-index: 1;
}

#about .texBox {
  background: url(../img/about/bg-tex-sp.png);
  padding: 20vw 0;
}

#about .outline > .inr {
  background: url(../img/about/outline-bg.jpg) no-repeat 50% 50% / 120% auto;
  position: relative;
  z-index: 1;
}

#about .outline p {
  line-height: 1.9;
  text-align: center;
}

#about .outline p:nth-of-type(1) {
  margin-top: -24vw;
}

#about .outline strong {
  color: #0048a5;
  font-size: 20px;
}

#about .bbct .img,
#about .bbcs .img,
#about .bbcp .img,
#about .bbcf .img {
  text-align: center;
}

#about .bbct .img img,
#about .bbcs .img img,
#about .bbcp .img img,
#about .bbcf .img img {
  width: 60vw;
}

#about .bbcf {
  padding-bottom: 10vw;
}

@media (min-width: 768px) {
  
  #about h1 {
    padding-top: 10vw;
  }
  
  #about h1 img {
    margin: 0 30px;
    width: 60vw;
  }
  
  #about .ttl::before {
    top: 25vw;
  }
  
  #about div[class*="Box"] p {
    font-size: 16px;
    margin: 1em 30px;
  }
  
  #about div[class*="Box"] h2 + p,
  #about div[class*="Box"] p ~ p {
    margin: 1em 30px;
  }
  
  #about .br.tb {
    display: none;
  }
  
  #about div[class*="Box"] h2 {
    margin: 0 30px;
  }

  #about .whtBox::before,
  #about .whtBox::after {
    height: 230px;
  }
  
  #about .whtBox::after {
    bottom: -136px;
  }
  
  #about .texBox {
    background: url(../img/about/bg-tex-pc.png) repeat 50% 100%;
  }
  
  #about .texBox h2 img {
    margin-top: 30px;
  }
  
  #about .outline p {
    font-size: 18px !important;
  }
  
  #about .outline p:nth-of-type(1) {
    margin-top: -28vw;
  }
  
  #about .prologue h2 {
    margin-top: 103px !important;
  }
  
  #about .prologue .img {
    margin-left: 0;
    margin-right: 0;
  }
  
  #about .bbct .img img,
  #about .bbcs .img img,
  #about .bbcp .img img,
  #about .bbcf .img img {
    width: 355px;
  }
  
}

@media (min-width: 1040px) {
  
  #about h1 {
    height: 296px;
    padding: 0;
  }
  
  #about h1 img {
    padding-top: 98px;
    width: 357px;
  }
  
  #about div[class*="Box"] p,
  #about div[class*="Box"] h2 + p,
  #about div[class*="Box"] p ~ p {
    margin: 1em auto;
    width: 960px;
  }
  
  #about div[class*="Box"] h2 {
    margin: 0 auto;
    width: 960px;
  }
  
  #about .whtBox::before {
    top: -136px;
  }
  
  #about .texBox {
    padding: 136px 0;
  }
  
  #about .texBox h2 img {
    margin-top: 0;
  }
  
  #about .outline {
    margin-top: -100px;
  }
  
  #about .outline > .inr {
    background-size: auto;
    height: 536px;
  }
  
  #about .br.pc {
    display: none;
  }
  
  #about .br.pcBr {
    display: block;
  }
  
  #about .outline p {
    font-size: 22px !important;
    width: 960px;
  }
  
  #about .outline p:nth-of-type(1) {
    margin-top: 144px !important;
  }
  
  #about .outline strong {
    font-size: 29px;
  }
  
  #about .prologue p,
  #about .bbct p,
  #about .bbcs p,
  #about .bbcp p,
  #about .bbcf p {
    margin-top: 2em !important;
  }
  
  #about .prologue .img {
    width: 100%;
  }
  
  #about .bbct {
    background: url(../img/bg-texGry.png) 50% 0;
    box-sizing: border-box;
    height: 829px;
    margin-top: -6px;
    padding: 20px 0 0;
    position: relative;
  }
  
  #about .bbct::after {
    display: none;
  }
  
  #about .bbct::before {
    background: url(../img/about/bg-mix01.png) no-repeat 50% 0;
    height: 172px;
    transform: rotate(0);
  }
  
  #about .bbct .img {
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    text-align: right;
    top: 57px;
  }
  
  #about .bbcs {
    background-position: 50% 0;
    box-sizing: border-box;
    height: 944px;
    margin-top: 169px;
    padding: 0;
    position: relative;
  }
  
  #about .bbcs::before {
    background: url(../img/about/bg-mix02.png) no-repeat 50% 0;
    content: "";
    display: block;
    height: 174px;
    left: 0;
    position: absolute;
    top: -174px;
    width: 100%;
  }
  
  #about .bbcs .img {
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    text-align: right;
    top: 37px;
  }
  
  #about .bbcp {
    background: url(../img/bg-texGry.png) 50% 0;
    box-sizing: border-box;
    height: 809px;
    margin-top: -6px;
    padding: 20px 0 0;
    position: relative;
  }
  
  #about .bbcp::after {
    display: none;
  }
  
  #about .bbcp::before {
    background: url(../img/about/bg-mix01.png) no-repeat 50% 0;
    height: 172px;
    transform: rotate(0);
  }
  
  #about .bbcp .img {
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    text-align: right;
    top: 57px;
  }
  
  #about .bbcf {
    background-position: 50% 0;
    box-sizing: border-box;
    height: 694px;
    margin-top: 169px;
    padding: 0;
    position: relative;
  }
  
  #about .bbcf::before {
    background: url(../img/about/bg-mix02.png) no-repeat 50% 0;
    content: "";
    display: block;
    height: 174px;
    left: 0;
    position: absolute;
    top: -174px;
    width: 100%;
  }
  
  #about .bbcf .img {
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    text-align: right;
    top: 37px;
  }
  
}

/* -------------------------
  4. charalist / chara
------------------------- */

/* charalist */

#charalist .ttl {
  overflow: hidden;
  position: relative;
}

#charalist .ttl::before {
  background: #66a8e4;
  content: "";
  display: block;
  height: 34vw;
  left: -10%;
  position: absolute;
  top: 41.4vw;
  transform: rotate(-5.6deg);
  width: 120%;
  z-index: 1;
}

#charalist h1 {
  background: #a7c7eb;
  padding-top: 17.467vw;
  text-align: center;
}

#charalist h1 img {
  margin-top: 0 4vw;
  width: 90vw;
}

.charalist-nav {
  background: #a7c7eb;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 700;
  -webkit-justify-content: center;
  justify-content: center;
  padding: 16vw 3.733vw 4vw;
}

.charalist-nav p {
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.charalist-nav p ~ p {
  margin-left: 1em;
}

.charalist-nav a {
  color: #323232;
  text-decoration: none;
}

.charalist-nav .active {
  border-bottom: 2px solid #fff;
  color: #fff;
}

.charalist-cont {
  background: #fff;
  padding-bottom: 4vw;
  position: relative;
}

.charalist-cont h2 {
  color: #323232;
  font-size: 20px;
  margin-left: 4vw;
  padding-top: 4vw;
}

.charalist-cont .genre {
  font-size: 14px;
  margin: 1vw 0 0 4vw;
}

.charalist-cont .sort-btn,
.charalist-cont .sortList li,
.charalist-cont .sortList a {
  color: #fff;
}

.charalist-cont .sort-btn,
.charalist-cont .sortList {
  position: absolute;
}

.charalist-cont .sort-btn {
  background: #323232 url(../img/chara/icon-arw-sort.png) no-repeat 16% 52% / 24px 14px;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  font-size: 13px;
  height: 43px;
  padding: 14px 0 0 40px;
  right: 4vw;
  top: 3vw;
  width: 113px;
}

.charalist-cont .sortList {
  display: none;
  right: 4vw;
  top: calc(3vw + 43px);
  min-width: 113px;
  z-index: 2;
}

.charalist-cont .sortList li {
  background: #323232;
  border-top: 2px solid #5a5a5a;
}

.charalist-cont .sortList li.active {
  background: #797979;
}

.charalist-cont .sortList li.active,
.charalist-cont .sortList a {
  padding: 14px 10px;
}

.charalist-cont .sortList a {
  display: block;
  text-decoration: none;
}

.charaListWrap {
  background: url(../img/chara/bg-texGry-sp.png);
  margin-top: 4vw;
  padding: 4vw 0;
}

.chara-list .list {
  background: #fff;
  border: 1px solid #323232;
  margin: 0 4vw;
}

.chara-list .list ~ .list {
  margin-top: 4vw;
}

.chara-list .list a {
  display: -webkit-flex;
  display: flex;
  text-decoration: none;
}

.chara-list .list .img {
  display: block;
  height: 18.6vw;
  overflow: hidden;
  position: relative;
  width: 50%;
}

.chara-list .list img {
  bottom: 0;
  height: auto;
  left: -1%;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  transition: all .3s;
  width: 102%;
}

.chara-list .list:hover img {
  transform: scale(1.1);
}

.chara-list .list p {
  box-sizing: border-box;
  color: #323232;
  font-size: 14px;
  line-height: 1.6;
  padding: 3vw 2vw 0;
  width: 50%;
}

.pager {
  margin: 4vw 4vw 0;
  padding-bottom: 2.656vw;
  position: relative;
}

.pager ul {
  display: -webkit-flex;
  display: flex;
  font-size: 18px;
  -webkit-justify-content: center;
  justify-content: center;
}

.pager li,
.pager li a {
  height: 10vw;
  width: 10vw;
}

.pager li ~ li {
  margin-left: 2vw;
}

.pager li a {
  border-radius: 50%;
  box-sizing: border-box;
  color: #006ed2;
  display: block;
  line-height: 8.667vw;
  text-align: center;
  text-decoration: none;
}

.pager li.active a {
  background: #006ed2;
  color: #fff;
}

.pager .prev,
.pager .next {
  bottom: 0;
  max-height: 67px;
  margin: auto;
  position: absolute;
  top: .6vw;
  max-width: 40px;
  width: 5.333vw;
}

.pager .prev {
  left: 0;
}

.pager .next {
  right: 0;
}

@media (min-width: 500px) {
  
  .charalist-cont .sort-btn {
    top: 4vw;
  }
  
}

@media (min-width: 768px) {
  
  #charalist h1 {
    padding-top: 10vw;
  }
  
  #charalist h1 img {
    width: 60vw;
  }
  
  #charalist .ttl::before {
    top: 25vw;
  }
  
  .charalist-nav {
    font-size: 14px;
    padding-top: 10vw;
  }
  
  .charaListWrap {
    padding: 30px 0;
  }
  
  .chara-list {
    margin: 0 30px;
    overflow: hidden;
    padding: 0;
  }
  
  .chara-list .list,
  .chara-list .list ~ .list {
    margin: 20px 0 0;
  }
  
  .chara-list .list {
    border: 0;
    float: left;
    width: 48%;
  }
  
  .chara-list .list:nth-of-type(2n) {
    float: right;
  }
  
  .chara-list .list:nth-of-type(-n + 2) {
    margin-top: 0;
  }
  
  .chara-list .list:nth-of-type(2n) {
    margin-left: 0;
  }
  
  .chara-list .list a {
    display: block;
  }
  
  .chara-list .list .img {
    border: 1px solid #323232;
    box-sizing: border-box;
    width: 100%;
  }
  
  .chara-list .list p {
    padding: 7px 10px 8px;
    width: 100%;
  }
  
  .pager {
    margin: 30px auto 0;
    padding: 0;
    width: 311px;
  }
  
  .pager ul {
    font-size: 14px;
  }
  
  .pager li {
    margin-top: 0;
  }
  
  .pager li ~ li {
    margin-left: 15px;
  }
  
  .pager li a {
    height: 23px;
    line-height: 23px;
    width: 23px;
  }
  
  .pager{
    position: relative;
  }
  
  .pager li{
    height: 23px;
    width: 23px;
  }
  
  .pager .prev,
  .pager .next {
    height: 35px;
    position: absolute;
    top: 0;
    width: 21px;
  }
  
  .pager .prev{
    left: 0;
  }
  
  .pager .next{
    right: 0;
  }
  
}

@media (min-width: 1040px) {
  
  .charalist-cont {
    padding-bottom: 11vw;
  }
  
  #charalist .ttl::before {
    top: 204px;
  }
  
  #charalist h1 {
    padding-top: 98px;
  }
  
  #charalist h1 img {
    width: 357px;
  }
  
  .charalist-nav {
    font-size: 16px;
    padding: 94px 0 33px;
  }
  
  .charaListInr {
    height: 63px;
    margin: 0 auto;
    position: relative;
    width: 960px;
  }
  
  .charalist-cont .sortList {
    right: 0;
    top: 55px;
  }
  
  .charalist-cont h2 {
    display: inline-block;
    float: left;
    margin: 0;
    padding: 28px 0 0;
  }
  
  .charalist-cont .genre {
    display: inline-block;
    margin: 33px 0 0 1em;
  }
  
  .charalist-cont .sort-btn {
    right: 0;
    top: 12px;
  }
  
  .charaListWrap {
    background: url(../img/chara/bg-texGry-pc.png);
    margin-top: 4px;
  }
  
  .chara-list {
    margin: 0 auto;
    width: 960px;
  }
  
  .chara-list .list {
    float: left !important;
    margin-left: 20px !important;
    width: 225px;
  }
  
  .chara-list .list:nth-of-type(-n + 4) {
    margin-top: 0;
  }
  
  .chara-list .list:nth-of-type(4n + 1) {
    clear: both;
    margin-left: 0 !important;
  }
  
  .chara-list .list .img {
    height: 97px;
    width: 225px;
  }
  
  .chara-list .list img {
    left: -59px;
    width: 344px;
  }
  
}

/* chara */

#chara > div {
  min-height: 88vh;
  padding-top: 14.8vw;
  position: relative;
}

@media (max-width: 370px) { /* 横370px以下の端末 */
  
  #chara > div {
    min-height: inherit;
  }
  
}

#chara > div::before {
  background: url(../img/chara/name/bg.png) no-repeat 50% 50% / auto 160%;
  content: "";
  display: block;
  height: 32.667vw;
  left: 0;
  position: absolute;
  top: 12.2vw;
  width: 100%;
}

#chara h1 {
  height: 26.667vw;
  padding: 2vw 4vw;
  position: relative;
  text-align: center;
  z-index: 2;
}

.chara-img li {
  display: none;
  overflow: hidden;
  left: -10vw;
  margin: -12% 0 0 -20%;
  opacity: 0;
  position: relative;
  transition: all .3s;
}

.chara-sub .chara-img li {
  margin: -8% 0 0 -20%;
}

.chara-img li.active {
  animation: slide .3s .5s forwards;
  display: block;
}

.chara-img img {
  height: auto;
  width: 148vw;
}

.chara-img.box{
  margin-left: 6vw;
} 

@-webkit-keyframes slide {
  

  0% {
    left: -10vw;
    opacity: 0;
  }
  
  100% {
    left: 0;
    opacity: 1;
  }
  
}

@keyframes slide {
  
  0% {
    left: -10vw;
    opacity: 0;
  }
  
  100% {
    left: 0;
    opacity: 1;
  }
  
}

.charaImgNav {
  display: -webkit-flex;
  display: flex;
  margin: -19vw auto 0;
  position: relative;
  width: 76.533vw;
  z-index: 3;
}

.charaImgNav > p {
  margin-top: 3.733vw;
  width: 15.733vw;
}

.charaImgNav > ul {
  display: -webkit-flex;
  display: flex;
  margin-left: 2.267vw;
  width: 58.533vw;
}

.charaImgNav li {
  cursor: pointer;
  height: 13.067vw;
  width: 13.067vw;
}

.charaImgNav li ~ li {
  margin-left: 2vw;
}

.charaImgNav .ct {
  background: url(../img/chara/visual-bbct-off.png) no-repeat 0 0 / cover;
}

.charaImgNav .ct.active {
  background: url(../img/chara/visual-bbct-on.png) no-repeat 0 0 / cover;
}

.charaImgNav .cs {
  background: url(../img/chara/visual-bbcs-off.png) no-repeat 0 0 / cover;
}

.charaImgNav .cs.active {
  background: url(../img/chara/visual-bbcs-on.png) no-repeat 0 0 / cover;
}

.charaImgNav .cp {
  background: url(../img/chara/visual-bbcp-off.png) no-repeat 0 0 / cover;
}

.charaImgNav .cp.active {
  background: url(../img/chara/visual-bbcp-on.png) no-repeat 0 0 / cover;
}

.charaImgNav .cf {
  background: url(../img/chara/visual-bbcf-off.png) no-repeat 0 0 / cover;
}

.charaImgNav .cf.active {
  background: url(../img/chara/visual-bbcf-on.png) no-repeat 0 0 / cover;
}

.charaImgNav .xbce {
  background: url(../img/chara/visual-xbce-off.png) no-repeat 0 0 / cover;
}

.charaImgNav .xbce.active {
  background: url(../img/chara/visual-xbce-on.png) no-repeat 0 0 / cover;
}

.charaImgNav .xblm {
  background: url(../img/chara/visual-xblm-off.png) no-repeat 0 0 / cover;
}

.charaImgNav .xblm.active {
  background: url(../img/chara/visual-xblm-on.png) no-repeat 0 0 / cover;
}

#chara .quote {
  left: 12.8vw;
  position: absolute;
  top: 30vw;
  width: 21.333vw;
}

#chara .chara-sub .quote {
  left: 15vw;
  position: absolute;
  top: 42vw;
  width: 21.333vw;
}

#chara .txt {
  margin: 7.333vw 4vw 0;
  position: relative;
}

#chara .chara-img + .quote + .txt{
  margin-top: -9vh;
}

.charaSeries,
.charaProfile {
  background: #505050;
}

.charaSeries h2,
.charaProfile h2 {
  background: #dcdcdc url(../img/chara/icon-arwBtm.gif) no-repeat 4vw 60% / 5.733vw 3.467vw;
  border-bottom: 2px solid #eee;
  border-top: 2px solid #848484;
  font-size: 20px;
  font-weight: 400;
  padding: 3.6vw 11vw 3.733vw 10vw;
  text-align: center;
}

.charaSeries .cont,
.charaProfile .cont {
  color: #fff;
  height: 0;
  opacity: 0;
  overflow: hidden;
  text-align: center;
  transition: all .3s;
}

.charaSeries.active .cont,
.charaProfile.active .cont {
  height: auto;
  opacity: 1;
}

.charaSeries .cont li,
.charaProfile .cont li {
  border-bottom: 2px solid #484848;
  line-height: 1.2;
  padding: 2.4vw 4vw;
}

.charaSeries a,
.charaProfile a {
  color: #fff;
  display: block;
  text-decoration: none;
}

.charaSeries a:hover,
.charaProfile a:hover {
  text-decoration: underline;
}

.charaSeries {
  margin-top: 6.8vw;
}

.charaProfile span {
  display: inline-block;
  margin-right: 1em;
}

.charaListBtn {
  background: #001464;
  padding: 1.067vw 0 6.267vw;
}

.chara-pageNav .prev,
.chara-pageNav .next,
.chara-pageNav .prev a,
.chara-pageNav .next a {
  height: 16.533vw;
  width: 8.267vw;
}

.chara-pageNav .prev,
.chara-pageNav .next {
  position: absolute;
  top: 75.333vw;
}

.chara-pageNav .prev {
  background: url(../img/chara/prev-sp.png) no-repeat 0 0 / cover;
  left: 4vw;
}

.chara-pageNav .next {
  background: url(../img/chara/next-sp.png) no-repeat 0 0 / cover;
  right: 4vw;
}

.chara-pageNav .prev a,
.chara-pageNav .next a {
  display: block;
}

.chara-ragna {background: url(../img/chara/img/ragna-bg-tex-sp.png), url(../img/chara/img/ragna-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-jin {background: url(../img/chara/img/jin-bg-tex-sp.png), url(../img/chara/img/jin-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-noel {background: url(../img/chara/img/noel-bg-tex-sp.png), url(../img/chara/img/noel-bg.jpg) no-repeat 20% 0 / auto 210vw;}
.chara-rachel {background: url(../img/chara/img/rachel-bg-tex-sp.png), url(../img/chara/img/rachel-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-taokaka {background: url(../img/chara/img/taokaka-bg-tex-sp.png), url(../img/chara/img/taokaka-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-tager {background: url(../img/chara/img/tager-bg-tex-sp.png), url(../img/chara/img/tager-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-litchi {background: url(../img/chara/img/litchi-bg-tex-sp.png), url(../img/chara/img/litchi-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-arakune {background: url(../img/chara/img/arakune-bg-tex-sp.png), url(../img/chara/img/arakune-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-bang {background: url(../img/chara/img/bang-bg-tex-sp.png), url(../img/chara/img/bang-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-carl {background: url(../img/chara/img/carl-bg-tex-sp.png), url(../img/chara/img/carl-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-hakumen {background: url(../img/chara/img/hakumen-bg-tex-sp.png), url(../img/chara/img/hakumen-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-nu {background: url(../img/chara/img/nu-bg-tex-sp.png), url(../img/chara/img/nu-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-tsubaki {background: url(../img/chara/img/tsubaki-bg-tex-sp.png), url(../img/chara/img/tsubaki-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-hazama {background: url(../img/chara/img/hazama-bg-tex-sp.png), url(../img/chara/img/hazama-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-makoto {background: url(../img/chara/img/makoto-bg-tex-sp.png), url(../img/chara/img/makoto-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-valkenhayn {background: url(../img/chara/img/valkenhayn-bg-tex-sp.png), url(../img/chara/img/valkenhayn-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-platinum {background: url(../img/chara/img/platinum-bg-tex-sp.png), url(../img/chara/img/platinum-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-myu {background: url(../img/chara/img/myu-bg-tex-sp.png), url(../img/chara/img/myu-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-relius {background: url(../img/chara/img/relius-bg-tex-sp.png), url(../img/chara/img/relius-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-lambda {background: url(../img/chara/img/lambda-bg-tex-sp.png), url(../img/chara/img/lambda-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-amane {background: url(../img/chara/img/amane-bg-tex-sp.png), url(../img/chara/img/amane-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-bullet {background: url(../img/chara/img/bullet-bg-tex-sp.png), url(../img/chara/img/bullet-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-azrael {background: url(../img/chara/img/azrael-bg-tex-sp.png), url(../img/chara/img/azrael-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-izayoi {background: url(../img/chara/img/izayoi-bg-tex-sp.png), url(../img/chara/img/izayoi-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-kagura {background: url(../img/chara/img/kagura-bg-tex-sp.png), url(../img/chara/img/kagura-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-terumi {background: url(../img/chara/img/terumi-bg-tex-sp.png), url(../img/chara/img/terumi-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-kokonoe {background: url(../img/chara/img/kokonoe-bg-tex-sp.png), url(../img/chara/img/kokonoe-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-celica {background: url(../img/chara/img/celica-bg-tex-sp.png), url(../img/chara/img/celica-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-hibiki {background: url(../img/chara/img/hibiki-bg-tex-sp.png), url(../img/chara/img/hibiki-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-naoto {background: url(../img/chara/img/naoto-bg-tex-sp.png), url(../img/chara/img/naoto-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-nine {background: url(../img/chara/img/nine-bg-tex-sp.png), url(../img/chara/img/nine-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-izanami {background: url(../img/chara/img/izanami-bg-tex-sp.png), url(../img/chara/img/izanami-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-es {background: url(../img/chara/img/es-bg-tex-sp.png), url(../img/chara/img/es-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-mai {background: url(../img/chara/img/mai-bg-tex-sp.png), url(../img/chara/img/mai-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-susanoo {background: url(../img/chara/img/susanoo-bg-tex-sp.png), url(../img/chara/img/susanoo-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-jubei {background: url(../img/chara/img/jubei-bg-tex-sp.png), url(../img/chara/img/jubei-bg.jpg) no-repeat 70% 0 / auto 210vw;}
.chara-sub {background: url(../img/chara/img/sub-bg-tex-sp.png), url(../img/chara/img/sub-bg.jpg) no-repeat 70% 0 / auto 210vw;}

@media (min-width: 768px) {
  
  #chara > div {
    padding-top: 9.1vw;
  }

  #chara > div::before {
    background: url(../img/chara/name/bg.png) no-repeat 50% 50% / auto 160%;
    top: 6.6vw;
  }
  
  #chara .txt {
    margin-top: 0;
    position: relative;
  }
  
  #chara .chara-img + .quote + .txt{
  margin-top: 0;
}
  
  .charaSeries .cont,
  .charaProfile .cont {
    height: auto;
    opacity: 1;
  }
  
  .charaListBtn {
    background: transparent;
    padding: 0;
    position: absolute;
    right: 30px;
    top: 177vw;
  }
  
  .charaListBtn img {
    width: 30vw;
  }
  
}

@media (min-width: 1040px) {
  
  #chara > div {

    padding-top: 0;
  }
  
  #chara > div::before {
    background-size: auto;
    height: 310px;
    top: 106px;
  }
  
  #chara h1 {
    height: auto;
    margin: 0 auto;
    padding: 0;
    text-align: right;
    width: 960px;
  }
  
  #chara h1 img {
    margin-top: 168px;
    width: 562px;
  }
  
  .chara-img {
    height: 550px;
  }
  
  .chara-img li {
    left: 0;
    margin: auto;
    overflow: inherit;
    position: absolute;
    right: 0;
    top: 48px;
    width: 960px;
    z-index: 1;
  }
  
  .chara-sub .chara-img li {
    left: 0;
    margin: auto;
    overflow: inherit;
    position: absolute;
    right: 0;
    top: 48px;
    width: 960px;
    z-index: 1;
  }
  
  .chara-img img {
    margin-left: -360px;
    width: auto;
  }
  
  .charaImgNav {
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 560px;
    transform: rotate(-5deg);
    width: 960px;
  }
  
  .charaImgNav > p {
    margin: 24px 0 0 480px;
    padding-right: 15px;
    width: 93px;
  }
  
  .charaImgNav > ul {
    margin: 0;
    width: 360px;
  }
  
  .charaImgNav li {
    height: 80px;
    width: 80px;
  }
  
  .charaImgNav li ~ li {
    margin-left: 10px;
  }
  
  #chara .quote {
    left: 0;
    margin: auto;
    right: 0;
    top: 129px;
    width: 960px;
    z-index: 1;
  }
  
  #chara .chara-sub .quote {
    left: 0;
    margin: auto;
    right: 0;
    top: 129px;
    width: 960px;
    z-index: 1;
  }
  
  #chara .quote img {
    margin-left: -80px;
    width: auto;
  }
  
  #chara .txt {
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    text-align: right;
    top: 307px;
    width: 960px;
    z-index: 2;
  }
  
  #chara .txt img {
    margin-right: 14px;
    width: auto;
  }
  
  .charaSeries,
  .charaProfile {
    background: transparent;
  }
  
  .charaSeries h2,
  .charaProfile h2 {
    background: transparent;
    border: 0;
    height: 86px;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    width: 960px;
  }
  
  .charaSeries .cont,
  .charaProfile .cont {
    background: transparent;
    color: #1e1e1e;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin: 0 auto;
    width: 960px;
  }
  
  .charaSeries .cont ul,
  .charaProfile .cont ul {
    margin-left: 109px;
    width: 438px;
  }
  
  .charaSeries .cont ul + ul,
  .charaProfile .cont ul + ul {
    margin-left: 0;
    width: 413px;
  }
  
  .charaSeries .cont li,
  .charaProfile .cont li {
    background: url(../img/chara/icon-list.png) no-repeat 0 0;
    border: 0;
    font-size: 17px;
    line-height: 1.2;
    padding: 0 0 0 27px;
    text-align: left;
  }
  
  .charaSeries .cont li ~ li,
  .charaProfile .cont li ~ li {
    margin-top: 14px;
  }
  
  .charaSeries a,
  .charaProfile a {
    color: #1e1e1e;
    display: inline;
  }
  
  .charaSeries {
    margin-top: 0;
    position: relative;
  }
  
  .chara-sub .charaSeries {
    padding-bottom: 130px;
  }
  
  .charaSeries::before {
    background: #fff;
    content: "";
    display: block;
    height: 440px;
    left: -10%;
    position: absolute;
    top: 0;
    transform: rotate(5deg);
    width: 120%;
  }
  
  .charaSeries > * {
    position: relative;
    z-index: 1;
  }
  
  .charaSeries h2 {
    background: url(../img/chara/charaSeries-ttl.png) no-repeat 61px 0;
  }
  
  .chara-sub .charaSeries h2 {
    margin-top: 10px;
  }
  
  .charaProfile {
    background: url(../img/chara/bg-texGry-pc.png);
    margin-top: 60px;
    padding-bottom: 130px;
    position: relative;
  }
  
  .charaProfile h2 {
    background: url(../img/chara/charaProfile-ttl.png) no-repeat 61px 0;
  }
  
  .charaProfile ul span {
    width: 3em;
  }
  
  .charaProfile ul + ul span {
    width: 5em;
  }
  
  .chara-pageNav .prev,
  .chara-pageNav .next,
  .chara-pageNav .prev a,
  .chara-pageNav .next a {
    height: 57px;
    width: 163px;
  }

  .chara-pageNav .prev,
  .chara-pageNav .next {
    position: absolute;
    top: 742px;
    z-index: 1;
  }

  .chara-pageNav .prev {
    background: url(../img/chara/prev-pc.png) no-repeat 0 0;
    left: 10px;
  }

  .chara-pageNav .next {
    background: url(../img/chara/next-pc.png) no-repeat 0 0;
    right: 10px;
    margin-top: 8%;
  }
  
  .charaListBtn {
    left: 0;
    margin: 0 auto;
    right: 0;
    top: 104px;
    width: 960px;
  }
  
  .charaListBtn a {
    display: block;
    margin: 0 0 0 auto;
    position: relative;
    width: 151px;
    z-index: 2;
  }
  
  .charaListBtn img {
    width: auto;
  }
  
  .chara-ragna {background: url(../img/chara/img/ragna-bg-tex-pc.png), url(../img/chara/img/ragna-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-jin {background: url(../img/chara/img/jin-bg-tex-pc.png), url(../img/chara/img/jin-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-noel {background: url(../img/chara/img/noel-bg-tex-pc.png), url(../img/chara/img/noel-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-rachel {background: url(../img/chara/img/rachel-bg-tex-pc.png), url(../img/chara/img/rachel-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-taokaka {background: url(../img/chara/img/taokaka-bg-tex-pc.png), url(../img/chara/img/taokaka-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-tager {background: url(../img/chara/img/tager-bg-tex-pc.png), url(../img/chara/img/tager-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-litchi {background: url(../img/chara/img/litchi-bg-tex-pc.png), url(../img/chara/img/litchi-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-arakune {background: url(../img/chara/img/arakune-bg-tex-pc.png), url(../img/chara/img/arakune-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-bang {background: url(../img/chara/img/bang-bg-tex-pc.png), url(../img/chara/img/bang-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-carl {background: url(../img/chara/img/carl-bg-tex-pc.png), url(../img/chara/img/carl-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-hakumen {background: url(../img/chara/img/hakumen-bg-tex-pc.png), url(../img/chara/img/hakumen-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-nu {background: url(../img/chara/img/nu-bg-tex-pc.png), url(../img/chara/img/nu-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-tsubaki {background: url(../img/chara/img/tsubaki-bg-tex-pc.png), url(../img/chara/img/tsubaki-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-hazama {background: url(../img/chara/img/hazama-bg-tex-pc.png), url(../img/chara/img/hazama-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-makoto {background: url(../img/chara/img/makoto-bg-tex-pc.png), url(../img/chara/img/makoto-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-valkenhayn {background: url(../img/chara/img/valkenhayn-bg-tex-pc.png), url(../img/chara/img/valkenhayn-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-platinum {background: url(../img/chara/img/platinum-bg-tex-pc.png), url(../img/chara/img/platinum-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-myu {background: url(../img/chara/img/myu-bg-tex-pc.png), url(../img/chara/img/myu-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-relius {background: url(../img/chara/img/relius-bg-tex-pc.png), url(../img/chara/img/relius-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-lambda {background: url(../img/chara/img/lambda-bg-tex-pc.png), url(../img/chara/img/lambda-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-amane {background: url(../img/chara/img/amane-bg-tex-pc.png), url(../img/chara/img/amane-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-bullet {background: url(../img/chara/img/bullet-bg-tex-pc.png), url(../img/chara/img/bullet-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-azrael {background: url(../img/chara/img/azrael-bg-tex-pc.png), url(../img/chara/img/azrael-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-izayoi {background: url(../img/chara/img/izayoi-bg-tex-pc.png), url(../img/chara/img/izayoi-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-kagura {background: url(../img/chara/img/kagura-bg-tex-pc.png), url(../img/chara/img/kagura-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-terumi {background: url(../img/chara/img/terumi-bg-tex-pc.png), url(../img/chara/img/terumi-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-kokonoe {background: url(../img/chara/img/kokonoe-bg-tex-pc.png), url(../img/chara/img/kokonoe-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-celica {background: url(../img/chara/img/celica-bg-tex-pc.png), url(../img/chara/img/celica-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-hibiki {background: url(../img/chara/img/hibiki-bg-tex-pc.png), url(../img/chara/img/hibiki-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-naoto {background: url(../img/chara/img/naoto-bg-tex-pc.png), url(../img/chara/img/naoto-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-nine {background: url(../img/chara/img/nine-bg-tex-pc.png), url(../img/chara/img/nine-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-izanami {background: url(../img/chara/img/izanami-bg-tex-pc.png), url(../img/chara/img/izanami-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-es {background: url(../img/chara/img/es-bg-tex-pc.png), url(../img/chara/img/es-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-mai {background: url(../img/chara/img/mai-bg-tex-pc.png), url(../img/chara/img/mai-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-susanoo {background: url(../img/chara/img/susanoo-bg-tex-pc.png), url(../img/chara/img/susanoo-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-jubei {background: url(../img/chara/img/jubei-bg-tex-pc.png), url(../img/chara/img/jubei-bg.jpg) no-repeat 50% 0 / cover;}
  .chara-sub {background: url(../img/chara/img/sub-bg-tex-pc.png), url(../img/chara/img/sub-bg.jpg) no-repeat 50% 0 / cover;}
  
}

/* -------------------------
  6. creators
------------------------- */

#creators {
  background: #fff;
}

#creators h1 {
  left: 0;
  margin: auto;
  padding: 17.467vw 0 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
}

#creators h1 img {
  margin-top: 0;
  width: 90vw;
}

.creators-cont {
  padding: 17.467vw 0 0;
}

.creators-cont.mori {
  background: url(../img/creators/mori-bg.jpg) no-repeat 68% 0 / 360% auto;
}

.creators-cont.kato {
  background: url(../img/creators/kato-bg.jpg) no-repeat 68% 0 / 360% auto;
}

.creators-cont.ishiwatari {
  background: url(../img/creators/ishiwatari-bg.jpg) no-repeat 68% 0 / 360% auto;
}

.creators-cont.yamanaka {
  background: url(../img/creators/yamanaka-bg.jpg) no-repeat 68% 0 / 360% auto;
}

.creators-cont.iguchi {
  background: url(../img/creators/iguchi-bg.jpg) no-repeat 68% 0 / 360% auto;
}

.creators-cont.ishikawa {
  background: url(../img/creators/ishikawa-bg.jpg) no-repeat 68% 0 / 360% auto;
}

.creators-cont.endo {
  background: url(../img/creators/endo-bg.jpg) no-repeat 68% 0 / 360% auto;
}

.creators-cont.sugiyama {
  background: url(../img/creators/sugiyama-bg.jpg) no-repeat 68% 0 / 360% auto;
}

.creators-cont.muramatsu {
  background: url(../img/creators/muramatsu-bg.jpg) no-repeat 68% 0 / 360% auto;
}

.creators-cont.mori2 {
  background: url(../img/creators/mori2-bg.jpg) no-repeat 68% 0 / 360% auto;
}

.creators-cont.kimu {
  background: url(../img/creators/kimu-bg.jpg) no-repeat 68% 0 / 360% auto;
}

.creators-article {
  margin-top: 88vw;
  padding-bottom: 6vw;
}

.creators-article h2 {
  margin: 0 auto;
  width: 90vw;
}

.creators-article h2 img {
  max-width: 690px;
}

.creators-article p {
  color: #323232;
  line-height: 1.4;
  margin: 1em auto 0;
  /*text-align: justify;*/
  width: 90vw;
}

.creators-article h2 + p {
  margin-top: 1.5em;
}

.creators-article .img {
  margin: 2em auto;
  text-align: center;
}

.creators-article  .img_box + .img_box .img {
  margin-top: .2em;
}

.creators-article .img.vertical {
  width: 65%;
}

.creators-article .img_box{
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 90vw;
  max-width: 600px;
  margin: 0 auto;
}

.creators-article .img_box p{
  width: 100%;
}

.creators-article .img_box p:first-child{
  margin-bottom: 0;
}

.creators-article .img_box p:nth-child(2){
  margin-top: .2em;
}

.creators-article .img_box.c3 p:nth-child(2){
  margin-bottom: 0;
}

.creators-article .img_box.c3 p:last-child{
  margin-top: .2em;
  margin-bottom: 2em;
}

.creatorsList h2 {
  background: #dcdcdc url(../img/chara/icon-arwBtm.gif) no-repeat 4vw 60% / 5.733vw 3.467vw;
  border-bottom: 2px solid #eee;
  border-top: 2px solid #848484;
  font-size: 16px;
  font-weight: 400;
  padding: 3.6vw 11vw 3.733vw 10vw;
  text-align: center;
}

.creatorsList .cont {
  background: #505050;
  color: #fff;
  text-align: center;
}

.creatorsList .cont li {
  border-bottom: 2px solid #484848;
  line-height: 1.2;
  padding: 2.4vw 4vw;
}

.creatorsList .cont li:not([class]) {
  color: #767676;
}

.creatorsList a {
  color: #fff;
  display: block;
  text-decoration: none;
}

.creatorsList a:hover {
  text-decoration: underline;
}

@media (min-width: 768px) {

  .creators-article .img_box p:nth-child(2){
    margin-top: 2em;
  }
  
  #creators h1 {
    padding: 10vw 0 45vw;
  }
  
  #creators h1 img {
    width: 60vw;
  }
  
  .creators-cont.mori {
    background: url(../img/creators/mori-bg.jpg) no-repeat 70% 0 / 280% auto;
  }
  
  .creators-cont.kato {
    background: url(../img/creators/kato-bg.jpg) no-repeat 70% 0 / 280% auto;
  }
  
  .creators-cont.ishiwatari {
    background: url(../img/creators/ishiwatari-bg.jpg) no-repeat 70% 0 / 280% auto;
  }
  
  .creators-cont.yamanaka {
    background: url(../img/creators/yamanaka-bg.jpg) no-repeat 70% 0 / 280% auto;
  }
  
  .creators-cont.iguchi {
    background: url(../img/creators/iguchi-bg.jpg) no-repeat 70% 0 / 280% auto;
  }
  
  .creators-cont.ishikawa {
    background: url(../img/creators/ishikawa-bg.jpg) no-repeat 70% 0 / 280% auto;
  }
  
  .creators-cont.endo {
    background: url(../img/creators/endo-bg.jpg) no-repeat 70% 0 / 280% auto;
  }

  .creators-cont.sugiyama {
    background: url(../img/creators/sugiyama-bg.jpg) no-repeat 70% 0 / 280% auto;
  }

  .creators-cont.muramatsu {
    background: url(../img/creators/muramatsu-bg.jpg) no-repeat 70% 0 / 280% auto;
  }
  
  .creators-cont.mori2 {
    background: url(../img/creators/mori2-bg.jpg) no-repeat 70% 0 / 280% auto;
  }
  
  .creators-cont.kimu {
    background: url(../img/creators/kimu-bg.jpg) no-repeat 70% 0 / 280% auto;
  }
  
  .creators-article {
    margin-top: 66vw;
  }
  
  .creators-article .br {
    display: block;
  }
  
  .creators-article .img img {
    max-width: 600px;
  }
  
  .creators-article .img.vertical img {
    max-width: 340px;
  }

  .creators-article .img_box{
    max-width: 960px;
  }

  .creators-article .img_box p{
    width: 49.5%;
  }

  .creators-article  .img_box.c3{
    align-items: center;
  }
  
  .creators-article  .img_box.c3 p {
    width: 33%;
  }
  
/*  .creators-article  .img_box.c3.sugiyama_1 p {
    width: 34.5%;
  }
  
  .creators-article  .img_box.c3.sugiyama_1 p:last-child {
    width: 30%;
  }*/

}

@media (min-width: 1040px) {
  
  #creators h1 {
    padding: 97px 0 150px;
  }
  
  #creators h1 img {
    width: 357px;
  }
  
  .creators-cont {
    padding: 151px 0 130px;
  }
  
  .creators-cont.mori {
    background: url(../img/creators/mori-bg.jpg) no-repeat 50% -150px / auto;
  }
  
  .creators-cont.kato {
    background: url(../img/creators/kato-bg.jpg) no-repeat 50% -150px / auto;
  }
  
  .creators-cont.ishiwatari {
    background: url(../img/creators/ishiwatari-bg.jpg) no-repeat 50% -150px / auto;
  }
  
  .creators-cont.yamanaka {
    background: url(../img/creators/yamanaka-bg.jpg) no-repeat 50% -150px / auto;
  }
  
  .creators-cont.iguchi {
    background: url(../img/creators/iguchi-bg.jpg) no-repeat 50% -150px / auto;
  }
  
  .creators-cont.ishikawa {
    background: url(../img/creators/ishikawa-bg.jpg) no-repeat 50% -150px / auto;
  }
  
  .creators-cont.endo {
    background: url(../img/creators/endo-bg.jpg) no-repeat 50% -150px / auto;
  }

  .creators-cont.sugiyama {
    background: url(../img/creators/sugiyama-bg.jpg) no-repeat 50% -150px / auto;
  }

  .creators-cont.muramatsu {
    background: url(../img/creators/muramatsu-bg.jpg) no-repeat 50% -150px / auto;
  }
  
  .creators-cont.mori2 {
    background: url(../img/creators/mori2-bg.jpg) no-repeat 50% -150px / auto;
  }
  
  .creators-cont.kimu {
    background: url(../img/creators/kimu-bg.jpg) no-repeat 50% -150px / auto;
  }
  
  .creators-article {
    margin-top: 0;
  }
  
  .creators-article h2 {
    margin: 30px auto 0;
    width: 960px;
  }
  
  .creators-article h2 img {
    max-width: 514px;
  }
  
  .creators-article h2 + p {
    margin-top: 120px;
  }
  
  .creators-article p {
    line-height: 1.8;
    width: 960px;
  }
  
  .creators-article .br.pc {
    display: none;
  }
  
  .creatorsList h2 {
    background: #505050 url(../img/creators/list-ttl.png) no-repeat 50% 0;
    border: 0;
    height: 50px;
    padding: 0;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
  }
  
  .creatorsList .cont {
    background: url(../img/bg-texGry.png);
    overflow: hidden;
  }
  
  .creatorsList .cont ul {
    margin: 0 auto;
    width: 960px;
  }
  
  .creatorsList .cont li,
  .creatorsList .cont li a {
    display: block;
    height: 222px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    width: 202px;
  }
  
  .creatorsList .cont li {
    border: 0;
    float: left;
    margin-left: -61px;
    padding: 0;
    position: relative;
  }
  
  .creatorsList .cont li:nth-of-type(1) {
    margin-left: -46px;
  }
  
  .creatorsList .cont li:nth-of-type(odd) {
    background: url(../img/creators/list-cs01.png);
  }
  
  .creatorsList .cont li:nth-of-type(even) {
    background: url(../img/creators/list-cs02.png);
  }
  
  .creatorsList .cont li:nth-of-type(7) {
    margin-right: -46px;
  }
  
  .creatorsList .cont li a::after {
    content: "";
    display: block;
    height: 222px;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all .3s;
    width: 202px;
  }
  
  .creatorsList .cont li a:hover,
  .creatorsList .cont li a:hover::after {
    opacity: 1;
  }
  
  .creatorsList .cont li.mori a {
    background: url(../img/creators/list-mori-off.png);
  }
  
  .creatorsList .cont li.mori.active,
  .creatorsList .cont li.mori a::after {
    background: url(../img/creators/list-mori-on.png);
  }
  
  .creatorsList .cont li.kato a {
    background: url(../img/creators/list-kato-off.png);
  }
  
  .creatorsList .cont li.kato.active,
  .creatorsList .cont li.kato a::after {
    background: url(../img/creators/list-kato-on.png);
  }
  
  .creatorsList .cont li.ishiwatari a {
    background: url(../img/creators/list-ishiwatari-off.png);
  }
  
  .creatorsList .cont li.ishiwatari.active,
  .creatorsList .cont li.ishiwatari a::after {
    background: url(../img/creators/list-ishiwatari-on.png);
  }
  
  .creatorsList .cont li.yamanaka a {
    background: url(../img/creators/list-yamanaka-off.png);
  }
  
  .creatorsList .cont li.yamanaka.active,
  .creatorsList .cont li.yamanaka a::after {
    background: url(../img/creators/list-yamanaka-on.png);
  }
  
  .creatorsList .cont li.iguchi a {
    background: url(../img/creators/list-iguchi-off.png);
  }
  
  .creatorsList .cont li.iguchi.active,
  .creatorsList .cont li.iguchi a::after {
    background: url(../img/creators/list-iguchi-on.png);
  }
  
  .creatorsList .cont li.ishikawa a {
    background: url(../img/creators/list-ishikawa-off.png);
  }
  
  .creatorsList .cont li.ishikawa.active,
  .creatorsList .cont li.ishikawa a::after {
    background: url(../img/creators/list-ishikawa-on.png);
  }
  
  .creatorsList .cont li.endo a {
    background: url(../img/creators/list-endo-off.png);
  }
  
  .creatorsList .cont li.endo.active,
  .creatorsList .cont li.endo a::after {
    background: url(../img/creators/list-endo-on.png);
  }
  
  .creatorsList .cont li.sugiyama a {
    background: url(../img/creators/list-sugiyama-off.png);
  }

  
  .creatorsList .cont li.sugiyama.active,
  .creatorsList .cont li.sugiyama a::after {
    background: url(../img/creators/list-sugiyama-on.png);
  }
  
  .creatorsList .cont li.muramatsu a {
    background: url(../img/creators/list-muramatsu-off.png);
  }
  
  .creatorsList .cont li.muramatsu.active,
  .creatorsList .cont li.muramatsu a::after {
    background: url(../img/creators/list-muramatsu-on.png);
  }
  
  .creatorsList .cont li.mori2 a {
    background: url(../img/creators/list-mori2-off.png);
  }
  
  .creatorsList .cont li.mori2.active,
  .creatorsList .cont li.mori2 a::after {
    background: url(../img/creators/list-mori2-on.png);
  }
  
  .creatorsList .cont li.kimu a {
    background: url(../img/creators/list-kimu-off.png);
  }
  
  .creatorsList .cont li.kimu.active,
  .creatorsList .cont li.kimu a::after {
    background: url(../img/creators/list-kimu-on.png);
  }
  
}

/* -------------------------
  7. contest
------------------------- */

#contest .ttl {
  overflow: hidden;
  position: relative;
}

#contest .ttl::before,
#contest .ttl::after {
  background: #a7c7eb;
  content: "";
  position: absolute;
}

#contest .ttl::before {
  height: 17.467vw;
  left: 0;
  top: 0;
  width: 100%;
}

#contest .ttl::after {
  bottom: 34vw;
  display: block;
  height: 34vw;
  left: -10%;
  transform: rotate(-5.6deg);
  width: 120%;
}

#contest h1 {
  padding: 17.467vw 0 45vw;
  position: relative;
  text-align: center;
  z-index: 1;
}

#contest h1 img {
  margin-top: 2vw;
  width: 90vw;
}

.contest-cont {
  background: url(../img/bg-texGry.png);
  margin-top: -45vw;
  padding: 20.8vw 0 16vw;
}

.contest-cont li {
  background: #fff;
  margin: 0 4vw;
  position: relative;
  z-index: 1;
}

.contest-cont li ~ li {
  margin-top: 16vw;
}

.contest-cont li img {
  margin-left: -4vw;
  margin-right: -4vw;
  width: 108%;
}

.contest-cont p:not([class]) {
  line-height: 1.4;
  margin: 2.667vw 5.333vw;
}

.gray-btn {
  background: #323232;
  line-height: 1.2;
  margin: 0 auto;
}

.gray-btn a {
  background: url(../img/contest/icon-arw.gif) no-repeat 98% 50% / auto 60%;
  color: #fff;
  display: block;
  padding: 2.667vw 5.333vw;
  text-decoration: none;
}

@media (min-width: 768px) {
  
  #contest .ttl::after {
    height: 38vw;
    bottom: 38vw;
  }
  
  #contest h1 {
    padding: 10vw 0 45vw;
  }
  
  #contest h1 img {
    margin: 0 30px;
    width: 60vw;
  }
  
  .contest-cont {
    margin-top: -49vw;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  .contest-cont ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin: 0 auto;
    position: relative;
    max-width: 830px;
    z-index: 1;
  }
  
  .contest-cont li,
  .contest-cont li ~ li {
    margin: 65px auto 0;
  } 
  
  .contest-cont li {
    background: transparent;
    max-width: 378px;
    width: 48%;
  }
  
  .contest-cont li:nth-of-type(-n + 2) {
    margin-top: 0;
  }

  .contest-cont li img {
    margin: 0;
    width: 100%;
  }

  .contest-cont li p {
    display: none;
  }

}

@media (min-width: 1040px) {
  
  #contest .ttl::before {
    height: 94px;
  }
  
  #contest .ttl::after {
    bottom: inherit;
    height: 203px;
    top: 0;
  }
  
  #contest h1 {
    padding: 97px 0 150px;
  }
  
  #contest h1 img {
    width: 357px;
  }
  
  .contest-cont {
    margin-top: -203px;
    padding: 203px 0 120px;
  }
  
  .contest-cont li {
    margin-top: 0;
  }

}

#contest .illust::after,
#contest .koma4::after,
#contest .cosplay::after {
  bottom: 46vw;
}

#contest .illust h1,
#contest .koma4 h1,
#contest .cosplay h1 {
  padding-bottom: 57vw;
}

#contest .illust + .contest-cont,
#contest .koma4 + .contest-cont,
#contest .cosplay + .contest-cont {
  margin-top: 0;
  padding-top: 0;
}

#contest .illust {
  background: url(../img/contest/illust/bg.jpg) no-repeat 53% 100% / auto 80%;
}

#contest .koma4 {
  background: url(../img/contest/4koma/bg.jpg) no-repeat 53% 100% / auto 80%;
}
#contest ul.koma4,
#contest ul.cosplay{
  background: none;
}

#contest .cosplay {
  background: url(../img/contest/cosplay/bg.jpg) no-repeat 10% 100% / auto 90%;
}


#contest .outline {
  background: #fff;
}

#contest .outline p {
  color: #505050;
  font-size: 15px;
  margin: 0 auto;
  padding: 4vw 0;
  text-align: center;
  width: 92vw;
}

#contest .outline .br {
  display: block;
}

.contest-cont .period {
  background: #646464;
  padding: 3.533vw 4vw 3.933vw;
  text-align: center;
}

.contest-cont .guideline h2,
.contest-cont .rule h2 {
  margin-top: 9.333vw;
  text-align: center;
}

.contest-cont .guideline h2 img,
.contest-cont .rule h2 img {
  max-width: 350px;
  width: 46.667vw;
}

.contest-cont .guideline .wrap,
.contest-cont .rule .wrap {
  margin-top: 4vw;
}

.contest-cont .guideline dl {
  background: #e1e1e1;
  color: #323232;
  padding-bottom: 4vw;
}

.contest-cont .guideline dt,
.contest-cont .guideline dd {
  line-height: 1.2;
  margin: 0 auto;
  width: 88vw;
}

.contest-cont.close .guideline dd {
  line-height: 1.5;
  margin: 0 auto;
  padding-top: 3vw;
  text-align: center;
  width: 88vw;
}

.contest-cont .guideline dt {
  padding-top: 4vw;
}

.contest-cont .guideline dd {
  padding-top: 1vw;
}

.contest-cont .guideline .br {
  display: block;
}

.contest-cont .rule .inr {
  background: #e1e1e1;
  color: #323232;
  padding-bottom: 4vw;
}

.contest-cont .rule p,
.contest-cont .rule ul {
  margin: 0 auto;
  width: 88vw;
}

.contest-cont .rule p,
.contest-cont .rule li {
  font-size: 14px;
  text-align: justify;
}

.contest-cont .rule p {
  padding-top: 4vw;
}

.contest-cont .rule ul {
  margin-top: 1em;
}

.contest-cont .rule li {
  background: transparent;
  line-height: 1.4;
  list-style: disc;
  margin: 0 0 0 1.4em;
}

.contest-cont .apply {
  margin: 9.333vw auto 0;
  max-width: 418px;
  width: 92vw;
}

@media (min-width: 768px) {
  
  #contest .illust::after,
  #contest .koma4::after,
  #contest .cosplay::after  {
    height: 38vw;
    bottom: 38vw;
  }
  
  #contest .illust h1,
  #contest .koma4 h1,
  #contest .cosplay h1 {
    padding: 10vw 0 45vw;
  }
  
  #contest .illust h1 img,
  #contest .koma4 h1 img,
  #contest .cosplay h1 img {
    margin: 0 30px;
    width: 60vw;
  }
  
  #contest .illust + .contest-cont,
  #contest .koma4 + .contest-cont,
  #contest .cosplay + .contest-cont {
    padding: 0 0 60px;
  }
  
  #contest .outline p {
    width: 100%;
  }
  
  #contest .outline .br {
    display: none;
  }
  
  .contest-cont .guideline h2,
  .contest-cont .rule h2 {
    margin-top: 0;
  }
  
  .contest-cont .guideline h2 img,
  .contest-cont .rule h2 img {
    margin-top: 60px;
    max-width: 166px;
  }
  
  .contest-cont .guideline .wrap,
  .contest-cont .rule .wrap {
    border: 1px solid #323232;
    margin: 40px 30px 0;
  }
  
  .contest-cont .guideline dl,
  .contest-cont .rule .inr {
    border: 3px double #323232;
  }
  
  .contest-cont .guideline dt,
  .contest-cont .guideline dd {
    background: #e1e1e1;
    width: 80vw;
  }
  
  .contest-cont.close .guideline dd {
    font-size: 18px;
    padding-top: 3.4vw;
  }
  
  .contest-cont.close .guideline dd br.sp{
    display: none;
  }
  
  .contest-cont .rule p,
  .contest-cont .rule ul {
    width: 80vw;
  }
  
  .contest-cont .rule ul {
    display: block;
  }
  
  .contest-cont .rule li {
    max-width: inherit;
    width: auto;
  }
  
  .contest-cont .apply {
    margin-top: 40px;
  }
  
}

@media (min-width: 768px) {
  
  #contest .illust,
  #contest .koma4,
  #contest .cosplay {
    background-size: auto;
  }
  
  #contest .illust::after,
  #contest .koma4::after,
  #contest .cosplay::after {
    bottom: inherit;
    height: 204px;
    top: 0;
  }
  
  #contest .illust h1 img,
  #contest .koma4 h1 img,
  #contest .cosplay h1 img {
    width: 357px;
  }
  
  #contest .illust h1,
  #contest .koma4 h1,
  #contest .cosplay h1 {
    padding: 97px 0 407px;
  }
  
  .contest-cont .period {
    padding: 19px 30px 21px;
  }
  
  .contest-cont .period img {
    max-width: 739px;
  }
  
}

@media (min-width: 1040px) {
  
  #contest .illust + .contest-cont,
  #contest .koma4 + .contest-cont,
  #contest .cosplay + .contest-cont {
    padding-bottom: 160px;
  }
  
  .contest-cont .guideline,
  .contest-cont .rule {
    margin: 0 auto;
    position: relative;
    width: 960px;
  }
  
  .contest-cont .guideline h2,
  .contest-cont .rule h2 {
    left: 0;
    position: absolute;
    top: 0;
  }
  
  .contest-cont .guideline h2 img,
  .contest-cont .rule h2 img {
    margin-top: 0;
  }
  
  .contest-cont .guideline .wrap,
  .contest-cont .rule .wrap {
    margin: 70px 0 0 auto;
    width: 740px;
  }
  
  .contest-cont.close .guideline .wrap{
    margin: 70px auto 0 auto;
    width: 740px;
  }
  
  .contest-cont .guideline dl {
    overflow: hidden;
    padding-bottom: 30px;
  }
  
  .contest-cont .guideline dt,
  .contest-cont .guideline dd {
    margin: 0 30px;
    padding-top: 20px;
    width: auto;
  }
  
  .contest-cont .guideline dt {
    clear: both;
    font-size: 18px;
    float: left;
    width: 90px;
  }
  
  .contest-cont .guideline dd {
    float: left;
    margin-top: 4px;
    width: 480px;
  }
  
  .contest-cont.close .guideline dd {
    clear: both;
    font-size: 20px;
    text-align: center;
    margin: 4px 0 0 0;
    padding-top: 22px;
    line-height: 150%;
    width: 100%;
  }
  
  .contest-cont .guideline .br {
    display: none;
  }
  
  .contest-cont .rule .inr {
    padding: 0 30px 30px;
  }
  
  .contest-cont .rule p,
  .contest-cont .rule ul {
    width: auto;
  }
  
  .contest-cont .rule p {
    padding-top: 30px;
  }
  
  .contest-cont .apply {
    margin-top: 60px;
  }
  
}

/* 結果発表 */

#contest.result {
  background: #fff;
}

#contest.result.chara .ttl {
  background: url(../img/contest/chara/bg.jpg) no-repeat 53% 100% / auto 80%;
  overflow: hidden;
  position: relative;
}

#contest.result.quest .ttl {
  background: url(../img/contest/quest/bg.jpg) no-repeat 53% 180% / auto 80%;
  overflow: hidden;
  position: relative;
}

#contest.result .ttl + p {
  background: #fff;
  text-align: center;
}

#contest.result .ttl + p img {
  margin: 3vw 0;
  width: 60vw;
}

#contest.result .box {
  background: #dfe5f3;
  color: #505050;
  padding: 3vw 0;
  text-align: center;
}

#contest.result .box p {
  font-size: 3.4vw;
  letter-spacing: .06em;
  line-height: 1.6;
}

#contest.result .resultList.illust + .box{
  padding: 4vw 0;
}

#contest.result .resultList.illust + .box span {
  font-size: 4.733vw;
  font-weight: 500;
}

#contest.result .box .votes strong {
  font-size: 4.733vw;
  font-weight: 500;
}

#contest.result .box .votes span {
  font-size: 6.067vw;
}

#contest.result .box .votes + p {
  font-size: 3.933vw;
  margin-top: 2vw;
}

#contest.result .box .votes + p span {
  font-stretch: italic;
}

#contest.result .resultList{
  background: url(../img/bg-texGry.png);
  padding-bottom: 8vw;
}

#contest.result .resultList.bg_none{
  background: none;
  padding-top: 2.4vw;
}

#contest.result .resultList li {
  margin: 0 auto;
  text-align: center;
  width: 96%;
}

#contest.result .resultList img {
  max-width: 100%;
  width: auto;
}

#contest.result .resultList li ~ li {
  margin-top: 4vw;
}

#contest.result .resultList li:nth-child(1) img {
  margin-top: -2vw;
}

#contest.result .resultList .archive li:nth-child(1) img {
  margin-top: 0;
}

#contest.result .resultList .illust,
#contest.result .resultList .koma4,
#contest.result .resultList .cosplay,
#contest.result .resultList .archive{
  background: none;  
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1000px;
  width: 96%;
}

#contest.result .resultList .archive{
  background: #a7c7eb;
  border: solid 2px #001464;
  box-sizing: border-box;
  padding: 2.8vw;
}

#contest.result .resultList .illust li,
#contest.result .resultList .koma4 li,
#contest.result .resultList .cosplay li{
  position: relative;
  margin-top: 7.5vw;
  width: 100%;
}

#contest.result .resultList .cosplay li:nth-child(2){
  margin-top: 3vw;
}

#contest.result .resultList .illust li::after,
#contest.result .resultList .koma4 li::after,
#contest.result .resultList .cosplay li::after{
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
  display: block;
  height: 100%;
  margin: 0 auto;
  padding-top: 2.4437vw;
  pointer-events: none;
  position: absolute;
  bottom: 1.921vw;
  right: 0;
  left: 0;
  width: 100%;
}

#contest.result .resultList .illust li:first-child img,
#contest.result .resultList .koma4 li:first-child img,
#contest.result .resultList .cosplay li:first-child img{
  margin: 0;
}

#contest.result .resultList .illust li img:nth-child(2),
#contest.result .resultList .koma4 li img:nth-child(2),
#contest.result .resultList .cosplay li img:nth-child(3){
  margin-top: 1vw;
}

#contest.result .resultList .illust li:first-child,
#contest.result .resultList .koma4 li:first-child,
#contest.result .resultList .cosplay li:first-child{
  margin-top: 10vw;
}

#contest.result .resultList .illust li:first-child::after{
  background-image: url(../img/contest/illust/result-frame01.png);
  padding-top: 2.8125vw;
  bottom: 2.325vw;
  width: 100%;
}
#contest.result .resultList .illust li:nth-child(2)::after{
  background-image: url(../img/contest/illust/result-frame02.png);
  padding-top: 2.9125vw;
  bottom: 2.6425vw;
  width: 100%;
}
#contest.result .resultList .illust li:nth-child(3)::after{
  background-image: url(../img/contest/illust/result-frame03.png);
  padding-top: 2.9125vw;
  bottom: 2.4525vw;
  width: 100%;
}
#contest.result .resultList .illust li:nth-child(4)::after{
  background-image: url(../img/contest/illust/result-frame04.png);
}
#contest.result .resultList .illust li:nth-child(5)::after{
  background-image: url(../img/contest/illust/result-frame05.png);
}
#contest.result .resultList .illust li:nth-child(6)::after{
  background-image: url(../img/contest/illust/result-frame06.png);
}
#contest.result .resultList .illust li:nth-child(7)::after{
  background-image: url(../img/contest/illust/result-frame07.png);
}
#contest.result .resultList .illust li:nth-child(8)::after{
  background-image: url(../img/contest/illust/result-frame08.png);
}
#contest.result .resultList .illust li:nth-child(9)::after{
  background-image: url(../img/contest/illust/result-frame09.png);
}
#contest.result .resultList .illust li:nth-child(10)::after{
  background-image: url(../img/contest/illust/result-frame10.png);
}

#contest.result .resultList .koma4 li{
  margin-top: 7.5vw;
}

#contest.result .resultList .cosplay li{
  margin-top: 5vw;
}


#contest.result .resultList .koma4 li:first-child img,
#contest.result .resultList .cosplay li:first-child img{
  margin: 0;
}

#contest.result .resultList .koma4 li img:nth-child(2),
#contest.result .resultList .cosplay li img:nth-child(2){
  margin-top: 1vw;
}

#contest.result .resultList .koma4 li:first-child,
#contest.result .resultList .cosplay li:first-child{
  margin-top: 10vw;
}

#contest.result .resultList .koma4 li:first-child::after,
#contest.result .resultList .cosplay li:first-child::after{
  background-image: url(../img/contest/4koma/result-frame01.png);
  padding-top: 2.8125vw;
  bottom: 2.325vw;
  width: 100%;
}
#contest.result .resultList .koma4 li:nth-child(2)::after,
#contest.result .resultList .cosplay li:nth-child(3)::after{
  background-image: url(../img/contest/4koma/result-frame02.png);
  padding-top: 2.9125vw;
  bottom: 2.6425vw;
  width: 100%;
}
#contest.result .resultList .koma4 li:nth-child(3)::after,
#contest.result .resultList .cosplay li:nth-child(4)::after{
  background-image: url(../img/contest/4koma/result-frame03.png);
  padding-top: 2.9125vw;
  bottom: 2.4525vw;
  width: 100%;
}
#contest.result .resultList .koma4 li:nth-child(4)::after,
#contest.result .resultList .cosplay li:nth-child(5)::after{
  background-image: url(../img/contest/4koma/result-frame04.png);
}
#contest.result .resultList .koma4 li:nth-child(5)::after,
#contest.result .resultList .cosplay li:nth-child(6)::after{
  background-image: url(../img/contest/4koma/result-frame05.png);
}
#contest.result .resultList .koma4 li:nth-child(6)::after{
  background-image: url(../img/contest/4koma/result-frame06.png);
}
#contest.result .resultList .koma4 li:nth-child(7)::after{
  background-image: url(../img/contest/4koma/result-frame07.png);
}

#contest.result .resultList .illust li:nth-child(n+4),
#contest.result .resultList .koma4 li:nth-child(n+4),
#contest.result .resultList .cosplay li:nth-child(n+5),
#contest.result .resultList .archive li{
  margin: 7vw 0 0;
  width: 48.3%;
  display: inline-block;
}

#contest.result .resultList .illust li:last-child,
#contest.result .resultList .koma4 li:last-child,
#contest.result .resultList .cosplay li:last-child{
  margin: 7vw auto 0;
}

#contest.result .resultList .archive li{
  background: #fff;
  border: solid 1px #000;
  margin-top: 2vw;
  overflow: hidden;
}

#contest.result .resultList .archive li:not(:nth-child(n+3)){
  margin-top: 0;
}

#contest.result .resultList .archive li p{
  background: #fff;
  text-align: left;
  padding: .7vw;
  position: relative;
}

#contest.result .resultList .illust a,
#contest.result .resultList .koma4 a,
#contest.result .resultList .cosplay a{
  display: inline-block;
  height: auto;
  overflow: hidden;
  width: 100%;
}

#contest.result .resultList .cosplay li:nth-child(n+5) a,
#contest.result .resultList .koma4 li:nth-child(n+4) a{
  height: 88%;
}

#contest.result .resultList .archive a{
  height: 82%;
}

#contest.result .resultList .illust li:nth-child(1) a{
  height: 87%;
}
#contest.result .resultList .illust li:nth-child(2) a{
  height: 86.8%;
}
#contest.result .resultList .illust li:nth-child(3) a{
  height: 86.3%;
}

#contest.result .resultList .illust a img,
#contest.result .resultList .koma4 a img,
#contest.result .resultList .archive a img,
#contest.result .resultList .cosplay a img{
  transition: all .3s;
}

#contest.result .resultList .illust a:hover,
#contest.result .resultList .koma4 a:hover,
#contest.result .resultList .archive a:hover,
#contest.result .resultList .cosplay a:hover{
  opacity: 1;
}

#contest.result .resultList .illust a:hover img,
#contest.result .resultList .koma4 a:hover img,
#contest.result .resultList .archive a:hover img,
#contest.result .resultList .cosplay a:hover img{
  transform: scale(1.1);
}



#contest.result .resultList .cosplay li dl.comment div {
  background: #fff;
  display: -webkit-flex;
  display: block;
  margin-top: 15px;
  padding: 35px 30px;
}

#contest.result .resultList .cosplay li dl.comment dd img {
  height: 100%;
  width: auto;
}

#contest.result .resultList .cosplay li dl.comment dd:last-child {
  margin-top: 30px;
  line-height: 140%;
  text-align: left;
  width: 100%;
}

#contest.result .resultList .cosplay li dl.comment dd span {
  display: block;
  text-align: right;
}

#contest.result .resultList .cosplay li dl.comment dd span a {
  display: inline;
  height: auto;
  overflow: visible;
  width: auto;
}


@media (min-width: 690px) {

  #contest.result .resultList .archive{
    background: #7cb5e8;
    border: solid 2px #1b214a;
    box-sizing: border-box;
    padding: 2vw;
  }

  #contest.result .resultList .archive li{
    width: 32%;
  }

  #contest.result .resultList .archive li:not(:nth-child(n+4)){
    margin-top: 0;
  }
  
  #contest.result .resultList .cosplay li dl.comment div {
    background: #fff;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: flex-start;
    margin-top: 15px;
    padding: 35px 30px;
  }
  
  #contest.result .resultList .cosplay li dl.comment dd img {
    height: auto;
    width: 100%;
  }
  
  #contest.result .resultList .cosplay li dl.comment dd:last-child {
    margin-left: 30px;
    line-height: 140%;
    text-align: left;
    width: 34.2vw;
  }


}

@media (min-width: 768px) {
  
  #contest.result .ttl {
    background-size: auto !important;
  }

  #contest.result.quest .ttl {
    background: url(../img/contest/quest/bg.jpg) no-repeat 53% -250% ;
    overflow: hidden;
    position: relative;
  }
  
  #contest.result::after {
    bottom: inherit;
    height: 204px;
    top: 0;
  }
  
  #contest.result h1 {
    padding: 97px 0 407px;
  }
  
  #contest.result h1 img {
    width: 357px;
  }
  
  #contest.result .ttl + p img {
    width: auto;
  }
  
  #contest.result .box p {
    font-size: 18px;
  }

  #contest.result .box .votes strong {
    font-size: 28px;
  }

  #contest.result .box .votes span {
    font-size: 38px;
  }

  #contest.result .box .votes + p {
    font-size: 22px;
  }
  
  #contest.result .resultList {
    margin-bottom: 170px;
    padding-bottom: 50px;
  }
  
  #contest.result .resultList.illust,
  #contest.result .resultList.koma4,
  #contest.result .resultList.cosplay {
    margin-bottom: 0;
  }
  
  #contest.result .resultList li ~ li {
    margin-top: 49px;
  }
  
  #contest.result .resultList li:nth-child(1) img {
    margin-top: -21px;
  }
  
  #contest.result .resultList li:nth-child(2),
  #contest.result .resultList li:nth-child(3) {
    margin-top: 38px;
  }
  
  #contest.result .sp{
    display: none;
  }

  #contest.result .resultList.illust + .box{
    padding: 30px 0;
  }

  #contest.result .resultList.illust + .box span {
    font-size: 28px;
  }
  
  #contest.result .resultList .illust li:nth-child(2),
  #contest.result .resultList .illust li:nth-child(3){
    margin-top: 6vw;
  }

}

@media (min-width: 1000px) {
  #contest.result .resultList.bg_none {
    padding-top: 30px;
  }
  #contest.result .resultList .archive {
    padding: 30px;
    width: 1000px;
  }
  #contest.result .resultList .archive li {
    background: #fff;
    border: solid 1px #000;
    margin-top: 20px;
    width: 298px;
  }
}

@media (min-width: 1040px) {
  
  #contest.result .ttl + p img {
    margin: 30px 0;
  }
  
  #contest.result .box {
    padding: 20px 0;
  }
  
  #contest.result .box .votes + p {
    margin-top: 20px;
  }
  
  #contest.result .resultList .illust li:nth-child(n+4),
  #contest.result .resultList .koma4 li:nth-child(n+4),
  #contest.result .resultList .cosplay li:nth-child(n+5){
    margin-top: 100px;
  }
  
  #contest.result .resultList .illust li:nth-child(n+4)::after, 
  #contest.result .resultList .koma4 li:nth-child(n+4)::after,
  #contest.result .resultList .cosplay li:nth-child(n+5)::after{
    bottom: 0;
    padding-top: 47px;
  }
  
  #contest.result .resultList li:nth-child(2),
  #contest.result .resultList li:nth-child(3) {
    margin-top: 87px;
  }

  #contest.result .resultList .cosplay li:nth-child(2) {
    margin-top: 30px;
  }
  
  #contest.result .resultList .illust li:first-child,
  #contest.result .resultList .koma4 li:first-child,
  #contest.result .resultList .cosplay li:first-child{
    margin-top: 96px;
  }
  
  #contest.result .resultList .illust li img:nth-child(2),
  #contest.result .resultList .koma4 li img:nth-child(2),
  #contest.result .resultList .cosplay li img:nth-child(2){
    margin-top: 10px;
  }
  
  #contest.result .resultList .illust li:first-child::after,
  #contest.result .resultList .koma4 li:first-child::after,
  #contest.result .resultList .cosplay li:first-child::after{
    padding-top: 54px;
    bottom: 0;
  }
  #contest.result .resultList .illust li:nth-child(2)::after,
  #contest.result .resultList .koma4 li:nth-child(2)::after,
  #contest.result .resultList .cosplay li:nth-child(3)::after{
    padding-top: 54px;
    bottom: 5px;
  }
  #contest.result .resultList .illust li:nth-child(3)::after,
  #contest.result .resultList .koma4 li:nth-child(3)::after,
  #contest.result .resultList .cosplay li:nth-child(4)::after{
    padding-top: 50px;
    bottom: 6px;
  }
  
}

/* -------------------------
  8. vote
------------------------- */

#vote {
  background: #fff;
  position: relative;
}

#vote .error {
  background: #006ed2;
  color: #fff;
  height: 1em;
  padding: 20px 0;
  position: fixed;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 100;
}

#vote .ttl {
  background: url(../img/contest/cosplay/bg.jpg) no-repeat 53% 100% / auto 80%;
  overflow: hidden;
  position: relative;
}

#vote .ttl::before,
#vote .ttl::after {
  background: #a7c7eb;
  content: "";
  position: absolute;
}

#vote .ttl::before {
  height: 17.467vw;
  left: 0;
  top: 0;
  width: 100%;
}

#vote .ttl::after {
  bottom: 46vw;
  display: block;
  height: 34vw;
  left: -10%;
  transform: rotate(-5.6deg);
  width: 120%;
}

#vote h1 {
  padding: 7.467vw 0 55vw;
  position: relative;
  text-align: center;
  z-index: 1;
}

#vote h1 img {
  margin-top: 0;
  width: 90vw;
}

.vote-cont {
  margin-top: 4vw;
  padding-bottom: 12vw;
}

.vote-cont > p {
  color: #505050;
  line-height: 1.4;
  text-align: center;
}

.vote-cont .complete {
  margin-top: 10vw;
}

.vote-cont .br {
  display: block;
}

.vote-cont .period {
  background: #646464;
  margin-top: 4vw;
  padding: 3.533vw 4vw 3.933vw;
}

.vote-cont .notice {
  background: #dfe5f3;
  color: #505050;
  font-size: 14px;
  padding: 4vw 0;
}

.vote-cont .notice ul {
  margin: 0 4vw;
}

.vote-cont .notice li {
  line-height: 1.4;
  list-style: disc;
  margin-left: 1.2em;
}

.vote-cont .notice li ~ li {
  margin-top: .8vw;
}

.vote-cont.close .notice{
  background: #fff;
  padding: 0;
}

.vote-cont.close .notice p{
  font-size: 15px;
  line-height: 150%;
  text-align: center;
}

.vote-cont .charaListSort {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  margin-top: 6vw;
}

.vote-cont .charaListSort li {
  background: #797979;
  display: block;
  font-size: 13px;
}

.vote-cont .charaListSort li ~ li {
  margin-left: 2vw;
}

.vote-cont .charaListSort a {
  color: #fff;
  cursor: pointer;
  display: block;
  height: 43px;
  line-height: 43px;
  padding: 0 2vw;
}

.vote-cont .charaListWrap {
  margin-top: 4vw;
}

.vote-cont .chara-list .list {
  display: -webkit-flex;
  display: flex;
  position: relative;
}

.vote-cont .chara-list .list .img {
  height: 14.4vw;
  width: 37%;
}

.vote-cont .chara-list .list .img img {
  left: -15%;
  width: 130%;
}

.vote-cont .chara-list .list:hover img {
  transform: scale(1);
}

.vote-cont .chara-list p {
  font-size: 4.1vw;
}

.vote-cont .chara-list p:not([class]) {
  margin-right: 2em;
  padding: 0 1.8vw;
  width: 41.467vw;
}

.vote-cont .chara-list .blue-btn {
  background: #006ed2;
  bottom: 0;
  color: #fff;
  cursor: pointer;
  height: 10.4vw;
  line-height: 10.4vw;
  margin: auto;
  padding: 0;
  position: absolute;
  right: 2vw;
  text-align: center;
  top: 0;
  transition: all .2s;
  width: 13.2vw;
}

.vote-cont .chara-list .blue-btn:hover {
  background: #0017a2;
}

.vote-cont .chara-list .list.other {
  display: block;
}

.vote-cont .chara-list .list.other p:not([class]) {
  font-size: 13px;
  margin-top: 1vw;
  width: 73vw;
}

#otherName {
  font-size: 16px;
  margin: 2vw 0 2vw 2vw;
  padding: 1vw;
  width: 67vw;
}

#vote #footer .logo {
  background: #fff;
  padding-bottom: 4vw;
  text-align: center;
}

#vote #footer .logo img {
  max-width: 300px;
  width: 50%;
}

#vote .comp_share a {
  color: #fff;
  display: block;
  height: 100%;
  text-align: center;
  text-decoration: none;
  padding: 20px 0;
  width: 100%;
}

#vote .comp_share {
  background: #006ed2;
  margin: 3vh auto 0;
  width: 45vw;
}

@media (min-width: 768px) {
  
  #vote .error {
    bottom: 0;
    height: 10em;
    left: 0;
    line-height: 10em;
    right: 0;
    margin: auto;
    width: 20em;
  }
  
  #vote .ttl::after {
    height: 38vw;
    bottom: 38vw;
  }
  
  #vote h1 {
    padding: 8vw 0 47vw;
  }
  
  #vote h1 img {
    margin: 0 30px;
    width: 60vw;
  }
  
  .vote-cont {
    padding-bottom: 60px;
  }
  
  .vote-cont > p {
    font-size: 18px;
  }
  
  .vote-cont .br {
    display: none;
  }
  
  .vote-cont .period {
    padding: 19px 30px 21px;
  }
  
  .vote-cont.close .period {
    margin-top: 40px;
  }
  
  .vote-cont .period img {
    width: auto;
  }
  
  .vote-cont .notice {
    padding: 30px;
  }
  
  .vote-cont .notice ul {
    margin: 0 auto;
    width: 430px;
  }

  .vote-cont.close .notice p{
    font-size: 18px;
  }
  
  .vote-cont.close .notice p br.sp{
    display: none;
  }
  .vote-cont .charaListWrap {
    margin-top: 30px;
  }
  
  .vote-cont .chara-list .list {
    border: 1px solid #323232;
    display: block;
    padding-bottom: 10px;
  }
  
  .vote-cont .chara-list .list .img {
    border: 0;
    height: 9.867vw;
    width: 100%;
  }
  
  .vote-cont .chara-list .list .img img {
    left: -5%;
    width: 110%;
  }
  
  .vote-cont .chara-list p {
    font-size: 17px;
  }
  
  .vote-cont .chara-list p:not([class]) {
    margin: 10px 10px 0;
    padding: 0;
    width: 100%;
  }
  
  .vote-cont .chara-list .blue-btn {
    box-sizing: border-box;
    height: 32px;
    line-height: 32px;
    margin: 10px 10px 0;
    padding: 0;
    position: static;
    right: 0;
    width: calc(100% - 20px);
  }
  
  .vote-cont .chara-list .list.other {
    clear: both;
  }
  
  .vote-cont .chara-list .list.other p:not([class]) {
    width: auto;
  }
  
  #otherName {
    box-sizing: border-box;
    margin: 10px 10px 0;
    width: calc(100% - 20px);
  }
  
  .vote-cont .complete {
    margin-top: 60px;
  }
  
  #vote #footer .logo {
    padding-bottom: 30px;
  }
  
  #vote .comp_share{
    width: 30vw;
  }
  
}

@media (min-width: 1040px) {
  
  #vote .ttl {
    background-size: auto;
  }
  
  #vote .ttl::before {
    height: 110px;
    left: -10%;
    top: -100px;
    transform: rotate(-5.6deg);
    width: 120%;
  }
  
  #vote .ttl::after {
    bottom: inherit;
    height: 154px;
    top: 0;
  }
  
  #vote h1 {
    padding: 47px 0 407px;
  }
  
  #vote h1 img {
    width: 357px;
  }
  
  .vote-cont {
    margin-top: 40px;
  }
  
  .vote-cont .period {
    margin-top: 40px;
  }
  
  .vote-cont.close .notice p{
    font-size: 20px;
  }
  
  .vote-cont .chara-list {
    padding-left: 4px;
     width: 990px;
  }
  
  .vote-cont .chara-list .list {
    margin: 20px 0 0 20px !important;
    width: 304px;
  }

  .vote-cont .chara-list .list:nth-of-type(4n + 1) {
    clear: none;
  }
  
  .vote-cont .chara-list .list .img {
    height: 74px;
    width: 304px;
  }
  
  .vote-cont .chara-list .list.other {
    clear: both;
  }
  
  #vote #share {
    top: 223px;
  }
  
  #share li ~ li {
    margin-left: 10px;
  }
  
  #vote #share a {
    height: 40px;
    width: 40px;
  }
  
  #vote #share .tw img {
    width: 22px;
  }
  
  #vote #share .fb img {
    width: 12px;
  }
  
  #vote #share .li img {
    width: 30px;
  }
  
  #vote #footer .copy {
    margin: 12px 0 0;
  }
  
  #vote #footer .copy a {
    top: -5px;
  }
  
  #vote .comp_share{
    width: 280px;
  }
  
}

/* 中間発表 */

.interim .vote-cont p:first-child img {
  max-width: 220px;
}

.interim .box {
  background: #dfe5f3;
  margin-top: 4vw;
  padding: 4vw 0;
}

.interim .box p {
  color: #505050;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

.interim .box p ~ p {
  margin-top: 2vw;
}

.interim .box p strong {
  font-size: 20px;
  font-weight: 400;
}

.interim .chara-list ~ .chara-list {
  margin-top: 2vw;
}

.interim .rank {
  background: #fff;
  border: 1px solid #323232;
  color: #323232;
  font-size: 26px;
  letter-spacing: .08em;
  margin: 0 4vw 1vw;
  padding: .5vw 0;
  text-align: center;
}

.interim .r01,
.interim .r02,
.interim .r03 {
  overflow: hidden;
  position: relative;
}

.interim .r01::after,
.interim .r02::after,
.interim .r03::after {
  content: "";
  display: block;
  height: 100%;
  left: 50%;
  position: absolute;
  top: 0;
  transform: skewX(-45deg);
  width: 100%;
}

.interim .r01 {
  background: #ffffc4;
}

.interim .r01::after {
  background: #ffffa6;
}

.interim .r02 {
  background: #f1f1f1;
}

.interim .r02::after {
  background: #e7e7e7;
}

.interim .r03 {
  background: #eadfd9;
}

.interim .r03::after {
  background: #e0cfc5;
}

.interim .rank span {
  position: relative;
  z-index: 1;
}

.interim .rank small {
  font-size: 14px;
  margin-left: 5px;
  position: relative;
  top: -1px;
}

.interim .list p:not([class]) {
  margin-right: 0;
  width: 56.8vw;
}

.interim .list .votes {
  background: url(../img/contest/chara/interim-label.png) no-repeat 0 100%;
  bottom: 1vw;
  font-size: 14px;
  padding: 0 1.8vw 1vw 50px;
  position: absolute;
  right: 0;
  width: auto;
}

.interim .list .votes strong {
  font-size: 4.1vw;
  margin-right: 4px;
}

.interim .txt {
  margin-top: 30px;
  font-size: 20px;
}

.interim .blue-btn {
  background: #006ed2;
  cursor: pointer;
  margin: 10px auto 0;
  padding: 0;
  text-align: center;
  transition: all .2s;
  width: 201px;
}

.interim .blue-btn a {
  background: url(../img/contest/chara/icon-arw.png) no-repeat 96% 50%;
  color: #fff;
  display: block;
  font-size: 20px;
  padding: 20px 10px 20px 0;
  text-decoration: none;
}

.interim .blue-btn a:hover {
  background-position: 98% 50%;
  opacity: 1;
}

@media (min-width: 768px) {
  
  .interim .rank {
    margin-left: 0;
    margin-right: 0;
  }
  
  .interim .list {
    display: -webkit-flex !important;
    display: flex !important;
    padding-bottom: 0 !important;
    width: auto;
  }
  
  .interim .list:nth-of-type(2n) {
    float: none;
  }
  
  .interim .list .votes {
    bottom: 6px;
    font-size: 16px;
    padding-bottom: 4px;
  }
  
  .interim .list .votes strong {
    font-size: 23px;
  }
  
}

@media (min-width: 1040px) {
  
  .interim .vote-cont,
  .interim .box {
    margin-top: 26px;
  }
  
  .interim .box {
    padding: 24px 0 30px;
  }
  
  .interim .box p ~ p {
    margin-top: 10px;
  }
  
  .interim .box p strong {
    font-size: 26px;
  }
  
  .interim .charaListWrap {
    margin-top: 0;
  }
  
  .interim .chara-list {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding: 0;
    width: 1000px;
  }
  
  .interim .rank,
  .interim .chara-list .list {
    box-sizing: border-box;
  }
  
  .interim .rank {
    font-size: 38px;
    margin: 0;
    position: relative;
    width: 114px;
  }
  
  .interim .rank span {
    bottom: 0;
    height: 1em;
    left: 0;
    letter-spacing: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .interim .rank small {
    font-size: 26px;
  }
  
  .interim .chara-list .list {
    margin: 0 !important;
    width: 866px !important;
  }
  
  .interim .chara-list .list .img img {
    left: -18px;
    width: auto;
  }
  
  .interim .list p:not([class]) {
    font-size: 22px;
    width: 560px;
  }
  
  .interim .list .votes {
    bottom: 6px;
    padding: 0 20px 2px 0;
    text-align: right;
    width: 213px;
  }
  
  .interim .list .votes strong {
    font-size: 28px;
  }
  
}


/* イラストコンテスト */

.illustListWrap {
  background: url(../img/bg-texGry.png);
  margin-top: 4vw;
  padding: 4vw 0;
}

.illust-list {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin: 0 auto;
  width: 92vw;
}

.illust-list .list {
  background: #fff;
  border: 1px solid #323232;
  box-sizing: border-box;
  width: 44vw;
}

.illust-list .list:nth-child(2) ~ .list {
  margin-top: 4vw;
}

.illust-list .list.empty {
  display: none;
}

.illust-list .list a {
  text-decoration: none;
}

.illust-list .list .img {
  display: block;
  height: 34.4vw;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.illust-list .list img {
  bottom: 0;
  height: auto;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  transition: all .3s;
  width: 100%;
}

.illust-list .list a:hover {
  opacity: 1;
}

.illust-list .list a:hover img {
  transform: scale(1.1);
}

.illust-list .list p {
  color: #323232;
  font-size: 14px;
  line-height: 1.6;
  margin: 1vw;
}

.illust-list .list p small {
  font-size: 12px;
}

.illust-list .blue-btn {
  background: #006ed2;
  bottom: 0;
  color: #fff !important;
  cursor: pointer;
  letter-spacing: .08em;
  margin: auto;
  padding: 1vw 0;
  text-align: center;
  transition: all .2s;
}

.illust-list .blue-btn:hover {
  background: #0017a2;
}

@media (min-width: 768px) {
  
  .illustListWrap {
    padding: 60px 0;
  }
  
  .illust-list {
    width: 642px;
  }

  .illust-list .list {
    width: 306px;
  }

  .illust-list .list:nth-child(2) ~ .list {
    margin-top: 30px;
  }

  .illust-list .list .img {
    height: 240px;
  }

  .illust-list .list p {
    font-size: 16px;
    margin: 10px;
  }

  .illust-list .blue-btn {
    font-size: 16px !important;
    padding: 9px 0;
  }
  
}

@media (min-width: 1040px) {
  
  .illust-list {
    width: 960px;
  }
  
  .illust-list .list:nth-child(3) {
    margin-top: 0 !important;
  }

  .illust-list .list:nth-child(3) ~ .list {
    margin-top: 21px;
  }
  
  .illust-list .list.empty {
    background: none;
    border: 0;
    display: block;
  }

  .illust-list .list p {
    font-size: 17px;
    margin: 10px;
  }

  .illust-list .blue-btn {
    font-size: 18px !important;
    padding: 6px 0;
  }
  
}

/* -------------------------
  9. history
------------------------- */

#history {
  background: #fff;
}

#history .bg_logo{
  height: 50%;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  z-index: 1;
  width: 80%;
}

#history .ttl {
  overflow: hidden;
  position: relative;
}

#history .ttl::before,
#history .ttl::after {
  background: #a7c7eb;
  content: "";
  position: absolute;
}

#history .ttl::before {
  height: 17.467vw;
  left: 0;
  top: 0;
  width: 100%;
}

#history .ttl::after {
  bottom: 35vw;
  display: block;
  height: 34vw;
  left: -10%;
  transform: rotate(-5.6deg);
  width: 120%;
}

#history h1 {
  padding: 17.467vw 0 45vw;
  position: relative;
  text-align: center;
  z-index: 1;
}

#history h1 img {
  margin-top: 2vw;
  width: 90vw;
}

@media (min-width: 768px) {
  
  #history .ttl::after {
    height: 38vw;
    bottom: 38vw;
  }
  
  #history h1 {
    padding: 10vw 0 45vw;
  }
  
  #history h1 img {
    margin: 0 30px;
    width: 50vw;
  }
  
}

@media (min-width: 1040px) {
    
  #history h1 {
    padding: 90px 0 45vw;
  }
  
  #history h1 img {
    margin: 0 30px;
    width: 400px;
  }
  
  #history .ttl::before {
    height: 120px;
  }
  
  #history .ttl::after {
    bottom: inherit;
    height: 220px;
    top: 0;
  }

}

/* progressNav */

.history_nav{
  height: 50vw;
  margin: auto 0;
  opacity: 0;
  position: fixed;
  top: 0;
  right: 9vw;
  bottom: 0;
  transition: all .2s;
  width: 2vw;
  z-index: 99;
}

.history_nav ul{
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  height: 100%;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.history_nav .progressNav.bg{
  background: #dadee3;
}
  
.history_nav .progressNav.cont{
  background: #004cbf;
  height: 0px;
}

.history_nav .progressNav{
  height: 100%;
  position: absolute;
  top: 0;
  right: -5.15vw;
  width: 2px;
}
/*-----*/

.history_nav{
  height: 50vw;
  margin: auto 0;
  opacity: 0;
  position: fixed;
  top: 0;
  right: 9vw;
  bottom: 0;
  transition: all .2s;
  width: 2vw;
  z-index: 99;
}

.history_nav li{
  font-size: 2vw;
  position: relative;
}

.history_nav li a{
  color: #000;
  text-decoration: none;
}

/*.history_nav li:not(:first-child){
  margin-top: 2vw;
}*/

.history_nav span.txt{
  opacity: 0;
  transition: all 0.2s;
}

.history_nav span.mark{
  background: #dadee3;
  border-radius: 50%;
  height: 2vw;
  position: absolute;
  top: 0;
  right: -6vw;
  width: 2vw;
  z-index: 99;
}

.history_nav li a:hover {
  opacity: 1;
}

.history_nav li a:hover span.txt{
  opacity: 1;
}

.history_nav li a:hover span.mark{
  background: #a7c7eb;
  position: absolute;
  z-index: 99;
}

.history_nav span.last::after{
  display: none;
}

.history_nav .active span.mark,
.history_nav .active span.mark::after{
  background: #004cbf;
  z-index: 50;
}

.history_nav .active span.mark{
  z-index: 99;
}

@media (min-width: 960px) {

  .history_nav .progressNav{
    right: -14px;
  }

  .history_nav{
    height: 410px;
    top: 70px;
    right: 50px;
    width: 30px;
  }

  .history_nav li{
    font-size: 14px;
  }

  .history_nav li:not(:first-child){
    margin-top: 14px;
  }

  .history_nav span.mark{
    border-radius: 50%;
    height: 14px;
    right: -20px;
    width: 14px;
  }
  
  .history_nav span.mark::after{
    height: 16px;
    top: 14px;
    width: 2px;
  }

  .history_nav .progressNav{
    top: -1px;
  }
  
}

.history-top{
  margin-top: -22vw;
  position: relative;
  z-index: 2;
}

.history-top h2{
  text-align: center;
  width: 100%;
}

.history-top h2 img{
  width: 90%;
}

.history-top ul{
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  margin: 0 auto;
  position: absolute;
  right: 0;
  bottom: -32vw;
  left: 0;
  width: 90%;
}

.history-top .ragna{
  width: 28vw;
}

.history-top .noel{
  padding-top: 3.2vw;
  width: 22vw;
}

.history-top .jin{
  width: 25vw;
}

.history-cont {
  background: url(../img/history/line.png)repeat-y 50% 0;
  height: auto;
  position: relative;
  margin-top: 60vw;
  z-index: 2;
}

#history h3{
  text-align: center;
  width: 100%;
}

#history h3 img{
  width: 28vw;
}

.history-cont .year{
  margin: 0 auto;
  padding-bottom: 20vw;
  position: relative;
  width: 90%;
  z-index: 2;
}

.history-cont .inr{
  height: 45vw;
  margin-top: 10vw;
  position: relative;
}

.history-cont h3 + .inr{
  margin-top: 13vw;
  position: relative;
}

.history-cont dl{
  opacity: 0;
  padding-left: 1.5vw;
  position: absolute;
  width: 36vw;
}

.history-cont dl.txtR{
  padding-right: 2vw;
  right: 0;
}

.history-cont #arrow{
  text-align: center;
  width: 100%;
  z-index: 1;
}

.history-cont #arrow img{
  margin-left: 2px;
  width: 83px;
}

.history-cont dl.txtR::after{
  background: url(../img/history/bar-R.png)no-repeat;
  background-size: contain;
  content: "";
  display: inline-block;
  height: 20vw;
  position: absolute;
  bottom: -13vw;
  right: -8%;
  vertical-align: middle;
  width: 50vw;
}

.history-cont dl.txtL::after{
  background: url(../img/history/bar-L.png)no-repeat;
  background-size: contain;
  content: "";
  display: inline-block;
  height: 20vw;
  position: absolute;
  bottom: -17.5vw;
  left: -8%;
  vertical-align: middle;
  width: 50vw;
}

.history-cont dt{
  float: left;
  clear: left;
  width: 18%;
}

.history-cont dd{
  float: left;
  margin-left: 6%;
  width: 72%;
}

.history-cont p{
  position: absolute;
}

.img01,
.img02,
.img03{
  opacity: 0;
  width: 40vw;
}

.img01{
  animation-delay: 0.7s;
}

.img02{
  animation-delay: 1s;
}


.img03{
  animation-delay: 1.3s;
}


@media (min-width: 960px) {
  
  #history .bg_logo{
    height: 50%;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    z-index: 1;
    width: 50%;
  }

  .history-top {
    margin-top: -35vw;
  }
  
  .history-top h2 img{
    width: 466px;
  }
  
  .history-top ul{
    bottom: 0;
    height: 160px;
    justify-content: flex-end;
    margin: 0 auto;
    padding-right: 30px;
    width: 926px;
  }

  .history-top .ragna{
    width: 141px;
  }

  .history-top .noel{
    margin-left: 440px;
    padding-top: 30px;
    width: 106px;
  }
  
  .history-top .noel img{
    margin-top: -12px;
  }

  .history-top .jin{
    width: 121px;
  }

  .history-cont {
    margin-top: 180px;
  }
  
  #history h3 img{
    max-width: 194px;
  }

  .history-cont .year{
    margin: 0 auto;
    padding-bottom: 180px;
    width: 960px;
  }

  .history-cont .inr{
    height: 450px;
    margin-top: 40px;
    position: relative;
  }

  .history-cont h3 + .inr{
    margin-top: 20px;
    position: relative;
  }

  .history-cont dl{
    padding-left: 40px;
    position: absolute;
    width: 430px;
  }

  .history-cont dl.txtR{
    padding: 0;
    right: 0;
  }
  
  .history-cont dl.txtR dt{
    margin-left: 0;
  }

  .history-cont dl.txtL::after{
    height: 121px;
    bottom: -98px;
    left: -3px;
    width: 515px;
  }

  .history-cont dl.txtR::after{
    height: 121px;
    bottom: -50px;
    right: -5px;
    width: 515px;
  }
}

/* 1972 */

.history-cont #y1972{
  padding-bottom: 0;
}

.history-cont #y1972 h3{
  position: relative;
}

.history-cont #y1972 h3 img{
  display: block;
  margin: 0 auto;
  position: absolute;
  top: -11vw;
  left: 0;
  right: 0;
}

.history-cont #y1972 .inr{
  padding-top: 10vw;
}

#y1972 dt{
  margin-top: 1vw;
}

#y1972 dd{
  margin-top: -0.5vw;
}

#y1972 .img01{
  top: 2vw;
  right: 4vw;
  width: 25vw;
}

@media (min-width: 960px) {
  
  .history-cont #y1972 h3 img{
    top: -80px;
    left: 0;
    right: 0;
  }

  .history-cont #y1972 .inr{
    padding-top: 0;
  }

  #y1972 .img01{
    top: -70px;
    right: 150px;
    width: 188px;
  }

  #y1972 dt{
    margin-top: 2px;
    width: 65px;
  }
  
  #y1972 dd{
    margin-top: 0;
    width: 222px;
  }
  
}

/* 1988 */

.history-cont #y1988{
  padding-bottom: 0;
}

#y1988 dt{
  margin-top: 1.3vw;
}

#y1988 .img01{
  right: -3vw;
}

@media (min-width: 960px) {

  .history-cont #y1988{
    padding-bottom: 250px;
  }
  
  #y1988 .img01{
    top: -70px;
    right: 35px;
    width: 319px;
  }

  #y1988 dt{
    margin-top: 0;
    width: 86px;
  }
  
  #y1988 dd{
    width: 262px;
  }
  
}

/* 2003 */

.history-cont #y2003{
  padding-bottom: 0;
}

#y2003 dt{
  margin-top: -0.5vw;
}

#y2003 .img01{

  right: -1.5vw;
}

@media (min-width: 960px) {

  .history-cont #y2003{
    height: 550px;
  }

  #y2003 .img01{
    top: -15px;
    right: 10px;
    width: 354px;
  }

  #y2003 dt{
    margin-top: 3px;
    width: 57px;
  }
  
  #y2003 dd{
    width: 264px;
  }
  
}

/* 2005 */

.history-cont #y2005{
  padding-bottom: 30vw;
}

#y2005 dl{
  top: 30vw;
}

#y2005 dt{
  margin-top: 1vw;
  width: 34%;
}

#y2005 dd{
  width: 56%;
}

#y2005 .img01{
  left: -1.5vw;
}

#y2005 .img02{
  right: -3vw;
}

#y2005 .img03{
  top: 30vw;
  left: -1.5vw;
}

@media (min-width: 960px) {

  .history-cont #y2005{
    padding-bottom: 300px;
  }


  #y2005 dl{
    top: 430px;
  }

  #y2005 dt{
    margin-top: 2px;
    margin-left: 10px;
    width: 138px;
  }

  #y2005 dd{
    width: 190px;
  }

  #y2005 .img01{
    top: 10px;
    left: 0;
    width: 462px;
  }

  #y2005 .img02{
    top: -70px;
    right: 10px;
    width: 361px;
  }

  #y2005 p.img03{
    top: 180px;
    right: 60px;
    left: auto;
    width: 361px;
  }
  
}

/* 2008 */

#y2008{
  padding-bottom: 30vw;
}

#y2008 dl{
  top: 22vw;
}

#y2008 dt{
  margin-top: 0.8vw;
  width: 24%;
}

#y2008 dd{
  width: 68%;
}

#y2008 .img01{
  left: -1.5vw;
}

@media (min-width: 960px) {
  

  #y2008{
    padding-bottom: 180px;
  }

  #y2008 dl{
    top: 100px;
    padding: 0;
  }

  #y2008 dt{
    margin-top: 28px;
    width: 79px;
  }

  #y2008 dd{
    width: 320px;
  }

  #y2008 .img01{
    top: -80px;
    left: 30px;
    width: 323px;
  }
  
}

/* 2009 */

#y2009 .d0409 dl{
  top: 25vw;
}

#y2009 d0409 dt{
  margin-top: 0.7vw;
}

#y2009 .d0409 .img01{
  right: -1.5vw;
}

#y2009 .d0625 dl{
  top: 10vw;
}

#y2009 .d0625 dt{
  width: 24%;
}

#y2009 .d0625 dd{
  width: 68%;
}

#y2009 .d0625 .img01{
  top: -5vw;
  left: -1.5vw;
  width: 30vw;
}

#y2009 .d0625 .img02{
  top: 22vw;
  left: 14vw;
  width: 25vw;
}

#y2009 .d1120{
  margin-top: -3vw;
}

#y2009 .d1120 dl{
  top: 34vw;
}

#y2009 .d1120 dt{
  margin-top: 0.8vw;
  width: 24%;
}

#y2009 .d1120 dd{
  width: 68%;
}

#y2009 .d1120 .img01{
  right: -1.5vw;
}

#y2009 .d1120 .img02{
  left: 6.25vw;
  top: 22vw;
  width: 25vw;
}

@media (min-width: 960px) {
  
  #y2009{
    padding-bottom: 300px;
  }
  
  #y2009 .d0409 dl{
    top: 180px;
  }

  #y2009 .d0409 dt{
    margin-top: 5px;
    width: 51px;
  }

  #y2009 .d0409 dd{
    width: 229px;
  }
  
  #y2009 .d0409 .img01{
    right: 42px;
    width: 301px;
  }

  #y2009 .d0625{
    margin-top: -250px;
  }
  
  #y2009 .d0625 dl{
    top: 250px;
  }

  #y2009 .d0625 dt{
    margin-top: 30px;
    width: 69px;
  }

  #y2009 .d0625 dd{
    width: 321px;
  }

  #y2009 .d0625 .img01{
    top: 0;
    left: 0;
    width: 235px;
  }

  #y2009 .d0625 .img02{
    top: 193px;
    left: 208px;
    width: 235px;
  }

  #y2009 .d1120{
    margin-top: -30px;
  }

  #y2009 .d1120 dl{
    top: 290px;
  }

  #y2009 .d1120 dt{
    margin-top: 28px;
    width: 78px;
  }

  #y2009 .d1120 dd{
    width: 314px;
  }

  #y2009 .d1120 .img01{
    right: 56px;
    width: 336px;
  }
  
  #y2009 .d1120 .img02{
    left: 105;
    margin-top: -140px;
    width: 235px;
  }
  
}
  
/* 2010 */

#y2010 .d0127 dl{
  top: 24vw;
}

#y2010 .d0127 dt{
  margin-top: 1vw;
  width: 24%;
}

#y2010 .d0127 dd{
  width: 68%;
}

#y2010 .d0127 .img01{
  right: -1.5vw;
}

#y2010 .d0220 dl{
  top: 20vw;
}

#y2010 .d0220 dt{
  padding-top: 4vw;
  width: 24%;
}

#y2010 .d0220 dd{
  width: 68%;
}

#y2010 .d0220 .img01{
  top: -16vw;
}

#y2010 .d0220 .img02{
  right: -1.5vw;
}

#y2010 .d0225 dl{
  top: 22vw;
}

#y2010 .d0225 dt{
  width: 24%;
}

#y2010 .d0225 dd{
  width: 68%;
}

#y2010 .d0225 .img01{
  top: 2vw;
}

#y2010 .d0701{
  top: -5vw;
}

#y2010 .d0701 dl{
  top: 50vw;
}

#y2010 .d0701 dt{
  margin-top: 0;
  width: 14%;
}

#y2010 .d0701 .img01{
  top: -10vw;
  right: -1.5vw;
}

#y2010 .d0807{
  top: -2vw;
}

#y2010 .d0807 dl{
  top: 22vw;
}

#y2010 .d0807 dt{
  margin-top: 2.3vw;
}

#y2010 .d0807 .img01{
  top: 1vw;
}

#y2010 .d0819 dl{
  top: 7vw;
}

#y2010 .d0819 dt{
  margin-top: 0.5vw;
}

#y2010 .d0819 .img01{
  top: -14vw;
  right: -1.5vw;
}

#y2010 .d0820 dl{
  top: -10vw;
}

#y2010 .d0820 dt{
  margin-top: 1.2vw;
}

#y2010 .d0820 .img01{
  top: -40vw;
}

#y2010 .d0826 dl{
  top: -11vw;
}

#y2010 .d0826 dt{
  margin-top: 1.5vw;
}

#y2010 .d0826 .img01{
  top: -35vw;
  right: 0;
}

#y2010 .d1209.inr{
  height: 15vw;
}

#y2010 .d1209{
  top: -25vw;
}

#y2010 .d1209 dt{
  margin-top: 1.2vw;
}

#y2010 .d1209 .img01{
  top: -25vw;
  left: -1vw;
}

@media (min-width: 960px) {
  
  #y2010{
    padding-bottom: 500px;
  }
  
  #y2010 .d0127{
    height: 250px;
  }

  #y2010 .d0127 dl{
    top: 100px;
  }

  #y2010 .d0127 dt{
    margin: 27px 0 0 5px;
    width: 65px;
  }

  #y2010 .d0127 dd{
    width: 246px;
  }

  #y2010 .d0127 .img01{
    top: -80px;
    right: 44px;
    width: 296px;
  }

  #y2010 .d0220{
    height: 280px;  
  }
  
  #y2010 .d0220 dl{
    top: 70px;
  }

  #y2010 .d0220 dt{
    padding-top: 0;
    margin-top: 56px;
    width: 69px;
  }

  #y2010 .d0220 dd{
    width: 243px;
  }

  #y2010 .d0220 .img01{
    top: -150px;
    left: 120px;
    width: 236px;
  }

  #y2010 .d0220 .img02{
    top: 50px;
    right: 35px;
    width: 392px;
  }

  #y2010 .d0225 dl{
    top: 200px;
  }

  #y2010 .d0225 dt{
    margin-top: 27px;
    width: 68px;
  }

  #y2010 .d0225 dd{
    width: 321px;
  }

  #y2010 .d0225 .img01{
    left: 40px;
    width: 335px;
  }

  #y2010 .d0701{
    top: 0;
  }

  #y2010 .d0701 dl{
    top: 370px;
  }
  
  #y2010 .d0701 dt{
    margin-top: 30px;
    margin-left: 10px;
    width: 41px;
  }
  
  #y2010 .d0701 dd{
    width: 325px;
  }

  #y2010 .d0701 .img01{
    top: -100px;
    right: 78px;
    width: 319px;
  }

  #y2010 .d0807{
    height: 300px;
    top: -20px;
  }

  #y2010 .d0807 dl{
    top: 180px;
  }

  #y2010 .d0807 dt{
    margin-top: 52px;
    width: 51px;
  }
  
  #y2010 .d0807 dd{
    width: 302px;
  }
  
  #y2010 .d0807 .img01{
    top: 10px;
    left: 76px;
    width: 323px;
  }
  
  #y2010 .d0819{
    height: 250px;
  }

  #y2010 .d0819 dl{
    top: 170px;
  }

  #y2010 .d0819 dt{
    margin-top: 25px;
    width: 62px;
  }
  
  #y2010 .d0819 dd{
    width: 341px;
  }
  
  #y2010 .d0819 .img01{
    top: 20px;
    right: 88px;
    width: 300px;
  }

  #y2010 .d0820 dl{
    top: 200px;
  }

  #y2010 .d0820 dt{
    margin-top: 28px;
    width: 68px;
  }
  
  #y2010 .d0820 dd{
    margin-left: 20px;
    width: 337px;
  }

  #y2010 .d0820 .img01{
    top: 0;
    left: 60px;
    width: 324px;
  }

  #y2010 .d0826{
    height: 200px;
  }
  
  #y2010 .d0826 dl{
    top: 170px;
  }

  #y2010 .d0826 dt{
    margin-top: 30px;
    width: 67px;
  }
  
  #y2010 .d0826 dd{
    margin-left: 20px;
    width: 322px;
  }

  #y2010 .d0826 .img01{
    top: -80px;
    right: 0;
    width: 417px;
  }

  #y2010 .d1209.inr{
    height: 15vw;
  }

  #y2010 .d1209{
    top: 0;
  }

  #y2010 .d1209 dl{
    top: 200px;
  }

  #y2010 .d1209 dt{
    margin-top: 28px;
    width: 66px;
  }
  
  #y2010 .d1209 dd{
    margin-left: 20px;
    width: 334px;
  }

  #y2010 .d1209 .img01{
    top: 0;
    left: 60px;
    width: 316px;
  }
  
}
/* 2011 */

#y2011 h3 img{
  width: 25vw;
}

#y2011 .d0122 .img02{
  top: 4vw;
  right: -1.5vw;
}

#y2011 .d0122 dl{
  top: 14vw;
}

#y2011 .d0122 dt{
  margin-top: 2.8vw;
}

#y2011 .d0214 .img01{
  top: -15vw;
  left: -1vw;
  width: 38vw;
}

#y2011 .d0214 dl{
  top: 10vw;
}

#y2011 .d0214 dt{
  margin-top: 1.2vw;
}

#y2011 .d0331{
  top: -10vw;
}

#y2011 .d0331 dl{
  top: 37.5vw;
}

#y2011 .d0331 dt{
  margin-top: 0.8vw;
}

#y2011 .d0331 .img01{
  top: -22vw;
  right: -1.5vw;
}

#y2011 .d0420 dt{
  margin-top: 1vw;
}

#y2011 .d0420 .img01{
  top: -25vw;
  width: 38vw;
}

#y2011 .d0701{
  top: 6vw;
}

#y2011 .d0701 dt{
  margin-top: 0.5vw;
  width: 14%;
}

#y2011 .d0701 .img01{
  top: -20vw;
  left: 5vw;
  width: 30vw;
}

#y2011 .d0701 .img02{
  top: -25vw;
  right: -1.5vw;
}

#y2011 .d1217.inr{
  height: 25vw;
}

#y2011 .d1217{
  top: -13vw;
}

#y2011 .d1217 dt{
  width: 24%;
}

#y2011 .d1217 dd{
  width: 70%;
}

#y2011 .d1217 .img01{
  top: -25vw;
  width: 38vw;
}

@media (min-width: 960px) {
  
  #y2011 h3 img{
    width: 193px;
    margin-left: -20px;
  }

  #y2011 .d0122{
    margin-top: 70px;
  }
  
  #y2011 .d0122 .img01{
    left: 20px;
    width: 400px;
  }

  #y2011 .d0122 .img02{
    top: 40px;
    right: 0;
    width: 392px;
  }

  #y2011 .d0122 dl{
    top: 140px;
  }

  #y2011 .d0122 dt{
    margin-top: 48px;
    width: 65px;
  }

  #y2011 .d0122 dd{
    width: 329px;
  }

  #y2011 .d0214 .img01{
    top: -80px;
    left: 70px;
    width: 320px;
  }

  #y2011 .d0214 dl{
    top: 80px;
  }

  #y2011 .d0214 dt{
    margin-top: 25px;
    width: 68px;
  }

  #y2011 .d0214 dd{
    width: 335px;
  }
  
  #y2011 .d0331 .img01{
    right: 20px;
  }

  #y2011 .d0331 dl{
    top: 440px;
  }

  #y2011 .d0331 dt{
    margin-top: 28px;
    width: 61px;
  }

  #y2011 .d0331 dd{
    width: 341px;
  }

  #y2011 .d0331 .img01{
    top: -40px;
    right: 70px;
    width: 322px;
  }

  #y2011 .d0420{
    margin-top: -40px;
  }
  
  #y2011 .d0420 dl{
    top: 250px;
  }

  #y2011 .d0420 dt{
    margin-top: 25px;
    width: 71px;
  }

  #y2011 .d0420 dd{
    margin-left: 20px;
    width: 334px;
  }

  #y2011 .d0420 .img01{
    top: -40px;
    left: 60px;
    width: 331px;
  }

  #y2011 .d0701{
    margin-top: 20px;
  }

  #y2011 .d0701 dl{
    top: 270px;
  }
  
  #y2011 .d0701 dt{
    margin-top: 3px;
    width: 41px;
  }

  #y2011 .d0701 dd{
    margin-left: 20px;
    width: 209px;
  }

  #y2011 .d0701 .img01{
    top: 20px;
    left: 80px;
    width: 310px;
  }

  #y2011 .d0701 .img02{
    top: 30px;
    right: 35px;
    width: 392px;
  }

  #y2011 .d1217.inr{
    height: 25vw;
  }

  #y2011 .d1217{
    top: -90px;
  }
  
  #y2011 .d1217 dl{
    top: 200px;
  }
  
  #y2011 .d1217 dt{
    margin-top: 24px;
    width: 76px;
  }

  #y2011 .d1217 dd{
    width: 324px;
  }

  #y2011 .d1217 .img01{
    top: 0;
    left: 70px;
    width: 316px;
  }
  
}

/* 2012 */

#y2012 h3 img{
  width: 27vw;
}

#y2012 .d0324 dl{
  top: 14vw;
}

#y2012 .d0324 dt{
  margin-top: 1vw;
}

#y2012 .d0324 .img02{
  top: 4vw;
  right: -1.5vw;
}

#y2012 .d0531{
  margin-top: 5vw;
}

#y2012 .d0531 dl{
  top: 10vw;
}

#y2012 .d0531 dt{
  margin-top: 0.5vw;
}

#y2012 .d0531 .img01{
  top: -15vw;
  left: -1vw;
  width: 38vw;
}

#y2012 .d0805{
  margin-top: 5vw;
}

#y2012 .d0805 dt{
  margin-top: 1.8vw;
}

#y2012 .d0805 .img01{
  top: -10vw;
  right: -1.5vw;
}

#y2012 .d1121{
  margin-top: -20vw;
}

#y2012 .d1121 dl{
  top: 20vw;
}

#y2012 .d1121 dt{
  width: 24%;
}

#y2012 .d1121 dd{
  width: 70%;
}

#y2012 .d1121 .img01{
  width: 38vw;
}

#y2012 .d1221 dl{
  top: 24vw;
}

#y2012 .d1221 dt{
  width: 24%;
}

#y2012 .d1221 dd{
  width: 70%;
}

#y2012 .d1221 .img01{
  right: -1vw;
}

#y2012 .d1226.inr{
  height: 30vw;
}

#y2012 .d1226{
  margin-top: -5vw;
}

#y2012 .d1226 dl{
  top: 10vw;
}

#y2012 .d1226 dt{
  margin-top: 1.5vw;
  width: 24%;
}

#y2012 .d1226 dd{
  width: 70%;
}

@media (min-width: 960px) {
  
  #y2012{
    margin-top: 100px; 
    padding-bottom: 400px;
  }

  #y2012 h3 img{
    width: 209px;
  }

  #y2012 .d0324{
    margin-top: 70px;
  }

  #y2012 .d0324 dl{
    top: 140px;
  }

  #y2012 .d0324 dt{
    margin-top: 22px;
    width: 70px;
  }

  #y2012 .d0324 dd{
    margin-left: 20px;
    width: 324px;
  }

  #y2012 .d0324 .img01{
    width: 398px;
  }

  #y2012 .d0324 .img02{
    top: 40px;
    right: 35px;
    width: 392px;
  }

  #y2012 .d0531{
    margin-top: 50px;
  }

  #y2012 .d0531 dl{
    top: 70px;
  }

  #y2012 .d0531 dt{
    margin-top: 23px;
    width: 61px;
  }

  #y2012 .d0531 dd{
    width: 340px;
  }

  #y2012 .d0531 .img01{
    top: -150px;
    left: 60px;
    width: 322px;
  }

  #y2012 .d0805{
    margin-top: -20px;
  }

  #y2012 .d0805 dt{
    margin-top: 52px;
    width: 50px;
  }

  #y2012 .d0805 dd{
    width: 319px;
  }

  #y2012 .d0805 .img01{
    top: -70px;
    right: 35px;
    width: 392px;
  }

  #y2012 .d1121{
    margin-top: -200px;
  }

  #y2012 .d1121 dl{
    top: 160px;
  }

  #y2012 .d1121 dt{
    margin-top: 26px;
    width: 71px;
  }

  #y2012 .d1121 dd{
    width: 320px;
  }

  #y2012 .d1121 .img01{
    left: 60px;
    width: 322px;
  }

  #y2012 .d1221{
    margin-top: -30px;
  }
  
  #y2012 .d1221 dl{
    top: 240px;
  }

  #y2012 .d1221 dt{
    margin-top: 28px;
    width: 76px;
  }

  #y2012 .d1221 dd{
    width: 322px;
  }

  #y2012 .d1221 .img01{
    right: 10px;
    width: 417px;
  }

  #y2012 .d1226.inr{
    height: 350px;
  }

  #y2012 .d1226{
    margin-top: -50px;
    height: 20px;
  }

  #y2012 .d1226 dl{
    top: 10vw;
  }

  #y2012 .d1226 dt{
    margin-top: 30px;
    width: 82px;
  }

  #y2012 .d1226 dd{
    width: 295px;
  }

  #y2012 .d1226 .img01{
    left: 35px;
    width: 369px;
  }
  
}

/* 2013 */

#y2013 .d0119 .img01{
  width: 38vw;
}

#y2013 .d0119 dl{
  top: 24vw;
}

#y2013 .d0207{
  margin-top: 7vw;
}

#y2013 .d0207 .img01{
  right: -1vw;
  width: 38vw;
}

#y2013 .d0207 dl{
  top: 56vw;
}

#y2013 .d0519 dl{
  top: 33vw;
}

#y2013 .d0519 dl{
  top: 33vw;
}

#y2013 .d0519 dl{
  top: 33vw;
}

#y2013 .d0519 .img01{
  top: -12vw;
  left: 4vw;
  width: 30vw;
}

#y2013 .d0519 .img02{
  top: 5vw;
  left: -1vw;
}

#y2013 .d0920 dl{
  top: 38vw;
}

#y2013 .d0920 dt{
  margin-top: 1vw;
}

#y2013 .d0920 .img01{
  top: -18vw;
  right: -1.5vw;
  width: 38vw;
}

#y2013 .d1008 dl{
  top: 15vw;
}

#y2013 .d1008 dt{
  margin-top: 2.3vw;
}

#y2013 .d1008 .img01{
  top: 29.5vw;
}

#y2013 .d1008 .img02{
  top: -20vw;
  width: 38vw;
}

#y2013 .d1009{
  margin-top: 5vw;
}

#y2013 .d1009 dl{
  bottom: -17vw;
}

#y2013 .d1009 dt{
  margin-top: 1vw;
}

#y2013 .d1009 .img01{
  right: -1vw;
  width: 38vw;
}

#y2013 .d1024{
  margin-top: 15vw;
}

#y2013 .d1024 dl{
  top: 32vw;
}

#y2013 .d1024 dt{
  margin-top: 1vw;
  width: 24%;
}

#y2013 .d1024 dd{
  width: 70%;
}

#y2013 .d1024 .img02{
  top: 28vw;
}

#y2013 .de1110{
  height: 70vw;
  margin-top: 15vw;
}

#y2013 .de1110 dl{
  top: 25vw;
}

#y2013 .de1110 dd{
  margin-top: 4.5vw;
}

#y2013 .de1110 .img01{
  top: 40vw;
  width: 38vw;
}

#y2013 .de1110 .img02{
  top: 13vw;
  right: -1vw;
}

@media (min-width: 960px) {
  
  #y2013{
    padding-bottom: 400px;
  }
  
  #y2013 h3{
    margin-left: -3px;
  }
  
  #y2013 .d0119{
    margin-top: 90px;
  }

  #y2013 .d0119 .img01{
    left: 60px;
    width: 322px;
  }

  #y2013 .d0119 dl{
    top: 200px;
  }

  #y2013 .d0119 dt{
    margin-top: 25px;
    width: 59px;
  }

  #y2013 .d0119 dd{
    width: 340px;
  }

  #y2013 .d0207{
    margin-top: 70px;
  }

  #y2013 .d0207 .img01{
    top: -20px;
    right: 60px;
    width: 319px;
  }

  #y2013 .d0207 dl{
    top: 450px;
  }

  #y2013 .d0207 dt{
    margin-top: 25px;
    width: 56px;
  }

  #y2013 .d0207 dd{
    width: 348px;
  }

  #y2013 .d0519 dl{
    top: 360px;
  }

  #y2013 .d0519 dt{
    margin-top: 16px;
    width: 64px;
  }

  #y2013 .d0519 dd{
    margin-left: 20px;
    width: 331px;
  }

  #y2013 .d0519 .img01{
    top: -120px;
    left: 70px;
    width: 296px;
  }

  #y2013 .d0519 .img02{
    top: 5vw;
    left: 20px;
    width: 392px;
  }

  #y2013 .d0920 dl{
    top: 290px;
  }

  #y2013 .d0920 dt{
    margin-top: 20px;
    width: 70px;
  }

  #y2013 .d0920 dd{
    margin-left: 20px;
    width: 336px;
  }

  #y2013 .d0920 .img01{
    top: -180px;
    right: 50px;
    width: 322px;
  }

  #y2013 .d1008 dl{
    top: 15vw;
  }

  #y2013 .d1008 dt{
    margin-top: 28px;
    width: 66px;
  }

  #y2013 .d1008 dd{
    width: 269px;
  }

  #y2013 .d1008 .img01{
    top: 280px;
    left: 50px;
    width: 330px;
  }

  #y2013 .d1008 .img02{
    top: -200px;
    left: 35px;
    width: 358px;
  }

  #y2013 .d1009{
    margin-top: 50px;
  }

  #y2013 .d1009 dl{
    bottom: -80px;
  }

  #y2013 .d1009 dt{
    width: 67px;
  }

  #y2013 .d1009 dd{
    width: 222px;
  }

  #y2013 .d1009 .img01{
    right: 60px;
    width: 322px;
  }

  #y2013 .d1024{
    margin-top: 100px;
  }

  #y2013 .d1024 dl{
    top: 320px;
  }

  #y2013 .d1024 dt{
    margin-top: 25px;
    width: 84px;
  }

  #y2013 .d1024 dd{
    width: 308px;
  }

  #y2013 .d1024 .img01{
    top: 0;
    width: 392px;
  }

  #y2013 .d1024 .img02{
    top: 270px;
    width: 393px;
  }

  #y2013 .de1110{
    height: 700px;
    margin-top: 150px;
  }

  #y2013 .de1110 dl{
    top: 250px;
  }

  #y2013 .de1110 dt{
    width: 51px;
  }

  #y2013 .de1110 dd{
    margin-top: 8px;
    width: 331px;
  }

  #y2013 .de1110 .img01{
    top: 400px;
    left: 20px;
    width: 404px;
  }

  #y2013 .de1110 .img02{
    top: 130px;
    right: 20px;
    width: 391px;
  }
  
}

/* 2014 */

#y2014 .de0309{
  margin-top: 9vw;
  height: 55vw;
}

#y2014 .de0309 dl{
  top: 56vw;
}

#y2014 .de0309 dt{
  width: 16%;
}

#y2014 .de0309 dd{
  margin-top: 4.5vw;
}

#y2014 .de0309 .img02{
  top: 26vw;
}

#y2014 .de0309 .img03{
  right: 0;
  width: 38vw;
}

#y2014 .d0424{
  height: 60vw;
}

#y2014 .d0424 dl{
  bottom: -9vw;
}

#y2014 .d0424 dt{
  margin-top: 1.8vw;
}

#y2014 .d0424 .img01{
  right: -1vw;
  width: 38vw;
}

#y2014 .d0620{
  margin-top: 15vw;
}

#y2014 .d0620 .img01{
  width: 38vw;
}

#y2014 .d0620 dl{
  top: 22vw;
}

#y2014 .d0620 dt{
  margin-top: 2.2vw;
}

#y2014 .d0712 dl{
  top: 18vw;
}

#y2014 .d0712 dt{
  margin-top: 3.7vw;
}

#y2014 .d0712 .img01{
  top: -5vw;
  right: 0;
}

#y2014 .d0712 .img02{
  top: 30vw;
  right: -1vw;
}

#y2014 .d1009 dl{
  top: 25vw;
}

#y2014 .d1009 dt{
  margin-top: 1.7vw;
}


@media (min-width: 960px) {
 
  #y2014 .de0309{
    margin-top: 90px;
    height: 550px;
  }

  #y2014 .de0309 dl{
    top: 520px;
  }

  #y2014 .de0309 dt{
    margin-top: 67px;
    width: 39px;
  }

  #y2014 .de0309 dd{
    width: 341px;
  }

  #y2014 .de0309 .img01{
    top: 0;
    left: 35px;
    width: 374px;
  }

  #y2014 .de0309 .img02{
    top: 260px;
    left: 10px;
    width: 426px;
  }

  #y2014 .de0309 .img03{
    top: 80px;
    right: 120px;
    width: 290px;
  }

  #y2014 .d0424{
    height: 600px;
  }

  #y2014 .d0424 dl{
    bottom: -10px;
  }

  #y2014 .d0424 dt{
    margin-top: 23px;
    width: 75px;
  }

  #y2014 .d0424 dd{
    width: 308px;
  }

  #y2014 .d0424 .img01{
    right: 60px;
    width: 322px;
  }

  #y2014 .d0620{
    margin-top: 60px;
  }

  #y2014 .d0620 .img01{
    left: 60px;
    width: 322px;
  }

  #y2014 .d0620 dl{
    top: 200px;
  }

  #y2014 .d0620 dt{
    margin-top: 23px;
    width: 77px;
  }

  #y2014 .d0620 dd{
    width: 290px;
  }

  #y2014 .d0712 dl{
    top: 130px;
  }

  #y2014 .d0712 dt{
    margin-top: 52px;
    width: 61px;
  }

  #y2014 .d0712 dd{
    width: 283px;
  }

  #y2014 .d0712 .img01{
    top: -50px;
    right: 40px;
    width: 345px;
  }

  #y2014 .d0712 .img02{
    top: 250px;
    right: 0;
    width: 426px;
  }

  #y2014 .d1009 dl{
    top: 210px;
  }
  
  #y2014 .d1009 dt{
    margin-top: 28px;
    width: 71px;
  }


  #y2014 .d1009 dd{
    width: 331px;
  }

  #y2014 .d1009 .img01{
    left: 60px;
    width: 322px;
  }
  
}

/* 2015 */

#y2015{
  margin-top: 20vw;
}

#y2015 h3{
  margin-left: -0.3vw;
}

#y2015 .d0107{
  height: 20vw;
}

#y2015 .d0107 .img01{
  left: -1vw;
}

#y2015 .d0107 dl{
  top: 7vw;
}

#y2015 .d0107 dt{
  margin-top: 1.7vw;
  width: 16%;
}

#y2015 .d0329 .img01{
  top: -5vw;
  right: -1vw;
}

#y2015 .d0329 .img02{
  top: 19vw;
  right: -1vw;
}

#y2015 .d0329 dl{
  top: 10vw;
}

#y2015 .d0329 dt{
  margin-top: 4.5vw;
}


#y2015 .d0423 .img01{
  top: -10vw;
  left: -0.5vw;
  width: 38vw;
}

#y2015 .d0423 dl{
  top: 10vw;
}

#y2015 .d0423 dt{
  margin-top: 1.7vw;
}

#y2015 .d0712 dl{
  top: 1vw;
}

#y2015 .d0712 dt{
  margin-top: 4.5vw;
}

#y2015 .d0712 .img01{
  top: -20vw;
  right: 0;
}

#y2015 .d0712 .img02{
  top: 13vw;
  right: -1vw;
}

#y2015 .d1119 {
  height: 35vw;
  margin-top: 0;
}

#y2015 .d1119 dl{
  top: 7vw;
}

#y2015 .d1119 dt{
  margin-top: 2vw;
  width: 24%;
}

#y2015 .d1119 dd{
  width: 70%;
}

#y2015 .d1119 .img01{
  top: -3vw;
  left: -1vw;
}

@media (min-width: 960px) {
 
  #y2015{
    margin-top: 200px;
  }

  #y2015 h3{
    margin-left: -5px;
  }

  #y2015 .d0107{
    margin-top: 90px;
    height: 200px;
  }

  #y2015 .d0107 .img01{
    left: 20px;
    width: 399px;
  }

  #y2015 .d0107 dl{
    top: 70px;
  }

  #y2015 .d0107 dt{
    margin-top: 33px;
    margin-left: 10px;
    width: 53px;
  }


  #y2015 .d0107 dd{
    width: 285px;
  }
  
  #y2015 .d0329{
    margin-top: 130px;
  }

  #y2015 .d0329 .img01{
    top: -30px;
    right: 50px;
    width: 344px;
  }

  #y2015 .d0329 .img02{
    top: 190px;
    right: 0;
    width: 426px;
  }

  #y2015 .d0329 dl{
    top: 100px;
  }

  #y2015 .d0329 dt{
    margin-top: 52px;
    width: 70px;
  }

  #y2015 .d0329 dd{
    width: 281px;
  }

  #y2015 .d0423{
    margin-top: 140px;
  }
  
  #y2015 .d0423 .img01{
    top: -100px;
    left: 60px;
    width: 340px;
  }

  #y2015 .d0423 dl{
    top: 80px;
  }

  #y2015 .d0423 dt{
    margin-top: 24px;
    width: 80px;
  }

  #y2015 .d0423 dd{
    margin-left: 15px;
    width: 332px;
  }
  
  #y2015 .d0712{
    margin-top: -20px;
  }

  #y2015 .d0712 dl{
    top: 40px;
  }

  #y2015 .d0712 dt{
    margin-top: 50px;
    width: 68px;
  }

  #y2015 .d0712 dd{
    margin-left: 15px;
    width: 284px;
  }

  #y2015 .d0712 .img01{
    top: -100px;
    right: 80px;
    width: 272px;
  }

  #y2015 .d0712 .img02{
    top: 130px;
    right: 0;
    width: 425px;
  }

  #y2015 .d1119 {
    height: 350px;
    margin-top: 60px;
  }

  #y2015 .d1119 dl{
    top: 90px;
  }

  #y2015 .d1119 dt{
    margin-top: 24px;
    width: 84px;
  }

  #y2015 .d1119 dd{
    margin-left: 15px;
    width: 256px;
  }

  #y2015 .d1119 .img01{
    top: -30px;
    left: 0;
    width: 437px;
  }
  
}

/* 2016 */

#y2016{
  margin-top: 5vw;
}

#y2016 .d0302{
  height: 22vw;
  margin-top: 9vw;
}

#y2016 .d0302 dl{
  top: 8vw;
}

#y2016 .d0302 dt{
  margin-top: 1vw;
  width: 16%;
}

#y2016 .d0302 dd{
  width: 78%;
}

#y2016 .d0302 .img01{
  left: -1vw;
  width: 40vw;
}

#y2016 .de0814 dl{
  top: 15vw;
}

#y2016 .de0814 dd{
  margin-top: 3.5vw;
}

#y2016 .de0814 .img01{
  right: -1vw;
}

#y2016 .d1006{
  margin-top: 17vw;
}

#y2016 .d1006 .img01{
  left: -1vw;
  width: 40vw;
}

#y2016 .d1006 .img02{
  right: -1vw;
}

#y2016 .d1006 dl{
  top: 29vw;
}

#y2016 .d1006 dt{
  margin-top: 3vw;
}

#y2016 .d1020{
  margin-top: 17vw;
}

#y2016 .d1020 dl{
  top: 59vw;
}

#y2016 .d1020 dt{
  margin-top: 1.5vw;
  width: 24%;
}

#y2016 .d1020 dd{
  width: 70%;
}

#y2016 .d1020 .img01{
  right: -1vw;
  width: 40vw;
}

#y2016 .d1212{
  height: 65vw;
  margin-top: 8vw;
}

#y2016 .d1212 dl{
  top: 40vw;
}

#y2016 .d1212 dt{
  margin-top: 1.5vw;
  width: 24%;
}

#y2016 .d1212 dd{
  width: 70%;
}

#y2016 .d1212 .img01{
  left: -1vw;
  width: 40vw;
}

@media (min-width: 960px) {

  #y2016{
    margin-top: 200px;
  }

  #y2016 .d0302{
    height: 220px;
    margin-top: 90px;
  }

  #y2016 .d0302 dl{
    top: 90px;
  }

  #y2016 .d0302 dt{
    margin-top: 26px;
    width: 53px;
  }

  #y2016 .d0302 dd{
    width: 336px;
  }

  #y2016 .d0302 .img01{
    left: 40px;
    width: 348px;
  }

  #y2016 .de0814{
    margin-top: 60px;
  }

  #y2016 .de0814 dl{
    top: 150px;
  }

  #y2016 .de0814 dt{
    margin-top: 22px;
    width: 48px;
  }

  #y2016 .de0814 dd{
    margin-left: 20px;
    width: 341px;
  }

  #y2016 .de0814 .img01{
    right: 65px;
    width: 332px;
  }

  #y2016 .d1006{
    margin-top: 120px;
  }

  #y2016 .d1006 .img01{
    left: 80px;
    width: 322px;
  }

  #y2016 .d1006 .img02{
    right: 10px;
    width: 392px;
  }

  #y2016 .d1006 dl{
    top: 290px;
  }

  #y2016 .d1006 dt{
    margin-top: 25px;
    width: 68px;
  }

  #y2016 .d1006 dd{
    width: 250px;
  }

  #y2016 .d1020{
    margin-top: 40px;
  }

  #y2016 .d1020 dl{
    top: 480px;
  }

  #y2016 .d1020 dt{
    margin-top: 25px;
    width: 90px;
  }

  #y2016 .d1020 dd{
    width: 278px;
  }

  #y2016 .d1020 .img01{
    right: 60px;
    width: 322px;
  }

  #y2016 .d1212{
    height: 650px;
    margin-top: 80px;
  }

  #y2016 .d1212 dl{
    top: 300px;
  }

  #y2016 .d1212 dt{
    margin-top: 24px;
    width: 90px;
  }

  #y2016 .d1212 dd{
    width: 283px;
  }

  #y2016 .d1212 .img01{
    left: 60px;
    width: 322px;
  }
}

/* 2017 */

#y2017.year{
  padding-bottom: 10vw;
}

#y2017.year .inr{
  margin-top: 80px;
}

#y2017 dl{
  top: 7vw;
}

#y2017 dt{
  margin-top: 1.5vw;
  width: 24%;
}

#y2017 dd{
  width: 70%;
}

#y2017.year .d0803 dt {
  margin-top: 0;
  width: 19%;
}

#y2017.year .d0803 dd {
  width: 75%;
}

#y2017.year .d0803 .img01 {
  left: -1vw;
  top: -21vw;
  width: 40vw;
}

@media (min-width: 960px) {

  #y2017.year{
    margin-top: -50px;
    padding-bottom: 150px;
  }

  #y2017 dl{
    top: 70px;
  }

  #y2017 dt{
    margin-top: 26px;
    width: 76px;
  }

  #y2017 dd{
    width: 250px;
  }

  #y2017 .img01{
    left: 35px;
    width: 373px;
  }
  
  #y2017.year .d0803{
    margin-top: -50px;
  }
  
  #y2017.year .d0803 dt{
    width: 65px;
  }
  
  #y2017.year .d0803 dt img{
    margin-top: 28px;
    width: 58px;
  }
  
  #y2017.year .d0803 dd{
    width: 250px;
  }
  
  #y2017.year .d0803 dd img{
    width: 325px;
  }
  
  #y2017.year .d0803 .img01 {
    left: 60px;
    top: -110px;
    width: 322px;
  }
  
}

/* 2018 */

#y2018{
  margin: 6vw auto 0;
  position: relative;
  width: 85%;
  z-index: 2;
}

#y2018 h3 img{
  width: 55vw;
}

#y2018 .logo{
  margin: 2vw 0;
}

#y2018 .logo + p{
  margin: 0 auto;
  padding-left: 3vw;
  width: 90%;
}

#y2018 .txt{
  font-size: 24px;
  margin: 2vw 0 10vw;
  text-align: center;
}

#y2018 .inr{
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

#y2018 .inr dl{
  margin-bottom: 20vw;
  width: 48%;
}

#y2018 .inr .cross_tag dd{
  margin: 2vw auto 0;
  width: 82%;
}

#y2018 .inr dd{
  margin-top: 2vw;
}

@media (min-width: 960px) {
  
  #y2018{
    margin: 60px auto 0;
    width: 960px;
  }
  
  #y2018 h3 img{
    max-width: 440px;
    width: 436px;
  }

  #y2018 .logo{
    margin: 20px auto;
    width: 536px;
  }

  #y2018 .logo + p{
    margin: 0 auto;
    padding-left: 30px;
    width: 540px;
  }

  #y2018 .txt{
    font-size: 26px;
    margin: 20px 0 100px;
    padding-left: 30px;
    text-align: center;
  }

  #y2018 .inr{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }

  #y2018 .inr dl{
    margin-bottom: 200px;
    width: 397px;
  }

  #y2018 .inr .cross_tag dd{
    margin: 20px auto 0;
    width: 331px;
  }
  
  #y2018 .inr .dark_war dd{
    margin: 20px auto 0;
    width: 407px;
  }
  
}

/* アンケート結果ページ */

#contest.quest .link{
  margin: 2em auto;
  width: 95vw;
  max-width: 1000px;
}

#contest.quest .link li:not(:nth-child(1)){
  margin-top: 1em;
}
#contest.quest .link li a{
  color: #000096;
  line-height: 150%;
}

#contest.quest .contest-cont {
  margin-top: 0;
  padding-top: 6vw;
}

#contest.quest *{
  font-size: 14px;
}

#contest.quest .box{
  position: relative;
  z-index: 2;
}

#contest.quest .contest-cont > div {
  background: #fff;
  margin: 0 auto;
  max-width: 1000px;
  width: 100%;
  padding-top: 10vw;
  padding-bottom: 10vw;
  margin-top: -10vw;
  position: relative;
  z-index: 1;
}

#contest.quest .contest-cont > div h2{
  margin-bottom: 6vw;
  width: 118%;
}

#contest.quest .contest-cont > div .inr canvas{
  margin: 0 auto 0;
  height: auto !important;
  width: 90% !important;
}

#contest.quest .contest-cont > div .inr dl{
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin: 6vw auto;
  width: 90%;
}

#contest.quest .contest-cont > div .inr dl dt:not(:nth-child(1)),
#contest.quest .contest-cont > div .inr dl dd:not(:nth-child(2)){
  margin-top: .2em;
  padding-top: .2em;
  border-top: #F0F0F0 1px solid;
}

#contest.quest .contest-cont > div .inr dt{
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  line-height: 140%;
  width: 80%;
}
#contest.quest .contest-cont > div .inr dt span{
  display: contents;
  font-weight: bold;
}
#contest.quest .contest-cont > div .inr dt.c_r span,
#contest.quest .contest-cont > div .inr dt.c_r + dd{
  color: rgb(255, 99, 132);
}
#contest.quest .contest-cont > div .inr dt.c_b span,
#contest.quest .contest-cont > div .inr dt.c_b + dd{
  color: rgb(54, 162, 235);
}
#contest.quest .contest-cont > div .inr dt.c_y span,
#contest.quest .contest-cont > div .inr dt.c_y + dd{
  color: rgb(255, 181, 23);
}
#contest.quest .contest-cont > div .inr dt.c_g span,
#contest.quest .contest-cont > div .inr dt.c_g + dd{
  color: rgb(132, 199, 84);
}

#contest.quest .contest-cont > div .inr dd{
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  line-height: 140%;
  font-weight: bold;
  width: 15%;
}
  
#contest.quest .contest-cont > div .inr{
  position: relative;
}
#contest.quest .contest-cont > div .inr ul{
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-flex-direction: column;
  flex-direction: column;
}
  
#contest.quest .contest-cont > div#q5 .inr{
  position: relative;
  padding-bottom: 52vw;
 /* padding-bottom: 90px;*/
}
#contest.quest .contest-cont > div .inr.rank ul{
  margin: 0 auto;
  width: 90%;
  max-width: 912px;
}

#contest.quest .contest-cont > div#q5 .inr li{
  background: none;
  width: 100%;
  margin: 0;
  max-width: 658px;
}
#contest.quest .contest-cont > div#q6 .inr li{
  background: none;
  width: 100%;
  max-width: none;
  margin: 0;
}
#contest.quest .contest-cont > div#q6 .inr li > img {
  width: 100%;
  max-width: 740px;
}
#contest.quest .contest-cont > div#q6 .inr li span{
  background: none;
  display: block;
  width: 100%;
  margin: 0 auto 1.5em;
  max-width: 600px;
}
#contest.quest .contest-cont > div#q7 .inr li span{
  background: #fff;
  box-sizing: border-box;
  border: 1px solid #e7e7e7;
  display: block;
  padding: 1em;
  line-height: 180%;
  max-width: 750px;
  width: 75%;
  margin-right: 1.4em;
  margin-left: auto;
  position: relative;
}
#contest.quest .contest-cont > div#q7 .inr li:nth-child(even) span{
  margin-left: 1.4em;
  margin-right: auto;
}
#contest.quest .contest-cont > div .inr li img{
  margin: 0;
  width: 100%;
}

#contest.quest .contest-cont > div .inr.rank li:nth-child(2){
  margin: 5px 0 !important;
}
#contest.quest .contest-cont > div .inr.rank li:nth-child(4){
  margin-top: 8px !important;
}
#contest.quest .contest-cont > div .inr.rank li:nth-child(5){
  margin-top: 10px !important;
}

#contest.quest .contest-cont > div#q5 .inr figure{
  position: absolute;
  max-width: 602px;
  margin: 0;
  bottom: 1em;
  right: 0;
}

#contest.quest .contest-cont > div .txt{
  line-height: 180%;
  width: 90%;
  margin: 0 auto;
  font-feature-settings : "palt" 1;
}
#contest.quest .contest-cont > div .txt .c_r{
  color: rgb(255, 99, 132);
}
#contest.quest .contest-cont > div .txt .c_b{
  color: rgb(54, 162, 235);
}
#contest.quest .contest-cont > div .txt .c_y{
  color: rgb(255, 181, 23);
}
#contest.quest .contest-cont > div .txt .c_g{
  color: rgb(132, 199, 84);
}
#contest.quest .contest-cont > div .txt strong,
#contest.quest .contest-cont > div .com li strong{
  font-size: 20px;
}

#contest.quest .contest-cont > div#q7 .txt{
  text-align: center;
}

#contest.quest .contest-cont > div .com{
  position: relative;
}

#contest.quest .contest-cont > div .com ul{
  margin: 1.6em 0 0;
  max-width: none;
  width: 100%;
  z-index: 1;
}
#contest.quest .contest-cont > div .com li{
  background: none;
  position: relative;
  max-width: none;
  margin: 0;
  height: 30vw;
  max-height: 16em;
  width: 100%;
}

#contest.quest .contest-cont > div .com li span{
  height: 36vw;
  max-height: 16em;
  overflow-y: scroll;
}

#contest.quest .contest-cont > div .com ul.img li{
  overflow: visible;
}
#contest.quest .contest-cont > div .com ul.img{
  position: absolute;
  top: 0;
  z-index: 0;
}

#contest.quest .contest-cont > div .com li:nth-child(odd){
  z-index: 2;
}
#contest.quest .contest-cont > div .com .img li:nth-child(odd)::before{
  background: url(../img/contest/quest/q7_img01.png)no-repeat center / contain;
  content: "";
  display: block;
  position: absolute;
  top: -30%;
  left: 0;
  height: 42vw;
  max-width: 1000px;
  width: 100%;
}
#contest.quest .contest-cont > div .com li:nth-child(even){
  z-index: 1;
}
#contest.quest .contest-cont > div .com .img li:nth-child(even)::before{
  background: url(../img/contest/quest/q7_img02.png)no-repeat center / contain;
  content: "";
  display: block;
  position: absolute;
  top: -45%;
  right: 0;
  height: 42vw;
  max-width: 1000px;
  width: 100%;
}

#contest.quest .contest-cont > div .com .img li:nth-child(3)::before{
  background: url(../img/contest/quest/q7_img03.png)no-repeat center / contain;
}
#contest.quest .contest-cont > div .com .img li:nth-child(4)::before{
  background: url(../img/contest/quest/q7_img04.png)no-repeat center / contain;
  top: -43%;
}
#contest.quest .contest-cont > div .com .img li:nth-child(5)::before{
  background: url(../img/contest/quest/q7_img05.png)no-repeat center / contain;
}
#contest.quest .contest-cont > div .com .img li:nth-child(6)::before{
  background: url(../img/contest/quest/q7_img06.png)no-repeat center / contain;
  top: -48%;
}
#contest.quest .contest-cont > div .com .img li:nth-child(7)::before{
  background: url(../img/contest/quest/q7_img07.png)no-repeat center / contain;
}
#contest.quest .contest-cont > div .com .img li:nth-child(8)::before{
  background: url(../img/contest/quest/q7_img08.png)no-repeat center / contain;
}
#contest.quest .contest-cont > div .com .img li:nth-child(9)::before{
  background: url(../img/contest/quest/q7_img09.png)no-repeat center / contain;
}
#contest.quest .contest-cont > div .com .img li:nth-child(10)::before{
  background: url(../img/contest/quest/q7_img10.png)no-repeat center / contain;
}
#contest.quest .contest-cont > div .com .img li:nth-child(11)::before{
  background: url(../img/contest/quest/q7_img11.png)no-repeat center / contain;
}
#contest.quest .contest-cont > div .com .img li:nth-child(12)::before{
  background: url(../img/contest/quest/q7_img12.png)no-repeat center / contain;
}
#contest.quest .contest-cont > div .com .img li:nth-child(13)::before{
  background: url(../img/contest/quest/q7_img13.png)no-repeat center / contain;
}
#contest.quest .contest-cont > div .com .img li:nth-child(14)::before{
  background: url(../img/contest/quest/q7_img14.png)no-repeat center / contain;
}
#contest.quest .contest-cont > div .com .img li:nth-child(15)::before{
  background: url(../img/contest/quest/q7_img15.png)no-repeat center / contain;
}
#contest.quest .contest-cont > div .com .img li:nth-child(16)::before{
  background: url(../img/contest/quest/q7_img16.png)no-repeat center / contain;
}
#contest.quest .contest-cont > div .com .img li:nth-child(17)::before{
  background: url(../img/contest/quest/q7_img17.png)no-repeat center / contain;
}
#contest.quest .contest-cont > div .com .img li:nth-child(18)::before{
  background: url(../img/contest/quest/q7_img18.png)no-repeat center / contain;
}
#contest.quest .contest-cont > div .com .img li:nth-child(19)::before{
  background: url(../img/contest/quest/q7_img19.png)no-repeat center / contain;
}
#contest.quest .contest-cont > div .com .img li:nth-child(20)::before{
  background: url(../img/contest/quest/q7_img20.png)no-repeat center / contain;
}
#contest.quest .contest-cont > div .com .img li:nth-child(21)::before{
  background: url(../img/contest/quest/q7_img21.png)no-repeat center / contain;
}
#contest.quest .contest-cont > div .com .img li:nth-child(22)::before{
  background: url(../img/contest/quest/q7_img22.png)no-repeat center / contain;
}
#contest.quest .contest-cont > div .com .img li:nth-child(23)::before{
  background: url(../img/contest/quest/q7_img23.png)no-repeat center / contain;
}
#contest.quest .contest-cont > div .com .img li:nth-child(24)::before{
  background: url(../img/contest/quest/q7_img24.png)no-repeat center / contain;
}
#contest.quest .contest-cont > div .com .img li:nth-child(25)::before{
  background: url(../img/contest/quest/q7_img25.png)no-repeat center / contain;
}
#contest.quest .contest-cont > div .com .img li:nth-child(26)::before{
  background: url(../img/contest/quest/q7_img26.png)no-repeat center / contain;
}
#contest.quest .contest-cont > div .com .img li:nth-child(27)::before{
  background: url(../img/contest/quest/q7_img27.png)no-repeat center / contain;
}
#contest.quest .contest-cont > div .com .img li:nth-child(28)::before{
  background: url(../img/contest/quest/q7_img28.png)no-repeat center / contain;
}
#contest.quest .contest-cont > div .com .img li:nth-child(29)::before{
  background: url(../img/contest/quest/q7_img29.png)no-repeat center / contain;
}
#contest.quest .contest-cont > div .com .img li:nth-child(30)::before{
  background: url(../img/contest/quest/q7_img30.png)no-repeat center / contain;
}
#contest.quest .contest-cont > div .com .img li:nth-child(31)::before{
  background: url(../img/contest/quest/q7_img31.png)no-repeat center / contain;
}
#contest.quest .contest-cont > div .com .img li:nth-child(32)::before{
  background: url(../img/contest/quest/q7_img32.png)no-repeat center / contain;
}
#contest.quest .contest-cont > div .com .img li:nth-child(33)::before{
  background: url(../img/contest/quest/q7_img33.png)no-repeat center / contain;
}
#contest.quest .contest-cont > div .com .img li:nth-child(34)::before{
  background: url(../img/contest/quest/q7_img34.png)no-repeat center / contain;
}
#contest.quest .contest-cont > div .com .img li:nth-child(35)::before{
  background: url(../img/contest/quest/q7_img35.png)no-repeat center / contain;
}
#contest.quest .contest-cont > div .com .img li:nth-child(36)::before{
  background: url(../img/contest/quest/q7_img36.png)no-repeat center / contain;
}

#contest.quest .contest-cont > div .com li::before{
  z-index: -1;
}
#contest.quest .contest-cont > div .com li:not(:nth-child(1)){
  margin-top: 3.5em;  
}


#contest.quest .contest-cont > div .com li.ragna strong,
#contest.quest .contest-cont > div .com li.rachel strong,
#contest.quest .contest-cont > div .com li.tager strong,
#contest.quest .contest-cont > div .com li.tsubaki strong,
#contest.quest .contest-cont > div .com li.izayoi strong,
#contest.quest .contest-cont > div .com li.celica strong,
#contest.quest .contest-cont > div .com li.naoto strong{
  color: #ff1929;
}
#contest.quest .contest-cont > div .com li.jin strong,
#contest.quest .contest-cont > div .com li.hakumen strong,
#contest.quest .contest-cont > div .com li.valken strong,
#contest.quest .contest-cont > div .com li.azrael strong,
#contest.quest .contest-cont > div .com li.hibiki strong,
#contest.quest .contest-cont > div .com li.mai strong{
  color: #394abd;
}
#contest.quest .contest-cont > div .com li.noel strong,
#contest.quest .contest-cont > div .com li.nyu strong,
#contest.quest .contest-cont > div .com li.myu strong,
#contest.quest .contest-cont > div .com li.es strong{
  color: #00c695;
}
#contest.quest .contest-cont > div .com li.taokaka strong,
#contest.quest .contest-cont > div .com li.bang strong,
#contest.quest .contest-cont > div .com li.makoto strong,
#contest.quest .contest-cont > div .com li.bullet strong,
#contest.quest .contest-cont > div .com li.ramuda strong,
#contest.quest .contest-cont > div .com li.jubei strong{
  color: #e6ae01;
}
#contest.quest .contest-cont > div .com li.arakune strong,
#contest.quest .contest-cont > div .com li.relius strong,
#contest.quest .contest-cont > div .com li.kagura strong,
#contest.quest .contest-cont > div .com li.izanami strong{
  color: #600169;
}
#contest.quest .contest-cont > div .com li.litchi strong,
#contest.quest .contest-cont > div .com li.carl strong,
#contest.quest .contest-cont > div .com li.platinum strong,
#contest.quest .contest-cont > div .com li.amane strong,
#contest.quest .contest-cont > div .com li.kokonoe strong,
#contest.quest .contest-cont > div .com li.nine strong{
  color: #e53768;
}
#contest.quest .contest-cont > div .com li.hazama strong,
#contest.quest .contest-cont > div .com li.yuuki strong,
#contest.quest .contest-cont > div .com li.susanoo strong{
  color: #007c00;
}


#contest.quest .contest-cont > div#q8 h3,
#contest.quest .contest-cont > div#q8 h4{
  font-size: 20px;
  margin: 4em auto 1em;
  width: 90%;
}

#contest.quest .contest-cont > div#q8 h3.n1{
  margin-top: 2em;
}
#contest.quest .contest-cont > div#q8 h3{
  color: #fff;
  padding: 1em 0;
  background: #88bae7;
  text-align: center;
}
#contest.quest .contest-cont > div#q8 h3 span{
  font-size: 20px;
  color: #C3C3C3;
}

#contest.quest .contest-cont > div#q8 h4{
  background: #f0f0f0;
  border-top: #B3B3B3 1px solid;
  color: #000;
  line-height: 170%;
  padding: 1em 0;
  font-size: 16px;
  margin-top: 3em;
  margin-bottom: 1.5em;
  text-align: center;
}

#contest.quest .contest-cont > div#q8 .txt{
  line-height: 200%;
}
#contest.quest .contest-cont > div#q8 h2 + .txt{
  line-height: 170%;
}

#contest.quest .contest-cont > div#q8 .txt img{
  display: block;
  margin: .8em auto 2em;
  max-width: 600px;
}

#contest.quest .contest-cont > div#q10 .txt{
  margin-top: 2em;
}
#contest.quest .contest-cont > div#q10 h2 + .txt{
  margin-top: 0;
}
#contest.quest .contest-cont > div#q10 .txt small{
  color: #909090;
  font-size: 12px;
}

#contest.quest .contest-cont > div#q10 .txt strong{
  color: #ff1929;
}
#contest.quest .contest-cont > div#q10 .txt:nth-child(2) strong,
#contest.quest .contest-cont > div#q10 .txt:nth-child(7n+2) strong{
  color: #ff1929;
}
#contest.quest .contest-cont > div#q10 .txt:nth-child(3) strong,
#contest.quest .contest-cont > div#q10 .txt:nth-child(7n+3) strong{
  color: #394abd;
}
#contest.quest .contest-cont > div#q10 .txt:nth-child(4) strong,
#contest.quest .contest-cont > div#q10 .txt:nth-child(7n+4) strong{
  color: #00c695;
}
#contest.quest .contest-cont > div#q10 .txt:nth-child(5) strong,
#contest.quest .contest-cont > div#q10 .txt:nth-child(7n+5) strong{
  color: #e6ae01;
}
#contest.quest .contest-cont > div#q10 .txt:nth-child(6) strong,
#contest.quest .contest-cont > div#q10 .txt:nth-child(7n+6) strong{
  color: #600169;
}
#contest.quest .contest-cont > div#q10 .txt:nth-child(7) strong,
#contest.quest .contest-cont > div#q10 .txt:nth-child(7n+7) strong{
  color: #e53768;
}
#contest.quest .contest-cont > div#q10 .txt:nth-child(8) strong,
#contest.quest .contest-cont > div#q10 .txt:nth-child(7n+8) strong{
  color: #007c00;
}

#contest.quest .contest-cont .box{
  margin-top: 0;
  background: #dfe5f3;
  padding: 2em 0;
}
#contest.quest .contest-cont .box p{
  font-size: 20px;
}

@media (min-width: 660px) {
  #contest.quest .contest-cont > div#q7 .inr li span{
    padding: 1.5em;
  }
  #contest.quest .contest-cont > div .com li:not(:nth-child(1)){
    margin-top: 35px;  
  }
  #contest.quest .contest-cont > div .com li,
  #contest.quest .contest-cont > div .com li span{
    height: 23.8vw;
  }
  #contest.quest .contest-cont > div .com .img li:nth-child(4)::before{
    background: url(../img/contest/quest/q7_img04.png)no-repeat center / contain;
    top: -57%;
  }
}

@media (min-width: 765px) {
  #contest.quest .contest-cont > div h2{
    width: 100%;
  }

  #contest.quest .contest-cont > div .inr canvas{
    margin: 0 auto 0;
    height: auto !important;
    width: 60% !important;
  }
  
  #contest.quest .contest-cont > div#q5 .inr{
    position: relative;
    padding-bottom: 38vw;
   /* padding-bottom: 90px;*/
  }  

  #contest.quest .contest-cont > div .com ul{
    margin: 2.6em 0 0;
  }
  
  #contest.quest .contest-cont > div#q7 .inr li span{
    width: 75%;
    line-height: 200%;
    margin-right: 2.4em;
  }  
  
  #contest.quest .contest-cont > div .com .img li:nth-child(odd)::before{
    top: -60%;
    left: 0;
    height: 403px;
    max-width: 1000px;
    width: 100%;
  }
  #contest.quest .contest-cont > div .com .img li:nth-child(even)::before{
    top: -78%;
    right: 0;
    height: 403px;
    max-width: 1000px;
    width: 100%;
  }

}

@media (min-width: 960px) {

  #contest.quest .contest-cont {
    margin-top: 0;
    padding-top: 3vw;
  }
  
  #contest.quest .contest-cont > div .inr.flex{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto;
  }

  #contest.quest .contest-cont > div {
    background: #fff;
    margin: 0 auto;
    max-width: 1000px;
    width: 100%;
    padding-top: 0;
    padding-bottom: 4vw;
    margin-top: 0;
    margin-bottom: 3vw;
    position: relative;
    z-index: 1;
  }

  #contest.quest .contest-cont > div h2{
    margin-bottom: 3vw;
  }

  #contest.quest .contest-cont > div .inr canvas{
    margin: 0;
    width: 90% !important;
  }
  
  #contest.quest .contest-cont > div .inr.flex > div,
  #contest.quest .contest-cont > div .inr.flex > dl{
    margin: 0 0 2em;
    width: 45%;
  }
  #contest.quest .contest-cont > div .inr.flex > dl{
    width: 55%;
  }
  
  #contest.quest .contest-cont > div#q5 .inr{
    position: relative;
    padding-bottom: 110px;
  }
   
  #contest.quest .contest-cont > div .com li span{
    overflow: visible;
    height: auto;
  }
  #contest.quest .contest-cont > div .com li{
    height: auto;
    margin-bottom: 35px;
  }
  #contest.quest .contest-cont > div .com .img li{
    height: 400px;
  }

  #contest.quest .contest-cont > div .com .img li:nth-child(2)::before {
    top: -98%;
  }
  #contest.quest .contest-cont > div .com .img li:nth-child(3)::before{
    top: -97%;
  }
  #contest.quest .contest-cont > div .com .img li:nth-child(4)::before{
    top: -165%;
  }
  #contest.quest .contest-cont > div .com .img li:nth-child(5)::before{
    top: -140%;
  }
  #contest.quest .contest-cont > div .com .img li:nth-child(6)::before{
    top: -210%;
  }
  #contest.quest .contest-cont > div .com .img li:nth-child(7)::before{
    top: -220%;
  }
  
  #contest.quest .contest-cont > div .com .img li:nth-child(8){
    margin-top: -53%;
  }
  #contest.quest .contest-cont > div .com .img li:nth-child(20){
    margin-top: -12%;
  }
  #contest.quest .contest-cont > div .com .img li:nth-child(9),
  #contest.quest .contest-cont > div .com .img li:nth-child(10),
  #contest.quest .contest-cont > div .com .img li:nth-child(14),
  #contest.quest .contest-cont > div .com .img li:nth-child(16),
  #contest.quest .contest-cont > div .com .img li:nth-child(17),
  #contest.quest .contest-cont > div .com .img li:nth-child(18),
  #contest.quest .contest-cont > div .com .img li:nth-child(19),
  #contest.quest .contest-cont > div .com .img li:nth-child(21),
  #contest.quest .contest-cont > div .com .img li:nth-child(22),
  #contest.quest .contest-cont > div .com .img li:nth-child(23),
  #contest.quest .contest-cont > div .com .img li:nth-child(28),
  #contest.quest .contest-cont > div .com .img li:nth-child(29),
  #contest.quest .contest-cont > div .com .img li:nth-child(30),
  #contest.quest .contest-cont > div .com .img li:nth-child(32),
  #contest.quest .contest-cont > div .com .img li:nth-child(34),
  #contest.quest .contest-cont > div .com .img li:nth-child(36){
    margin-top: -5%;
  }
  #contest.quest .contest-cont > div .com .img li:nth-child(11),
  #contest.quest .contest-cont > div .com .img li:nth-child(12),
  #contest.quest .contest-cont > div .com .img li:nth-child(13),
  #contest.quest .contest-cont > div .com .img li:nth-child(15),
  #contest.quest .contest-cont > div .com .img li:nth-child(26),
  #contest.quest .contest-cont > div .com .img li:nth-child(31),
  #contest.quest .contest-cont > div .com .img li:nth-child(33),
  #contest.quest .contest-cont > div .com .img li:nth-child(35){
    margin-top: -2%;
  }
  #contest.quest .contest-cont > div .com .img li:nth-child(24),
  #contest.quest .contest-cont > div .com .img li:nth-child(25),
  #contest.quest .contest-cont > div .com .img li:nth-child(27){
    margin-top: -1%;
  }
  
  #contest.quest .contest-cont > div .com li:not(:nth-child(1)){
    margin-top: 2.5em;  
  }
  
}
@media (min-width: 1012px) {
  #contest.quest .contest-cont > div .com li:not(:nth-child(1)){
    margin-top: 0;  
  } 
  #contest.quest .contest-cont > div .com .img li:nth-child(1)::before {
    top: -55%;
  }
  #contest.quest .contest-cont > div .com .img li:nth-child(2)::before {
    top: -98%;
  }
  #contest.quest .contest-cont > div .com .img li:nth-child(5)::before{
    top: -165%;
  }
  #contest.quest .contest-cont > div .com .img li:nth-child(6)::before{
    top: -250%;
  }
  #contest.quest .contest-cont > div .com .img li:nth-child(7)::before{
    top: -260%;
  }
  
  
  
  #contest.quest .contest-cont > div .com .img li:nth-child(8){
    margin-top: -58%;
  }
  #contest.quest .contest-cont > div .com .img li:nth-child(20){
    margin-top: -12%;
  }
  #contest.quest .contest-cont > div .com .img li:nth-child(9),
  #contest.quest .contest-cont > div .com .img li:nth-child(10),
  #contest.quest .contest-cont > div .com .img li:nth-child(14),
  #contest.quest .contest-cont > div .com .img li:nth-child(17),
  #contest.quest .contest-cont > div .com .img li:nth-child(18),
  #contest.quest .contest-cont > div .com .img li:nth-child(19),
  #contest.quest .contest-cont > div .com .img li:nth-child(21),
  #contest.quest .contest-cont > div .com .img li:nth-child(22),
  #contest.quest .contest-cont > div .com .img li:nth-child(28),
  #contest.quest .contest-cont > div .com .img li:nth-child(29),
  #contest.quest .contest-cont > div .com .img li:nth-child(30),
  #contest.quest .contest-cont > div .com .img li:nth-child(32),
  #contest.quest .contest-cont > div .com .img li:nth-child(34),
  #contest.quest .contest-cont > div .com .img li:nth-child(36){
    margin-top: -10%;
  }
  #contest.quest .contest-cont > div .com .img li:nth-child(11),
  #contest.quest .contest-cont > div .com .img li:nth-child(12),
  #contest.quest .contest-cont > div .com .img li:nth-child(13),
  #contest.quest .contest-cont > div .com .img li:nth-child(15),
  #contest.quest .contest-cont > div .com .img li:nth-child(16),
  #contest.quest .contest-cont > div .com .img li:nth-child(23),
  #contest.quest .contest-cont > div .com .img li:nth-child(26),
  #contest.quest .contest-cont > div .com .img li:nth-child(31),
  #contest.quest .contest-cont > div .com .img li:nth-child(33),
  #contest.quest .contest-cont > div .com .img li:nth-child(35){
    margin-top: -6%;
  }
  #contest.quest .contest-cont > div .com .img li:nth-child(24),
  #contest.quest .contest-cont > div .com .img li:nth-child(25),
  #contest.quest .contest-cont > div .com .img li:nth-child(27){
    margin-top: -5%;
  }
  
}