/**********************************************************/
/*                                                        */
/*    WEB版 検索画面共通CSS (UTF8)                        */
/*    wsv_common.css                                      */
/*                                                        */
/**********************************************************/
/**********************************************************/
/*  全画面共通                                            */
/*  font-sizeはrem指定 (拡大表示対策)                     */
/*  10px = 1rem,  15px = 1.5rem,  5px = 0.5rem            */
/**********************************************************/
html {
   font-size:     62.5%;
}
body {
   margin:        0;
   padding:       0;
   font-family:   Meiryo, sans-serif;
   background:    #E0E0EC;
}
textarea {
   font-family:   Meiryo, sans-serif;
}
:focus {
   outline:       none;
}

/**********************************************************/
/*  共通ボタン サイズは個別に指定                         */
/**********************************************************/
.btn_base { /* ベース */
   background-color: transparent;
   border:           none;
   cursor:           pointer;
   outline:          none;
   padding:          0;
   appearance:       none;
   overflow:         hidden;
   
   display:          inline-block;
   padding:          0.3em 1em;
   text-decoration:  none;
   text-align:       center;
   box-sizing:       border-box;
   border:           solid 1px;
   border-radius:    3px;
   font-weight:      400;
   font-family:      Meiryo, sans-serif;
}
.btn_base:hover { /* ベース */
   font-weight:      400;
   transition:       .4s;
}

.btb { /* ベース */
   background-color: transparent;
   border:           none;
   cursor:           pointer;
   outline:          none;
   padding:          0;
   appearance:       none;
   overflow:         hidden;
   
   display:          inline-block;
   padding:          0.3em 1em;
   text-decoration:  none;
   text-align:       center;
   box-sizing:       border-box;
   border:           solid 1px;
   border-radius:    3px;
   font-weight:      400;
   font-family:      Meiryo, sans-serif;
}
.btb:hover { /* ベース */
   font-weight:      400;
   transition:       .4s;
}

/* 背景色白 色の追加・変更は自由に */
.btn_green {
   color:        #43A047;
   border-color: #43A047;
   background:   #FFFFFF;
}

.btn_green:hover {
   color:        #FFFFFF;
   border-color: #43A047;
   background:   #43A047;
}

.btn_blue {
   color:        #0084FF;
   border-color: #0084FF;
   background:   #FFFFFF;
}

.btn_blue:hover {
   color:        #FFFFFF;
   border-color: #0084FF;
   background:   #0084FF;
}

.btn_darkblue {
   color:        #3F51B5;
   border-color: #3F51B5;
   background:   #FFFFFF;
}

.btn_darkblue:hover {
   color:        #FFFFFF;
   border-color: #3F51B5;
   background:   #3F51B5;
}

.btn_red {
   color:        #E53935;
   border-color: #E53935;
   background:   #FFFFFF;
}

.btn_red:hover {
   color:        #FFFFFF;
   border-color: #E53935;
   background:   #E53935;
}

.btn_orange {
   color:        #FF5722;
   border-color: #FF5722;
   background:   #FFFFFF;
}

.btn_orange:hover {
   color:        #FFFFFF;
   border-color: #FF9800;
   background:   #FF9800;
}

.btn_gray {
   color:        #607D8B;
   border-color: #607D8B;
   background:   #FFFFFF;
}

.btn_gray:hover {
   color:        #FFFFFF;
   border-color: #607D8B;
   background:   #607D8B;
}

/* 背景色あり 色の追加・変更は自由に */
.btn_bg_green {
   border-color: #43A047;
   background:   #43A047;
   color:        #FFFFFF;
}

.btn_bg_green:hover {
   border-color: #66BB6A;
   background:   #66BB6A;
   color:        #FFFFFF;
}

.btn_bg_blue {
   border-color: #1E88E5;
   background:   #1E88E5;
   color:        #FFFFFF;
}

.btn_bg_blue:hover {
   border-color: #03A9F4;
   background:   #03A9F4;
   color:        #FFFFFF;
}

