@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Dosis:wght@300;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@1,400;1,700&display=swap");
@import url(fontawesome-all.min.css);
/*----------------------------------------------------
  SCSS
----------------------------------------------------*/
/*----------------------------------------------------
  SCSS
----------------------------------------------------*/
@import url(fix.css);
* {
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
  -o-font-feature-settings: "palt";
  -ms-font-feature-settings: "palt";
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

*, *:before, *:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  outline: 1px solid transparent;
}

@​media (prefers-reduced-motion: reduce) {
  * {
    -webkit-animation-duration: 0.001s;
            animation-duration: 0.001s;
    -webkit-transition-duration: 0.001s;
            transition-duration: 0.001s;
  }
}
html {
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  height: 100%;
  font-size: 0.625rem;
}

body {
  text-rendering: optimizeLegibility;
  margin: 0;
  background-color: #15151b;
  color: #fff;
  font-size: 10px;
  font-family: "Noto Sans JP", "Open Sans", sans-serif;
  position: relative;
  background-size: contain;
}

pre {
  white-space: pre-wrap;
}

:root {
  line-sizing: normal;
}

:root {
  -ms-text-spacing: trim-start allow-end trim-adjacent ideograph-alpha ideograph-numeric;
      text-spacing: trim-start allow-end trim-adjacent ideograph-alpha ideograph-numeric;
}

img {
  border-style: none;
  display: block;
  vertical-align: bottom;
  max-width: 100%;
  width: 100%;
  height: auto;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0 0;
}

a {
  word-break: break-all;
  outline: 0;
  -webkit-transition: all 100ms linear;
  transition: all 100ms linear;
}

a {
  color: #f40;
}

p, p > span {
  line-height: 1.5em;
  letter-spacing: 1px;
}

* > span {
  font-size: inherit;
}

address {
  font-style: normal;
  line-height: 1.75;
  letter-spacing: 1px;
}

ul, ol, li {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 1.4rem;
}

.bk {
  color: #000;
}

.red {
  color: #e50012;
}

@media screen and (max-width: 320px) {
  a, p, li, dt, dd, th, td, address {
    font-size: 1.4rem;
    letter-spacing: 0.02em;
  }

  * span {
    font-size: inherit;
  }
}
picture {
  display: block;
}

img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
}

/*----------------------------------------------------
  Common
----------------------------------------------------*/
section#container-fluid {
  position: relative;
}

form {
  display: block;
  width: 100%;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
}

button {
  font: inherit;
  padding: 0;
  background-color: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
}

button:focus {
  outline: 0;
  background-color: transparent;
  border: 0 solid transparent;
}

input[type=text], input[type=email], input[type=password], input[type=tel] {
  padding: 1rem 0.5rem;
  line-height: 2.5em;
  height: 2.5em;
}
input[type=text], input[type=email], input[type=password], input[type=date] {
  border: solid 1px #ccc;
  border-radius: 3px;
  display: inline-block;
  margin: 0 6px 10px 0;
  min-height: 30px;
}

select {
  border: solid 1px #ccc;
  border-radius: 3px;
  display: inline-block;
  padding: inherit 0.5rem;
  min-height: 30px;
  font-size: 1.4rem;
}

textarea {
  border: solid 2px #ccc;
  border-radius: 3px;
  padding: 1rem;
  min-height: 12em;
  display: block;
  width: 100%;
  font-size: 1.4rem;
}

input[type=submit] {
  border: solid #ddd 1px;
  border-radius: 5px;
  padding: 0 1em;
  height: 2.2em;
  line-height: 2.2em;
  font-size: 1.6rem;
}

