@charset "utf-8";

:root{
  --font-size--base: 10px;
  --font-size--note: 16px;
  --animation--button--jump: -10px;
  --width--contents: 500px;
  --max-width--modal: 500px;
  --min-width--modal: 500px;
  --margin-top-tab: -26.95%;
  --border-size-chara: 0.4rem;
}

/* ==============================
PC用
*/
.bg__pc{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url("../img/pc_bg.jpg");
  background-size: 50px auto;
  background-position: center top;
}
.bg__pc:before{
  content: "";
  display: block;
  width: calc(var(--width--contents) + 10px);
  height: 100%;
  margin: auto;
  background-color: #fff;
  position: relative;
  z-index: 5;
  box-shadow: 0px 0px 12px 0px rgba(139, 180, 255, 0.9);
}
.pc_l{
  left: 0;
}
.pc_l .side_area{
  width: 40vw;
  max-width: 562px;
  top: 40%;
}
.pc_r{
  right: 0;
}
.pc_r .side_area{
  width: 16.145vw;
  max-width: 310px;
}
.pc_l, .pc_r {
  position: absolute;
  width: calc((100% - var(--width--contents)) / 2);
  height: 100%;
  top: 0;
  z-index: 1;
  position: fixed;
  display: flex;
}
.side_area{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.side_area div{
  transition: 0.2s;
}
.side_area div > img{
  position: relative;
  z-index: 2;
}
.pc_l .side_area div span{ display: block; position: absolute; top: 0; left: 0; }
.pc_l_smoke--01{
  width: 11%;
  margin: 71% 0 0 29%;
}
.pc_l_smoke--02{
  width: 12%;
  margin: 62% 0 0 60%;
}

.side_area div span.pc_r_tail{
  display: block;
  width: 37.419%;
  position: absolute;
  bottom: 0;
  right: 0;
  transform-origin: left top;
  margin: 0 -16% -23% 0;
  z-index: 1;
  animation: animation__tail_b ease-in-out 3.5s 1s infinite;
}
.pcDecoEff--top{
  width: 31.770vw;
  max-width: 610px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.pcDecoEff--bot{
  width: 28.645vw;
  max-width: 550px;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
}
.pcDecoSmoke--01{
  width: 28.240vh;
  max-width: 305px;
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0 0 3% 4%;
}
.pcDecoSmoke--02{
  width: 10.156vw;
  width: 18.055vh;
  max-width: 195px;
  position: absolute;
  top: 0;
  right: 0;
  margin: 5% 18% 0 0;
}
.pcDecoSmoke--03{
  width: 13.385vw;
  width: 23.796vh;
  max-width: 257px;
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0 10% 6% 0;
}
@media screen and (max-width: 1100px){
  .side_area div{
    opacity: 0;
  }
  .pcDeco__smoke{
    opacity: 0;
  }
}


/* ==============================
common
*/
html{
    font-size: var(--font-size--base);
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
}
img, video{
  width: 100%;
}
a{
  font-size: 0;
}
a, :focus, .mission_target{
  outline: none;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
.dn{
  visibility: hidden;
}
.wrapper{
  position: relative;
  z-index: 1;
}
.contents{
  width: var(--width--contents);
  overflow: hidden;
  background: url("../img/bg.jpg") center / 100% auto;
  margin: auto;
}
.inner{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
section .content{
  position: relative;
}


h2{
  width: 96.133%;
  padding-bottom: 27.333%;
  margin: auto;
  position: relative;
}
h2 span{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../img/tl_frame.png") no-repeat center / 100% auto;
  z-index: 2;
}
h2:after{
  content: "";
  display: block;
  width: 15.533%;
  padding-bottom: 12.343%;
  background: url("../img/tl_tail.png") no-repeat center / 100% auto;
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0 5.2% -5.2% 0;
  z-index: 1;
  transform-origin: left top;
  animation: animation__tail_h2 ease-in-out 3.5s infinite;
}
@keyframes animation__tail_h2{
  0%   { transform: rotate(0deg); }
  7%  { transform: rotate(7.5deg); }
  14%  { transform: rotate(0deg); }
  21%  { transform: rotate(7.5deg); }
  28%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
h2 img{
  position: absolute;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.common__info{
  position: relative;
}
.common__info > *{
  position: relative;
  z-index: 2;
}
.common__info > .ci__deco{
  position: static;
  z-index: 1;
}
.common__info p{
  width: 98.933%;
  margin: 0 auto 0;
}
.common__info a{
  display: block;
  width: 79.2%;
  margin: 0.8% auto 0;
}
.cid__chara{
  width: 73%;
  margin: -50% -19% 0 0;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}
.cid__smoke{
  pointer-events: none;
}
.cid__smoke img{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.cid__smoke img:nth-child(1){
  width: 15.066%;
  margin: -1.2% 0 0 10.8%;
}
.cid__smoke img:nth-child(2){
  width: 13.333%;
  margin: 22.8% 0 0 0.8%;
}
.cid__smoke img:nth-child(3){
  width: 21.733%;
  margin: 38.6% 0 0 2%;
}
.cid__smoke img:nth-child(4){
  width: 13.333%;
  margin: -4.6% 0 0 86.2%;
}
.cid__smoke img:nth-child(5){
  width: 13.333%;
  margin: 1.2% 0 0 67.5%;
}
.cid__smoke img:nth-child(6){
  width: 18.133%;
  margin: 21% 0 0 80.6%;
}
.cid__smoke img:nth-child(7){
  width: 20.933%;
  margin: 36% 0 0 77.6%;
}
.cid__kira{
  width: 47.466%;
  margin: 2.6% 0 0 5.3%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.find{ animation-play-state: paused !important; }
.t01{
  margin: 95% 0 0 -28%;
  transform: rotate(0deg);
  transform-origin: center bottom;
  animation: animation__hidden--01 ease-in-out 10s infinite;
}
.t02{
  margin: 265% 0 0 -4%;
  transform: translate(0, -50%) rotate(180deg);
  z-index: 5;
  animation: animation__hidden--02 ease-in-out 10s 2s infinite;
}
.t03{
  top: initial !important;
  bottom: 0;
  margin: 0 0 17% -30%;
  transform: rotate(0deg);
  z-index: 2;
  transform-origin: center bottom;
  animation: animation__hidden--03 ease-in-out 10s infinite;
}
.t04{
  left: initial !important;
  right: 0;
  margin: 153% -16% 0 0;
  transform: translate(80%, 0) rotate(-75deg);
  z-index: 2;
  animation: animation__hidden--04 ease-in-out 10s 1s infinite;
}

@keyframes animation__hidden--01{
  10%  { transform: rotate(0deg); }
  15%  { transform: rotate(35deg); }
  70%  { transform: rotate(35deg); }
  75%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
@keyframes animation__hidden--02{
  10%  { transform: translate(0, -50%) rotate(180deg); }
  13%  { transform: translate(0, 5%) rotate(180deg); }
  15%  { transform: translate(0, 0%) rotate(180deg); }
  70%  { transform: translate(0, 0%) rotate(180deg); }
  74%  { transform: translate(0, 5%) rotate(180deg); }
  75%  { transform: translate(0, -50%) rotate(180deg); }
  100% { transform: translate(0, -50%) rotate(180deg); }
}
@keyframes animation__hidden--03{
  0%  { transform: rotate(0deg); margin: 0 0 17% -30%; }
  5%  { transform: rotate(40deg); }
  35%  { transform: rotate(40deg);  }
  40%  { transform: rotate(0deg); margin: 0 0 17% -30%; }
  55%  { transform: rotate(0deg); margin: 0 0 -33% -30%; }
  60%  { transform: rotate(40deg); }
  95%  { transform: rotate(40deg); }
  100% { transform: rotate(0deg); margin: 0 0 -33% -30%; }
}
@keyframes animation__hidden--04{
  0%  { transform: translate(80%, 0) rotate(-75deg); }
  5%   { transform: translate(0%, 0) rotate(-75deg); }
  60%  { transform: translate(0%, 0) rotate(-75deg); }
  65%  { transform: translate(80%, 0) rotate(-75deg); }
  100% { transform: translate(80%, 0) rotate(-75deg); }
}


.mission_target{
  width: 27.2%;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}
.mission_target.find{
  pointer-events: none;
}
.mission_target .__chara_aft{
  width: 100%;
  position: absolute;
  top: 30%;
  left: 43.8%;
  transform: translate(-50%, -50%);
}
.mission_target .__smoke{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.mission_target .__smoke span{
  width: 60%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  scale: calc(0);
  transform-origin: center;
}
.mission_target .__smoke img.--re{
  scale: -1 1;
}

.mission_target .__smoke span:nth-child(1){ margin: -12% 0 0 27%; transform: scale(1.2); }
.mission_target .__smoke span:nth-child(2){ margin: -15% 0 0 3%; transform: scale(1); }
.mission_target .__smoke span:nth-child(3){ margin: 11% 0 0 0%; transform: scale(1.1); }
.mission_target .__smoke span:nth-child(4){ margin: 13% 0 0 30%; transform: scale(0.8); }
.mission_target .__smoke span:nth-child(5){ margin: 30% 0 0 15%; transform: scale(0.8); }
.mission_target .__smoke span:nth-child(6){ margin: 30% 0 0 46%; transform: scale(1.2); }
.mission_target .__smoke span:nth-child(7){ margin: 35% 0 0 -16%; transform: scale(1.1); }
.mission_target .__smoke span:nth-child(8){ margin: 53% 0 0 43%; transform: scale(1); }
.mission_target .__smoke span:nth-child(9){ margin: 58% 0 0 13%; transform: scale(1.3); }
.mission_target .__smoke span:nth-child(10){ margin: 59% 0 0 -25%; transform: scale(0.9); }
.mission_target .__smoke span:nth-child(11){ margin: 79% 0 0 53%; transform: scale(1); }
.mission_target .__smoke span:nth-child(12){ margin: 83% 0 0 -12%; transform: scale(1.3); }
.mission_target .__smoke span:nth-child(13){ margin: 80% 0 0 24%; transform: scale(1); }
.mission_target .__smoke span:nth-child(14){ margin: 112% 0 0 50%; transform: scale(1.4); }
.mission_target .__smoke span:nth-child(15){ margin: 119% 0 0 22%; transform: scale(1.5); }
.mission_target .__smoke span:nth-child(16){ margin: 113% 0 0 -9%; transform: scale(1.2); }
.mission_target .__smoke span:nth-child(17){ margin: 135% 0 0 18%; transform: scale(1.6, 1); }

.mission_target.find .__smoke span:nth-child(1){ animation: animation_smoke 1.5s ease both; }
.mission_target.find .__smoke span:nth-child(2){ animation: animation_smoke 1.5s 0.03s ease both; }
.mission_target.find .__smoke span:nth-child(3){ animation: animation_smoke 1.5s 0.05s ease both; }
.mission_target.find .__smoke span:nth-child(4){ animation: animation_smoke 1.5s 0.04s ease both; }
.mission_target.find .__smoke span:nth-child(5){ animation: animation_smoke 1.5s 0.06s ease both; }
.mission_target.find .__smoke span:nth-child(6){ animation: animation_smoke 1.5s 0.05s ease both; }
.mission_target.find .__smoke span:nth-child(7){ animation: animation_smoke 1.5s ease both; }
.mission_target.find .__smoke span:nth-child(8){ animation: animation_smoke 1.5s 0.03s ease both; }
.mission_target.find .__smoke span:nth-child(9){ animation: animation_smoke 1.5s 0.05s ease both; }
.mission_target.find .__smoke span:nth-child(10){ animation: animation_smoke 1.5s 0.04s ease both; }
.mission_target.find .__smoke span:nth-child(11){ animation: animation_smoke 1.5s 0.06s ease both; }
.mission_target.find .__smoke span:nth-child(12){ animation: animation_smoke 1.5s 0.05s ease both; }
.mission_target.find .__smoke span:nth-child(13){ animation: animation_smoke 1.5s 0.05s ease both; }
.mission_target.find .__smoke span:nth-child(14){ animation: animation_smoke 1.5s 0.03s ease both; }
.mission_target.find .__smoke span:nth-child(15){ animation: animation_smoke 1.5s 0.02s ease both; }
.mission_target.find .__smoke span:nth-child(16){ animation: animation_smoke 1.5s 0.03s ease both; }
.mission_target.find .__smoke span:nth-child(17){ animation: animation_smoke 1.5s 0.01s ease both; }
@keyframes animation_smoke{
  0%   { opacity: 0; scale: 0; }
  5%  { scale: 0.8; }
  20%  { opacity: 1; }
  30%  { opacity: 1; }
  50%  { scale: 1; }
  100% { opacity: 0; scale: 1; }
}

.mission_target.find .__smoke span:nth-child(even) img{ animation: animation_move_l 1.5s ease both; }
.mission_target.find .__smoke span:nth-child(odd) img{ animation: animation_move_r 1.5s ease both; }
@keyframes animation_move_l{
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-5%, 0); }
}
@keyframes animation_move_r{
  0%   { transform: translate(0, 0); }
  100% { transform: translate(5%, 0); }
}

.mission_target.find .__smoke{
    animation: animation_smoke_fadeout 1.5s ease-out both;
}
@keyframes animation_smoke_fadeout{
  0%   { transform: translate(0, 0); }
  100% { transform: translate(0, -10%); }
}


/* ==============================
animation
*/
.js_fade{
  transform: translateY(4rem);
  opacity: 0;
}
.js_fade.is-active{
  animation: animationjs_fadeIn 0.4s ease both;
}
@keyframes animationjs_fadeIn{
  100% { transform: translateY(0); opacity: 1; }
}

.animation_jump{
  display: block;
  animation: animation__jump 4s 1s ease infinite;
}
@keyframes animation__jump{
  0% { translate: 0 0; }
  4.375% { translate: 0 -1.5rem; }
  8.75% { translate: 0 0; }
  13.125% { translate: 0 -1.5rem; }
  17.5% { translate: 0 0; }
  100% { translate: 0 0; }
}

.smoke{
  animation: animation__smoke ease-in-out var(--speed) var(--delay) infinite alternate;
}
@keyframes animation__smoke{
  0%   { transform:translate(0%, 0%);  opacity:1;}
  40%  { opacity:1;}
  100% { transform:translate(var(--range), 0%); opacity:1;}
}
@keyframes animation__smoke_re{
  0%   { transform:translate(0%, 0%);  opacity:1;}
  40%  { opacity:1;}
  100% { transform:translate(var(--range), 0%); opacity:1;}
}

/* ==============================
top
*/
#top .content{
  width: 100%;
  padding-top: 88%;
  background: url("../img/top/bg.png") no-repeat top center / 100% auto;
}
#top h1{
  width: 71.466%;
  margin: 0 auto 0;
}
#top .common__info{
  margin-top: 6%;
}
.top__mission{
  margin-top: 5.733%;
}
.tm__main{
  width: 99.066%;
  margin: 0 0.8% 0 auto;
  position: relative;
}
.tm__main img{
  position: relative;
  z-index: 3;
}
.tm__atn{
  width: 91.733%;
  margin: 1.066% auto 0;
  position: relative;
}
.tm__atn img{
  position: relative;
  z-index: 5;
}
.tm__main:before{
  content: "";
  display: block;
  width: 20.726%;
  padding-bottom: 19.515%;
  background: url("../img/top/frame_tail.png") no-repeat top center / 100% auto;
  position: absolute;
  top: 0;
  right: 0;
  margin: -0.4% 2.4% 0 0;
  z-index: 2;
  transform-origin: left bottom;
  animation: animation__tail_b ease-in-out 3.5s 1s infinite;
}
@keyframes animation__tail_b{
  0%   { transform: rotate(0deg); }
  7%  { transform: rotate(10deg); }
  14%  { transform: rotate(0deg); }
  21%  { transform: rotate(10deg); }
  28%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
.tm__main:after{
  content: "";
  display: block;
  width: 15.881%;
  padding-bottom: 14.670%;
  background: url("../img/top/kiramark.png") no-repeat top center / 100% auto;
  position: absolute;
  top: 0;
  right: 0;
  margin: 7.6% -0.4% 0 0;
}
.tm__atn:before{
  content: "";
  display: block;
  width: 27.761%;
  padding-bottom: 35.174%;
  background: url("../img/top/mission_chara.png") no-repeat top center / 100% auto;
  position: absolute;
  top: 0;
  right: 0;
  margin: -21.8% 1.4% 0 0;
  z-index: 4;
}


/* ==============================
nav
*/
nav{
  margin-top: 5.333%;
}
nav ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: end;
}
nav ul li{
  width: 33.333%;
}


/* ==============================
character
*/
#character{
  margin-top: 6.666%;
}
#character .content{
  padding-bottom: 7.2%;
}
#character h2 img{
  width: 56.865%;
}
.chara__text{
  width: 77.866%;
  margin: 6.6% auto 0;
}

.chara__list{
  position: relative;
  z-index: 10;
}
.chara__nav{
  position: relative;
}
.chara__nav ul{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: end;
  position: absolute;
  bottom: -0.05rem;
  left: 0;
}
.chara__nav ul li{
  width: 46%;
  margin: 0 1.333% 0;
}
.chara__nav a{
  display: block;
  position: relative;
}
.chara__pannel{
  background: #4e86ef;
  padding: var(--border-size-chara) 0;
  margin-top: 28.8%;
  position: relative;
  z-index: 10;
}
.chara__wrap{
  background: #81b3fc;
  padding: 5.333% 0 2%;
}
.chara__frame{
  width: 96%;
  padding-bottom: 210.4%;
  background: url("../img/character/inner.png") no-repeat center / 100% auto;
  margin: 0 auto 0;
  position: relative;
}
#character .common__info{
  margin: 14.666% auto 0;
}
#character .common__info p{
  margin: 0 auto 0;
}

