//header(‘Content-Type: text/css; charset=shift-jis’);//ブラウザにphpをcssと認識させる。
<style type="text/css">
    *
    {
        font-size:<?php echo $fontsize.'px'; ?>;
    }
    body
    {
        margin:0px;
    }
    input:focus
    {
        background-color: #e0e0e0;
    }
    /*ダイアログ*/
    dialog {
      padding: 0;
      border: 0;
      border-radius: 0.6rem;
      box-shadow: 0 0 1em black;
    }

    /* native backdrop */
    dialog::backdrop {
      background-color: rgba(0, 0, 0, 0.4);
    }

    /* polyfill backdrop */
    dialog + .backdrop {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.4);
    }

    dialog[open] {
      animation: slide-up 0.4s ease-out;
    }

    /* The following styles are for older browsers when using
       the polyfill. These aren’t necessary for Chrome/Firefox. */
    dialog {
      display: none;
      position: absolute;
      margin: 0 auto; /* ダイアログがトップへ */
      /* should center it, but not working in Safari */
      max-width:350px;
      min-width:350px;
      max-height:200px;
      background-color: white;
    }

    dialog[open] {
      display: block;
    }

    /* prettying things up a bit */
    .html-dialog-close {
      position: absolute;
      top: 0.2em;
      right: 0.2em;
      padding: 0.3em;
      line-height: 0.6;
      background-color: transparent;
      border: 0;
      font-size: 2em;
    }

    /*
    .modal-header,
    .modal-body,
    .modal-footer 
    */
    .modal-header,
    .modal-body
    {
      padding: 1em;
    }

    .modal-header {
      margin: 0;
      padding-bottom: 0.6em;
      background-color: #ddedfd;
      border-top-left-radius: 0.6rem;
      border-top-right-radius: 0.6rem;
      border-bottom: 1px solid #78a4d3;
    }

    .modal-footer {
      border-top: 1px solid #78a4d3;
      display:flex;
    }

    .modal-footer > button
    {
        flex:1;
        padding: 1em 2em 1em;
    }

    @keyframes slide-up {
      0% {
        opacity: 0;
        transform: translate(0, 15px);
      }
      100% {
        opacity: 1;
        transform: translate(0, 0);
      }
    }
    /*ダイアログ*/
    /*隠しウインドウ用（モーダルウインドウ）*/
    .modalArea {
      display: none;
      position: fixed;
      z-index: 10; /*サイトによってここの数値は調整 */
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .modalBg {
      width: 100%;
      height: 100%;
      background-color: rgba(30,30,30,0.9);
    }

    .modalWrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      transform:translate(-50%,-50%);
      width: 90%;
      max-width: 1800px;
      padding: 10px 30px;
      background-color: #fff;
      height : 90%;
      overflow : auto;
    }

    .closeModal {
      position: absolute;
      top: 0.5rem;
      right: 1rem;
      cursor: pointer;
    }
    /*隠しウインドウ用（モーダルウインドウ）*/
/* 外側の大きなサークルのラインの色とスタイルとアルファで表示＆消えるアニメーション */
.circle {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(0,183,229,0.9);
    opacity:.9;
    border-right:5px solid rgba(0,0,0,0);
    border-left:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 35px #2187e7;
    width:50px;
    height:50px;
    margin:0 auto;
    -moz-animation:spinPulse 1s infinite ease-in-out;
    -webkit-animation:spinPulse 1s infinite linear;
}
/* 内側の小さなサークルのラインの色とスタイルとアルファで表示＆消えるアニメーション */
.circle1 {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(0,183,229,0.9);
    opacity:.9;
    border-left:5px solid rgba(0,0,0,0);
    border-right:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 15px #2187e7;
    width:30px;
    height:30px;
    margin:0 auto;
    position:relative;
    top:-50px;
    -moz-animation:spinoffPulse 1s infinite linear;
    -webkit-animation:spinoffPulse 1s infinite linear;
}
 
/* キーフレームを使ったローディングのくるくる回るアニメーション */
@-moz-keyframes spinPulse {
    0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
    50% { -moz-transform:rotate(145deg); opacity:1; }
    100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse {
    0% { -moz-transform:rotate(0deg); }
    100% { -moz-transform:rotate(360deg);  }
}
@-webkit-keyframes spinPulse {
    0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
    50% { -webkit-transform:rotate(145deg); opacity:1;}
    100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(360deg); }
}
.container 
{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100%;
  height: 100%;
    //border:10px solid #000000;
}
.container2{
    border: 1px solid #aaa;
    width: 150px;
    height: 50px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    margin: auto;
    text-align: center;
}

/* リンクの背景がフェードインするやつ */
a.fade{
  padding: 0 10px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, rgb(49, 170, 226) 50%);
  background-position: 0 0;
  background-size: 200% auto;
  transition: .3s;
}

a.fade:hover{
  background-position: -100% 0;
  color: #fff;
}

/* リンクのがボタンになるやつ */
a.button{
  padding: 0 10px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, rgb(49, 170, 226) 50%);
  background-position: 0 0;
  background-size: 200% auto;
  transition: .3s;
}

a.button {
  display       : inline-block;
  border-radius : 5%;          /* 角丸       */
  //font-size     : 8pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 12px 12px;   /* 余白       */
  background    : #ff7f7f;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  box-shadow    : 6px 6px 3px #666666;  /* 影の設定 */
  border        : 2px solid #ff7f7f;    /* 枠の指定 */
}
a.button:hover {
  box-shadow    : none;        /* カーソル時の影消去 */
  color         : #ff7f7f;     /* 背景色     */
  background    : #ffffff;     /* 文字色     */
}