/*-- header --*/
header {
  width: 100%;
  position: relative;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.6);
  /*----
   //header menuNav
    .menuNav{

      //burgermenu チェックトリガー
      #nav-input{
        opacity:0;
        width: 50px;
        height: 50px;
        position: fixed;
        top: .6em;
        right: .6em;
        z-index:19999;
        @include mq-lg {
          width:100px;
          height:100px;
        }
      }

      //バーガーアイコンスペース
      .header_sp_nav{
        outline: none;
        color:transparent;
        background-color: #000;
        width: 60px;
        height: 60px;
        padding:8px 18px;
        position: fixed;
        top:0;
        right:0;
        margin:auto;
        cursor: pointer;
        z-index: 10000;
        transition: all 0.8s ease-in-out;
        pointer-events: auto;
        @include mq-xl {
          width:110px;
          height:110px;
          padding:33px 24px;
        }
      }

      //burger menu
      .nav_line{
        outline: none;
        display: block;
        width: 100%;
        height: 1px;
        background: #fff;
        -webkit-transition: .3s;
        transition: .3s;
      }
      .nav_line1{
        animation: line1_de 1s ease 0s 1 alternate;
        transform:translateY(12px);//停止位置
        @include mq-xl {transform:translateY(6px);}
      }
      @keyframes line1_de{
        0%{
          transform:translateY(30px) rotate(45deg);
        }
        80%{
          transform:translateY(30px) rotate(0deg);
        }
        100%{
          transform:translateY(12px);
          @include mq-xl {transform:translateY(6px);}
        }
      }
      .nav_line2{
        opacity:1;
        transform:translateY(20px);//停止位置
        animation: line2_de 1s ease 0s 1 alternate;
      }
      @keyframes line2_de {
        0%{
          opacity:0;
          transform:translateY(17px);
        }
        90%{
          opacity:1;
        }
      }
      .nav_line3{
        animation: line3_de 1s ease 0s 1 alternate;
        transform:translateY(28px);//停止位置
        @include mq-xl {transform:translateY(34px);}
      }
      @keyframes line3_de{
        0%{
          transform:translateY(10px) rotate(-45deg);
        }
        80%{
          transform:translateY(10px) rotate(0deg);
        }
        100%{
          transform:translateY(28px);
          @include mq-xl {transform:translateY(34px);}
        }
      }

      #nav-input[type="checkbox"]:checked ~ .header_sp_nav{
        background-color: rgba(#000, .9);
        .nav_line2{
          opacity:0;
          animation: line2 1s ease 0s 1 alternate;
        }
        @keyframes line2{
          0%{
            opacity:1;
          }
          40%{
            opacity:0;
          }
        }
        .nav_line1{
          animation: line1 1s ease 0s 1 alternate;
          transform:translateY(22px) rotate(45deg);
          top: -1px;
          position: relative;
        }
        @keyframes line1{
          0%{
            transform:translateY(0px) rotate(0deg);
          }
          30%{
            transform:translateY(22px) rotate(0deg);
          }
          100%{
            transform:translateY(22px) rotate(45deg);
          }
        }
        .nav_line3{
          animation: line3 1s ease 0s 1 alternate;
          transform:translateY(18px) rotate(-45deg);
          top: 0px;
          position: relative;
        }
        @keyframes line3{
          0%{
            transform:translateY(34px) rotate(0deg);
          }
          30%{
            transform:translateY(18px) rotate(0deg);
          }
          100%{
            transform:translateY(18px) rotate(-45deg);
          }
        }
      } //#nav-input:checked ~ .header_sp_nav

      //閉じる用のカバーBG
      #nav-close {
        display: none;//はじめは隠しておく
        position: fixed;
        z-index: 99;
        top: 0;//全体に広がる
        left: 0;
        width: 100%;
        height: 100%;
        background: black;
        opacity: 0;
        transition: .3s ease-in-out;
      }
      //非表示
      .nav-unshown {display:none;}
      //チェックが入ったら表示
      #nav-input[type="checkbox"]:checked ~ #nav-close {
        display: block;//カバーBGを表示
        opacity: .5;
      }
      //#nav-content
      #nav-input[type="checkbox"]:checked ~ #nav-content {
        right: 0;
        transition: .3s ease-in-out;
      }
  ----*/
  /*#nav-content*/
  /*----
      #nav-content {
        overflow: auto;
        background: #fff;
        z-index: 9999;//最前面に
        width: 100%;//幅
        height: 100vh;
        position: fixed;
        top: 0;
        right: -100%;
        transition: .3s ease-in-out;
        padding: 60px 0 1rem;

        div.gNav{
          padding: 0;
          >ul{
            width:100%;
            li{
              display: block;
              width:100%;
              margin-bottom:15px;
              @include mq-md {
                margin-bottom:30px;
              }
              @include mq-lg {
                margin-bottom:20px;
              }
              @include mq-xl {
                margin-bottom:30px;
              }
              a{
                display: block;
                padding:0 1em 0 1.8em;
                text-decoration:none;
                width:100%;
                line-height: 1.15;
                position: relative;
                @include mq-md {
                  padding-left: 2em;
                }
                &:after{
                  content:"\f054";//arw-r
                  font-family: $awesome;
                  font-weight: bold;
                  font-size: .8rem;
                  color:rgba($c-main, .5);
                  position: absolute;
                  top:0;
                  bottom:0;
                  left:15px;
                  @include vh-center(y);
                  @include mq-md {
                    font-size: 12px;
                  }
                }
                &:active{
                  background-color: rgba($c-main, 15%);
                }
                @include mq-md {
                  &:hover{background-color: rgba($c-main, 15%);}
                }
                em{
                  font-style: italic;
                  color:$c-main;
                  font-size: 13px;
                  font-weight: bold;
                  width: auto;
                  display: inline-block;
                  padding:0 .8em;
                  background:linear-gradient(transparent 70%, $c-accent 70%);
                  @include mq-md {
                    font-size: 14px;
                    letter-spacing:2px;
                  }
                }
                span{
                  font-style: italic;
                  color:$c-main;
                  font-size: 5.8vw;
                  font-family: $monts;
                  font-weight:700;
                  width: 100%;
                  display: block;
                  @include mq-md {
                    font-size: 32px;
                    letter-spacing:2px;
                  }
                  @include mq-lg {
                    font-size: 24px;
                  }
                  @include mq-xl {
                    font-size: 36px;
                  }
                }
              }
            }

            /* >li{
              //下層
              >ul{
                position: relative;
                &:after{
                  content:"\f078";//arw-u
                  font-family: $awesome;
                  font-weight: bold;
                  font-size: .8rem;
                  color:rgba($c-main, .5);
                  position: absolute;
                  top:-3.3em;
                  right:12px;
                  left:unset;
                }
                li{
                  display: block;
                  width:100%;
                  a{
                    display: block;
                    background-color: $c-grey-lightest;
                    width:100%;
                    padding:.7em 4px .7em 2.7em;
                    font-size:14px;
                    letter-spacing:0;
                    position: relative;
                    &:after{left:2em;}
                  }
                }
              }
            }//li
          }
        }
      }//#nav-content
  ----*/
  /* pc //
      @include mq-lg {
        /*#nav-input,.header_sp_nav,.nav-unshown {display:none;}
        #nav-content {
          width:100%;
          height:auto;//!must
          padding:0;
          overflow: visible;
          position:relative;
          bottom:0;
          right:unset;
          div.gNav{
            background: linear-gradient(0deg, $c-base 50%, lighten($c-base, 30%) 100%);
            height:66px;
            >ul{
              margin: 0 auto;
              border-top:none;
              width:100%;
              max-width:1024px;
              @include flex(c);
              li{
                min-width:12%;
                width:fit-content;
                height:fit-content;
                display: inline-block;
                border-left: solid 1px $c-grey-lightest;
                &:last-child{border-right: solid 1px $c-grey-lightest;}
                a{
                  @include vhg-center();
                  border: none;
                  padding:0 .8em;
                  color:#fff;
                  height:64px;
                  line-height:1.3;
                  &:after{content:"";}
                  &:hover{
                    transition: all 100ms linear;
                    background-color: rgba(#fff, .3);
                  }
                }
                //下層
                >ul{
                  position: relative;
                  >li{
                    height: 0;
                    overflow: hidden;
                    transition: .2s;
                    >a{
                      background-color: $c-primary;
                      border: solid 1px #fff;
                      border-left: none;
                      border-top:none;
                    }
                  }
                  li:not(:first-child){
                    border: none;
                  }
                } 
              }
              //下層展開
              li:hover ul{
                height:auto;//!must
                > li {
                  border: solid 1px $c-grey-lightest;
                  height: 50px;
                  overflow: visible;
                  a{
                    height: 50px;
                    line-height:50px;
                    padding:0 .8em;
                    &:hover{
                      background-color: darken($c-primary, 15%);
                      color:#fff;
                    }
                  }
                }
              }

            }
          }
        }
      }
    }//menuNav
  ----*/
}
header .container > .row #topImage {
  text-align: center;
  padding: 100px 30px;
}
header .container > .row #topImage h1 {
  margin: 0 auto;
  padding: 0;
  text-align: center;
  display: inline-block;
}
header .container > .row #topImage h1 img {
  margin: 0 auto;
}