.chara__info{
  display: none;
}
#character .active--01 .chara__info.--01,
#character .active--02 .chara__info.--02{
  display: block;
}
#character .active--01 .charaNav_01,
#character .active--02 .charaNav_02{
  pointer-events: none;
}
#character .active--01 .charaNav_01 img,
#character .active--02 .charaNav_02 img{
  opacity: 0;
}
#character .active--01 .charaNav_01:after{
  content: "";
  display: block;
  width: 100%;
  height: 105.405%;
  background: url("../img/character/nav_01_on.png") no-repeat center / 100% auto;
  position: absolute;
  bottom: 0;
  left: 0;
}
#character .active--02 .charaNav_02:after{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url("../img/character/nav_02_on.png") no-repeat center / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
}


.chara__info.--01 .charaInfo__name{
  width: 12.222%;
  position: absolute;
  top: 0;
  right: 0;
  margin: -3.5% 4.722% 0 0;
  z-index: 2;
}
.chara__info.--01 .charaInfo__image{
  width: 101.666%;
  position: absolute;
  top: 0;
  left: 0.5%;
  margin: 2.222% 0 0 0;
}
.chara__info.--01 .charaInfo__text{
  width: 95.416%;
  margin: 82.6% 0 0 3.333%;
  position: relative;
  z-index: 4;
}