.btn_bg_darkblue {
   background:   #3F51B5;
   border-color: #3F51B5;
   color:        #FFFFFF;
}

.btn_bg_darkblue:hover {
   background:   #2196F3;
   border-color: #2196F3;
   color:        #FFFFFF;
}

.btn_bg_red {
   border-color: #F44336;
   background:   #F44336;
   color:        #FFFFFF;
}

.btn_bg_red:hover {
   border-color: #FF5E9F;
   background:   #FF5E9F;
   color:        #FFFFFF;
}

.btn_bg_darkred {
   border-color: #D32F2F;
   background:   #D32F2F;
   color:        #FFFFFF;
}

.btn_bg_darkred:hover {
   border-color: #FF4081;
   background:   #FF4081;
   color:        #FFFFFF;
}

.btn_bg_orange {
   border-color: #FF5722;
   background:   #FF5722;
   color:        #FFFFFF;
}

.btn_bg_orange:hover {
   border-color: #FF9800;
   background:   #FF9800;
   color:        #FFFFFF;
}

.btn_bg_pink {
   border-color: #E91E63;
   background:   #E91E63;
   color:        #FFFFFF;
}

.btn_bg_pink:hover {
   border-color: #FF5E9F;
   background:   #FF5E9F;
   color:        #FFFFFF;
}

.btn_bg_gray {
   border-color: #607D8B;
   background:   #607D8B;
   color:        #FFFFFF;
}

.btn_bg_gray:hover {
   border-color: #829AA6;
   background:   #829AA6;
   color:        #FFFFFF;
}

.btn_bg_purple {
   border-color: #7061c7;
   background:   #7061c7;
   color:        #FFFFFF;
}

.btn_bg_purple:hover {
   border-color: #8b80cb;
   background:   #8b80cb;
   color:        #FFFFFF;
}
/* disabled */
.btn_base:disabled {
   color:          #9E9E9E;
   border-color:   #9E9E9E;
   background:     #FFFFFF;
   cursor:         default;
   pointer-events: none;
}
.btb:disabled {
   color:          #9E9E9E;
   border-color:   #9E9E9E;
   background:     #FFFFFF;
   cursor:         default;
   pointer-events: none;
}

/**********************************************************/
/*  チェックボックス                                      */
/**********************************************************/
.check_box span {
   display: inline-block;
   cursor:  pointer;
}
.check_box input[type=checkbox] {
   display: none;
}
.check_box input[type=checkbox] + span:before {
   display:      inline-block;
   font-family:  'Font Awesome 5 Free';
   font-weight:  400;
   content:      "\f0c8";
   color:        #424242;
   margin-right: 5px;
}
.check_box input[type=checkbox]:checked + span:before {
   font-family: 'Font Awesome 5 Free';
   font-weight: 900;
   content:     "\f14a";
   color:       #0084FF;
}

/* disabled */
.check_box input[type=checkbox]:disabled + span {
   color:  #9E9E9E;
   cursor: default;
}
.check_box input[type=checkbox]:disabled + span:before {
   display:      inline-block;
   font-family:  'Font Awesome 5 Free';
   content:      "\f0c8";
   color:        #9E9E9E;
}

.check_box input[type=checkbox]:checked:disabled + span:before {
   font-family:  'Font Awesome 5 Free';
   font-weight:  900;
   content:      "\f14a";
   color:        #9E9E9E;
}

/**********************************************************/
/*  ラジオボタン 通常形式                                 */
/**********************************************************/
.radio_nomal input[type=radio] {
   display: none;
}
.radio_nomal span {
   display     : inline-block;
   cursor      : pointer;
   color       : #000000;
}

.radio_nomal :not(:last-child) span {
   margin-right: 10px;
}

.radio_nomal input[type="radio"]:checked + span {
   display:      inline-block;
   color:        #0091EA;
}

