/*
    jobSystem 1.0 default@eclat common.css Lv.408
    file http://www.eclat.cc/home/default/common.css create Sat, 14 Feb 2015 05:12:25 GMT (ver1.0)
    (C) nancyan update Sun, 05 Jul 2020 05:10:01 GMT
*/
/*
@font-face {
  font-family:YuGothicM;
  src:local("Yu Gothic Medium");
}
*/
* {
  box-sizing:border-box;
  margin:0; padding:0;
}
html {
  scroll-behavior:smooth;
  font-size:100%;
  @media (min-width: 480px) { font-size: calc(112.5% + 4 * (100vw - 480px) / 400) ;}
  @media (min-width:800px) { font-size:calc(137.5%); }
}

body {
  -webkit-text-size-adjust:100%; 
  font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
}
/*
@media (min-width:1024px) {
  padding-left:250px;


}
*/
.for-owner, .for-guest { display:none; }
*:before, *:after { white-space:pre-wrap; }



input[type="submit"] { /* コマンドの送信 */
  display:inline-block;
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid #ccc;
  box-shadow:2px 2px 2px #808080;
  text-align:center;
}

input[type="submit"]:hover {
  color:magenta;
  background-color:#ffc;
}

input[type="submit"]:active {
  box-shadow:-2px -2px 2px #808080;
  color:red;
}
select {
  font:105%/1.2 "Times New Roman";

  padding:2px 4px 2px 12px; text-align:center;
  background-color:#600; color:#ff9;
  border:1px solid #808080;
  border-radius:50%; min-width:6em;
  box-shadow:2px 2px 2px #808080;

}
select.jp {
  font:95%/1.0 meiryo,"メイリオ";
}
option {
  border:1px solid #808080;

  border-radius:50%; text-align:center;
  padding:2px 0;
  background-color:#900; color:#ffa;

}
.text-label { /* oidと入力欄の領域 */
  display:inline-block;
  font:110%/1.2 "Times New Roman";
  padding:3px; box-shadow:2px 2px 2px #808080;
  text-align:center;
  background-color:#600;
  border:1px dotted #900;
  border-radius:3px;
}

/* アイコンの設定（共通） */
.ico {
  display:inline-block;
  position:fixed; /* 基本・固定 */
  top:6px; /* 基本・右上に配置 */
  z-index:30; /* 他より大きく、p.respより小さく指定 */
  width:70px; height:70px; /* ここは規定値 */
  text-align:center; /* 画像は中央で */
  border-radius:50%; /* まん丸な円が好き */
  cursor:pointer; /* コマンドの証 */
  border:2px solid transparent; /* 領域の確保 */
}
#ico0, #ico1 { background-color:#fff; }
#ico0 { right:65px; } /* ico0とico1の位置の関係を同じく */
#ico1 { right:5px; }
#ico2.ico, .frame #ico3.ico { position:absolute; } /* ここは上へ流れるようにする */
.frame #ico2 { left: 24px; top:38px; }
.istop #ico2 { left:calc(20% + 88px); top:38px; }
.frame #ico3 { right:125px; } /* リロードボタン */
.istop #ico3 { left:calc(20% - 76px); top:10px; } /* ここは規定値 */

.ico:hover {
  background-color:#ff9;
  border:2px solid brown;
  transform:rotate(10deg);
  z-index:32;
}
#ico1.ico:hover, #ico3.ico:hover {
  transform:rotate(-10deg);
}
/* 上へ戻るボタン */
.to-button {
  position:fixed; display:none;
  right:16px; z-index:10;
  width:60px; height:60px;
  background-color:#ffc;
  background-image:url("/home/default/files/yosei_0.gif");
  background-repeat:no-repeat;
  background-size:contain;
  background-position:50% 50%;
  border-radius:50%; border:2px solid #ccc;
  cursor:pointer
}

#toTopIco { bottom:16px; display:inline-block ;}
body.moves #toTopIco { background-color:pink; }
#toTopIco.go { box-shadow:0 -2px 2px #000; }

#toBottomIco { top:96px; }
body.moves #toBottomIco { background-color:violet; }
body.move0 #toBottomIco { display:inline-block }
#toBottomIco.go { box-shadow:0 2px 2px #000; }

#toLeftIco { top:32px; background-image:url("/home/default/files/yosei_1.gif");}
body.move1 #toLeftIco { display:inline-block; }
#toLeftIco.go { box-shadow:-2px 0 2px #000; }

