@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@500;700;800;900&display=swap");
:root {
  --basic-spacer: 240px;
  --basic-radius: 20px;
  --nav-width: 100px;
}

:root {
  --basic-spacer: 240px;
  --basic-radius: 20px;
  --nav-width: 100px;
}

/* $break-point以下の時に@contentを適用 */
/* $break-point以上の時に@contentを適用 */
/* $break-point-min以上、$break-point-max以下の時に@contentを適用 */
:root {
  --basic-spacer: 240px;
  --basic-radius: 20px;
  --nav-width: 100px;
}

:root {
  --basic-spacer: 240px;
  --basic-radius: 20px;
  --nav-width: 100px;
}

/* $break-point以下の時に@contentを適用 */
/* $break-point以上の時に@contentを適用 */
/* $break-point-min以上、$break-point-max以下の時に@contentを適用 */
/*
================================================================================
class
================================================================================
*/
@font-face {
  font-family: "Gotham Black";
  src: url("../fonts/GothamBlackRegular.woff") format("woff");
}
* {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-decoration: none;
  color: inherit;
}

@media screen and (max-width: 1000px) {
  :root {
    --basic-spacer: 20vw;
    --basic-radius: 2vw;
    --nav-width: 10vw;
  }
}
/*
================================================================================
container,base
================================================================================
*/
html, body {
  margin: 0;
  padding: 0;
  position: relative;
  background: #f0f0f0;
  font-size: 18px;
}
@media screen and (max-width: 1000px) {
  html, body {
    font-size: 4vw;
  }
}

html {
  background: #fff581;
  -webkit-transition: background 200ms ease 200ms;
  transition: background 200ms ease 200ms;
}
html.loadingFinish body {
  background: #f0f0f0;
}

body {
  font-family: "M PLUS 1p", sans-serif;
  letter-spacing: 0;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  font-weight: 500;
  color: #505050;
  line-height: 1.4;
  opacity: 0;
  -webkit-transition: opacity 200ms ease 200ms;
  transition: opacity 200ms ease 200ms;
}
@media screen and (min-width: 778px) {
  body .onlySP {
    display: none;
  }
}
body.bodyLock {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: scroll;
}
body.loadingFinish {
  opacity: 1;
}

main * {
  word-break: break-all;
  line-break: strict;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

@media screen and (min-width: 778px) {
  #main {
    /* PC */
  }
}
@media screen and (max-width: 778px) {
  #main {
    /* SP */
  }
}

/* #main */
main .wrap {
  width: 100%;
  position: relative;
  overflow: hidden;
}

body .fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding-left: 100px;
  pointer-events: none;
  z-index: 10;
}

/*
================================================================================
tag
================================================================================
*/
ol, ul {
  list-style: none;
}