.chara__info.--02 .charaInfo__name{
  width: 23.333%;
  position: absolute;
  top: 0;
  right: 0;
  margin: -3.5% 4.722% 0 0;
  z-index: 2;
}
.chara__info.--02 .charaInfo__image{
  width: 103.055%;
  position: absolute;
  top: 0;
  left: -1%;
  margin: 2.6% 0 0 0;
}
.chara__info.--02 .charaInfo__text{
  width: 95.416%;
  margin: 82.6% 0 0 3.333%;
  position: relative;
  z-index: 4;
}

.charaInfo__movie{
  position: relative;
}
.charaMovie__frame{
  width: 55.416%;
  margin: 4.861% 0 0 3.888%;
  padding-bottom: 94.166%;
  position: relative;
  overflow: hidden;
}
.charaMovie__frame:before{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url("../img/character/frame_pv.png") no-repeat center / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.charaMovie__frame video{
  width: 96%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
.charaMovie__frame .--active video{
  display: block;
}

.charaMovie__nav{
  width: 36.805%;
  position: absolute;
  top: 0;
  right: 0;
  margin: 15.277% 2.2% 0 0;
}
.charaMovie__nav a{
  display: block;
  padding-bottom: 38.867%;
  background: url("../img/character/btn_frame_off.png") no-repeat center / 100% auto;
  position: relative;
  margin-bottom: 7.547%;
}
.charaMovie__nav a.--active{
  background: url("../img/character/btn_frame_on.png") no-repeat center / 100% auto;
  pointer-events: none;
}
.--nav-mv--01 img{
  width: 70.188%;
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.--nav-mv--02 img,
.--nav-mv--03 img,
.--nav-mv--04 img{
  width: 56.226%;
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.chara__deco{
  pointer-events: none;
}
.chara__deco > img{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
.chara__deco img:nth-child(1){
  width: 13.466%;
  margin: 2.6% 0 0 65%;
}
.chara__deco img:nth-child(2){
  width: 22.533%;
  margin: 11.8% 0 0 -2%;
}
.chara__deco img:nth-child(3){
  width: 16.533%;
  margin: 116.3% 0 0 48.8%;
}
.chara__deco img:nth-child(4){
  width: 15.866%;
  margin: 121.2% 0 0 79.2%;
}
.chara__deco img:nth-child(5){
  width: 15.866%;
  margin: 203.4% 0 0 4.2%;
}
.chara__deco img:nth-child(6){
  width: 21.866%;
  margin: 198.2% 0 0 66.2%;
}



/* ==============================
event
*/
#event{
  position: relative;
}
#event:before, #event:after{
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 23.2%;
  background: url("../img/hr.png") no-repeat center / 100% auto;
  position: absolute;
  left: 0;
  margin: 0 auto 0;
  z-index: 2;
  pointer-events: none;
}
#event:before{ top: 0; }
#event:after{ bottom: 0; }
#event .content{
  background: url("../img/bg_bl.jpg") center / 100% auto;
  clip-path: polygon(0 3%, 100% 1%, 100% 96%, 0% 98%);
  padding: 24% 0 34%;
}
#event h2{
  margin-bottom: 9.066%;
}
#event h2 img{
  width: 38.280%;
}