footer {
  background-color: #15151b;
  padding: 120px 0 2em;
  margin-top: -60px;
}
footer p.copy {
  color: #99999e;
  font-size: 10px;
  font-weight: normal;
  font-family: "Open Sans", sans-serif;
  letter-spacing: 1px;
  display: block;
  text-align: center;
  line-height: 1.3;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  footer p.copy {
    letter-spacing: 2px;
    line-height: 60px;
    height: 60px;
  }
}
@media screen and (min-width: 1024px) {
  footer p.copy {
    width: 400px;
    margin: 0 100px 0 0;
    line-height: 1em;
    height: 1em;
  }
}

#pagetopBtn {
  overflow: hidden;
  border-radius: 50%;
  position: fixed !important;
  z-index: 9999;
  text-align: center;
  text-decoration: none;
  -webkit-transform: rotateY(270deg);
          transform: rotateY(270deg);
  -webkit-transition: 0.5s;
  transition: 0.5s;
  height: 55px;
  width: 55px;
  bottom: 20px;
  right: 15px;
}
@media screen and (min-width: 768px) {
  #pagetopBtn {
    height: 75px;
    width: 75px;
    bottom: 20px;
    right: 25px;
  }
}
#pagetopBtn a {
  background-color: #fff000;
  color: #000;
  font-size: 10px;
  font-family: "Dosis";
  font-weight: bold;
  text-decoration: none;
  letter-spacing: 0.02em;
  line-height: 55px;
  height: 55px;
  width: 55px;
  display: block;
  position: relative;
  -webkit-filter: saturate(100%);
          filter: saturate(100%);
}
#pagetopBtn a:active {
  background-color: #fffbb3;
  -webkit-filter: saturate(200%);
          filter: saturate(200%);
}
@media screen and (min-width: 768px) {
  #pagetopBtn a {
    font-size: 13px;
    line-height: 75px;
    height: 75px;
    width: 75px;
  }
  #pagetopBtn a:hover {
    background-color: #fffbb3;
    -webkit-filter: saturate(200%);
            filter: saturate(200%);
    text-decoration: none;
  }
}
#pagetopBtn a:after {
  content: "";
  font-family: "Font Awesome 5 Free";
  font-size: 10px;
  font-weight: bold;
  color: #000;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
}
@media screen and (min-width: 768px) {
  #pagetopBtn a:after {
    font-size: 16px;
    top: -28px;
  }
}