/*
================================================================================
class
================================================================================
*/
.wrap {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.scroll-wrap {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
}

.contents-body {
  padding-right: var(--nav-width);
  padding-bottom: 0px;
}
@media screen and (max-width: 1000px) {
  .contents-body {
    padding-bottom: 0vw;
  }
}
.contents-body img {
  max-width: 100%;
}

.beforeBlock::before,
.afterBlock::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.radius {
  border-radius: var(--basic-radius);
}

.wfull {
  width: 100%;
}

.onlySP {
  display: none;
}
@media screen and (max-width: 1000px) {
  .onlySP {
    display: inline-block;
  }
}

@media screen and (max-width: 1000px) {
  .onlyPC {
    display: none;
  }
}

.fontGotham {
  font-family: "Gotham Black", sans-serif;
  line-height: 1;
  color: #6cd2ef;
  text-stroke: 2px #505050;
  -webkit-text-stroke: 2px #505050;
  margin: 0 auto 20px;
}
.fontGotham.content__title {
  font-size: 4.2rem;
}
@media screen and (max-width: 1000px) {
  .fontGotham.content__title {
    text-align: center;
  }
}
@media screen and (max-width: 1000px) {
  .fontGotham {
    text-stroke: 0.25vw #505050;
    -webkit-text-stroke: 0.25vw #505050;
  }
  .fontGotham.content__title {
    font-size: 2.5rem;
  }
}

.cardGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #fff;
  border: solid 2px #505050;
  margin: 0px 0 0 0px;
  border-radius: var(--basic-radius);
  overflow: hidden;
  padding: 60px 60px;
}
@media screen and (max-width: 1000px) {
  .cardGroup {
    padding: 5vw 5vw;
  }
}
.cardGroup .inWrap {
  position: relative;
}
.cardGroup .inWrap::before {
  content: "";
  display: block;
  width: 350px;
  height: 350px;
  position: absolute;
  top: -30px;
  right: 0;
  background: url("../img/online_service/illust.svg") center center no-repeat;
  background-size: contain;
}
@media screen and (max-width: 1000px) {
  .cardGroup .inWrap::before {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 70vw;
  }
}
.cardGroup .inWrap > dl dd {
  margin: 0;
  padding: 0;
}
.cardGroup .inWrap > dl dd .flex.process {
  margin-bottom: 3rem;
}
.cardGroup .inWrap > dl dt.read {
  position: relative;
  font-size: 3rem;
  font-weight: 900;
  margin-bottom: 1rem;
  padding-right: 400px;
}
@media screen and (max-width: 1000px) {
  .cardGroup .inWrap > dl dt.read {
    font-size: 2rem;
    padding-right: 0px;
  }
}
.cardGroup .inWrap > dl dd.read {
  font-size: 1.2rem;
  font-weight: 900;
  margin-bottom: 4rem;
  padding-right: 400px;
}
@media screen and (max-width: 1000px) {
  .cardGroup .inWrap > dl dd.read {
    font-size: 1rem;
    padding-right: 0px;
  }
}
.cardGroup .inWrap .content__title_sub {
  margin-bottom: 1rem;
  font-size: 2rem;
  color: #6cd2ef;
}
.cardGroup .inWrap .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.cardGroup .inWrap .flex .item {
  width: 48%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 2rem;
}
@media screen and (max-width: 1000px) {
  .cardGroup .inWrap .flex .item {
    width: 100%;
  }
  .cardGroup .inWrap .flex .item:last-child {
    margin-bottom: 0vw;
  }
}
.cardGroup .inWrap .flex .item dl {
  position: relative;
  width: 100%;
  margin: 0 0 0 0;
  padding: 0.5rem 0 0.5rem 120px;
}
@media screen and (max-width: 1000px) {
  .cardGroup .inWrap .flex .item dl {
    padding: 0rem 0 0rem 0;
  }
}
.cardGroup .inWrap .flex .item dl dt {
  font-size: 1.6rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
}
.cardGroup .inWrap .flex .item dl dt::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  background: #ccc;
}
@media screen and (max-width: 1000px) {
  .cardGroup .inWrap .flex .item dl dt::before {
    width: 13vw;
    height: 13vw;
  }
}
@media screen and (max-width: 1000px) {
  .cardGroup .inWrap .flex .item dl dt {
    font-size: 1.2rem;
    min-height: inherit;
    padding-left: 15vw;
    margin-bottom: 0.2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.cardGroup .inWrap .flex .item dl dd {
  font-size: 1rem;
}
@media screen and (max-width: 1000px) {
  .cardGroup .inWrap .flex .item dl dd {
    font-size: 0.9rem;
    padding-left: 15vw;
  }
}
.cardGroup .inWrap .flex.process .item:nth-of-type(1) dl dt::before {
  background: url("../img/online_service/process_1.svg") center center no-repeat;
  background-size: contain;
}
.cardGroup .inWrap .flex.process .item:nth-of-type(2) dl dt::before {
  background: url("../img/online_service/process_2.svg") center center no-repeat;
  background-size: contain;
}
.cardGroup .inWrap .flex.process .item:nth-of-type(3) dl dt::before {
  background: url("../img/online_service/process_3.svg") center center no-repeat;
  background-size: contain;
}
.cardGroup .inWrap .flex.process .item:nth-of-type(4) dl dt::before {
  background: url("../img/online_service/process_4.svg") center center no-repeat;
  background-size: contain;
}
.cardGroup .inWrap .flex.service .item:nth-of-type(1) dl dt::before {
  background: url("../img/online_service/service_1.svg") center center no-repeat;
  background-size: contain;
}
.cardGroup .inWrap .flex.service .item:nth-of-type(2) dl dt::before {
  background: url("../img/online_service/service_2.svg") center center no-repeat;
  background-size: contain;
}
.cardGroup .inWrap .flex.service .item:nth-of-type(3) dl dt::before {
  background: url("../img/online_service/service_3.svg") center center no-repeat;
  background-size: contain;
}
.cardGroup .inWrap .flex.service .item:nth-of-type(4) dl dt::before {
  background: url("../img/online_service/service_4.svg") center center no-repeat;
  background-size: contain;
}

.cardFlex .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #fff;
  border: solid 2px #505050;
  margin: -20px 0 0 0px;
  border-radius: var(--basic-radius);
  overflow: hidden;
  padding: 60px 60px;
  width: 90%;
  max-width: 980px;
  height: 260px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
@media screen and (min-width: 1000px) and (max-width: 1400px) {
  .cardFlex .item {
    width: 80%;
    height: auto;
    min-height: 20vw;
    padding: 5vw;
  }
}
@media screen and (max-width: 1000px) {
  .cardFlex .item {
    margin: 0px 0 2rem 0px;
    padding: 8vw;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 30vw;
  }
}
.cardFlex .item:first-child {
  margin-top: 0px;
}
body#fanclub section.process .cardFlex .item:nth-of-type(1) dl::before {
  background: url("../img/fanclub/process_1.svg") center center no-repeat;
  background-size: contain;
}
body#fanclub section.process .cardFlex .item:nth-of-type(2) dl::before {
  background: url("../img/fanclub/process_2.svg") center center no-repeat;
  background-size: contain;
}
body#fanclub section.process .cardFlex .item:nth-of-type(3) dl::before {
  background: url("../img/fanclub/process_3.svg") center center no-repeat;
  background-size: contain;
}
body#fanclub section.process .cardFlex .item:nth-of-type(4) dl::before {
  background: url("../img/fanclub/process_4.svg") center center no-repeat;
  background-size: contain;
}
body#merchandising section.process .cardFlex .item:nth-of-type(1) dl::before {
  background: url("../img/merchandising/process_1.svg") center center no-repeat;
  background-size: contain;
}
body#merchandising section.process .cardFlex .item:nth-of-type(2) dl::before {
  background: url("../img/merchandising/process_2.svg") center center no-repeat;
  background-size: contain;
}
body#merchandising section.process .cardFlex .item:nth-of-type(3) dl::before {
  background: url("../img/merchandising/process_3.svg") center center no-repeat;
  background-size: contain;
}
body#merchandising section.process .cardFlex .item:nth-of-type(4) dl::before {
  background: url("../img/merchandising/process_4.svg") center center no-repeat;
  background-size: contain;
}
body#merchandising section.process .cardFlex .item:nth-of-type(5) dl::before {
  background: url("../img/merchandising/process_5.svg") center center no-repeat;
  background-size: contain;
}
body#event section.process .cardFlex .item:nth-of-type(1) dl::before {
  background: url("../img/event/process_1.svg") center center no-repeat;
  background-size: contain;
}
body#event section.process .cardFlex .item:nth-of-type(2) dl::before {
  background: url("../img/event/process_2.svg") center center no-repeat;
  background-size: contain;
}
body#event section.process .cardFlex .item:nth-of-type(3) dl::before {
  background: url("../img/event/process_3.svg") center center no-repeat;
  background-size: contain;
}
body#event section.process .cardFlex .item:nth-of-type(4) dl::before {
  background: url("../img/event/process_4.svg") center center no-repeat;
  background-size: contain;
}
body#event section.process .cardFlex .item:nth-of-type(5) dl::before {
  background: url("../img/event/process_5.svg") center center no-repeat;
  background-size: contain;
}
body#online_service section.process .cardFlex .item:nth-of-type(1) dl::before {
  background: url("../img/online_service/process_1.svg") center center no-repeat;
  background-size: contain;
}
body#online_service section.process .cardFlex .item:nth-of-type(2) dl::before {
  background: url("../img/online_service/process_2.svg") center center no-repeat;
  background-size: contain;
}
body#online_service section.process .cardFlex .item:nth-of-type(3) dl::before {
  background: url("../img/online_service/process_3.svg") center center no-repeat;
  background-size: contain;
}
body#online_service section.process .cardFlex .item:nth-of-type(4) dl::before {
  background: url("../img/online_service/process_4.svg") center center no-repeat;
  background-size: contain;
}
@media screen and (max-width: 1000px) {
  section.process .cardFlex .item {
    margin-left: 0px !important;
  }
}
body#fanclub section.service .cardFlex .item:nth-of-type(1) dl::before {
  background: url("../img/fanclub/service_1.svg") center center no-repeat;
  background-size: contain;
}
body#fanclub section.service .cardFlex .item:nth-of-type(2) dl::before {
  background: url("../img/fanclub/service_2.svg") center center no-repeat;
  background-size: contain;
}
body#fanclub section.service .cardFlex .item:nth-of-type(3) dl::before {
  background: url("../img/fanclub/service_3.svg") center center no-repeat;
  background-size: contain;
}
body#fanclub section.service .cardFlex .item:nth-of-type(4) dl::before {
  background: url("../img/fanclub/service_4.svg") center center no-repeat;
  background-size: contain;
}
body#fanclub section.service .cardFlex .item:nth-of-type(5) dl::before {
  background: url("../img/fanclub/service_5.svg") center center no-repeat;
  background-size: contain;
}
body#fanclub section.service .cardFlex .item:nth-of-type(6) dl::before {
  background: url("../img/fanclub/service_6.svg") center center no-repeat;
  background-size: contain;
}
body#merchandising section.service .cardFlex .item:nth-of-type(1) dl::before {
  background: url("../img/merchandising/service_1.svg") center center no-repeat;
  background-size: contain;
}
body#merchandising section.service .cardFlex .item:nth-of-type(2) dl::before {
  background: url("../img/merchandising/service_2.svg") center center no-repeat;
  background-size: contain;
}
body#merchandising section.service .cardFlex .item:nth-of-type(3) dl::before {
  background: url("../img/merchandising/service_3.svg") center center no-repeat;
  background-size: contain;
}
body#merchandising section.service .cardFlex .item:nth-of-type(4) dl::before {
  background: url("../img/merchandising/service_4.svg") center center no-repeat;
  background-size: contain;
}
body#online_service section.service .cardFlex .item:nth-of-type(1) dl::before {
  background: url("../img/online_service/process_1.svg") center center no-repeat;
  background-size: contain;
}
body#online_service section.service .cardFlex .item:nth-of-type(2) dl::before {
  background: url("../img/online_service/process_2.svg") center center no-repeat;
  background-size: contain;
}
body#online_service section.service .cardFlex .item:nth-of-type(3) dl::before {
  background: url("../img/online_service/process_3.svg") center center no-repeat;
  background-size: contain;
}
body#online_service section.service .cardFlex .item:nth-of-type(4) dl::before {
  background: url("../img/online_service/process_4.svg") center center no-repeat;
  background-size: contain;
}
@media screen and (max-width: 1000px) {
  section.service .cardFlex .item {
    margin-left: 0px !important;
  }
}
section.eventAll .cardFlex .item:nth-of-type(1) dl::before {
  background: url("../img/event/process_1.svg") center center no-repeat;
  background-size: contain;
}
section.eventAll .cardFlex .item:nth-of-type(2) dl::before {
  background: url("../img/event/process_2.svg") center center no-repeat;
  background-size: contain;
}
section.eventAll .cardFlex .item:nth-of-type(3) dl::before {
  background: url("../img/event/process_3.svg") center center no-repeat;
  background-size: contain;
}
section.eventAll .cardFlex .item:nth-of-type(4) dl::before {
  background: url("../img/event/process_4.svg") center center no-repeat;
  background-size: contain;
}
section.eventAll .cardFlex .item:nth-of-type(5) dl::before {
  background: url("../img/event/process_5.svg") center center no-repeat;
  background-size: contain;
}
@media screen and (max-width: 1000px) {
  section.eventAll .cardFlex .item {
    margin-left: 0px !important;
  }
}
section.online_service_our_suggestion .cardFlex .item:nth-of-type(1) dl::before {
  background: url("../img/online_service/illust_1.svg") center center no-repeat;
  background-size: contain;
}
@media screen and (max-width: 1000px) {
  section.online_service_our_suggestion .cardFlex .item {
    margin-left: 0px !important;
  }
}
section.online_service_process .cardFlex .item:nth-of-type(1) dl::before {
  background: url("../img/online_service/illust_2.svg") center center no-repeat;
  background-size: contain;
}
section.online_service_process .cardFlex .item:nth-of-type(2) dl::before {
  background: url("../img/online_service/illust_3.svg") center center no-repeat;
  background-size: contain;
}
section.online_service_process .cardFlex .item:nth-of-type(3) dl::before {
  background: url("../img/online_service/illust_4.svg") center center no-repeat;
  background-size: contain;
}
section.online_service_process .cardFlex .item:nth-of-type(4) dl::before {
  background: url("../img/online_service/illust_5.svg") center center no-repeat;
  background-size: contain;
}
@media screen and (max-width: 1000px) {
  section.online_service_process .cardFlex .item {
    margin-left: 0px !important;
  }
}
section.online_service_service .cardFlex .item:nth-of-type(1) dl::before {
  background: url("../img/online_service/illust_6.svg") center center no-repeat;
  background-size: contain;
}
section.online_service_service .cardFlex .item:nth-of-type(2) {
  margin-left: 73px;
}
section.online_service_service .cardFlex .item:nth-of-type(2) dl::before {
  background: url("../img/online_service/illust_7.svg") center center no-repeat;
  background-size: contain;
}
section.online_service_service .cardFlex .item:nth-of-type(3) {
  margin-left: 147px;
}
section.online_service_service .cardFlex .item:nth-of-type(3) dl::before {
  background: url("../img/online_service/illust_8.svg") center center no-repeat;
  background-size: contain;
}
section.online_service_service .cardFlex .item:nth-of-type(4) {
  margin-left: 221px;
}
section.online_service_service .cardFlex .item:nth-of-type(4) dl::before {
  background: url("../img/online_service/illust_9.svg") center center no-repeat;
  background-size: contain;
}
@media screen and (max-width: 1000px) {
  section.online_service_service .cardFlex .item {
    margin-left: 0px !important;
  }
}
.cardFlex .item dl {
  position: relative;
  width: 100%;
  padding: 0 260px 0 0;
  margin: 0;
}
@media screen and (min-width: 1000px) and (max-width: 1400px) {
  .cardFlex .item dl {
    padding: 0vw 17vw 0 0;
  }
}
@media screen and (max-width: 1000px) {
  .cardFlex .item dl {
    padding: 0vw 0vw 0 0;
  }
}
.cardFlex .item dl::before {
  content: "";
  display: block;
  width: 200px;
  height: 200px;
  background: #ccc;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  z-index: 1;
}
@media screen and (min-width: 1000px) and (max-width: 1400px) {
  .cardFlex .item dl::before {
    width: 15vw;
    height: 15vw;
  }
}
@media screen and (max-width: 1000px) {
  .cardFlex .item dl::before {
    position: relative;
    top: 0%;
    right: 0;
    -webkit-transform: translate(0, 0%);
            transform: translate(0, 0%);
    width: 50%;
    height: 0;
    padding-top: 50%;
    margin: auto;
    margin-bottom: 4vw;
  }
}
.cardFlex .item dl dt {
  margin: 0;
  font-size: 2.7rem;
  font-weight: 900;
  line-height: 1.2;
}
@media screen and (max-width: 1000px) {
  .cardFlex .item dl dt {
    font-size: 1.9rem;
    text-align: center;
    line-height: 1.1;
  }
}
.cardFlex .item dl dd {
  margin: 0;
  padding-top: 25px;
}
@media screen and (max-width: 1000px) {
  .cardFlex .item dl dd {
    padding-top: 1em;
  }
}
.cardFlex.count_4 .item:nth-of-type(2) {
  margin-left: 73.33px;
}
.cardFlex.count_4 .item:nth-of-type(3) {
  margin-left: 146.66px;
}
.cardFlex.count_4 .item:nth-of-type(4) {
  margin-left: 220px;
}
.cardFlex.count_5 .item:nth-of-type(2) {
  margin-left: 55px;
}
.cardFlex.count_5 .item:nth-of-type(3) {
  margin-left: 110px;
}
.cardFlex.count_5 .item:nth-of-type(4) {
  margin-left: 165px;
}
.cardFlex.count_5 .item:nth-of-type(5) {
  margin-left: 220px;
}
.cardFlex.count_6 .item:nth-of-type(2) {
  margin-left: 44px;
}
.cardFlex.count_6 .item:nth-of-type(3) {
  margin-left: 88px;
}
.cardFlex.count_6 .item:nth-of-type(4) {
  margin-left: 132px;
}
.cardFlex.count_6 .item:nth-of-type(5) {
  margin-left: 176px;
}
.cardFlex.count_6 .item:nth-of-type(6) {
  margin-left: 220px;
}

