/*
    jobSystem 1.0 default@eclat menu.css Lv.482
    file http://www.eclat.cc/home/default/menu.css create Sat, 14 Feb 2015 13:43:32 GMT (ver1.0)
    (C) nancyan update Fri, 29 May 2020 09:50:50 GMT
*/

:root {
  --list-color:#000;

}



* {
  box-sizing:border-box;
  margin:0; padding:0;
}

html {
  font-size:100%;
  -webkit-text-size-adjust:100%;
}
frameset {
  -webkit-text-size-adjust:100%;
}


html.none {

}

html.none body {
  display:none;
}

body {
  -webkit-text-size-adjust:100%; 
  font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
}

hr { display:none; }
.for-owner { display:none; }

/* リンクの配色 */
a { text-decoration:none; }
a[target]:link {
  color:steelblue;
  border-bottom:1px dotted #39596c;
}
a[target]:visited { color:blueviolet; }
a[target]:hover {
  border-bottom:1px solid #39596c;
  color:magenta;
}
a[target]:active { color:red; }

li.js a { color:#000; }
li.js a:hover { background-color:#ffc; color:tomato; }


/*
li > a:not([target]) {
  border:1px solid #d6bcd6;
  font-size:86%;
  border-radius:14px;
  padding:2px 8px;
  display:inline-box;
  -webkit-box-shadow: 2px 2px 2px #eee;
  box-shadow: 2px 2px 2px #eee;
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #bab1ba));
  background:-moz-linear-gradient(top, #ededed 5%, #bab1ba 100%);
  background:-webkit-linear-gradient(top, #ededed 5%, #bab1ba 100%);
  background:linear-gradient(to bottom, #ededed 5%, #bab1ba 100%);
  margin-top:3px;
}
li > a:not([target]):hover {
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bab1ba), color-stop(1, #ededed));
  background:-moz-linear-gradient(top, #bab1ba 5%, #ededed 100%);
  background:-webkit-linear-gradient(top, #bab1ba 5%, #ededed 100%);
  background:linear-gradient(to bottom, #bab1ba 5%, #ededed 100%);
  background-color:#bab1ba;
}




*/
#ico3 {
display:none;
  position:fixed;
  top:10px; right:3px; z-index:12;
  width:70px; height:70px; text-align:center;
  border-radius:50%; cursor:pointer;
  background-image:url("/home/default/files/yosei_3.gif");
  background--position:50% 50%;
  background-repeat:no-repeat;
}
#ico3:hover {
  background-color:#ff9; border:2px solid brown;
  transform:rotate(-10deg);
}

#menu {
  font:20px/28px "Times New Roman";
  padding-left:10px; padding-top:8px;

 
}
#menu.main { background-color:#ffefff; }

#menu div#coMenu { padding-left:8px; }
.s1 { font-size:28px; line-height:28px; color:green;}

.s2 { color:red; cursor:pointer; }
.s22 {
  color:#000; cursor:default;
}
#menu a { color:#000; }
li.to-top:before {
  content:url(files/angel.gif);
}
.mp3-stop #me2, .mp3-on #me1, .mp3-on #oidDisp, .mp3-stop #mp3sub { display:none; }
#me2 { color:magenta; }
#mp3Disp a {
  font:70%/1.0 meiryo,"メイリオ";
  border:none; text-decoration:none;
}
#mpMode {
  font:74%/1.1 meiryo,"メイリオ";
}

#oidDisp { padding-left:1em; }
#mp3sub {
  margin-top:6px;
  padding-top:4px;
  color:tomato;
}
#mp3sub a {
  text-decoraton:none;
  display:inline-block;
  font:90%/1.0 "Times New Roman";
  text-shadow:2px 2px 2px #808080;
  box-shadow:2px 2px 2px #808080;
  margin-right:6px;
  padding:3px 6px;
  border:1px solid #808080;
  background-color:lightgrey;
  border-radius:3px;
}
#mp3sub a.act {
  background-color:#ff9;
  color:red;
}
#oid {
  margin-left:2em;
}
.updown {
  height:20px; width:20px; display:inline-block;
  cursor:pointer; text-align:center; line-height:20px;
  border-radius:50%; font-size:9px;
  border:1px solid #900;
  box-shadow:2px 2px 2px #808080;
}