/* 回転しながら動くアニメーション（背景で使用予定) */
div.square01{
border:solid 1px transparent;
position:absolute;
/*
  animation-name: animation01;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
  animation-name: rotation;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: none;
  animation-play-state: running;
  -webkit-animation-name: animation01;
  -webkit-animation-duration: 10s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
  -webkit-animation-fill-mode: none;
  -webkit-animation-play-state: running;
 */
animation:animation01 10s linear 0s infinite normal both;
/* -webkit-animation:animation01 10s linear 0s infinite normal none; */
opacity:0.2;
background-color:#FFFFFF;
z-index:-1;
}
div.square02{
border:solid 1px transparent;
position:absolute;
animation:animation01 20s linear 2s infinite normal both;
opacity:0.2;
background-color:#FFFFFF;
z-index:-1;
}
div.square03{
border:solid 1px transparent;
position:absolute;
animation:animation01 30s linear 5s infinite normal both;
opacity:0.2;
background-color:#FFFFFF;
z-index:-1;
}
div.square01:hover{animation-play-state:paused;}
div.square01z10{
border:solid 1px transparent;
position:absolute;
animation:animation01 10s linear 0s infinite normal both;
opacity:0.1;
background: linear-gradient(to right, #feac5e, #c779d0, #4bc0c8);
z-index:10;
pointer-events: none;
}
div.square02z10{
border:solid 1px transparent;
position:absolute;
animation:animation01 20s linear 2s infinite normal both;
opacity:0.1;
  background: linear-gradient(to right, #6190e8, #a7bfe8);
z-index:10;
pointer-events: none;
}
div.square03z10{
border:solid 1px transparent;
position:absolute;
animation:animation01 30s linear 5s infinite normal both;
opacity:0.1;
background: linear-gradient(-45deg, rgba(246, 255, 0, .8), rgba(255, 0, 161, .8));
z-index:10;
pointer-events: none;
}
@keyframes animation01{
  0%{
    transform:translateY(1100px) rotate(0deg);
  }
  50%{
    transform:translateY(300px) rotate(180deg) ;
  }
  100%{
    transform:translateY(-500px) rotate(360deg);
  }
}
@keyframes animation02{
  0%{
    transform:translateY(-100%);
  }
  100%{
    transform:translateY(100%);
  }
}
@keyframes rotation {
  0% {
    transform: scale(.3);
  }

  50% {
    transform: scale(.6) rotate(-45deg);
    background: red;
  }

  100% {
    transform: scale(1) rotate(180deg);
    background: blue;
  }
}

/* svgで縁取り文字アニメーション */
.svgFutiMoji01 > svg > text {
  font-weight       : bold;
  font-size         : 34px;
  font-family       : Meiryo UI;
  stroke            : #003366;
  fill              : #ffffff;
  //stroke            : #ffffff;
  //fill              : #336600;
  letter-spacing    : 11px;
  text-anchor       : middle;
  dominant-baseline : alphabetic;
  animation  : svgFutiMoji01Ani01 10s linear infinite alternate;
}
.svgFutiMoji01 > svg > text:nth-of-type(1) {
  stroke-width      : 12px;
  paint-order       : stroke;
  //stroke-linejoin   : round ;
  stroke-linejoin   : bevel;
}
.svgFutiMoji01 > svg > text:nth-of-type(2) {
  stroke-width      : 0;
}
@keyframes svgFutiMoji01Ani01{
   0% { stroke: red;   fill:yellow}
  17% { stroke: orange;fill:green}
  34% { stroke: yellow;fill:aqua}
  51% { stroke: green; fill:blue}
  68% { stroke: aqua;  fill:purple}
  85% { stroke: blue;  fill:red}
 100% { stroke: purple;fill:orange}
}

/*ボタン start*/
/*
.InputImageSearch01
{
    background-image:url("/icon/search01.png"),linear-gradient(0deg, #a7d9f5, #eaf6fd);
    background-size:25px 25px;
}
*/
.search11Img {
  display        : inline-block;       /* インラインブロック化  */
  width          : auto;               /* 幅は高さに合わせる    */
  height         : 18px;               /* 画像の高さ            */
  margin         : 0 3 0 0;          /* 余白                  */
  vertical-align : middle;             /* 横の文字位置          */
}
.form-btn{
  /* width:180px; */
  display: block;
  height: 100%;
  /* padding:15px; */
  color:#fff;
  background:#8BC3A3;
  border:none;
  border-radius:3px;
  outline: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  margin:auto;
  box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
  -moz-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
  -webkit-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
  float:left;
}

.form-btn:hover{
  background:#111;
  color: white;
  border:none;
}

.form-btn:active{
  opacity: 0.9;
}
.form-btn2{
  width:100%;
  display: block;
  height: 100%;
  /* padding:15px; */
  color:#fff;
  background:#8BC3A3;
  border:none;
  border-radius:3px;
  outline: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  margin:auto;
  box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
  -moz-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
  -webkit-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
  float:left;
}

.form-btn2:hover{
  background:#111;
  color: white;
  border:none;
}

.form-btn2:active{
  opacity: 0.9;
}
/*ボタン end*/

/*ON・OFFボタン*/
/* === ボタンを表示するエリア ============================== */
.OnOffBtn1Area {
  position       : relative;            /* 親要素が基点       */
  margin         : auto;                /* 中央寄せ           */
  width          : 80px;               /* ボタンの横幅       */
  height         : 25px;                /* ボタンの高さ       */
}
 
 /* === ラジオボタン ======================================== */
.OnOffBtn1Area input[type="radio"] {
  display        : none;            /* チェックボックス非表示 */
}
 
 /* === ラジオボタンのラベル（標準） ======================== */
.OnOffBtn1Area label {
  display        : block;               /* ボックス要素に変更 */
  position       : absolute;            /* 親要素からの相対位置*/
  top            : 0;                   /* 標準表示位置(上)   */
  bottom         : 0;                   /* 標準表示位置(下)   */
  left           : 0;                   /* 標準表示位置(左)   */
  right          : 0;                   /* 標準表示位置(右)   */
  text-align     : center;              /* 文字位置は中央     */
  line-height    : 25px;                /* 1行の高さ(中央寄せ)*/
  font-weight    : bold;                /* 太字               */
  border         : 2px solid #ccc;      /* 枠線(一旦四方向)   */
}
 
 /* === ON側のラジオボタンのラベル（標準） ================== */
.OnOffBtn1Area .OnOffBtn1on + label {
  right          : 50%;                 /* 右端を中央に変更   */
  border-radius  : 6px 0 0 6px;         /* 角丸(左側の上下)   */
  background     : #eee;                /* 背景               */
  color          : #666;                /* 文字色             */
  border-right   : none;                /* 枠線の右側を消す   */
}
 
 /* === ON側のラジオボタンのラベル（ONのとき） ============== */
.OnOffBtn1Area .OnOffBtn1on:checked +label {
                                        /* 背景グラデーション */
  background     : linear-gradient(180deg, #00b359, #006633, #00b359);
  color          : #fff;                /* 文字色             */
  text-shadow    : 1px 1px 1px #333;    /* 文字に影を付ける   */
}
 
 /* === OFF側のラジオボタンのラベル（標準） ================ */
.OnOffBtn1Area .OnOffBtn1off + label {
  left           : 50%;                 /* 左端を中央に変更   */
  border-radius  : 0 6px 6px 0;         /* 角丸(右側の上下)   */
  background     : #eee;                /* 背景               */
  color          : #666;                /* 文字色             */
  border-left    : none;                /* 枠線の左側を消す   */
}
 
 /* === OFF側のラジオボタンのラベル（OFFのとき） ============= */
.OnOffBtn1Area .OnOffBtn1off:checked +label {
                                        /* 背景グラデーション */
  background     : linear-gradient(180deg, #00b359, #006633, #00b359);
  color          : #fff;                /* 文字色             */
  text-shadow    : 1px 1px 1px #333;    /* 文字に影を付ける   */
  /*
  background     : linear-gradient(175deg, #ccc, #999, #ccc);
  color          : #fff;            
  text-shadow    : 1px 1px 1px #333;
  */
}
/*ON・OFFボタン*/

/*検索エリア01(text+button*/
 /* === テキスト入力欄のSTYLE設定 ============================= */
.search01Area{
  width          : 200px;              /* BOXの幅               */
  height         : 25px;               /* BOXの高さ             */
  //margin         : auto;               /* サンプルを中心に寄せ  */
  letter-spacing : 0.1em;              /* 文字間隔              */
  font-weight    : bold;               /* 太字                  */
  //line-height    : 0;                  /* 標準の行高さ          */
  float          : left;               /* 横並び                */
}
 
 /* === テキスト入力欄のSTYLE設定 ============================= */
.search01Text {
  display        : block;              /* ブロック化            */
  float          : left;               /* 横並び                */
  box-sizing     : border-box;         /* 枠線,余白を含んだ長さ */
  height         : 25px;               /* 入力の高さ            */
  width          : 70px;               /* 入力の幅              */
  margin         : 0;                  /* 外余白                */
  padding        : 0 15px;             /* 内余白                */
  border         : 2px solid #007fff;  /* 枠線　幅,実践,色      */
  border-radius  : 8px 0 0 8px;      /* 左上下の角丸          */
  color          : #333;               /* 文字色                */
  font-size      : 18px;               /* フォントサイズ        */
  outline        : 0;                  /* 入力の薄い枠を非表示  */
  transition     : .3s;                /* 滑らかな動き          */
}
 
 /* === 検索ボタン欄のSTYLE設定 =============================== */
.search01Button {
  float          : left;               /* 横並び                */
  box-sizing     : border-box;         /* 枠線,余白を含んだ長さ */
  height         : 25px;               /* 入力の高さ            */
  margin         : 0;                  /* 外余白                */
  padding        : 0px 10px;           /* 内余白                */
  border         : none;               /* 枠線　幅,実践,色      */
  border-radius  : 0 8px 8px 0;      /* 右上下の角丸          */
  background     : #007fff;            /* ボタンの色            */
  color          : #fff;               /* 文字色                */
  cursor         : pointer;            /* カーソル設定          */
}
 
 /* === テキスト入力欄にフォーカスか来たとき ================== */
.search01Text:focus {
  background     : #cfe7ff;            /* フォーカス時の背景色  */
  width          : 170px;              /* 幅を広げる            */
  margin-left    : -100px;             /* 親要素左外に広げる    */
}
 /* === 検索アイコンのSTYLE設定 =============================== */
.search01Img {
  display        : inline-block;       /* インラインブロック化  */
  width          : auto;               /* 幅は高さに合わせる    */
  height         : 18px;               /* 画像の高さ            */
  margin         : 0 3 0 0;          /* 余白                  */
  vertical-align : middle;             /* 横の文字位置          */
}
 
 /* === IEの入力エリア右側×消し ============================== */
.search01Text::-ms-clear {
  display        : none;               /* ×を消す              */
}

/* 削除トグルスイッチ */
 /* === ボタンを表示するエリア ============================== */
.switchArea {
  line-height    : 25px;                /* 1行の高さ          */
  letter-spacing : 0;                   /* 文字間             */
  text-align     : center;              /* 文字位置は中央     */
  font-size      : 27px;                /* 文字サイズ         */

  position       : relative;            /* 親要素が基点       */
  margin         : auto;                /* 中央寄せ           */
  width          : 50px;               /* ボタンの横幅       */
  background     : #fff;                /* デフォルト背景色   */
  float:left;
  background    : transparent;           /* 背景色     */
}

 /* === チェックボックス ==================================== */
.switchArea input[type="checkbox"] {
  display        : none;            /* チェックボックス非表示 */
}

 /* === チェックボックスのラベル（標準） ==================== */
.switchArea label {
  display        : block;               /* ボックス要素に変更 */
  box-sizing     : border-box;          /* 枠線を含んだサイズ */
  height         : 25px;                /* ボタンの高さ       */
  border         : 2px solid #999999;   /* 未選択タブのの枠線 */
  border-radius  : 30px;                /* 角丸               */
}

 /* === チェックボックスのラベル（ONのとき） ================ */
.switchArea input[type="checkbox"]:checked +label {
  border-color   : #78bd78;             /* 選択タブの枠線     */
}

 /* === 表示する文字（標準） ================================ */
.switchArea label span:after{
  content        : "";               /* 表示する文字       */
  padding        : 0 0 0 36px;          /* 表示する位置       */
  color          : #999999;             /* 文字色             */
}

 /* === 表示する文字（ONのとき） ============================ */
.switchArea  input[type="checkbox"]:checked + label span:after{
  content        : "削除";                /* 表示する文字       */
  padding        : 0 10px 0 0;          /* 表示する位置       */
  color          : #78bd78;             /* 文字色             */
}

 /* === 丸部分のSTYLE（標準） =============================== */
.switchArea .swImg {
  position       : absolute;            /* 親要素からの相対位置*/
  width          : 15px;                /* 丸の横幅           */
  height         : 15px;                /* 丸の高さ           */
  background     : #999999;             /* カーソルタブの背景 */
  top            : 4px;                 /* 親要素からの位置   */
  left           : 4px;                 /* 親要素からの位置   */
  border-radius  : 26px;                /* 角丸               */
  transition     : .2s;                 /* 滑らか変化         */
}

 /* === 丸部分のSTYLE（ONのとき） =========================== */
.switchArea input[type="checkbox"]:checked ~ .swImg {
  transform      : translateX(30px);    /* 丸も右へ移動       */
  background     : #78bd78;             /* カーソルタブの背景 */
}

/*select01*/
.selectdiv01 {
  position: relative;
  /*Don't really need this just for demo styling*/
  
  float: left;
  min-width: 100px;
  //margin: 50px 33%;
}

.selectdiv01:after {
  content: '<>';
  font: 17px "Consolas", monospace;
  color: #333;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  right: 11px;
  /*Adjust for position however you want*/
  
  top: 1px;
  padding: 0 0 2px;
  border-bottom: 1px solid #999;
  /*left line */
  
  position: absolute;
  pointer-events: none;
}

.selectdiv01 select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Add some styling */
  
  display: block;
  width: 100%;
  max-width: 80px;
  height: 25px;
  float: right;
  margin: 0px 0px;
  padding: 0px 5px;
  //font-size: 16px;
  line-height: 1.75;
  color: #333;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #cccccc;
  -ms-word-break: normal;
  word-break: normal;
}

/*検索エリア02(text+select+button*/
 /* === テキスト入力欄のSTYLE設定 ============================= */
.search02Area{
  width          : 230px;              /* BOXの幅               */
  height         : 25px;               /* BOXの高さ             */
  //margin         : auto;               /* サンプルを中心に寄せ  */
  letter-spacing : 0.1em;              /* 文字間隔              */
  font-weight    : bold;               /* 太字                  */
  //line-height    : 0;                  /* 標準の行高さ          */
  float          : left;               /* 横並び                */
}
 
 /* === テキスト入力欄のSTYLE設定 ============================= */
.search02Text {
  display        : block;              /* ブロック化            */
  float          : left;               /* 横並び                */
  box-sizing     : border-box;         /* 枠線,余白を含んだ長さ */
  height         : 25px;               /* 入力の高さ            */
  width          : 70px;               /* 入力の幅              */
  margin         : 0;                  /* 外余白                */
  padding        : 0 15px;             /* 内余白                */
  border         : 2px solid #007fff;  /* 枠線　幅,実践,色      */
  border-radius  : 8px 0 0 8px;      /* 左上下の角丸          */
  color          : #333;               /* 文字色                */
  font-size      : 18px;               /* フォントサイズ        */
  outline        : 0;                  /* 入力の薄い枠を非表示  */
  transition     : .3s;                /* 滑らかな動き          */
}
 
 /* === 検索ボタン欄のSTYLE設定 =============================== */
.search02Button {
  float          : left;               /* 横並び                */
  box-sizing     : border-box;         /* 枠線,余白を含んだ長さ */
  height         : 25px;               /* 入力の高さ            */
  margin         : 0;                  /* 外余白                */
  padding        : 0px 10px;           /* 内余白                */
  border         : none;               /* 枠線　幅,実践,色      */
  border-radius  : 0 8px 8px 0;      /* 右上下の角丸          */
  background     : #007fff;            /* ボタンの色            */
  color          : #fff;               /* 文字色                */
  cursor         : pointer;            /* カーソル設定          */
}
 
 /* === テキスト入力欄にフォーカスか来たとき ================== */
.search02Text:focus {
  background     : #cfe7ff;            /* フォーカス時の背景色  */
  width          : 170px;              /* 幅を広げる            */
  margin-left    : -100px;             /* 親要素左外に広げる    */
}
 /* === 検索アイコンのSTYLE設定 =============================== */
.search02Img {
  display        : inline-block;       /* インラインブロック化  */
  width          : auto;               /* 幅は高さに合わせる    */
  height         : 18px;               /* 画像の高さ            */
  margin         : 0 3 0 0;          /* 余白                  */
  vertical-align : middle;             /* 横の文字位置          */
}
 
 /* === IEの入力エリア右側×消し ============================== */
.search02Text::-ms-clear {
  display        : none;               /* ×を消す              */
}

.selectdiv02 {
  position: relative;
  /*Don't really need this just for demo styling*/
  
  float: left;
  min-width: 70px;
  //margin: 50px 33%;
}

.selectdiv02:after {
  content: '<>';
  font: 17px "Consolas", monospace;
  color: #333;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  right: 0px;
  /*Adjust for position however you want*/
  
  top: 2px;
  padding: 0 0 2px;
  border-bottom: 1px solid #999;
  /*left line */
  
  position: absolute;
  pointer-events: none;
}

.selectdiv02 select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Add some styling */
  
  display: block;
  width: 100%;
  max-width: 70px;
  height: 25px;
  float: right;
  margin: 0px 0px;
  padding: 0px 5px;
  //font-size: 16px;
  line-height: 1.3;
  color: #333;
  background-color: #ffffff;
  background-image: none;
  //border: 1px solid #cccccc;
  border         : 2px solid #007fff;  /* 枠線　幅,実践,色      */
  -ms-word-break: normal;
  word-break: normal;
}
/*検索エリア03(select+button*/
 /* === テキスト入力欄のSTYLE設定 ============================= */
.search03Area{
  width          : 180px;              /* BOXの幅               */
  height         : 25px;               /* BOXの高さ             */
  //margin         : auto;               /* サンプルを中心に寄せ  */
  letter-spacing : 0.1em;              /* 文字間隔              */
  font-weight    : bold;               /* 太字                  */
  //line-height    : 0;                  /* 標準の行高さ          */
  float          : left;               /* 横並び                */
}
 /* === 検索ボタン欄のSTYLE設定 =============================== */
.search03Button {
  float          : left;               /* 横並び                */
  box-sizing     : border-box;         /* 枠線,余白を含んだ長さ */
  height         : 25px;               /* 入力の高さ            */
  margin         : 0;                  /* 外余白                */
  padding        : 0px 10px;           /* 内余白                */
  border         : none;               /* 枠線　幅,実践,色      */
  border-radius  : 0 8px 8px 0;      /* 右上下の角丸          */
  background     : #007fff;            /* ボタンの色            */
  color          : #fff;               /* 文字色                */
  cursor         : pointer;            /* カーソル設定          */
}
 /* === 検索アイコンのSTYLE設定 =============================== */
.search03Img {
  display        : inline-block;       /* インラインブロック化  */
  width          : auto;               /* 幅は高さに合わせる    */
  height         : 18px;               /* 画像の高さ            */
  margin         : 0 3 0 0;          /* 余白                  */
  vertical-align : middle;             /* 横の文字位置          */
}
.selectdiv03 {
  position: relative;
  /*Don't really need this just for demo styling*/
  
  float: left;
  min-width: 70px;
  //margin: 50px 33%;
}

.selectdiv03:after {
  content: '<>';
  font: 17px "Consolas", monospace;
  color: #333;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  right: 0px;
  /*Adjust for position however you want*/
  
  top: 2px;
  padding: 0 0 2px;
  border-bottom: 1px solid #999;
  /*left line */
  
  position: absolute;
  pointer-events: none;
}

.selectdiv03 select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Add some styling */
  
  display: block;
  width: 100%;
  max-width: 70px;
  height: 25px;
  float: right;
  margin: 0px 0px;
  padding: 0px 5px;
  //font-size: 16px;
  line-height: 1.3;
  color: #333;
  background-color: #ffffff;
  background-image: none;
  //border: 1px solid #cccccc;
  border         : 2px solid #007fff;  /* 枠線　幅,実践,色      */
  border-radius  : 8px 0 0 8px;      /* 左上下の角丸          */
  -ms-word-break: normal;
  word-break: normal;
}

/*IE11だとSELECT右はじの矢印がデフォルトでついてて邪魔，だから消そう，消えるのはDIV傘下だけ，だから使うときは必ずDIV傘下にするようにしよう*/
.selectdiv01 select::-ms-expand {
display: none;
}
.selectdiv02 select::-ms-expand {
display: none;
}
.selectdiv03 select::-ms-expand {
display: none;
}

/*すべてのスクロールバーを丸くする*/
/*スクロールバー*/
::-webkit-scrollbar
{
    width:10px;/*縦スクロールバーの太さ*/
    height:10px;/*横スクロールバーの太さ*/
}
/*スクロールバーの軌道*/
::-webkit-scrollbar-track
{
    background-color:#e6e6fa;
    border-radius:10px;
    box-shadow:inset 0 0 6px rgba(0,0,0,.1);
}
/*スクロールバーの動く部分*/
::-webkit-scrollbar-thumb
{
    /* background-color:rgb(0,0,50,.1); */
    background-color:#b0c4de;
    border-radius:10px;
    box-shadow:0 0 0 1px rgba(255,255,255,.3);
}

/***************************************************************テーブル***********************************************************************************/
 /*********** --- ソート ---------------------------------- ***********/
/* === ソートボタンを表示するエリア ============== */
.tsImgArea{
  line-height: 1;
}
/* === ソートボタン ============================== */
.tsImg{
  display    : inline-block;
  width      : 8px;
  height     : 6px;
  background : #eee;
  border     : 1px solid #777;
  margin     : 1px 3px;
  padding    : 3px;
  cursor     : pointer;
}
/* === ソートボタン（カーソルオーバー時）========= */
.tsImg:hover{
  background : #FFD700;
}
/* === ソートボタン内の三角の色（SVG）============ */
.tsImg path{
  fill       : #777;
}
 /*********** --- ソート ---------------------------------- ***********/

 /*********** --- ヘッダ固定 ---------------------------------- ***********/
/* === スクロールバー ===================== */
.tableArea01 .sBar{
                /* 共通     */
  box-sizing : border-box;
  position   : absolute;
  background : #eee;
  border     : 1px solid #999;
}
.sBar.sNone{                    /* 右下：空 */
  width      : 20px;
  height     : 20px;
  bottom     : 0;
  right      : 0;
  background : #fff;
  border     : none;
}
.sBar.sUP{                      /* 上下：上 */
  width      : 20px;
  top        : 0;
  right      : 0;
  height     : 25px;
  border-bottom-width : 5px;
}
.sBar.sDOWN{                    /* 上下：下 */
  width      : 20px;
  top        : 0;
  bottom     : 20px;
  right      : 0;
}
.sBar.sLEFT{                    /* 左右：左 */
  height     : 20px;
  bottom     : 0;
  left       : 0;
  width      : 25px;
  border-right-width : 5px;
}
.sBar.sRIGHT{                   /* 左右：右 */
  height     : 20px;
  bottom     : 0;
  right      : 20px;
  left       : 20px;
}
/* === スクロールの三角マーク位置合わせ === */
.sImg{                          /* 共通     */
  display    : block;
  position   : absolute;
  width      : 10px;
  height     : 10px;
}
.sImg.iUP{                      /* 上下：上 */
  top        : 5px;
  right      : 5px;
}
.sImg.iDOWN{                    /* 上下：下 */
  bottom     : 25px;
  right      : 5px;
}
.sImg.iLEFT{                    /* 左右：左 */
  bottom     : 5px;
  left       : 5px;
}
.sImg.iRIGHT{                   /* 左右：右 */
  bottom     : 5px;
  right      : 25px;
}
 /*********** --- ヘッダ固定 ---------------------------------- ***********/

 /*********** --- ファイル保存 ---------------------------------- ***********/
 /* --- ボタン ---------------------------------- */
.downloadButton {
  display       : inline-block;
  border-radius : 10px;             /* 角丸       */
  font-size     : 12pt;             /* 文字サイズ */
  font-weight   : bold;             /* 太字       */
  text-align    : center;           /* 文字位置   */
  cursor        : pointer;          /* カーソル   */
  padding       : 15px 30px;        /* 余白       */
  background    : #0059b3;          /* 背景色     */
  color         : #fff;             /* 文字色     */
  line-height   : 1em;              /* 1行の高さ  */
  transition    : .2s;              /* なめらか変化 */
  border        : 2px solid #0059b3; /* 枠の指定  */
}
.downloadButton:hover {
  color         : #0059b3;          /* 背景色     */
  background    : #fff;             /* 文字色     */
}

 /* --- 結果メッセージ -------------------------- */
.msgArea{
  font-size     : 12pt;             /* 文字サイズ */
  font-weight   : bold;             /* 太字       */
  text-align    : center;           /* 文字位置   */
  margin        : 10px;             /* 余白（外） */
  padding       : 5px 10px;         /* 余白（内） */
  border-width  : 2px;              /* 罫線太さ   */
  border-style  : solid;            /* 実線       */
  animation     : msgAreaAnime 2s;  /* アニメ     */
}
@keyframes msgAreaAnime {
  0%  { opacity : 0; }              /* 透明       */
  100%{ opacity : 1; }              /* 不透明     */
}
 /* --- （正常メッセージ） -----------------------*/
.rcOk {
  color         : #2b6fb2;          /* 文字色     */
  background    : #deeaf7;          /* 背景色     */
  border-color  : #2b6fb2;          /* 罫線色     */
  
  font-size     : 12pt;             /* 文字サイズ */
  font-weight   : bold;             /* 太字       */
  text-align    : center;           /* 文字位置   */
  margin        : 10px;             /* 余白（外） */
  padding       : 5px 10px;         /* 余白（内） */
  border-width  : 2px;              /* 罫線太さ   */
  border-style  : solid;            /* 実線       */
  animation     : msgAreaAnime 2s;  /* アニメ     */
}
 /* --- （エラー） -------------------------------*/
.rcError {
  color         : red;              /* 文字色     */
  background    : #ffddee;          /* 背景色     */
  border-color  : red;              /* 罫線色     */
  
  font-size     : 12pt;             /* 文字サイズ */
  font-weight   : bold;             /* 太字       */
  text-align    : center;           /* 文字位置   */
  margin        : 10px;             /* 余白（外） */
  padding       : 5px 10px;         /* 余白（内） */
  border-width  : 2px;              /* 罫線太さ   */
  border-style  : solid;            /* 実線       */
  animation     : msgAreaAnime 2s;  /* アニメ     */
}
 /*********** --- ファイル保存 ---------------------------------- ***********/

 /*********** --- フィルタ ---------------------------------- ***********/
 /* === フィルタボタン ============================ */
.tfArea{
  display    : inline-block;
  position   : relative;
}
.tfImg{
  display    : inline-block;
  width      : 8px;
  height     : 8px;
  background : #eee;
  border     : 1px solid #777;
  margin     : 1px 3px;
  padding    : 3px;
  cursor     : pointer;
}
/* === フィルタボタン（カーソルオーバー時）======= */
.tfImg:hover{
  background : #FFD700;
}
/* === フィルタボタン内の画像色（SVG）============ */
.tfImg path{
  fill       : #777;
}
/* === フィルタリスト ============================ */
.tfList{
  display    : inline-block;
  position   : absolute;
  max-width  : 250px;
  min-width  : 140px;
  background : #fff;
  border     : 1px solid #777;
  top        : 15px;
  left       : 0;
  line-height: 1.1;
  font-weight: normal;
}
/* === フィルタリスト内のform ==================== */
.tfList form{
  max-height : 150px;           /* 縦幅 */
  overflow   : scroll;
  overflow   : overflow-y;
  overflow   : auto;
}
/* === フィルタリスト内のチェックボックス ======== */
.tfMeisai{
  text-align : left;
  padding    : 2px;
}
/* === フィルタリスト内の文字位置合わせ ========== */
.tfMeisai label{
  padding    : 0 10px 0 3px;
}
/* === OK/CANCELボタン =========================== */
.tfBtnArea{
  text-align : center;
  font-size  : 8pt;
  padding    : 3px 5px;
}
.tfBtnArea input{
  display    : inline-block;
  margin     : 0 5px;
}
/* === 含むボタンの入力エリア ==================== */
.tfInStr{
  padding    : 5px 3px;
  border-top : 1px solid #999;
  border-bottom: 1px solid #999;
}
.tfInStr input{
  box-sizing : border-box;
  width      : 100%;
  padding    : 1px 3px;
  font-weight: normal;
  font-size  : 95%;
  border     : 1px solid #ccc;
}
/* === フィルタ非表示 ============================ */
.table01 tr[cmanFilterNone]{
  display    : none;
}
/* === フィルタ非表示行と次行の間を二重線にする == */
.table01 tr[cmanFilterNone] + tr td{
  border-top : 3px double #777;
}
 /*********** --- フィルタ ---------------------------------- ***********/

 /* --- （参考）テーブル全体のスタイル指定 ------- */
.table01 {
  width          : 100%;             /* 100%幅     */
  border-collapse: separate;         /* 境界線結合 */
  border-spacing : px;            /* 罫線間余白 */
  font-size      : 9pt;              /* 文字サイズ */
  background     : transparent;          /* テーブル全体の背景色 */
  table-layout: auto;
}
 /* --- ヘッダーのスタイル指定 ------------------- */
.table01 th {
  text-align    : center;            /* 文字位置   */
  font-weight   : bold;              /* 太文字     */
  padding       : 0px 0px;           /* 余白       */
  border        : 1px #666666 solid; /* 罫線       */
  background    : #6666ff;           /* 背景色     */
  white-space   : nowrap;
  color:#000000;
}
 /* --- 明細のスタイル指定 ----------------------- */
.table01 td {
  text-align    : center;            /* 文字位置   */
  padding       : 0px 0px;           /* 余白       */
  border        : 1px #666666 solid; /* 罫線       */
  white-space   : nowrap;
}
 /* --- 明細のｎ行スタイル指定 ------------------- */
 .table01 tr:nth-child(2n) {
  background    : #ffffff;           /* 背景色     */
}
.table01 tr:nth-child(2n+1) {
  background    : #e5e5e5;           /* 背景色     */
}
 /* --- 明細のｎ行にカーソルが乗ったとき ---------- */
 /*重要：下位のTD要素にbackground-colorを指定していると動作しない*/
.table01 tr:hover {
  background    : #acf2ac !important;           /* 背景色    */
                box-shadow: 0px 0px 14px rgba(0,0,0,.3);
                transform: translateZ(4px);
}
 /* --- セルにカーソルが乗ったとき --------------- */
.table01 td:hover {
  background    : #ff7f50 !important;           /* 背景色    */
  color         : #ffffff !important;           /* 文字色    */
}
 /* --- （参考）テーブル全体のスタイル指定 ------- */
.table02 {
  width          : 100%;             /* 100%幅     */
  border-collapse: separate;         /* 境界線結合 */
  border-spacing : px;            /* 罫線間余白 */
  font-size      : 9pt;              /* 文字サイズ */
  background     : transparent;          /* テーブル全体の背景色 */
  table-layout: auto;
}
 /* --- ヘッダーのスタイル指定 ------------------- */
.table02 th {
  text-align    : center;            /* 文字位置   */
  font-weight   : bold;              /* 太文字     */
  padding       : 0px 0px;           /* 余白       */
  border        : 1px #666666 solid; /* 罫線       */
  background    : #6666ff;           /* 背景色     */
  white-space   : nowrap;
  color:#000000;
}
 /* --- 明細のスタイル指定 ----------------------- */
.table02 td {
  text-align    : center;            /* 文字位置   */
  padding       : 0px 0px;           /* 余白       */
  border        : 1px #666666 solid; /* 罫線       */
  white-space   : nowrap;
}
 /* --- 明細のｎ行スタイル指定 ------------------- */
.table02 tr:nth-child(2n) {
  background    : #ffffff;           /* 背景色     */
}
.table02 tr:nth-child(2n+1) {
  background    : #e5e5e5;           /* 背景色     */
}
 /* --- 明細のｎ行にカーソルが乗ったとき ---------- */
.table02 tr:hover {
  background    : #acf2ac !important;           /* 背景色    */
}
 /* --- セルにカーソルが乗ったとき --------------- */
.table02 td:hover {
  background    : #ff7f50 !important;           /* 背景色    */
  color         : #ffffff !important;           /* 文字色    */
}
/***************************************************************テーブル***********************************************************************************/
/***************************************************************CSSで作るアイコン***********************************************************************************/
/* iconの共通CSS */
.icon{
    display:inline-block; 
    position:relative;
    background: #999;
    border-radius:90px;
    width:90px;
    height:90px;
    margin:5px;
}
.icon:hover{
    opacity: 0.8;
}

/* ライト */
.icon1:before{
    content:''; 
    display:block; 
    position:absolute; 
    top:20px; 
    left:30px; 
    border-radius:30px;
    height:30px; 
    width:30px; 
    background-color:#fff;
}
.icon1:after{
    content:''; 
    display:block; 
    position:absolute; 
    top:56px; 
    left:37px; 
    height:5px; 
    width:16px;
    border-top:4px solid #fff;
    border-bottom:4px solid #fff;
}

/* チェックマーク */
.icon2:after, .icon2:before{
    content:''; 
    display:block; 
    position:absolute; 
    top:28px; 
    left:49px; 
    height:38px; 
    width:8px; 
    background:#fff; 
    border-radius:10px;
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -o-transform:rotate(45deg);
}
.icon2:before{
    top:39px; 
    left:31px;
    height:24px; 
    transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
}

/* 丸 */
.icon3:after{
    content:''; 
    display:block; 
    position:absolute; 
    top:24px; 
    left:24px; 
    border-radius:30px;
    height:30px; 
    width:30px; 
    border:6px solid #fff;
}
/* バツ */
.icon4:before, .icon4:after{
    content:''; 
    display:block; 
    position:absolute; 
    top:25px; 
    left:41px;
    height:40px; 
    width:7px; 
    background:#fff; 
    border-radius:10px;
    transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
}
.icon4:after{
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -o-transform:rotate(45deg);
}

/* プラス */
.icon5:before, .icon5:after{
    content:''; 
    display:block; 
    position:absolute; 
    top:25px; 
    left:41px;
    height:40px; 
    width:7px; 
    background:#fff; 
    border-radius:10px;
}
.icon5:before{
    top:41px; 
    left:25px;
    height:7px; 
    width:40px; 
}

/* 下向きの三角 */
.icon6:before{
    content:''; 
    display:block; 
    position:absolute; 
    height:0; 
    width:0; 
    top:33px; 
    left:25px;
	border-top: 30px solid #fff;
	border-right: 20px solid transparent;
	border-bottom: 30px solid transparent;
	border-left: 20px solid transparent;
}

/* 右向きの三角 */
.icon7:before{
    content:''; 
    display:block; 
    position:absolute; 
    height:0; 
    width:0; 
    top:25px; 
    left:33px;
	border-top: 20px solid transparent;
	border-right: 30px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 30px solid #fff;
}

/* 上向きの三角 */
.icon8:before{
    content:''; 
    display:block; 
    position:absolute; 
    height:0; 
    width:0; 
    top:-3px; 
    left:25px;
	border-top: 30px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 30px solid #fff;
	border-left: 20px solid transparent;
}

/* 左向きの三角 */
.icon9:before{
    content:''; 
    display:block; 
    position:absolute; 
    height:0; 
    width:0; 
    top:25px; 
    left:-3px;
	border-top: 20px solid transparent;
	border-right: 30px solid #fff;
	border-bottom: 20px solid transparent;
	border-left: 30px solid transparent;
}


/* 下向きの矢印 */
.icon10:before{
    content:''; 
    display:block; 
    position:absolute; 
    height:0; 
    width:0; 
    top:50px; 
    left:30px;
	border-top: 20px solid #fff;
	border-right: 15px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 15px solid transparent;
}
.icon10:after{
    content:''; 
    display:block; 
    position:absolute; 
    top:25px; 
    left:41px;
    height:40px; 
    width:7px; 
    background:#fff; 
    border-radius:10px;
}

/* 右向きの矢印 */
.icon11:before{
    content:''; 
    display:block; 
    position:absolute; 
    height:0; 
    width:0; 
    top:30px; 
    left:50px;
	border-top: 15px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 20px solid #fff;
}
.icon11:after{
    content:''; 
    display:block; 
    position:absolute; 
    top:41px; 
    left:25px;
    height:7px; 
    width:40px; 
    background:#fff; 
    border-radius:10px;
}

/* 上向きの矢印 */
.icon12:before{
   content:''; 
    display:block; 
    position:absolute; 
    height:0; 
    width:0; 
    top:0px; 
    left:30px;
	border-top: 20px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 20px solid #fff;
	border-left: 15px solid transparent;
}
.icon12:after{
    content:''; 
    display:block; 
    position:absolute; 
    top:25px; 
    left:41px;
    height:41px; 
    width:7px; 
    background:#fff; 
    border-radius:10px;
}

/* 左向きの矢印 */
.icon13:before{
    content:''; 
    display:block; 
    position:absolute; 
    height:0; 
    width:0; 
    top:30px; 
    left:0px;
	border-top: 15px solid transparent;
	border-right: 20px solid #fff;
	border-bottom: 15px solid transparent;
	border-left: 20px solid transparent;
}
.icon13:after{
    content:''; 
    display:block; 
    position:absolute; 
    top:41px; 
    left:25px;
    height:7px; 
    width:40px; 
    background:#fff; 
    border-radius:10px;
}

/* メニュー（四角と横の3本線） */
.icon14:before{
    content:''; 
    display:block; 
    position:absolute; 
    top:32px; 
    left:30px;
    height:5px; 
    width:30px;
    background:#fff; 
    box-shadow:0 10px #fff, 0 20px #fff;
    -webkit-box-shadow:0 10px #fff, 0 20px #fff;
}
.icon14:after{
    content:''; 
    display:block; 
    position:absolute; 
    top:22px; 
    left:22px;
    height:35px; 
    width:36px;
    border:5px solid #fff;
}


/* メニュー（横の3本線） */
.icon15:before{
    content:''; 
    display:block; 
    position:absolute; 
    top:30px; 
    left:25px;
    height:6px; 
    width:40px;
    background:#fff; 
    border-radius:4px;
    box-shadow:0 12px #fff, 0 24px #fff;
    -webkit-box-shadow:0 12px #fff, 0 24px #fff;
}

/* メニュー（縦の3本線） */
.icon16:before{
    content:''; 
    display:block; 
    position:absolute; 
    top:25px; 
    left:30px;
    height:40px; 
    width:6px;
    background:#fff; 
    border-radius:4px;
    box-shadow:12px 0 #fff, 24px 0 #fff;
    -webkit-box-shadow:12px 0 #fff, 24px 0 #fff;
}

/* ・・・ */
.icon17:before{
    content:''; 
    display:block; 
    position:absolute; 
    top:41px; 
    left:30px;
    height:8px; 
    width:8px;
    background:#fff; 
    border-radius:8px;
    box-shadow:12px 0 #fff, 24px 0 #fff;
    -webkit-box-shadow:12px 0 #fff, 24px 0 #fff;
}

/* バッテリー1 */
.icon18:before{
    content:''; 
    display:block; 
    position:absolute; 
    top:41px; 
    left:30px;
    height:9px; 
    width:8px;
    background:#fff; 
    box-shadow:35px 0 0 1px #fff;
    -webkit-box-shadow:35px 0 0 1px #fff;
}
.icon18:after{
    content:''; 
    display:block; 
    position:absolute; 
    top:33px; 
    left:22px;
    height:15px; 
    width:34px;
    border:5px solid #fff;
}

/* バッテリー2 */
.icon19:before{
    content:''; 
    display:block; 
    position:absolute; 
    top:41px; 
    left:30px;
    height:9px; 
    width:8px;
    background:#fff; 
    box-shadow:10px 0 #fff, 35px 0 0 1px #fff;
    -webkit-box-shadow:10px 0 #fff, 35px 0 0 1px #fff;
}
.icon19:after{
    content:''; 
    display:block; 
    position:absolute; 
    top:33px; 
    left:22px;
    height:15px; 
    width:34px;
    border:5px solid #fff;
}

/* バッテリー3 */
.icon20:before{
    content:''; 
    display:block; 
    position:absolute; 
    top:41px; 
    left:30px;
    height:9px; 
    width:8px;
    background:#fff; 
    box-shadow:10px 0 #fff, 20px 0 #fff, 35px 0 0 1px #fff;
    -webkit-box-shadow:10px 0 #fff,20px 0 #fff, 35px 0 0 1px #fff;
}
.icon20:after{
    content:''; 
    display:block; 
    position:absolute; 
    top:33px; 
    left:22px;
    height:15px; 
    width:34px;
    border:5px solid #fff;
}

/* 電波 */
.icon21:before{
    content:''; 
    display:block; 
    position:absolute; 
    top:40px; 
    left:30px;
    height:25px; 
    width:6px;
    background:#fff; 
    box-shadow:12px 0 #fff, 12px -9px #fff, 24px 0 #fff, 24px -18px #fff;
    -webkit-box-shadow:12px 0 #fff, 12px -9px #fff, 24px 0 #fff, 24px -18px #fff;
}

/* ファイル */
.icon22:before{
    content:''; 
    display:block; 
    position:absolute; 
    top:39px; 
    left:29px;
    height:12px; 
    width:30px;
    border:3px solid #fff;    
}
.icon22:after{
    content:''; 
    display:block; 
    position:absolute; 
    top:33px; 
    left:22px;
    height:15px; 
    width:34px;
    background:#fff;
    border:3px solid #999;    
}


/* びっくりマーク */
.icon23:before{
    content:''; 
    display:block; 
    position:absolute; 
    height:0; 
    width:3px; 
    top:20px; 
    left:35px;
    border-radius:5px;
	border-top: 35px solid #fff;
	border-right: 7px solid transparent;
	border-bottom: 35px solid transparent;
	border-left: 7px solid transparent;
    transform:rotate(10deg);
    -webkit-transform:rotate(10deg);
    -o-transform:rotate(10deg);
}
.icon23:after{
    content:''; 
    display:block; 
    position:absolute; 
    top:60px; 
    left:37px;
    height:10px; 
    width:10px; 
    background:#fff;
    border-radius:10px;
    transform:rotate(10deg);
    -webkit-transform:rotate(10deg);
    -o-transform:rotate(10deg);
}


/* フキダシ(四角) */
.icon24:before{
    content:''; 
    display:block; 
    position:absolute; 
    height:0; 
    width:0px; 
    top:55px; 
    left:38px;
	border-top: 10px solid #fff;
	border-right: 7px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 7px solid transparent;
}
.icon24:after{
    content:''; 
    display:block; 
    position:absolute; 
    top:25px; 
    left:25px;
    height:30px; 
    width:40px; 
    background:#fff;
    border-radius:3px;
}

/* フキダシ(丸) */
.icon25:before{
    content:''; 
    display:block; 
    position:absolute; 
    height:0; 
    width:0px; 
    top:55px; 
    left:38px;
	border-top: 10px solid #fff;
	border-right: 7px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 7px solid transparent;
}
.icon25:after{
    content:''; 
    display:block; 
    position:absolute; 
    top:28px; 
    left:30px;
    height:30px; 
    width:30px; 
    background:#fff;
    border-radius:30px;
}

/* ホーム */
.icon26:before{
    content:''; 
    display:block; 
    position:absolute; 
    top:40px; 
    left:30px; 
    height:20px; 
    width:30px; 
    background:#fff;
}
.icon26:after{
    content:''; 
    display:block; 
    position:absolute; 
    height:0; 
    width:0; 
    top:5px; 
    left:25px;
	border-top: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 19px solid #fff;
	border-left: 20px solid transparent;
}


/* ホーム2 */
.icon27:before{
    content:''; 
    display:block; 
    position:absolute; 
    top:40px; 
    left:30px; 
    height:10px; 
    width:10px; 
    border:10px solid #fff;
    border-bottom:0;
}
.icon27:after{
    content:''; 
    display:block; 
    position:absolute; 
    height:0; 
    width:0; 
    top:5px; 
    left:25px;
	border-top: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 19px solid #fff;
	border-left: 20px solid transparent;
}

/* ライト */
.icon28:before{
    content:''; 
    display:block; 
    position:absolute; 
    top:20px; 
    left:30px; 
    border-radius:30px;
    height:30px; 
    width:30px; 
    background-color:#fff;
}
.icon28:after{
    content:''; 
    display:block; 
    position:absolute; 
    top:25px; 
    left:41px;
    height:40px; 
    width:7px; 
    background:#fff; 
    border-radius:10px;
}

/* ライト */
.icon29:before{
    content:''; 
    display:block; 
    position:absolute; 
    top:23px; 
    left:25px; 
    border-radius:30px;
    height:20px; 
    width:20px; 
    border:6px solid #fff;
}
.icon29:after{
    content:''; 
    display:block; 
    position:absolute; 
    top:43px; 
    left:53px;
    height:25px; 
    width:7px; 
    background:#fff; 
    border-radius:10px;
    transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
}

/* 禁止 */
.icon30:before{
    content:''; 
    display:block; 
    position:absolute; 
    top:25px; 
    left:25px; 
    border-radius:30px;
    height:30px; 
    width:30px; 
    border:6px solid #fff;
}
.icon30:after{
    content:''; 
    display:block; 
    position:absolute; 
    top:29px; 
    left:43px;
    height:36px; 
    width:7px; 
    background:#fff; 
    transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
}
/***************************************************************CSSで作るアイコン***********************************************************************************/
/*スマホ用共通アイコン*/
#smpReturnHome
{
    position: fixed;
    top: 40px;
    right: 20px;
    opacity:0.5;
    z-index:2;
    transform:scale(3.0);
    cursor:pointer;
}
#smpReturnHome:before
{
    font-family: "Font Awesome 5 Free";
    content: '\f015';
    font-weight: 900;
    color:#ff00ff;
}
#smpLogout
{
    position: fixed;
    top: 40px;
    right: 40px;
    opacity:0.5;
    z-index:2;
    transform:scale(3.0);
    cursor:pointer;
}
#smpLogout:before
{
    font-family: "Font Awesome 5 Free";
    content: '\f2f5';
    font-weight: 900;
    color:#ff00ff;
}
#smpPlus01
{
    position: fixed;
    bottom: 150px;
    right: 40px;
    opacity:0.5;
    z-index:2;
    transform:scale(3.0);
    cursor:pointer;
}
#smpPlus01:before
{
    font-family: "Font Awesome 5 Free";
    content: '\f067';
    font-weight: 900;
    color:#ff00ff;
}
/*スマホ用共通アイコン*/
</style>