.thumbnailFlex {
  padding-top: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media screen and (max-width: 1000px) {
  .thumbnailFlex {
    padding-top: 5vw;
  }
}
.thumbnailFlex .item {
  width: 20%;
  margin: 0 2.5% 2%;
  text-decoration: none;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
@media screen and (max-width: 1000px) {
  .thumbnailFlex .item {
    width: 44.8%;
  }
}
.thumbnailFlex .item.hoverItem {
  cursor: pointer;
}
.thumbnailFlex .item.hoverItem:hover {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
.thumbnailFlex .item dl:not(.site) {
  margin-bottom: 0rem;
}
.thumbnailFlex .item dl:not(.site) dt {
  background: #ccc;
  border: solid 2px #6cd2ef;
  border-radius: 0.5rem;
  overflow: hidden;
  position: relative;
}
.thumbnailFlex .item dl:not(.site) dt::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 56.25%;
}
.thumbnailFlex .item dl:not(.site) dt img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.thumbnailFlex .item dl:not(.site) dd {
  text-align: center;
  padding: 0.5rem;
  margin: 0;
  font-weight: 500;
  font-size: 1rem;
}
.thumbnailFlex .item dl.site dt {
  position: relative;
}
.thumbnailFlex .item dl.site dt::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 56%;
}
.thumbnailFlex .item dl.site dt img {
  position: absolute;
  -webkit-box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.3);
          box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.3);
}
.thumbnailFlex .item dl.site dt img.pcImage {
  top: 0%;
  left: 0%;
  width: 90%;
  height: auto;
  aspect-ratio: 100/56;
}
.thumbnailFlex .item dl.site dt img.spImage {
  bottom: 0%;
  right: 0%;
  width: 20%;
  height: auto;
  aspect-ratio: 10/21.73;
}
.thumbnailFlex .item dl.site dd {
  text-align: left;
  padding: 0rem;
  margin: 0;
  font-font-weight: 500;
  font-size: 1rem;
}
.thumbnailFlex .item dl.square dt {
  position: relative;
  overflow: hidden;
}
.thumbnailFlex .item dl.square dt::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 56%;
}
.thumbnailFlex .item dl.square dt img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
}
.thumbnailFlex .item dl.square dd {
  text-align: left;
  padding: 0rem;
  margin: 0;
  font-size: 1.2rem;
}
.thumbnailFlex .item dl.illust dt {
  background: transparent;
  border: 0;
}
.thumbnailFlex .item dl.illust dd {
  text-align: center;
}