.event__list > div{
  width: 95.733%;
  margin: 0 auto 9.6%;
}
.event__list > div:nth-child(3){
  margin: 0 auto 14.933%;
}
.eventList{
  position: relative;
}
.eventList__deco img{
  position: absolute;
  top: 0;
  left: 0;
}

.eventList.--01 .eventList__tl{
  width: 99.582%;
  position: absolute;
  top: 0;
  left: 0;
  margin: -3% 0 0 -1.2%;
}
.eventList.--01 .eventList__deco img:nth-child(1){
  width: 16.713%;
  margin: 14% 0 0 83.8%;
}
.eventList.--01 .eventList__deco img:nth-child(2){
  width: 19.637%;
  margin: 67% 0 0 -1%;
}
.eventList.--01 .eventList__deco img:nth-child(3){
  width: 19.637%;
  margin: 67.6% 0 0 80.5%;
}


.eventList.--02 .eventList__tl{
  width: 68.384%;
  position: absolute;
  top: 0;
  left: 0;
  margin: -5% 0 0 -1.2%;
}
.eventList.--02 .eventList__thumb{
  width: 36.072%;
  position: absolute;
  top: 0;
  right: 0;
  margin: -6.2% -0.4% 0 0;
}
.eventList.--02 .eventList__deco img:nth-child(1){
  width: 17.409%;
  margin: 41.6% 0 0 81.6%;
}