.radio_nomal input[type=radio] + span:before {
   font-family : 'Font Awesome 5 Free';
   content     : "\f111";
   font-weight : 400;
   color       : #000000;
   margin-right: 3px;
}

.radio_nomal input[type=radio]:checked + span:before {
   font-family: 'Font Awesome 5 Free';
   content    : "\f192";
   font-weight: 400;
   color      : #0091EA;
}

/* disabled */
.radio_nomal input[type=radio]:disabled + span {
   color : #9E9E9E;
   cursor: default;
}
.radio_nomal input[type=radio]:disabled + span:before {
   display    : inline-block;
   font-family: 'Font Awesome 5 Free';
   content    : "\f111";
   font-weight: 400;
   color      : #9E9E9E;
}

.radio_nomal input[type=radio]:checked:disabled + span:before {
   display    : inline-block;
   font-family: 'Font Awesome 5 Free';
   content    : "\f192";
   font-weight: 400;
   color      : #9E9E9E;
}

/**********************************************************/
/*  ラジオボタン ボックス形式                             */
/*  中央寄せはstyleに "justify-content:center;" 指定      */
/**********************************************************/
.radio_box {
   display: flex;
}

.radio_box label {
   display : flex;
   position: relative;
}

.radio_box [type=radio] {
   -webkit-appearance: none;
   -moz-appearance   : none;
   position          : absolute;
   width             : 100%;
   height            : 100%;
   margin            :    0;
   padding           :    0;
}

/* appearance: none; for IE11 */
_:-ms-lang(x)::-ms-backdrop, .radio_box [type=radio] {
   visibility: hidden;
}

.radio_box input+span {
   z-index      : 1;
   display      : inline-block;
   padding      : 0.1rem 0.8rem;
   border-radius: 3px;
   border       : 1px solid #03A9F4;
   text-align   : center;
   color        : #03A9F4;
   background   : #FFFFFF;
   cursor       : pointer;
}

.radio_box :not(:first-child) span {
   border-top-left-radius   : 0;
   border-bottom-left-radius: 0;
}

.radio_box :not(:last-child) span {
   border-top-right-radius   : 0;
   border-bottom-right-radius: 0;
}

.radio_box :checked + span {
   color     : #FFFFFF;
   background: #03A9F4;
   -webkit-transition: all .4s;
   -moz-transition   : all .4s;
   -o-transition     : all .4s;
   transition        : all .4s;
}

.radio_box :disabled + span {
   cursor    : default;
   color     : #AAAAAA;
   background: #FFFFFF;
   border    : 1px solid #AAAAAA;
}

.radio_box :checked:disabled + span {
   cursor    : default;
   color     : #FFFFFF;
   background: #AAAAAA;
   border    : 1px solid #AAAAAA;
}

/**********************************************************/
/*  セレクトボックス                                      */
/**********************************************************/
.select_box {
   display:       inline-block;
   position:      relative;
   border:        1px solid #AAA;
   border-radius: 3px;
   background:    white;
}

.select_box::before {
   display:    block;
   content:    "";
   position:   absolute;
   top:        calc(50% - 3px);
   right:      6px;
   border:     4px solid transparent;
   border-top: 6px solid black;
}

.select_box select {
   cursor:             pointer;
   position:           relative;
   -webkit-appearance: none;
   appearance:         none;
   padding:            0 1.6em 0 1em;
   border:             none;
   border-radius:      3px;
   background:         transparent;
}

.select_box select::-ms-expand {
   display: none;
}

/**********************************************************/
/*  文字サイズ スライダー (JQuery UI)                     */
/**********************************************************/
#menu .ui-slider-horizontal {
   height:     3px;
}

#menu .ui-slider-handle:focus { outline: none; }

#menu .ui-state-default,
#menu .ui-widget-content .ui-state-default,
#menu .ui-widget-header  .ui-state-default {
   background: #E8E8E8;
   border:     1px solid #AAA;
}