.tCenter {
  text-align: center;
}

.content__text-unit .content__title {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0 0 1rem;
  margin-bottom: 0.25em;
  line-height: 1.2;
}
.content__text-unit .content__text {
  font-size: 1.2rem;
  margin-top: 0;
}

.content_title_line {
  position: relative;
  overflow: hidden;
  height: 2rem;
}
.content_title_line::before, .content_title_line::after {
  content: "";
  display: block;
  width: 48%;
  height: 2px;
  position: absolute;
  top: 50%;
  background: #505050;
}
.content_title_line::before {
  left: 0;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
.content_title_line::after {
  right: 0;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
.content_title_line span {
  display: block;
  width: 4%;
  height: 0;
  padding-top: 4%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.content_title_line span::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: 50%;
  right: 0;
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom;
  -webkit-transform: rotate(55deg);
          transform: rotate(55deg);
  background: #505050;
}

.cloudHead {
  position: relative;
  z-index: 100;
}
.cloudHead img {
  position: absolute;
  top: 0;
  width: 1300px;
  height: auto;
}
@media screen and (max-width: 1400px) {
  .cloudHead img {
    width: 102vw;
    max-width: none;
  }
}
.cloudHead img:nth-of-type(1) {
  left: 50%;
  -webkit-transform: translate(-50%, -70%);
          transform: translate(-50%, -70%);
}
.cloudHead img:nth-of-type(2) {
  left: 50%;
  -webkit-transform: translate(-145%, -70%);
          transform: translate(-145%, -70%);
}
.cloudHead img:nth-of-type(3) {
  left: 50%;
  -webkit-transform: translate(45%, -70%);
          transform: translate(45%, -70%);
}

.page_head_title.static {
  width: 100%;
  height: auto;
  position: relative;
  top: auto;
  left: auto;
  -webkit-transform: translate3d(0%, 0, 0);
          transform: translate3d(0%, 0, 0);
  padding-top: 150px;
  margin-bottom: 50px;
}
.page_head_title.static.jp {
  text-align: center;
  font-size: 2rem;
  font-weight: 900;
}
.page_head_title img {
  width: 100%;
  height: auto;
  max-height: 120px;
}

.areaBox {
  background: #d5ffff;
  border: solid 2px #505050;
  margin: 0px 0 3rem 0px;
  border-radius: var(--basic-radius);
  overflow: hidden;
  padding: 60px 120px;
  width: 100%;
  max-width: 1200px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.areaBox.transparent {
  border: 0;
  background: transparent;
}
@media screen and (max-width: 1000px) {
  .areaBox {
    padding: 5vw 5vw;
  }
}
.areaBox .read {
  margin-bottom: 1.5rem;
}
.areaBox img {
  margin: 0 auto 0.5rem;
}
.areaBox p {
  margin: 0 0 2.5rem;
}

.content__form-unit {
  text-align: center;
  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;
}
.content__form-unit .formArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 48%;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 1rem;
}
@media screen and (max-width: 1000px) {
  .content__form-unit .formArea {
    width: 100%;
  }
}
.content__form-unit .formArea.full {
  width: 100%;
}
.content__form-unit .formArea dt {
  width: 100%;
  font-size: 1rem;
  margin-bottom: 0.2em;
  font-weight: 700;
  text-align: left;
}
.content__form-unit .formArea dd {
  width: 100%;
  margin: 0;
}
.content__form-unit .formArea input[type=text],
.content__form-unit .formArea input[type=email],
.content__form-unit .formArea textarea {
  padding: 0.5rem;
  width: 100%;
  font-size: 1rem;
  font-weight: 400;
  font-family: "M PLUS 1p", sans-serif;
}
.content__form-unit .formArea textarea {
  min-height: 15rem;
}
.content__form-unit .formCheck {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.content__form-unit .formCheck .formCheckInput {
  position: relative;
  padding: 1rem 1rem 1rem 0rem;
}
.content__form-unit .formCheck .formCheckInput label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.content__form-unit .formCheck .formCheckLink {
  padding: 1rem 1rem 1rem 0rem;
}
.content__form-unit .formPolicy {
  border: solid 1px #505050;
  padding: 1rem;
  margin: 0px 0 3rem 0px;
  border-radius: var(--basic-radius);
}
.content__form-unit .formSubmit {
  padding: 2rem;
}
@media screen and (max-width: 1000px) {
  .content__form-unit .formSubmit {
    width: 100%;
    padding: 0;
  }
}
.content__form-unit .formSubmit button {
  border: 0;
  padding: 1rem;
  width: 100%;
  max-width: 500px;
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  background: #6cd2ef;
}

.dataTable {
  margin: auto;
  max-width: 1200px;
  width: 100%;
  background: transparent;
}
.dataTable th {
  width: 20em;
  border-width: 0 0 1px 0;
  background: transparent;
  text-align: left;
  vertical-align: top;
  padding-top: 1rem;
  font-size: 1rem;
  font-weight: 900;
}
@media screen and (max-width: 1000px) {
  .dataTable th {
    display: block;
    padding: 1rem 0 0.5em 0;
  }
}
.dataTable td {
  border-width: 0 0 1px 0;
  padding: 1.2rem 0 1rem 0;
  background: transparent;
}
@media screen and (max-width: 1000px) {
  .dataTable td {
    display: block;
    padding: 0;
    border: 0;
  }
}
.dataTable ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding-left: 1.5em;
  padding-top: 0.5em;
  margin: 0 0 0 0;
}
.dataTable ul li {
  width: 50%;
  position: relative;
}
.dataTable ul li::before {
  content: "・";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translate(-110%, 0);
          transform: translate(-110%, 0);
}
@media screen and (max-width: 1000px) {
  .dataTable ul li {
    width: 100%;
  }
}

form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
}

a.link {
  text-decoration: underline;
}

.content__more-btn {
  position: absolute;
  width: 280px;
  height: 60px;
  right: 0;
  pointer-events: none;
  opacity: 0.25;
}
@media screen and (max-width: 1000px) {
  .content__more-btn {
    margin-top: 5vw !important;
    width: 100%;
    height: auto;
    aspect-ratio: 280/60;
  }
}
.content__more-btn.active {
  pointer-events: all;
  opacity: 1;
}
.content__more-btn.posCenter {
  position: relative;
  right: auto;
  display: block;
  margin: auto;
}
.content__more-btn::before, .content__more-btn i {
  width: 100%;
  height: 100%;
  border-radius: 30px;
  border: #505050 1px solid;
  background: #fff;
}
.content__more-btn::before {
  position: absolute;
  display: block;
  content: " ";
  top: 0;
  left: 0;
}
.content__more-btn i {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  top: -10px;
  left: -10px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.content__more-btn i::before, .content__more-btn i::after {
  position: relative;
  display: block;
  content: " ";
}
.content__more-btn i::before {
  width: 152px;
  height: 100%;
  background: url(/img/more-btn-label.svg) 50% 50% no-repeat;
  background-size: 100% auto;
  margin-right: 24px;
}
.content__more-btn i.submit::before {
  width: 96px;
  height: 100%;
  background: url("../img/submit-btn-label.svg") 50% 50% no-repeat;
  background-size: 100% auto;
  margin-right: 24px;
}
.content__more-btn i::after {
  display: block;
  width: 14px;
  height: 14px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-top: 1px #505050 solid;
  border-right: 1px #505050 solid;
}

.wpcf7 form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.wpcf7 form .content__form-unit,
.wpcf7 form .wpcf7-response-output {
  width: 100%;
}
.wpcf7 form .wpcf7-submit {
  position: absolute;
  top: -10px;
  left: -10px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  opacity: 0;
  cursor: pointer;
}
.wpcf7 form .wpcf7-not-valid-tip {
  text-align: left;
}
.wpcf7 form .wpcf7-response-output {
  border: 0 !important;
  padding: 2em;
  outline: 0;
  line-height: 1.4;
  background: #00a0d2;
  color: #fff;
  font-size: 1rem;
}

dl.count {
  counter-reset: count 0;
}
dl.count dt {
  font-size: 1rem;
  font-weight: 900;
  padding: 0 0 0.5rem;
}
dl.count dt::before {
  content: counter(count) ". ";
  counter-increment: count 1;
}
dl.count dd {
  margin: 0 auto 3rem;
  padding-left: 1.4em;
  font-weight: 400;
}
dl.count dd ol:last-child, dl.count dd ul:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

colgroup col:nth-of-type(1) {
  width: 20em;
}
@media screen and (max-width: 1000px) {
  colgroup col:nth-of-type(1) {
    width: 10em;
  }
}

ol {
  list-style: none;
  padding: 0.5em 0 1em 1.5em;
  margin-top: 0;
  counter-reset: count 0;
}
ol li {
  position: relative;
}
ol li::before {
  content: counter(count) ". ";
  counter-increment: count 1;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translate(-110%, 0);
          transform: translate(-110%, 0);
}
ol li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}
ol li:not(:last-child) {
  margin-bottom: 0.5em;
}
ol ol {
  padding: 0.5em 0 1em 1em;
}
ol ol ol {
  margin-bottom: 0;
  padding-bottom: 0;
}
ol ol li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}
ol.kakko {
  padding-left: 2.5em;
}
ol.kakko > li::before {
  content: "（" counter(count) "）";
  counter-increment: count 1;
}
ol.no_kakko {
  padding-left: 1.5em;
}
ol.no_kakko > li::before {
  content: counter(count) ". ";
  counter-increment: count 1;
  -webkit-transform: translate(-150%, 0);
          transform: translate(-150%, 0);
}