.poster {
  max-width: 960px;
  margin: 0 auto 100px;
}

section[id^=sec] {
  padding: 0;
  margin-bottom: 60px;
  position: relative;
  z-index: 2;
}
section[id^=sec] .container {
  padding: 0;
}
section[id^=sec] .container .row {
  padding: 60px 40px 80px;
}
@media screen and (min-width: 768px) {
  section[id^=sec] .container .row {
    padding: 100px 80px;
  }
}
@media screen and (min-width: 1024px) {
  section[id^=sec] .container .row {
    padding: 100px 80px;
  }
}
@media screen and (min-width: 1280px) {
  section[id^=sec] .container .row {
    padding: 120px 240px;
  }
}
section[id^=sec] .container .row p, section[id^=sec] .container .row li, section[id^=sec] .container .row dt, section[id^=sec] .container .row dd {
  font-size: 1.4rem;
  line-height: 1.6;
}
@media screen and (min-width: 768px) {
  section[id^=sec] .container .row p, section[id^=sec] .container .row li, section[id^=sec] .container .row dt, section[id^=sec] .container .row dd {
    font-size: 16px;
  }
}

@-webkit-keyframes skewanime {
  100% {
    left: -10%;
    /*画面の見えていない左から右へ移動する終了地点*/
  }
}