#menu .ui-state-active,
#menu .ui-widget-content .ui-state-active,
#menu .ui-widget-header  .ui-state-active {
   background: white;
   border:     1px solid #AAA;
}

#menu .ui-widget.ui-widget-content {
   border:     1px solid #AAA;
}

/**********************************************************/
/*  操作防止暗転                                          */
/**********************************************************/
#block_back {
    position:              fixed;
    top:                   0px;
    left:                  0px;
    width:                 100%;
    height:                100%;
    background-color:      #000000;
    display:               none;
    z-index:               50;
    opacity:               0.3;
    filter:                alpha(opacity=30);    /* ie6,7 */
    -ms-filter:            "alpha(opacity=30)";  /* ie8 */
    -moz-opacity:          0.3;                  /* NN, FF1.5 */
    -khtml-opacity:        0.3;                  /* safari 1 */
}

/**********************************************************/
/*  共通ヘッダー及びメニュー                              */
/**********************************************************/
.header_box {
   position:    fixed;
   top:         0;
   width:       100%;
   height:      34px;
   line-height: 34px;
   font-size:   1.4rem;
   background:  linear-gradient(90deg, #8E67D2, #52B5FF);
   color:       white;
   box-shadow:  0 0 10px 2px #A0A0A0;
   overflow:    hidden;
   z-index:     40;
}

.header_box_sub {
   position:    fixed;
   top:         34px;
   width:       100%;
   height:      28px;
   line-height: 28px;
   font-size:   1.4rem;
   background:  #1565C0;
   box-shadow:  0px 2px 5px 0px #A0A0A0;
   overflow:    hidden;
   z-index:     49;
}

.mr4 { margin-right: 4px; }
.mr8 { margin-right: 8px; }

.hdr_left  { float: left;  }
.hdr_right { float: right; }

.btn_menu {
   width:        34px;
   border-right: 1px solid rgba(255, 255, 255, 0.2);
   text-align:   center;
   cursor:       pointer;
   transition:   0.2s;
   float:        left;
}

.btn_menu:hover {
   background: rgba(255, 255, 255, 0.2);
}

.btn_menu .fas {
   margin:        0;
}

.logo {
   font-size:   2rem;
   margin-left: 16px;
   float:       left;
}

.btn_h {
   padding:     0 14px;
   border-left: 1px solid rgba(255, 255, 255, 0.2);
   cursor:      pointer;
   transition:  0.2s;
   float:       left;
}

.btn_h:hover  { background: rgba(255, 255, 255, 0.2); }

.h_back       { background: #2C5; }
.h_back:hover { background: #3D6; }

.h_logout       { background: #FF5050; }
.h_logout:hover { background: #FF8080; }

.h_sub_fnc       { background: #26A69A; }
.h_sub_fnc:hover { background: #4DB6AC; }

#menu {
   display:       none;
   font-size:     1.4rem;
   position:      fixed;
   width:         210px;
   top:           34px;
   left:          -210px;
   height:        calc(100% - 34px);
   margin:        0;
   padding:       0;
   background:    #5C5C9B;
   color:         white;
   z-index:       50;
}

#menu li {
   list-style:    none;
}

.m_ti {
   padding:       8px 0 8px 8px;
   background:    #40406c;
}

#menu li > a {
   display:       flex;
   padding:       8px 0 8px 20px;
   align-items:   center;
   cursor:        pointer;
   transition:    0.3s;
   color:         white;
}

#menu li > a:hover {
   background:    #7d7daf;
}

#menu li > a > span:first-child {
   flex-grow:     1;
}

.m_child {
   display:       none;
   background:    #53538b;
}

#menu li > ul {
   margin:        0;
   padding-left:  8px;
}

/**********************************************************/
/*  現在位置表示                                          */
/**********************************************************/
.location_block {
   text-align:    center;
   margin-bottom: 0px;
   padding:       0px 32px;
   text-align:    right;
}

.location_sts {
   position:      relative;
   display:       inline-block;
   padding:       0px;
   list-style:    none;
   border-radius: 50px;
   font-size:     1.3rem;
}

.location_sts a {
   position:        relative;
   display:         inline-block;
   padding:         4px 4px;
   z-index:         1;
}

.location_pos {
   color:           #F44336;
   text-decoration: none;
}

.location_bar {
   background:    #FFFFFF;
   width:         100%;
   height:        5px;
   border-radius: 2px;
}

.location_selector{
   position:      absolute;
   display:       inline-block;
   left:          0px;
   bottom:        0px;
   height:        5px;
   z-index:       1;
   border-radius: 50px;
   background:    #F44336;
}

/**********************************************************/
/*  ポップアップ                                          */
/**********************************************************/
.cmn_popup {
   position:      absolute;
   top:           0;
   left:          0;
   max-width:     880px;
   padding:       4px 8px;
   font-size:     1.3rem;
   border-radius: 3px;
   box-shadow:    0px 0px 20px rgba(0,0,0,0.5);
   word-wrap:     break-word;
   z-index:       63;
}

.cmn_popup_fnc {
   text-align:   right;
}

.cmn_popup_close {
   font-size:    1.6rem;
   padding:      4px;
   color:        #F44336;
   cursor:       pointer
}

/**********************************************************/
/*  ダイアログ                                            */
/**********************************************************/
.cmn_dlg_base {
   display:         none;
   position:        fixed;
   top:             0;
   left:            0;
   width:           100%;
   height:          100%;
   z-index:         60;
   align-items:     center;
   justify-content: center;
}

.cmn_dlg_base_sub {
   display:         flex;
   max-height:      90%;
   overflow:        auto;
}

.cmn_dlg {
   display:        flex;
   flex-direction: column;
   margin:         auto;
   padding:        24px;
   max-height:     700px;
   background:     #FFFFFF;
}

.cmn_dlg_ttl {
   text-align:    left;
   margin-bottom: 16px;
   font-weight:   bold;
   border-left:   solid 8px #0084FF;
}

.cmn_dlg_ttl_frm {
   font-size:    1.8rem;
   padding-left: 16px;
}

.cmn_dlg_fnc {
   text-align:   center;
   padding-top:  24px;
}
.cmn_dlg_close {
   font-size:    1.4rem;
}
.cmn_dlg_close .fas {
   margin-right: 0.4rem;
}

/**********************************************************/
/*  ダイアログ ミニ                                       */
/**********************************************************/
.cmn_dlg_mini {
   position:      fixed;
   top:           0;
   left:          0;
   padding:       8px 12px;
   font-size:     1.3rem;
   border-radius: 3px;
   box-shadow:    0 2px 5px rgba(0, 0, 0, 0.3);
   color:         #FFFFFF;
   background:    #0288D1;
   z-index:       62;
}

/**********************************************************/
/*  子画面                                                */
/**********************************************************/
.cmn_child_win {
   position:         fixed;
   min-width:        100px;
   background-color: #F0F8FF;
   border:           2px solid #00008B;
   border-radius:    3px;
   box-shadow:       3px 3px 3px rgba(0,0,0,0.4);
   box-sizing:       border-box;
   z-index:          41;
}

.cmn_child_win_base {
   display:        flex;
   flex-direction: column;
   width:          100%;
   height:         100%;
}

.cmn_child_win_bar {
   display:         flex;
   justify-content: space-between;
   align-items:     center;
   width:           100%;
   background:      #00008B;
   box-sizing:      border-box;
   cursor:          move;
}

.cmn_child_win_ttl {
   flex-grow:1;
   
   padding:       6px 12px;
   font-size:     1.4rem;
   color:         white;
   white-space:   nowrap;
   text-overflow: ellipsis;
   overflow:      hidden;
}

.cmn_child_win_contents {
   width:      100%;
   height:     100%;
   font-size:  1.4rem;
   overflow:   auto;
   box-sizing: border-box;
}

/* 「×」ボタン */
.cmn_child_win_close {
   padding:       6px 12px;
   color:         #FFFFFF;
   font-size:     1.4rem;
   cursor:        pointer;
}
.cmn_child_win_close:hover {
   background: #FF1744;
}
.cmn_child_win_close > .fas {
   margin: 0;
}

/**********************************************************/
/*  処理中画面表示                                        */
/**********************************************************/
.cmn_proc_msg {
   display:     none;
   position:    fixed;
   min-width:   500px;
   top:         50%;
   left:        50%;
   padding:     12px 8px;
   background:  #0288D1;
   color:       #FFFFFF;
   text-align:  center;
   font-size:   1.5rem;
   z-index:     61;
   border-radius:         3px;
   -webkit-border-radius: 3px;
   box-shadow:    0 2px 5px rgba(0,0,0,0.26);
}

.cmn_proc_msg_sub {
   display:         flex;
   justify-content: center;
}

.msg_box {
   position:       relative;
   display:        inline-block;
   vertical-align: middle;
   min-width:      200px;
}
.msg_main {
   padding:    0px 6px;
   width:      100%;
   border:     solid 1px #0288D1;
   box-sizing: border-box;
   opacity:    1;
   animation:  proc_msg 26s 10;
}
#wait_msg1 {
   position:       absolute;
   top:            0;
   text-align:     center;
   padding:        0px 6px;
   width:          100%;
   vertical-align: middle;
   border:         solid 1px #0288D1;
   box-sizing:     border-box;
   opacity:        0;
   animation:      proc_wait1 26s 10;
}
#wait_msg2 {
   position:  absolute;
   top:       0;
   left:      0;
   opacity:   0;
   animation: proc_wait2 1s 1 260s forwards;
}