.eventList.--03 .eventList__tl{
  width: 61.142%;
  position: absolute;
  top: 0;
  left: 0;
  margin: -2.8% 0 0 -1.2%;
}
.eventList.--03 .eventList__thumb{
  width: 47.910%;
  position: absolute;
  top: 0;
  right: 0;
  margin: -5.2% -0.8% 0 0;
}
.eventList.--03 .eventList__deco img:nth-child(1){
  width: 19.637%;
  margin: -5.2% 0 0 39.6%;
}
.eventList.--03 .eventList__deco img:nth-child(2){
  width: 19.637%;
  margin: 49% 0 0 82%;
}


.eventList.--04 .eventList__tl{
  width: 76.183%;
  position: absolute;
  top: 0;
  left: 0;
  margin: -6.2% 0 0 -1.2%;
  z-index: 2;
}
.eventList.--04 .eventList__text{
  width: 84.540%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 22% 0 0 3.6%;
  z-index: 2;
}
.eventList.--04 .eventList__thumb{
  width: 44.011%;
  position: absolute;
  top: 0;
  right: 0;
  margin: -6.6% -0.4% 0 0;
}
.eventList.--04 .eventList__deco img:nth-child(1){
  width: 19.637%;
  margin: 41.4% 0 0 77.6%;
}

