@charset "utf-8";
@import url("https://use.fontawesome.com/releases/v5.5.0/css/all.css");
/* ------------------------------
   Universal Reset
   Default Style
   Content
   ClearFix
------------------------------ */

/*==================================================================
   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
****************************************************************/
contents{width:100%;height: 100%;}

/*通知*/
div#push {position:fixed;top:5px;left:2%;width: 96%;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:50%;left:50%;width: 86%;height: 74%; background: #EFEFF4;border-radius:0.5em;z-index: 1;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);box-shadow: 8px 8px 8px -8px;display:none;}
#popup h3{position:absolute;top:-10px;right:-10px;display:inline-block;background: #666;color:#FFF;border-radius:50%;text-align: center;padding:2px 8px;border:2px solid #FFF;}
#connectBefore{padding:10px;}
#connectBefore p{margin-bottom:15px;}
#connectBefore p img{width:60px;margin-bottom: 5px;}
#connectBefore a{display:block;width: 80%;background: #F94452;color:#FFF;text-align: center;font-size: 1.2em;font-weight:bold;padding:15px;margin:30px auto;border-radius:5px;}
#connectBefore a:hover{background: #FB717B;}
#connectBefore #spin{padding:20px 0;display:none;}
#connectBefore #spin > p{margin-bottom:20px;}

#connectAfter{display:none;text-align: center;color:#263147;}
#connectAfter h2{background: #263147;font-size:1.2em;font-weight: bold;color:#FFF;padding:10px;position:relative;}
#connectAfter img{display:block;width: 40%;border-radius:50%;margin:50px auto 20px;}
#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;}

contents dl{padding-bottom: 80px;}
contents dl dt{position:relative;}
contents dl dt > img{width:100%;}
contents dl dt h1{position:absolute;bottom:0;display:flex;align-items: center; padding:5px;}
contents dl dt h1 img{width:28px;}
contents dl dt h1 span{display:inline-block;margin-right:10px;font-weight: bold;color:#FFF;text-shadow:1px 1px 3px #000;font-size:1.2em;}
contents dl dd{padding:10px;}
contents dl dd h2{font-weight:bold;font-size:1.1em;}
contents dl dd > p{margin-bottom: 20px;}
contents dl dd li{display:flex;justify-content: space-between;border-bottom:1px solid #DCDCDC;padding:10px 0;}
contents dl dd li p:first-child{font-weight:bold;}


#connectBefore .close{display:block;text-align:right;padding-bottom: 3px;}
#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;
}