@keyframes proc_msg {
  0%   { opacity: 1; }
  38%  { opacity: 1; }
  50%  { opacity: 0; }
  88%  { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes proc_wait1 {
  0%   { opacity: 0; }
  38%  { opacity: 0; }
  50%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes proc_wait2 {
  0% {
    position:absolute;
    opacity:0;
  }
  99% {
    position:absolute;
    opacity:0;
  }
  100% {
    position:relative;
    opacity:1;
  }
}

.loader_box {
   display:        block;
   vertical-align: middle;
   position:       relative;
}

.form_loader1 {
   overflow:   hidden;
   min-height: 150px;
   animation:  loader1_stop  0.5s 1 260s forwards;
}

@keyframes loader1_stop {
  0%   { opacity:1; }
  99%  { opacity:1; }
  100% { opacity:0; }
}

.form_loader1 ul {
   z-index:  99;
   margin:   0;
}

.form_loader1 .loading_flash {
   display:      inline-block;
   height:       14px;
   margin:       0 auto;
   padding-left: 8px;
}

.form_loader1 .loading_flash li {
  display:     block;
  background:  #0288D1;
  opacity:     0.5;
  float:       left;
  width:       8px;
  height:      8px;
  margin:      4px 0 0 8px;
  animation:   flash 1s infinite;
  border-radius: 50%;
}

.form_loader1 .loading_flash li:first-child {
  margin-left: 0;
}

.form_loader1 .loading_flash li:nth-child(2) {
  animation-delay: .15s
}

.form_loader1 .loading_flash li:nth-child(3) {
  animation-delay: .3s
}

@keyframes flash {
  0% {
    background: #FFFFFF;
    opacity: 1
  }
  50% {
    background: #0288D1;
    opacity: 0.5
  }
  100% {
    background: #FFFFFF;
    opacity: 1
  }
}

.form_loader2 {
   position:   absolute;
   top:        0;
   left:       0;
   opacity:    0;
   width:      50px;
   height:     50px;
   text-align: center;
   animation:  loader2_start  0.5s 1 260.5s forwards;
}

@keyframes loader2_start {
  0% {
    opacity:  0;
    position: absolute;
  }
  99% {
    opacity:  0;
    position: absolute;
  }
  100% {
    opacity:  1;
    position: transparent;
  }
}

.loading_spinner {
   position:  absolute;
   width:     100%;
   height:    100%;
   animation: rotation  2s linear infinite;
}

.bubble_base {
   position: absolute;
   width:    10px;
   height:   10px;
   border-radius: 50%;
   background-color: #FFFFFF;
}

.bubble1 {
   top:    5px;
   left:   20px;
}

.bubble2 {
   top:   10px;
   left:  10px;
}

.bubble3 {
   top:  20px;
   left: 5px;
}

.bubble1 { animation: bounce1  2s ease-in-out infinite; }
.bubble2 { animation: bounce2  2s ease-in-out infinite; }
.bubble3 { animation: bounce3  2s ease-in-out infinite; }

.bubble2 { animation-delay: -0.15s; }
.bubble3 { animation-delay: -0.3s;  }

@keyframes rotation {
   100% {transform: rotate(360deg);}
}

@keyframes bounce1  {
   0%, 100% {transform: scale(0.1);}
   50% {transform: scale(1.0);}
}

@keyframes bounce2  {
   0%, 100% {transform: scale(0.1);}
   50% {transform: scale(0.9);}
}

@keyframes bounce3  {
   0%, 100% {transform: scale(0.1);}
   50% {transform: scale(0.8);}
}

/**********************************************************/
/*  処理中画面 ミニ                                       */
/**********************************************************/
.cmn_proc_msg_mini {
   position:      absolute;
   top:           0;
   left:          0;
   padding:       8px 12px;
   font-size:     1.3rem;
   border-radius: 3px;
   box-shadow:    0 2px 5px rgba(0, 0, 0, 0.3);
   color:         #FFFFFF;
   background:    #0288D1;
   z-index:       49;
}

/**********************************************************/
/*  処理中画面 krkr  (検索・VDA共通)                      */
/**********************************************************/
.cmn_krkr_msg {
   display:         flex;
   justify-content: center;
   align-items:     center;
   position:        fixed;
   top:             0;
   left:            0;
   width:           100%;
   height:          100%;
   z-index:         62;
}

.krkr_msg_box {
   display:         inline-block;
   text-align:      center;
   min-width:       500px;
   padding:         12px 8px;
   background:      #0288D1;
   color:           #FFFFFF;
   border-radius:   3px;
   box-shadow:      0 2px 5px rgba(0,0,0,0.26);
   font-size:       1.5rem;
}
.krkr_msg_block {
   display:         flex;
   justify-content: center;
   align-items:     center;
   padding:         0px 6px;
   width:           100%;
}

.krkr_msg {
   display:   inline-block;
   min-width: 200px;
}

.krkr_prog_block {
   display:  none;
   position: relative;
   width:    100%;
}

.krkr_prog_base {
   display:        inline-block;
   position:       relative;
   width:          75%;
   height:         4px;
   margin:         0px auto 0px 24px;
   background:     #FFFFFF;
   border-radius:  4px;
   vertical-align: middle;
}

.krkr_prog_bar {
   display:       inline-block;
   position:      absolute;
   top:           0;
   left:          0;
   height:        4px;
   width:         0px;
   background:    #00C853;
   border-radius: 4px;
   transition:    0.5s;
   z-index:       2;
}

.krkr_prog_bar_msg {
   display:     inline-block;
   margin-left: 8px;
   width:       50px;
   text-align:  left;
}

#krkr_stop_btn {
   font-size:   1.1rem;
   margin-top:  8px;
}

/**********************************************************/
/*  待機中ローダー 円(背景色：白)                         */
/**********************************************************/
.loader_circle,
.loader_circle:before,
.loader_circle:after {
  border-radius: 50%;
}
.loader_circle {
  color:       #0D47A1;
  font-size:   1.1rem;
  text-indent: -99999rem;
  margin:      32px auto;
  position:    relative;
  width:       6rem;
  height:      6rem;
  box-shadow:  inset 0 0 0 0.7rem;
  -webkit-transform: translateZ(0);
  -ms-transform:     translateZ(0);
  transform:         translateZ(0);
}
.loader_circle:before,
.loader_circle:after {
  position: absolute;
  content: '';
}
.loader_circle:before {
  width:  3.2rem;
  height: 6.2rem;
  border-radius: 0 6.2rem 6.2rem 0;
  background: #FFFFFF;
  top: -0.1rem;
  left: 2.9rem;
  -webkit-transform-origin: 0.1rem 3.1rem;
  transform-origin: 0.1rem 3.1rem;
  -webkit-animation: load2 1.3s infinite ease 0.32s;
  animation: load2 1.3s infinite ease 0.32s;
}
.loader_circle:after {
  width:  3.2rem;
  height: 6.2rem;
  border-radius: 6.2rem 0 0 6.2rem;
  background: #FFFFFF;
  top: -0.1rem;
  left: -0.1rem;
  -webkit-transform-origin: 3.1rem 3.1rem;
  transform-origin: 3.1rem 3.1rem;
  -webkit-animation: load2 1.3s infinite ease;
  animation: load2 1.3s infinite ease;
}
@-webkit-keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/**********************************************************/
/*  コンテキストメニュー                                  */
/**********************************************************/
.context_box {
   display      : inline-block;
   position     : absolute;
   font-size    : 1.3rem;
   padding      : 4px 0;
   border-radius: 3px;
   border       : 1px solid white;
   border-left  : 0;
   border-right : 0;
   box-shadow   : 1px 2px 10px #333;
   background   : white;
   white-space  : nowrap;
}

.context_grp {
   display      : flex;
}

.context_item {
   padding      : 0.3em 1em;
   cursor       : pointer;
   transition   : background-color, 150ms;
}

.context_item:hover {
   background   : gainsboro;
}

.context_icon_grp::after {
   font-family  : "Font Awesome 5 Free";
   font-weight  : 900;
   font-size    : 1.3rem;
   content      : "\f105";
   margin-left  : 1em;
}

/**********************************************************/
/*  SVGアイコン                                           */
/**********************************************************/
.ic_sparkle {
   transform: rotate(90deg);
   mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><g><path d="M247.355,106.9C222.705,82.241,205.833,39.18,197.46,0c-8.386,39.188-25.24,82.258-49.899,106.917c-24.65,24.642-67.724,41.514-106.896,49.904c39.188,8.373,82.254,25.235,106.904,49.895c24.65,24.65,41.522,67.72,49.908,106.9c8.373-39.188,25.24-82.258,49.886-106.917c24.65-24.65,67.724-41.514,106.896-49.904C315.08,148.422,272.014,131.551,247.355,106.9z"></path><path d="M407.471,304.339c-14.714-14.721-24.81-40.46-29.812-63.864c-5.011,23.404-15.073,49.142-29.803,63.872c-14.73,14.714-40.464,24.801-63.864,29.812c23.408,5.01,49.134,15.081,63.864,29.811c14.73,14.722,24.81,40.46,29.82,63.864c5.001-23.413,15.081-49.142,29.802-63.872c14.722-14.722,40.46-24.802,63.856-29.82C447.939,329.14,422.201,319.061,407.471,304.339z"></path><path d="M146.352,354.702c-4.207,19.648-12.655,41.263-25.019,53.626c-12.362,12.354-33.968,20.82-53.613,25.027c19.645,4.216,41.251,12.656,53.613,25.027c12.364,12.362,20.829,33.96,25.036,53.618c4.203-19.658,12.655-41.255,25.023-53.626c12.354-12.362,33.964-20.82,53.605-25.035c-19.64-4.2-41.251-12.656-53.613-25.019C159.024,395.966,150.555,374.351,146.352,354.702z"></path></g></svg>');
}