/* _setting CSS */
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,900|Noto+Serif+JP:400,900&display=swap&subset=japanese");
/*
* fes2020
*/
/* ------------------------------------------------------------------------- */
/*------------------######################################### 
----------------------------
----------------------------
min-width: 768px
----------------------------
--------------------#########################################*/
@media screen and (min-width: 768px) {
  html {
    overflow-x: hidden;
  }

  body {
    background: #000;
    line-height: 1.7;
    overflow-x: hidden;
  }
  body * {
    font-weight: normal;
    box-sizing: border-box;
  }

  .sp {
    display: none;
  }

  .pc {
    display: initial;
  }

  /* --wrap----------------------------------------------------------------------- */
  #wrap {
    position: relative;
    overflow-x: hidden;
    background: url(../images/fes2020/mv_2.png) center -71px/1340px no-repeat;
    background-attachment: fixed;
  }

  .common_inner {
    width: 980px;
    margin: 0 auto 60px;
  }

  h1 {
    margin: 50px auto 120px;
    padding: 50px 0 50px 0;
    background: url(../images/fes2020/fes2020mv_1.png) center/100% no-repeat;
  }
  h1 img {
    display: block;
    width: 690px;
    margin: 10px auto 30px;
  }

  .text01 {
    margin: 70px 0 50px;
    padding-bottom: 20px;
    border-bottom: 1px solid #fff;
    font-size: 2.8rem;
    font-weight: bold;
    text-align: center;
    color: #fff;
  }

  .lead p {
    margin-bottom: 30px;
    text-align: center;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1.8;
  }
  .lead p .s1 {
    font-size: 1.8rem;
    font-weight: bold;
  }
  .lead p .s2 {
    font-size: 2.2rem;
    font-weight: bold;
  }

  .menu ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 760px;
    margin: 80px auto 70px;
  }
  .menu ul li {
    width: 48%;
  }
  .menu ul li a {
    display: block;
    padding: 12px 20px;
    margin: 0 0 14px;
    background: #fff;
    color: #000;
    font-weight: bold;
    border-radius: 30px;
    text-decoration: none;
    mix-blend-mode: difference;
    transition: .2s;
  }
  .menu ul li a:hover {
    background: #000;
    color: #fff;
  }

  .caution {
    background: #fff;
    padding: 30px;
    width: 700px;
    margin: 100px auto;
    text-align: center;
  }
  .caution p {
    color: #000;
  }

  .ttl1 {
    margin: 180px 0 50px;
    padding-bottom: 20px;
    border-bottom: 1px solid #fff;
    font-size: 2.8rem;
    font-weight: bold;
    text-align: center;
    color: #fff;
  }

  .end {
    width: 800px;
    margin: 0 auto 50px;
    padding: 35px;
    border-radius: 10px;
    background: #fff;
    text-align: center;
  }
  .end .ttl {
    margin-bottom: 20px;
    font-size: 3rem;
    font-weight: bold;
  }
  .end p{
    margin-bottom: 10px;
  }
  .end a {
    display: block;
    width: 400px;
    margin: 30px auto 0;
    padding: 10px 20px;
    background: #bf0404;
    color: #fff;
    text-decoration: none;
    border: 2px solid #bf0404;
    border-radius: 10px;
    transition: .2s;
  }
  .end a:hover {
    background: #fff;
    color: #000;
  }

  #page_top {
    display: block;
    width: 69px;
    height: 140px;
    right: 20px;
    z-index: 700;
  }
  #page_top a {
    display: block;
    width: 69px;
    height: 140px;
    background: url(../images/fes2020/page_top.png) center/100% no-repeat;
  }

  .copyright {
    padding: 10px;
    font-size: 1rem;
    color: #fff;
    text-align: center;
  }

  .thank_you {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../images/fes2020/thankyou.png) center/64% no-repeat;
    z-index: 10000;
    animation: bound-anim 2s step-end infinite;
  }

  .link {
    padding: 20px;
  }
  .link a {
    color: #fff;
    text-align: center;
    padding: 13px;
    text-decoration: none;
    font-weight: bold;
    width: 300px;
    height: 100%;
    margin: 0 auto 40px;
    display: block;
    border-radius: 48px;
    border: 4px dotted #eaaa18;
    font-size: 1.6rem;
    drop-shadow: 1px 1px 1px 1px #fff;
    filter: drop-shadow(0 0px 3px rgba(236, 255, 252, 0.65));
    z-index: -1;
    box-sizing: border-box;
    transition: .3s;
  }
  .link a:hover {
    border: 4px dotted #efd7a1;
    filter: drop-shadow(4px 2px 10px rgba(236, 255, 252, 0.8));
    color: #eaaa18;
  }
}
/*------------------######################################### 
----------------------------
----------------------------
max-width: 767px
----------------------------
--------------------#########################################*/
@media screen and (max-width: 767px) {
  html {
    overflow-x: hidden;
  }

  body {
    background: #000;
    overflow-x: hidden;
  }
  body * {
    font-weight: normal;
    box-sizing: border-box;
  }

  .inner {
    width: 100%;
  }

  .sp {
    display: initial;
  }

  .pc {
    display: none;
  }

  img {
    width: 100%;
  }

  main {
    padding: 10px 0 80px;
  }

  /* --Mv----------------------------------------------------------------------- */
  /* --wrap----------------------------------------------------------------------- */
  #wrap {
    position: relative;
    overflow-x: hidden;
    background: url(../images/fes2020/mv_2.png) center 10vw/180vw no-repeat;
    background-attachment: fixed;
  }

  .common_inner {
    width: 100%;
    margin: 0 auto 20vw;
    padding: 0 3vw;
  }

  h1 {
    margin-top: 20vw;
    padding: 5vw 0;
    background: url(../images/fes2020/fes2020mv_1.png) center/100% no-repeat;
  }
  h1 img {
    display: block;
    width: 90vw;
    margin: 3vw auto 5vw;
  }

  .text01 {
    margin: 10vw 0 20vw;
    padding-bottom: 20vw;
    border-bottom: 1px solid #fff;
    font-size: 2.8rem;
    font-weight: bold;
    text-align: center;
    color: #fff;
  }

  .lead p {
    margin-bottom: 5vw;
    text-align: center;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1.8;
  }
  .lead p .s1 {
    font-size: 1.8rem;
    font-weight: bold;
  }
  .lead p .s2 {
    font-size: 2rem;
    font-weight: bold;
  }

  .caution {
    background: #fff;
    padding: 5vw;
    margin: 30vw auto;
    text-align: center;
  }
  .caution p {
    color: #000;
  }

  .ttl1 {
    margin: 30vw 0 10vw;
    padding-bottom: 5vw;
    border-bottom: 1px solid #fff;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    color: #fff;
  }

  .menu {
    margin: 10vw 0 20vw;
    padding: 0 3vw;
  }
  .menu ul {
    width: 100%;
    margin: 10vw auto 5vw;
  }
  .menu ul li a {
    display: block;
    padding: 3vw 3vw;
    margin: 0 0 14px;
    background: #fff;
    color: #000;
    font-weight: bold;
    border-radius: 30px;
    font-size: 1.4rem;
    text-decoration: none;
    mix-blend-mode: difference;
  }

  .end {
    width: 98%;
    margin: 0 auto 30vw;
    padding: 10vw 3vw;
    border-radius: 10px;
    background: #fff;
    text-align: center;
  }
  .end .ttl {
    margin-bottom: 5vw;
    font-size: 1.8rem;
    font-weight: bold;
  }
  .end p{
    margin-bottom: 3vw;
  }
  .end a {
    display: block;
    width: 90%;
    margin: 5vw auto 0;
    padding: 4vw 2vw;
    background: #bf0404;
    color: #fff;
    text-decoration: none;
    border: 2px solid #bf0404;
    border-radius: 10px;
    transition: .2s;
  }
  .end a:hover {
    background: #fff;
    color: #000;
  }

  .link {
    padding: 20px;
  }
  .link a {
    color: #fff;
    text-align: center;
    padding: 2vw;
    text-decoration: none;
    font-weight: bold;
    width: 80%;
    height: 100%;
    margin: 0 auto 5vw;
    display: block;
    border-radius: 48px;
    border: 4px dotted #eaaa18;
    font-size: 1.4rem;
    filter: drop-shadow(0 0px 3px rgba(236, 255, 252, 0.65));
    z-index: -1;
    box-sizing: border-box;
    transition: .3s;
  }

  .copyright {
    padding: 10px;
    font-size: .8rem;
    color: #fff;
    text-align: center;
  }
}
.btn_effect {
  animation: btn_effect linear 0.8s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -moz-animation: btn_effect linear 0.8s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -ms-animation: btn_effect linear 0.8s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes btn_effect {
  0% {
    opacity: 0;
    transform: scaleX(1) scaleY(1);
  }
  0% {
    transform: scaleX(1) scaleY(1);
  }
  17% {
    opacity: 1;
    transform: scaleX(2) scaleY(2);
  }
  29% {
    opacity: 0.8048457983731747;
    transform: scaleX(1.76) scaleY(1.76);
  }
  51% {
    opacity: 0.45;
    transform: scaleX(1.31) scaleY(1.31);
  }
  66% {
    opacity: 0;
    transform: scaleX(1) scaleY(1);
  }
  73% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: scaleX(1) scaleY(1);
  }
}
@-moz-keyframes btn_effect {
  0% {
    opacity: 0;
    -moz-transform: scaleX(1) scaleY(1);
  }
  0% {
    -moz-transform: scaleX(1) scaleY(1);
  }
  17% {
    opacity: 1;
    -moz-transform: scaleX(2) scaleY(2);
  }
  29% {
    opacity: 0.8048457983731747;
    -moz-transform: scaleX(1.76) scaleY(1.76);
  }
  51% {
    opacity: 0.45;
    -moz-transform: scaleX(1.31) scaleY(1.31);
  }
  66% {
    opacity: 0;
    -moz-transform: scaleX(1) scaleY(1);
  }
  73% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    -moz-transform: scaleX(1) scaleY(1);
  }
}
@-ms-keyframes btn_effect {
  0% {
    opacity: 0;
    -ms-transform: scaleX(1) scaleY(1);
  }
  0% {
    -ms-transform: scaleX(1) scaleY(1);
  }
  17% {
    opacity: 1;
    -ms-transform: scaleX(2) scaleY(2);
  }
  29% {
    opacity: 0.8048457983731747;
    -ms-transform: scaleX(1.76) scaleY(1.76);
  }
  51% {
    opacity: 0.45;
    -ms-transform: scaleX(1.31) scaleY(1.31);
  }
  66% {
    opacity: 0;
    -ms-transform: scaleX(1) scaleY(1);
  }
  73% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    -ms-transform: scaleX(1) scaleY(1);
  }
}
@keyframes bound-anim {
  0% {
    top: 0;
    transform: scale(1);
    opacity: 1;
  }
  30% {
    top: -10%;
    transform: scale(0.96, 1.04);
  }
  60% {
    transform: scale(1);
  }
  90% {
    top: 0;
    transform: scale(1.15, 0.9);
    opacity: 1;
  }
  100% {
    top: 0;
    transform: scale(1);
    opacity: 0;
  }
}
.sangokushi_btn {
  display: block;
}