@keyframes skewanime {
  100% {
    left: -10%;
    /*画面の見えていない左から右へ移動する終了地点*/
  }
}
section#sec01 .container .row .contents nav.competitionList h2 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 2em;
}
@media screen and (min-width: 768px) {
  section#sec01 .container .row .contents nav.competitionList h2 {
    font-size: 27px;
    margin-bottom: 30px;
  }
}
section#sec01 .container .row .contents nav.competitionList ul {
  margin: 0 auto 50px;
}
@media screen and (min-width: 768px) {
  section#sec01 .container .row .contents nav.competitionList ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
section#sec01 .container .row .contents nav.competitionList ul li {
  width: 100%;
  display: block;
  margin-bottom: 2em;
}
@media screen and (min-width: 768px) {
  section#sec01 .container .row .contents nav.competitionList ul li {
    width: 45vw;
    max-width: 400px;
  }
}
section#sec01 .container .row .contents nav.competitionList ul li a {
  color: #fff;
  display: block;
  white-space: nowrap;
  letter-spacing: 1px;
  font-size: 1.6rem;
  font-weight: bold;
  height: 5em;
  line-height: calc(5em - 6px);
  border-radius: 2.5em;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  border: 3px solid #fff;
  padding: 0 1.5em;
  text-align: center;
  outline: none;
  -webkit-transition: ease 0.2s;
  transition: ease 0.2s;
  /*== 背景が流れる（斜め） */
}
section#sec01 .container .row .contents nav.competitionList ul li a:before {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  background-color: #fff;
  width: 120%;
  height: 100%;
  -webkit-transform: skewX(-25deg);
          transform: skewX(-25deg);
}
section#sec01 .container .row .contents nav.competitionList ul li a:hover::before {
  -webkit-animation: skewanime 0.5s forwards;
          animation: skewanime 0.5s forwards;
  /*アニメーションの名前と速度を定義*/
}
section#sec01 .container .row .contents nav.competitionList ul li a span {
  position: relative;
  z-index: 3;
  color: #fff;
}
section#sec01 .container .row .contents nav.competitionList ul li.mbb a {
  background-color: #e50054;
}
section#sec01 .container .row .contents nav.competitionList ul li.mbb a:hover {
  border: 3px solid #e50054;
}
section#sec01 .container .row .contents nav.competitionList ul li.mbb a:hover span {
  color: #e50054;
}
section#sec01 .container .row .contents nav.competitionList ul li.soc a {
  background-color: #007ec6;
}
section#sec01 .container .row .contents nav.competitionList ul li.soc a:hover {
  border: 3px solid #007ec6;
}
section#sec01 .container .row .contents nav.competitionList ul li.soc a:hover span {
  color: #007ec6;
}