.tRight {
  text-align: right;
}

th, td {
  border: solid 1px;
  padding: 0.5em 1em;
  background: #fff;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}

.tableWrap {
  width: 100%;
  position: relative;
  margin-bottom: 2rem;
}
.tableWrap div.tableCover {
  width: 100%;
  position: relative;
  overflow: auto;
}
.tableWrap div.cover {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.tableWrap div.cover::after {
  content: "";
  display: block;
  position: absolute;
  right: -1vw;
  top: 0;
  width: 10vw;
  height: 100%;
  background: rgb(213, 255, 255);
  background: -webkit-gradient(linear, left top, right top, from(rgba(213, 255, 255, 0)), color-stop(50%, rgba(213, 255, 255, 0.8)), color-stop(95%, #d5ffff));
  background: linear-gradient(90deg, rgba(213, 255, 255, 0) 0%, rgba(213, 255, 255, 0.8) 50%, #d5ffff 95%);
  visibility: hidden;
}
@media screen and (max-width: 1000px) {
  .tableWrap div.cover::after {
    visibility: visible;
  }
}
.tableWrap table {
  margin: 0;
}
@media screen and (max-width: 1000px) {
  .tableWrap table {
    min-width: 100vw;
  }
}

th {
  background: rgba(108, 210, 239, 0.5);
}

/*
================================================================================
section
================================================================================
*/
section {
  position: relative;
  word-break: break-all;
}
section a {
  text-decoration: underline;
}
section h3 {
  font-weight: 900;
  font-size: 1.4rem;
}
section h3.content__title_sub {
  font-family: "Gotham Black", sans-serif;
  line-height: 1;
  color: #6cd2ef;
  text-stroke: 2px #505050;
  -webkit-text-stroke: 2px #505050;
  margin: 0 auto 20px;
}
section.content {
  font-size: 0.8rem;
  background: #fff581;
  padding-bottom: var(--basic-spacer);
}
body.archive section.content {
  padding-top: 10rem;
}
section.summary {
  padding-top: var(--basic-spacer);
}
section.backtotop {
  padding-bottom: 645px;
  z-index: 3000;
}
@media screen and (max-width: 1000px) {
  section.backtotop {
    padding-bottom: 120vw;
  }
}
section.bgLineUnit .content__outer {
  position: relative;
  width: 100%;
}
section.bgLineUnit .content__outer::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #6cd2ef;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translate(-150px, 0);
          transform: translate(-150px, 0);
  border-radius: var(--basic-radius);
}
@media screen and (max-width: 1000px) {
  section.bgLineUnit .content__outer::before {
    -webkit-transform: translate(-5vw, 0);
            transform: translate(-5vw, 0);
  }
}
section.bgLineUnit .content__inner {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 60px 270px;
}
@media screen and (min-width: 1000px) and (max-width: 1400px) {
  section.bgLineUnit .content__inner {
    padding: 5vw 10vw;
  }
}
@media screen and (max-width: 1000px) {
  section.bgLineUnit .content__inner {
    padding: 5vw 5vw;
  }
}
section.bgLineUnit .content__title {
  font-size: 2rem;
  font-weight: 900;
  margin: 0 0 1rem 0;
  padding: 0;
}
section.bgLineUnit .content__text {
  font-size: 1.2rem;
  color: #fff581;
  margin: 0;
  padding: 0;
}
section.page_head {
  height: 100vh;
  background: transparent;
  overflow: hidden;
  padding-bottom: 0 !important;
  border-bottom: 0px !important;
}
@media screen and (max-width: 1000px) {
  section.page_head {
    height: 50vh;
  }
}
section.page_head .page_head_cloud {
  will-change: transform;
  position: absolute;
  top: 18vh;
  left: 50%;
  -webkit-transform: translate3d(-50%, 0, 0);
          transform: translate3d(-50%, 0, 0);
  width: 110vw;
  height: auto;
  -webkit-transition: all 1ms ease;
  transition: all 1ms ease;
  z-index: 10;
}
section.page_head .page_head_title {
  will-change: transform;
  position: absolute;
  top: 10vh;
  left: 50%;
  -webkit-transform: translate3d(-50%, 0, 0);
          transform: translate3d(-50%, 0, 0);
  z-index: 100;
}
section.page_head .page_head_title.static {
  position: relative;
  top: auto;
  left: auto;
  -webkit-transform: translate3d(0%, 0, 0);
          transform: translate3d(0%, 0, 0);
}
@media screen and (max-width: 1000px) {
  section.page_head .page_head_title {
    top: 15vh;
  }
}
section.page_head .page_head_title img {
  width: 56vw;
  height: auto;
}
@media screen and (max-width: 1000px) {
  section.page_head .page_head_title img {
    width: 80vw;
  }
}
section.page_head .main_kv_wrap {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate3d(-50%, 13%, 0);
          transform: translate3d(-50%, 13%, 0);
  width: 102%;
  height: auto;
  -webkit-transition: all 1ms ease;
  transition: all 1ms ease;
  z-index: 50;
}
section .content__inner {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 1200px;
  margin: 0 auto;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media screen and (max-width: 1400px) {
  section .content__inner {
    width: 90%;
  }
}
section .content__inner.content_pos_left {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
section .content__inner .content__text-unit.harf {
  width: 50%;
}
@media screen and (max-width: 1000px) {
  section .content__inner .content__text-unit.harf {
    width: 100%;
  }
}
section.backtotop .backtotopBtn {
  position: relative;
  cursor: pointer;
  width: 250px;
  height: 200px;
}
@media screen and (max-width: 1000px) {
  section.backtotop .backtotopBtn {
    width: 25vw;
    height: 22vw;
  }
}
section.backtotop .backtotopBtn span {
  display: none;
}
section.backtotop .backtotopBtn .rocket {
  position: absolute;
  width: 140px;
  height: 150px;
  background: url("../img/back_to_top.svg") center center no-repeat;
  background-size: contain;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
@media screen and (max-width: 1000px) {
  section.backtotop .backtotopBtn .rocket {
    width: 100%;
    height: 14vw;
  }
}
section.backtotop .backtotopBtn::after {
  width: 240px;
  height: 40px;
  background: url("../img/back_to_top_title.svg") center center no-repeat;
  background-size: contain;
  top: auto;
  bottom: 0;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
@media screen and (max-width: 1000px) {
  section.backtotop .backtotopBtn::after {
    width: 100%;
    height: 4vw;
  }
}

/*
================================================================================
modalWindow
================================================================================
*/
#modalWindow {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5000;
  width: 100vw;
  height: 100vh;
  background: rgba(255, 255, 255, 0.95);
  overflow: hidden;
  overflow-y: auto;
  pointer-events: none;
  display: block;
  opacity: 0;
}
body.modalWindowActive #modalWindow {
  -webkit-transition: all 300ms ease 0ms;
  transition: all 300ms ease 0ms;
  opacity: 1;
  pointer-events: all;
}
body.modalWindowClose #modalWindow {
  opacity: 0;
  -webkit-transition: all 500ms ease 500ms;
  transition: all 500ms ease 500ms;
}
#modalWindow .closeBg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#modalWindow .closeBtn {
  position: fixed;
  top: 50px;
  right: 50px;
  width: 50px;
  height: 50px;
  font-size: 3rem;
  cursor: pointer;
}
#modalWindow .closeBtn span {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  line-height: 1;
}
@media screen and (max-width: 1000px) {
  #modalWindow .closeBtn {
    top: 2vw;
    right: 2vw;
    width: 10vw;
    height: 10vw;
    font-size: 10vw;
  }
}
#modalWindow .inFrame {
  position: relative;
  width: 100%;
  border: solid 0px #c00;
  opacity: 0;
  -webkit-transform: translate3d(0, -5rem, 0) scale(1.1);
          transform: translate3d(0, -5rem, 0) scale(1.1);
  -webkit-transform-origin: center top;
          transform-origin: center top;
}
body.modalWindowActive #modalWindow .inFrame {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
          transform: translate3d(0, 0, 0) scale(1);
  -webkit-transition: all 500ms ease-out 300ms;
  transition: all 500ms ease-out 300ms;
}
body.modalWindowClose #modalWindow .inFrame {
  opacity: 0;
  -webkit-transform: translate3d(0, -5rem, 0) scale(1.1);
          transform: translate3d(0, -5rem, 0) scale(1.1);
  -webkit-transition: all 200ms ease-in 0ms;
  transition: all 200ms ease-in 0ms;
}
#modalWindow .contentsArea {
  width: 90%;
  max-width: 1000px;
  margin: auto;
  padding: 100px 0 300px 0;
}
@media screen and (max-width: 1000px) {
  #modalWindow .contentsArea {
    padding: 10vw 5vw 30vw 5vw;
  }
}
#modalWindow .contentsArea img {
  max-width: 100%;
  height: auto;
  margin: 0 auto 0.5rem;
}
#modalWindow .contentsArea h3 {
  font-size: 2rem;
}
#modalWindow .contentsArea p {
  margin: 0 0 2.5rem;
}

