@charset "utf-8";
@import url（ "https://use.fontawesome.com/releases/v5.5.0/css/all.css"）;
/ * ------------------------------
   ユニバーサルリセット
   デフォルトのスタイル
   コンテンツ
   ClearFix
------------------------------ * /

/ * ================================================ ==================
   ユニバーサルリセット
================================================== ================ * /
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; 外観：なし;}
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 {
  コンテンツ： "。"; 
  表示ブロック;
  明確：両方;
  高さ：0;
  可視性：非表示;
}
body {font-family：Verdana、Geneva、 "sans-serif"; background-color：#FFF; font-size：13px; line-height：1.8em; color：＃212121;}

/ ************************************************* ***************
     コンテンツ
************************************************** ************** /
内容{幅：100％;高さ：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 -シャドウ：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 {position：fixed; top：50％; left：50％; width：86％; height：74％; 背景：＃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 {背景：＃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;}
ヘッダースパン{font-size：1.1em; font-weight：bold;}

内容dl {padding-bottom：80px;}
内容dldt {position：relative;}
内容dldt> img {width：100％;}
内容dldt h1 {position：absolute; bottom：0; display：flex; align-items：center; padding：5px;}
内容dldt h1 img {width：28px;}
内容dldt h1 span {display：inline-block; margin-right：10px; font-weight：bold; color：#FFF; text-shadow：1px 1px 3px＃000; font-size：1.2em;}
内容dldd {padding：10px;}
内容dldd h2 {font-weight：bold; font-size：1.1em;}
内容dldd> p {margin-bottom：20px;}
content dl dd li {display：flex; justify-content：space-between; border-bottom：1px solid #DCDCDC; padding：10px 0;}
内容dldd 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;}


/* -  -  -  -  -  他の  -  -  -  -  - */
.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;}

/ * --------------------アニメーション-------------------- * /

.dot-spin {
  位置：相対;
  幅：10px;
  高さ：10px;
  border-radius：5px;
  背景色：透明;
  色：透明;
  ボックスシャドウ：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.72984 px 0 0 rgba（152、128、255、0）;
  アニメーション：dotSpin1.5s無限線形;
}

@keyframes dotSpin {
  0％、
  100％{
    ボックスシャドウ：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％{
    ボックスシャドウ：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％{
    ボックスシャドウ：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.72984 px 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％{
    ボックスシャドウ：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％{
    ボックスシャドウ：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％{
    ボックスシャドウ：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％{
    ボックスシャドウ：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.72984 px 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％{
    ボックスシャドウ：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 {
  から {
    -webkit-transform：translate3d（0、-100％、0）;
    変換：translate3d（0、-100％、0）;
    可視性：可視;
  }

  に {
    -webkit-transform：translate3d（0、0、0）;
    変換：translate3d（0、0、0）;
  }
}

@keyframes slideInDown {
  から {
    -webkit-transform：translate3d（0、-100％、0）;
    変換：translate3d（0、-100％、0）;
    可視性：可視;
  }

  に {
    -webkit-transform：translate3d（0、0、0）;
    変換：translate3d（0、0、0）;
  }
}

.slideInDown {
  -webkit-animation-name：slideInDown;
  アニメーション名：slideInDown;
}

@ -webkit-keyframes slideInUp {
  から {
    -webkit-transform：translate3d（0、100％、0）;
    変換：translate3d（0、100％、0）;
    可視性：可視;
  }

  に {
    -webkit-transform：translate3d（0、0、0）;
    変換：translate3d（0、0、0）;
  }
}

@keyframes slideInUp {
  から {
    -webkit-transform：translate3d（0、100％、0）;
    変換：translate3d（0、100％、0）;
    可視性：可視;
  }

  に {
    -webkit-transform：translate3d（0、0、0）;
    変換：translate3d（0、0、0）;
  }
}

.slideInUp {
  -webkit-animation-name：slideInUp;
  アニメーション名：slideInUp;
}

.animated {
  -webkit-animation-duration：800ms;
  アニメーション-継続時間：800ms;
  -webkit-animation-fill-mode：両方;
  アニメーション-塗りつぶしモード：両方;
}

@media（prefers-reduced-motion）{
  .animated {
    -webkit-animation：unset！important;
    アニメーション：未設定！重要;
    -webkit-transition：なし！重要;
    遷移：なし！重要;
  }
}
.animated.infinite {
  -webkit-animation-iteration-count：無限;
  アニメーション-反復-カウント：無限;
}