select {
  font:95%/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;
}
option {
  border:1px solid #808080;
  border-radius:50%; text-align:center;
  padding:2px 0;
  background-color:#900; color:#ff6;
}
#mainDisp {
/*
  padding-left:.5em; width:100%;
  font:85%/1.4 meiryo,"メイリオ";
  padding-bottom:5em;
*/
}


/* 日記のメニュー */
/*
#diaryInfo { margin-left:1em; }
#diaryInfo span {
  cursor:pointer; background-color:#ffefff;
  display:inline-block; color:darkgreen;
  padding:6px 1.5em; border:1px solid #808080;
  border-radius:50%;
}
#diaryInfo.main span {
  background-color:#ff6;
  color:#339;
}
#diaryInfo span:hover {
  color:red;
  background-color:#e0ffff;
  border-color:#c00;
}
*/
#categories li:after {
  content:" (" attr(class) ")";
  color:#808080;
}
.to, .from, .title, .ar1 { display:none; }
#latest_comments li:hover .poster { display:none; }
#latest_comments li:hover .title { display:inline; }
#latest_comments a { display:inline-block; width:90%; }


/* ---------- Add Links System ----------- */
#attrDisp #bbsAttr {
  margin-left:.5em;
  margin-right:.5em;
}





.links-title {
  font-weight:bold;
  background-color:#cfc;
}
.links-title:before {
  content:url(/home/log2/files/property.gif) " ";
}
/* ---------- Open Menu System ----------- */
.link {

  margin:.25em .5em;

/*
  transition:
    box-shadow 600ms cubic-bezier(0.33, 0.11, 0.02, 0.99),
    transform 600ms cubic-bezier(0.33, 0.11, 0.02, 0.99);
*/
}
.link.clo {
 /* margin:.25em .5em;*/
}

.link:not([class*="clo"]) {
  padding-bottom:3px;
  margin:.25em .5em .7em;
  box-shadow:4px 4px 10px #ccc;
  border-radius:10px;
}
/*
.link:not([class*="clo"]):hover {
  box-shadow:
    0 4px 4px rgba(0, 0, 0, 0.1),
    0 1px 6px rgba(0, 0, 0, 0.05),
    0 8px 8px rgba(0, 0, 0, 0.1),
    0 16px 16px rgba(0, 0, 0, 0.1),
    8px 32px 32px rgba(0, 0, 0, 0.15),
    8px 64px 64px rgba(0, 0, 0, 0.15);
  transform:scale(1.04) translateY(-0.5em);
}
*/
.link_title {
  position:relative;
  padding-left:30px;
  font-weight:bold;
  color:var(--list-color);
  cursor:pointer;
  background-color:#ccf;
  font-size:96%; line-height:26px;
  color:#000;
  border:1px solid #808080;
   border-radius:3px;
  text-shadow:
    1px 1px 0px #fff, -1px 1px 0px #fff, -1px -1px 0px #fff, 1px -1px 0px #fff,
    1px 0px 0px #fff, 0px 1px #fff, -1px 0px 0px #fff, 0px -1px 0px #fff;
}

.link.sys .link_title {
  background-color:#fcc;
}

.link_title:before {
  background:#ffc url("/home/log2/files/folder_o.gif") no-repeat center center;
  display:inline-block;
  border-radius:23px;
  border:1px solid #808080;
  position:absolute; left:1px; top:1px;
  width:23px; height:23px;
  content:"";
}
.link.clo .link_title:before {
  background:#fffeff url("/home/log2/files/folder_c.gif") no-repeat center center;
}
.link.sys.clo .link_title:before {
  background:#fff url("/home/log2/files/property.gif") no-repeat center center;
}

.link.clo .link_title {
  transition:background-color 1s ease;
}
.link_title:hover {
 
  background-color:#eee;
}
.link.clo .link_title:hover {
  background-color:#efefef;
}

/* ------------- -------------- */


ul {
  padding-left:1em;
  background-color:rgba(255,255,215,.7);
}

.link.clo ul, .arc-off .arc-g, .arc-on .arc-d, .link.clo .mm2 {
  display:none;
}

.arc-link a {
  font:bold 14px/20px "Times New Roman";
  display:inline-block;
  width:2em;
  text-align:center;
  margin:2px; padding:2px;
  border:1px solid #ccc;
  border-radius:3px;
}
.arc-link a:hover {
  background-color:#ffc;
  color:tomato;
  border:1px solid #808080;
}
.arc-link .arc-bef a {
  background-color:#ffefff;
  color:#f99;
  border:1px solid tomato;
}
.arc-link .arc-act a {
  background-color:#ff9;
  color:#f00;
  border:1px solid tomato;
}