@media (max-width: 480px) {
  .to-button { width:50px; height:50px; right:8px; }
  #toBottomIco { top:86px; }
}


/* 『拡張メニュー』　メインと日記の新規窓で左側に生成   */
html.frame #menuDisp { display:none; } /* フレームの時は使わない */
html.istop #menuDisp {
  left:0; top:0;
  width:20%; position:fixed; /* フレームのメニューと同じようにする */
  height:100%; overflow:auto;
/*  padding:1em 0em 1em 2em; */
  word-wrap:break-word; /* リンク文字が横に出ない様に折り返し許可する */
}
.logo { /* メニュー欄の上部、ロゴ */
  font:20px/28px "Times New Roman";
  padding-left:10px; padding-top:8px;
  position:fixed; left:0; top:0; width:20%; /* フレームのロゴと同じに */
  z-index:10; height:90px;
  border:3px double #808080;
  border-radius:8px;
}
.logo .s1 { /* ロゴの装飾、最初の文字 */
  font-size:28px;　/* 頭文字は大きく */
　line-height:28px; /* 上下の余白の調整 */
  color:green; /* 緑が好き♪ */
}
.logo .s2 { color:red; } /* アクセントは赤が好き♪ */
.logo .ico3 { /* リロードアイコン */
  position:absolute;
  top:10px; right:3px; /* ここは定位置 */
}

#attrDisp {
  position:absolute;
  top:94px; left:0; width:100%;
  height:calc(100% - 98px);
  overflow:auto; padding:0 1em 1em 2em;
}
#menuDisp li {
  font:100%/1.5 "Times New Roman";
} 

#codeDisp {
  margin:1.5em 0;
}
.sleep { display:none; }
.func { color:lime; }


/* コードシステム createCodeで生成 */
code[class] { /* 要素にclassを入れると生成される */
  line-height:1.5;
  counter-reset:cnt;
  display:block;
  color:#ff6;
  background-color:#300;
  letter-spacing:1px;
  overflow:auto;
  border-radius:3px;
  white-space:pre-wrap;
  padding:1vw;
}

code[id]:before {
  display:inline-block;
  padding:.25em 1em;
  margin-bottom:.5em;
  color:#000;
  font:110%/1.5 "Times New Roman";
  content:url(/home/default/files/yosei_0.gif) " createCode 1.5 / " attr(class) " / " attr(id);
  box-shadow:0 2px 2px #808080;
}

code[class] div * { display:inline-block; }
code[class] br { display:none; }
code[class] div {
  white-space:pre-wrap;
  border-bottom:1px solid #330;
}
code[class] div:before {
  display:inline-block;
  font:80%/1.6 Arial;
  counter-increment:cnt; 
  padding-right:6px;
}

code[class] div[class]:before {
  content:counter(cnt);
  width:4ex;
  border-left:6px solid #300;
  border-right:6px solid #300;
  text-align:right;
  background-color:#600;
  color:#f9c;
}

code .js i, code .css i, code .html i {
  color:lightblue;
  font-style:normal;
}
code i.value {
  margin:0 .5ex 0 1ex;
}
code i.quote {
  color:#ffefff;
  margin:0 1px;
}
code .sel i.quote { color:#fc6; }
code .css span.sel { color:lime; }
code .com-s {
  background-color:#333;
  border-radius:1.2em;
  padding:0 8px;
  font-size:90%;
  line-height:1.2;
  border:1px dotted #eee;
  color:lightblue;
}
code .com {
  color:#eee;
  background-color:#339;
  width:calc(100% - 4em);
  padding-left:8px;
  border-radius:1.2em;
  font-size:90%; 
  line-height:1.2;
  border:1px dotted #eee;
}
code .k+.com-s {
  background-color:#369;
  color:#fff;
  margin-left:1ex;
  font-size:90%;
  border:1px dotted #ccc;
}
code .js .com-s { color:lightblue; }
code .css .w { /* 区別しにくい文字、コロンとカンマとドット */
  color:#eee;
  margin-left:2px;
  margin-right:2px;
}
code .js .w {
  color:lightblue;
  margin-left:2px;
  margin-right:2px;
}
code .multi {
  font-family:"Times New Roman";
  color:#ccc;
}
code .multi .w { color:#000; }

code[class] div.multi:before, code[class] div[class]:empty:before {
  background-color:transparent;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  color:#808080;
}
code .list:before { content:"・"; color:white; }

#codeDisp code:not([id]):after {
  display:block;
  margin:2em; color:#ffefff;
  content:"※CSSのプロパティと値の間の余白はマージンで1ex広げています。";
}




#sortDisp {
  display:inline-block;
  cursor:pointer;
  font:90%/1.2 meiryo,"メイリオ";
}
.sort-on #sortDisp {
  background-color:#ff9;
  color:#339;

}
#infoDisp {
  margin-left:1em;
  font:100%/1.3 "Times New Roman";
}