/*
================================================================================
coverEffext
================================================================================
*/
#coverEffext {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 8000;
  top: 0;
  left: 0;
}
#coverEffext .bg {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 0vw;
  height: auto;
  opacity: 0;
  border-radius: 50%;
  -webkit-transition: width 1000ms ease-in-out, height 1000ms ease-in-out, opacity 300ms ease-in-out;
  transition: width 1000ms ease-in-out, height 1000ms ease-in-out, opacity 300ms ease-in-out;
  aspect-ratio: 1/1;
}
#coverEffext .bg:nth-of-type(1) {
  background: #6cd2ef;
  -webkit-transition-delay: 0ms;
          transition-delay: 0ms;
}
#coverEffext .bg:nth-of-type(2) {
  background: #fff581;
  -webkit-transition-delay: 300ms;
          transition-delay: 300ms;
}
body.coverEffextZoom #coverEffext .bg {
  opacity: 1;
}

#loader {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 8000;
  top: 0;
  left: 0;
  background: #fff581;
  -webkit-transition: all 1000ms ease;
  transition: all 1000ms ease;
}
body.loadingFinish #loader {
  opacity: 0;
}

/*
================================================================================
sample
================================================================================
*/
div.sample {
  width: 200px;
  height: 200px;
}
body.sample div.sample {
  text-align: center;
}
div.sample:before {
  content: "";
  display: block;
  width: 300px;
  height: 150px;
  background: blue;
}
div.sample.hoge {
  /* classがhogeのdiv　&がついてるからdivと.hogeがくっつく */
  width: 150px;
  height: 29px;
  background: yellow;
}
div.sample .hoge {
  /* divの中にいるclassがhoge　&がついていないのでdivと.hogeがくっつかない */
  width: 120px;
  height: 53px;
  background: green;
}

.sample-1 {
  width: 100px;
}

.sample-2 {
  width: 200px;
}

.sample-3 {
  width: 300px;
}

.sample-1 {
  width: 100px;
}

.sample-2 {
  width: 200px;
}

.sample-3 {
  width: 300px;
}

.mike-icon {
  background-image: url("/images/mike.png");
}

.kuro-icon {
  background-image: url("/images/kuro.png");
}

.bus-icon {
  background-image: url("/images/bus.png");
}

@-webkit-keyframes footerNiceGrooveLoop {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: -514px 0%;
  }
}
@keyframes footerNiceGrooveLoop {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: -514px 0%;
  }
}
@-webkit-keyframes footerNiceGrooveLoop_SP {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: -100vw 0%;
  }
}
@keyframes footerNiceGrooveLoop_SP {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: -100vw 0%;
  }
}
@-webkit-keyframes scrollLineLoop {
  0% {
    top: -100%;
  }
  100% {
    top: 100%;
  }
}
@keyframes scrollLineLoop {
  0% {
    top: -100%;
  }
  100% {
    top: 100%;
  }
}
/*# sourceMappingURL=style.css.map */