li {
  border-top:1px solid transparent;
  border-bottom:1px solid transparent;
  margin-bottom:5px;
  word-wrap:break-word;
}

li:hover { color:red; }

#diary.main li { color:red; } /* 日記がメインシステムの場合 */
form { display:inline-block; }

li ul {
  margin-top:.5em; margin-left:0;
  background:url(files/kabe12.gif);
  color:#600;
}
li li { border-bottom:1px solid transparent; }
li li:hover {
  border-bottom:1px dotted #808080;
}
li ul li a:link {
  font:90%/1.2 meiryo,"メイリオ"; color:#000;
  text-decoration:none; border:none;
}
li ul li a:hover { color:magenta; }
.attr-top:before {
  content:url(files/yosei_2.gif);
}
li.come a, span.all-del, li.bbs a {
  display:inline-block;
  margin:1px; padding:3px 2px;
  font:14px/1.0 meiryo,"メイリオ";
  border:1px solid #808080;
  border-radius:3px;
  color:lime;
  text-shadow:1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000;
}
li.bbs a {
  padding:0 2px;
  color:steelblue;
  background-color:#ffefff;
  font:bold 11px/16px meiryo,"メイリオ";
  margin-bottom:2px;
  text-shadow:none;
}
li.bbs a:hover {
  background-color:#ff9;
  border:1px solid tomato;
  color:#00f;
}
li.bbs a.bbs-act{
  color:red;
  border:1px solid red;
}
li.bbs a.bbs-show {
  background-color:#ffc;
  color:tomato;
}
span.all-del {
  background-color:#000;
  color:#ff9;
  border-color:red; cursor:default;
}
li.come a:hover {
  color:#fff;
}
li.come a.co_act, li.bbs a.act {
  color:red;
  text-shadow:1px 1px 1px #fff, -1px 1px 1px #fff, 1px -1px 1px #fff, -1px -1px 1px #fff;
}
.attr-hide .attr {
  display:none;
}
#lastMenu {
  margin-bottom:8em;
}

ul {list-style:none; }


/* リストマーカー */
li > a::before {
  display:inline-block; width:0; height:0;
  border:5px solid transparent; content:"";
}
li > a[target="main_default"]::before { border-left:5px solid #00f; }
li > a[target="main_eclat-io"]::before { border-left:5px solid #f00; }
li > a[target="_blank"]::before { border-left:5px solid green; }
li > a:not([target])::before { border-left:5px solid orange; }

/* 日記の最新の記事で当該日記 */
#link_here a::before { border-left:5px solid #f00; }
#link_here a { color:#000; font-weight:bold; }


/* ------------- attrDisp  コマンドのボタン --------------- */
#attrDisp ul {
  background-color:#000;
  margin:0;
  padding:6px;
}
ul,esv a {

}

ul.esv a:link { color:#000; }
.attr-ctrl {
  border:1px solid #ccc;
  padding:4px .5em;
  border-radius:1em;
  background-color:#ffc;
}
.attr a, li.js a, li.attr-user {
  display:block;
  border:1px solid #ccc;
  font-size:90%;
  font-family:"Times New Roman";
  padding:4px .5em;
  border-radius:1em;
  box-shadow:2px 2px 2px #808080;
  color:#9ff;
  background-color:#600;
}
li.attr-user {
  cursor:pointer;
}
#userList {
 
}
.js.in a { display:inline-block; }

.attr a:hover, li.js a:hover, li.attr-user:hover {
  color:#000;
  background-color:lightblue;
}
.attr a:active, li.js a:active, li.attr-user:active {
  color:#f00;
  box-shadow:2px 2px 2px #808080 inset;
}




@media screen and (min-width:400px){
  #mainDisp {
  -moz-column-count: 4;
  -webkit-column-count: 4;
  column-count: 4;
  -moz-column-rule: dashed pink 2px;
  -webkit-column-rule: dashed pink 2px;
  column-rule: dashed pink 2px;
  -moz-column-gap: 30px;
  -webkit-column-gap: 30px;
  column-gap: 30px;
  }
  li {
    border:1px solid #808080;
    padding:6px 8px;
    border-radius:4px;

  }
  div.link {
    break-inside:avoid;
  }
}