#event .common__info{
  margin-top: 18%;
}



/* ==============================
campaign
*/
#campaign{
  /* margin-top: 6.666%; */
}
/* #campaign .content{
  padding-bottom: 12.8%;
} */
#campaign h2{
  margin-bottom: 12%;
}
#campaign h2 img{
  width: 63.522%;
}

.cp__list > div{
  width: 95.733%;
  margin: 0 auto 9.066%;
}
.cpList{
  position: relative;
}

.cpList__deco img{
  position: absolute;
  top: 0;
  left: 0;
}

.cpList.--01 .cpList__tl{
  width: 89.136%;
  position: absolute;
  top: 0;
  left: 0;
  margin: -2.6% 0 0 -1.2%;
}
.cpList.--01 .cpList__link{
  width: 82.729%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto 20%;
}
.cpList.--01 .cpList__deco img:nth-child(1){
  width: 14.066%;
  margin: -3% 0 0 86.4%;
}
.cpList.--01 .cpList__deco img:nth-child(2){
  width: 14.066%;
  margin: 28% 0 0 -0.6%;
}
.cpList.--01 .cpList__deco img:nth-child(3){
  width: 19.080%;
  margin: 15% 0 0 81.6%;
}
.cpList.--01 .cpList__deco img:nth-child(4){
  width: 14.066%;
  margin: 116% 0 0 86.6%;
}

