@charset "utf-8";
@import url("https://use.fontawesome.com/releases/v5.5.0/css/all.css");
/*==================================================================
   Universal Reset
==================================================================*/
html,body{margin:0;padding:0;width:100%;height:100%;font-size:100%;}
h1,h2,h3,h4,h5,h6,p,blockquote,pre,hr,div,object,ul,ol,li,dl,dt,dd,fieldset,form,legend{margin:0;padding:0;font-size:100%;font-weight:normal;}
ul,ol{list-style:none;}
fieldset{margin:0;padding:0;border:0 none;}
legend{display:none;}
table,th,td{border:0;border-spacing:0;}
caption,th{text-align:left;}
em,strong,caption,th,address{font-style:normal;font-weight:normal;}
img{border:0 none;vertical-align:bottom;_vertical-align:text-bottom;max-width: 100%!important}
input,select,textarea{margin:0;padding:0;vertical-align:middle;}
select{-webkit-appearance: none;-moz-appearance: none; appearance: none;}
input{-webkit-appearance:none;appearance:none;}
input[type="submit"],input[type="reset"]{border:none;border-radius:0;}
input[type="radio"]{-webkit-appearance:radio;appearance:radio;}
input[type="checkbox"]{-webkit-appearance:checkbox;appearance:checkbox;}
option{padding-right:5px;}
article,aside,dialog,details,figure,figcaption,footer,header,hgroup,menu,nav,section{display:block;}
mark{font-weight:normal;font-style:normal;}
blockquote,q{quotes:none;}
a{vertical-align:baseline;text-decoration:none;}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
body{font-family: Verdana, Geneva, "sans-serif";background-color: #FFF;font-size:13px;line-height: 1.8em;color: #212121;}

/*==================================================================
     contents
==================================================================*/
main{margin:0 auto;padding-bottom: 1em;max-width:1000px;}

/*通知*/
div#push {position:fixed;top:5px;left:0;right: 0;margin: auto;width: 96%;max-width: 960px;background: rgba(255,255,255,.9);border-radius:0.5em;z-index: 1;padding:6px;box-shadow: 8px 8px 8px -8px;font-size:1.1em;}
div#push p{position:absolute;top:-3px;right:-3px;display:inline-block;background: #F00;color:#FFF;border-radius:50%;text-align: center;width: 24px;height: 24px;font-weight:bold;font-family:  Arial, Helvetica, "sans-serif";font-size:1.1em;}
div#push span{font-weight:bold;}
div#push .box_flex{display:flex;}
div#push .box_flex .image{width:13%;margin-right:2%;}
div#push .box_flex .image > img{max-width:100%;border-radius: 50%;}
div#push .box_flex .text{width: 85%;}

/* popup */
#popup{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;}
#popup #connectAfter{top:0;bottom:0;left:0;right:0;margin: auto;width: 86%;max-width: 860px; background: #EFEFF4;text-align: center;color:#263147;border-radius:0.5em;z-index: 1;box-shadow: 8px 8px 8px -8px;overflow: hidden;}
#popup #connectAfter h2{background: #263147;font-size:1.2em;font-weight:bold;color:#FFF;margin-bottom: 20px;padding:10px;position:relative;}
#popup #connectAfter img{display:block;width: 40%;border-radius:50%;margin:50px auto 20px;}
#popup #connectAfter a{background: #17B610;display:block;width: 50%;padding:10px;text-align: center;color:#FFF;font-weight:bold;margin:20px auto;border-radius:3px;}

/*--すぐに友達追加版--*/
#connectInner{padding: 10px;font-size: 1.2em;text-align: center;}
#connectInner .close {display: block;text-align: right;padding-bottom: 3px;}
#connectInner p {margin-bottom: 10px;}
#connectInner p img{width:100px;}
#connectInner .btn_line a { background: #21ce27; display: block;width: 60%;padding: 10px;text-align: center;color: #FFF;font-weight: bold;margin: 20px auto;border-radius: 30px;}


header{background: #EDEDED;padding:10px;text-align: center;border-bottom:1px solid #FFF;}
header span{font-size:1.1em;font-weight:bold;}

ul.list_chara{display:flex;flex-wrap:wrap;justify-content: space-between;padding:0 2%;}
ul.list_chara > li{margin-bottom:1em;width: 49%;text-align: center;}
ul.list_chara > li img{width: 100%;border-radius: 0.5em;}
ul.list_chara > li .prof{position: relative;padding-left:1.5em;line-height: 1;}
ul.list_chara > li .prof::before{content: "\25CF";position: absolute;top: 0;bottom: 0;left: 0;margin: auto;
color: #A9D18E;font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;}

.btn_more{padding: 1em 0 1.3em;text-align: center;}
.btn_more a{display: inline-block;background:#C00000;padding:0.7em;width: 80%;max-width: 300px;color: #fff;font-size: 1.2rem;font-weight: bold;text-align: center;border-radius: 2em;box-shadow: 0 0.3em 0 #7E0000;}

#connectAfter h2 .close{position:absolute;right:10px;top:7px;}
.close{font-size:30px;margin: 0!important;font-weight: lighter!important;}


/*----------    other    ----------*/
.center{text-align:center;}
.bold{font-weight:bold;}

.f_red{color: #FF0000;}
.f_green{color: #21ce27;}
.f_L{font-size: 1.2em;}

.mb_S{margin-bottom: 0.5em !important;}
.mb_M{margin-bottom: 1em !important;}
.mb_L{margin-bottom: 1.5em !important;}

/*--------------------  animation --------------------  */
.dot-spin {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: transparent;
  color: transparent;
  box-shadow: 0 -18px 0 0 #9CF795, 12.72984px -12.72984px 0 0 #9CF795, 18px 0 0 0 #9CF795, 12.72984px 12.72984px 0 0 rgba(152, 128, 255, 0), 0 18px 0 0 rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 0 rgba(152, 128, 255, 0), -18px 0 0 0 rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 0 rgba(152, 128, 255, 0);
  animation: dotSpin 1.5s infinite linear;
}
@keyframes dotSpin {
  0%,
  100% {
    box-shadow: 0 -18px 0 0 #9CF795, 12.72984px -12.72984px 0 0 #9CF795, 18px 0 0 0 #9CF795, 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
  }
  12.5% {
    box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 0 #9CF795, 18px 0 0 0 #9CF795, 12.72984px 12.72984px 0 0 #9CF795, 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
  }
  25% {
    box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 0 #9CF795, 12.72984px 12.72984px 0 0 #9CF795, 0 18px 0 0 #9CF795, -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
  }
  37.5% {
    box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 0 #9CF795, 0 18px 0 0 #9CF795, -12.72984px 12.72984px 0 0 #9CF795, -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
  }
  50% {
    box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 0 #9CF795, -12.72984px 12.72984px 0 0 #9CF795, -18px 0 0 0 #9CF795, -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
  }
  62.5% {
    box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 0 #9CF795, -18px 0 0 0 #9CF795, -12.72984px -12.72984px 0 0 #9CF795;
  }
  75% {
    box-shadow: 0 -18px 0 0 #9CF795, 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 0 #9CF795, -12.72984px -12.72984px 0 0 #9CF795;
  }
  87.5% {
    box-shadow: 0 -18px 0 0 #9CF795, 12.72984px -12.72984px 0 0 #9CF795, 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 0 #9CF795;
  }
}

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

.animated {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@media (prefers-reduced-motion) {
  .animated {
    -webkit-animation: unset !important;
    animation: unset !important;
    -webkit-transition: none !important;
    transition: none !important;
  }
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}