.ssc > a[target]::before {
  display:inline-block; width:0; height:0;
  border:7px solid transparent; content:"";
  vertical-align:middle;
}
.ssc > a[target="main_default"]::before { border-left:5px solid #00f; }
.ssc > a[target="main_eclat-io"]::before { border-left:5px solid #f00; }
.ssc > a[target="_blank"]::before { border-left:5px solid green; }
.ssc > a:not([target])::before { border-left:5px solid darkgreen; }
.default-key {
  background-color:rgba(153, 255, 119, 0.6);
}
.fx-key {
  background-color:rgba(153, 255, 119, 0.6);
}
.sys-no {
  display:inline-block;
  min-width:4em; padding-right:.5em;
  text-align:right;
  background-color:rgba(255, 153, 204, 0.7);
}

/* --------- フッター------- */

.esc-footer {
  word-wrap:break-word;
  border-top:1px solid #808080;
  padding-top:.5em;
  margin:3em 1em;
  font:90%/1.4 Verdana;
  color:#333;
}
.esc-footer .esf {
  background-image:url("/home/yadokari/files/wee01b.gif");
  background-repeat:no-repeat;
  background-position:right bottom;
  background-size:contain;
  margin-bottom:1em;
  padding-bottom:.5em;
  border-bottom:1px solid #808080;
}
.esf div {
  background-color:rgba(255,255,255,.7);
}
.esc-footer a {
  text-decoration:underline;
}
.esc-footer .esv, .esc-footer .ua {
  border-top:1px solid #808080;
  padding-top:.5em; padding-bottom:.5em;
}
#escFooter .sp {
  display:inline-block;
  color:tomato;
  margin-left:2ex;
}
.me1, .me2 {
  background-repeat:no-repeat;
  padding-left:40px; min-height:3em;
}
.me1 { background-image:url("/home/yadokari/files/hamu_folder1.gif"); }
.me2 { background-image:url("/home/yadokari/files/hamu_folder2.gif"); }








/* フッターのリンク */
.css-rel a {
  display:inline-block;
  text-decoration:none;
  border:1px solid #808080;
  border-radius:6px;
  box-shadow:2px 2px 2px #ccc;
  margin:1em;
  min-width:5em;
  text-align:center;
  line-height:2.3em;
}
.css-rel div { margin:1em 0; }



.ssc2 {
  border-bottom:1px solid #808080;
  padding-bottom:1em;
  margin-bottom:1em;

}
.ssc2-1 {
  position:relative;
  display:inline-block;
  width:234px;
  background-repeat:no-repeat;
  padding:6px 6px 6px 50px;
  background-color:#ccf;
  background-image:url("/home/yadokari/files/hamu_folder1.gif");
  background-position:8px center;
  cursor:pointer; 
  border:1px solid #808080;
  border-radius:3px;
  transition:background-color 1s ease;
}
.ssc2-1:before {
  position:absolute;
  right:12px;
  top:20px;
  content:"▲";
}
.no-sleep .ssc2-1:before {
  content:"▼";
}
.ssc2-1 div {
  font:bold 16px/23px "Times New Roman";
}
.ssc2-2 {
  margin-top:.5em;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  height:125px;
  -webkit-overflow-scrolling:touch; 
}

.ssc2-2 a {
  display:inline-block;
  width:125px;
  height:125px;
  border-radius:2px;
  vertical-align:bottom;
  margin-right:.5em;
  font:18px/45px "Times New Roman";
  text-decoration:none;
  text-align:center;
 /* box-shadow:4px 4px 4px #808080;*/
  border:1px solid #808080;
  transition:background-color .6s ease;
}
.ssc2-2 a:before {
  display:block;
  font:13px/25px "Times New Roman";
}
.ssc2-2 a[target="_top"]:before {
  background-color:#000;
  content:"_top";
  color:#ffc;
}
.ssc2-2 a[target="_blank"]:before {
  background-color:#0f0;
  content:"_blank";
  color:#606;
}
.ssc2-2 a:not([target]):before {
  background-color:#00f;
  content:"main_default";
  color:#fff;
}
.ssc2-2 a[target="main_default"]:before  {
  background-color:#00f;
  content:"main_default";
  color:#fff;
}
.ssc2-2 a[target="main_eclat-io"]:before { 
  background-color:#f00;
  content:"main_eclat-io";
  color:#0ff;
}

.ssc2 a:hover {
  background-color:#ff9;
}
.ssc2-1.hover {
  background-color:#eee;
}

.no-sleep .ssc2-2 {
  display:none;
}




/* --------- ロゴ　フレームコントロール --------- */

.default-logo {
/*  margin:1em 1em 2em 1em;*/
  padding:1em;
}
.default-logo a {
  text-decoration:none;
  outline:none;
}
.default-info {

}
.default-title {
  text-align:center;
  font-size:24px;
}
.default-logo div * {
  display:inline-block;
}
.log1st {
  vartical-align:bottom;
  width:77px; height:74px;
  border-style:solid;
  border-width:1px 2px 3px 4px;
  border-color:orange orange orange #900;
  border-radius:2px 50% 50% 2px;
  position:relative;
  background-color:#ffd;
  float:left;
}
.log1st span {
  background-color:#fff;
  background-image:url("/home/default/files/yosei_0.gif");
  background-repeat:no-repeat;
  background-position:50% 50%;
  background-size:contain;
  position:absolute;
  top:3px; left:3px;
  width:65px; height:65px;
  border:2px dotted #000;
  border-radius:50%;
  cursor:pointer;
  transition:background-color 1s ease;
}
.log1st span:hover{
  transform:rotate(-15deg);
  background-color:#ff9;
  border:1px solid #000;
}

.default-fx {
  font-size:16px;
  line-height:32px;
  margin-left:12px;
  letter-spacing:2px;
}
.log2nd {
  display:inline-block;
}
.log2nd > * {
  color:#900;
  font-family:"Times New Roman";
  line-height:36px;
  font-size:24px;
  border-top:3px solid orange;
  border-radius:19px 19px 0 0;
  border-bottom:3px solid transparent;
  width:38px;
  text-align:center;
}
.log2nd > *:first-child {
  color:#f00;
}
.log2nd span {
  cursor:default;
}
.log2nd > a:hover {
  -webkit-animation:bigger .3s ease-in-out;
  animation:bigger .3s ease-in-out;
}
.log2nd .move:hover { border-top:3px solid #00f; }
.log2nd .ed:hover   { border-top:3px solid #0f0; }
.log2nd .re:hover   { border-top:3px solid #f00; }

@-webkit-keyframes bigger {
  100% { -webkit-transform:scale(2); }
}
@keyframes bigger {
  100% { transform:scale(2); }
}




/* ------------- 以前のコントロール ----------- */

#fcsCtrl {
  display:inline-block;
  width:65px;
  height:65px;
  cursor:pointer;
  float:left;
  margin:.5em;
  border:2px dotted #f69;
  border-radius:50%;
  background-color:#ffc;
  background-image:url("/home/default/files/yosei_0.gif");
  background-repeat:no-repeat;
  background-position:50% 50%;
}
#fcsCtrl.nofrm {
  cursor:default;
  background-color:transparent;
  border:none;
}
#fcsCtrl.fss0:hover {
  background-color:#ff9;
  border:1px solid #f69;
}
#fcsCtrl.fss1:hover {
  background-color:#cff;
  border:1px solid #39f;
}
.fss0.fcs0:hover { transform:rotate(-15deg); }
.fss0.fcs1:hover { transform:rotate(-10deg); }
.fss0.fcs7:hover { transform:rotate(20deg);  }
.fss1.fcs0:hover { transform:rotate(15deg);  }
.fss1.fcs1:hover { transform:rotate(10deg);  }
.fss1.fcs7:hover { transform:rotate(-20deg); }

/* 5. ホバーで回転する円形ボタン */

.spins {
  display:inline-block;
}

.spins span {
  display:inline-block;
  width:65px; height:65px;
  background:-webkit-linear-gradient(#fe5f95 , #ff3f7f);
  background:linear-gradient(#fe5f95 , #ff3f7f);
  border:1px solid #fe3276;
  border-radius:50%;
  background:url("/home/default/files/yosei_3.gif") no-repeat 50% 50%;

}
.spins:hover span {
  -webkit-animation:spin .3s ease-in-out;
  animation:spin .3s ease-in-out;
}

@-webkit-keyframes spin {
  100% { -webkit-transform:rotateY(360deg); }
}
@keyframes spin {
  100% { transform:rotateY(360deg); }
}