.cpList.--02 .cpList__tl{
  width: 81.058%;
  position: absolute;
  top: 0;
  left: 0;
  margin: -2% 0 0 -1.2%;
}
.cpList.--02 .cpList__link{
  width: 82.729%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto 9%;
}
.cpList.--02 .cpList__deco img:nth-child(1){
  width: 14.066%;
  margin: 10% 0 0 86.4%;
}
.cpList.--02 .cpList__deco img:nth-child(2){
  width: 14.066%;
  margin: 46% 0 0 -1.6%;
}

#campaign .common__info{
  margin-top: 15%;
}


/* ==============================
footer
*/
.pagetop{
  width: 28.133%;
  margin: 5.6% -6.4% 0 auto;
}
.notes{
  width: 68.533%;
  margin: 5.6% auto 0;
}
.sns{
  width: 92.8%;
  padding-bottom: 45.333%;
  background: url("../img/footer/frame_sns.png") no-repeat center / 100% auto;
  position: relative;
  margin: 6.133% auto 0;
}
.sns__link{
  width: 100%;
  flex-wrap: wrap;
  display: flex;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 19.4%;
}
.sns a{
  width: 45.977%;
  margin: 0 1%;
}
.footer__bottom{
  position: relative;
  margin-top: 5%;
}
.footer__bottom:before{
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 23.2%;
  background: url("../img/hr.png") no-repeat center / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0 auto 0;
  z-index: 2;
}
.footer__bottom .content{
  background-color: #0f45a9;
  clip-path: polygon(0 18%, 100% 4%, 100% 100%, 0% 100%);
  padding: 5% 0;
}
.spec{
  width: 91.733%;
  margin: 20% auto 0;
}
.support{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: end;
  margin-top: 9.066%;
}
.support a{
  margin: 0 4% 0;
}
.sup__policy{
  width: 32.4%;
}
.sup__contact{
  width: 20.666%;
}
.copyright{
  width: 50.133%;
  margin: 0 auto;
  padding: 8% 0 2%;
}



/* ==============================
modal
*/
.snlib--modal{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.9);
  overflow: auto;
  display: none;
  opacity: 0;
  z-index: 99999;
}
.snlib--modal .modal__outWrap{
  display: table;
  width: 100%;
  height: 100%;
}
.snlib--modal .modal__inWrap{
  display: table-cell;
  width: 100%;
  height: 100%;
  margin: 0 auto 0;    
  padding: 5rem 0 5rem;
  text-align: center;
  vertical-align: middle;
}
.snlib--modal .modal__content{
  width: 93.333%;
  max-width: var(--max-width--modal);
  min-width: var(--min-width--modal);
  background-color: #fff;
  box-sizing: border-box;
  text-align: initial;
  margin: auto;
  position: relative;
  padding: 2rem;
}


.hiddenArea{
  display: none;
}

/* mission clear */
.---modal-clear .modal__inWrap{
  padding-bottom: 15rem;
}
.---modal-clear .modal__content{
  width: 90.933%;
  padding: 0;
  background-color: initial;
}
.---modal-clear .clear__title{
  width: 103.812%;
  position: absolute;
  top: 0;
  left: 0;
  margin: -4.8% 0 0 -2%;
}
.---modal-clear .clear__text{
  width: 88.563%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 57.4% 0 0 3%;
}
.---modal-clear .clear__reward,
.---modal-clear .clear__share{
  width: 87.096%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.---modal-clear .clear__reward { margin-top: 85.6%; }
.---modal-clear .clear__share { margin-top: 125%; }
.---modal-clear .modal__close{
  width: 29.032%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto -15%;
}

/* reward */
.---modal-reward .modal__inWrap{
  padding-bottom: 15rem;
}
.---modal-reward .modal__content{
  width: 94.4%;
  padding: 0;
  background-color: initial;
}
.---modal-reward .modal__close{
  width: 29.032%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto -15%;
}

/* notes */
.---modal-notes .modal__inWrap{
  padding: 10rem 0 16rem;
}
.---modal-notes .modal__content{
  width: 94.4%;
  padding: 0;
  border: solid 0.6rem #0f45a9;
  border-radius: 3rem;
  background-color: #000;
}
.---modal-notes .modal__close_top{
  width: 10.310%;
  position: absolute;
  top: 0;
  right: 0;
  margin: -4% -3% 0 0;
}
.---modal-notes .modal__close_bottom{
  width: 26.553%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto -17%;
}

.---modal-notes .modal__main{
  padding: 10% 7% 7%;
}
.note_title{
  width: 31.857%;
  margin: auto;
}
.note_text, .note_text a{
  font-size: var(--font-size--note);
  line-height: calc(var(--font-size--note) * 1.5);
  margin-top: 10%;
  color: #fff;
}
.note_text li{
	line-height: 200%;
	padding-left: 1em;
	transform: rotate(0.03deg);
}
.note_text li:before {
	display: inline-block;
	content: "・";
	width: 1em;
	margin-left: -1em;
	color: #fff;
}
.note_text li.no_dot:not(.indent){
  padding-left: 0;
}
.note_text li.no_dot.indent{
  text-indent: -1em;
}
.note_text li.no_dot:before {
	display: inline-block;
	content: "";
	width: auto;
	margin-left: 0;
}
.note_text li.no_indent{
  padding-left: 0em;
}
.note_text li.tl{
	padding-left: 0;  
}
.note_text li.tl:before {
	display: inline-block;
	content: "";
	width: 0;
	margin-left: 0;
}
.note_text li .in li:before {
	display: inline-block;
	content: "";
	width: 0;
	margin-left: 0;
}
.note_text li.mg {
	margin:5% 0 0 ;
  padding-left: 0;
}
.note_text li.mg:first-child {
	margin:0 0 0 ;
}
.note_text li a{
	color: #ffd35d;
}
.note_text li a:hover{
	color: #00B3FF;
}