@import url("common.css");
* {
  padding:0; margin:0;
  box-sizing:border-box;
}


html {
  scroll-behavior:smooth;
  font-size:100%;
  scrollbar-color:orange #fff;
  -webkit-text-size-adjust:100%; 
}

body {
  line-height:1.8;
  background-color:#000;
  background-image:
    url("/home/new-diary/files/ring.gif"),
    linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .75) 100%),
    url("/home/log2/files/gyukawa.jpg");
  background-position:20vw top, left top, left top;
  background-size:2rem auto, auto, auto;
  background-repeat:repeat-y, repeat, repeat;
  background-attachment:fixed;
  min-height:100vh;
  transition:all .6s;
}

#upsMenu {
  position:fixed; top:0; left:0;
  width:20vw; height:100vh;
  overflow:auto;
}

/* クッキーの構築 */
#cDisp {
  position:fixed;
  left:100px;
  top:100px;
  display:inline-block;
  z-index:10;
  background-color:#fff;
  border:1px solid #808080;
  border-radius:6px;
  padding:1em 2em;
}

/* ボタンの小物 -- */
.tgl {
  border:1px solid #808080;
  box-shadow:2px 2px 2px #ccc;
  padding:.25em .5em;
  border-radius:4px;
  cursor:pointer;
  background-color:orange;
  transition:all .5s;
}
.tgl:hover {
  background-color:#ffc;
}
.tgl:active {
  box-shadow:2px 2px 2px #ccc inset;
}
.tgl.true {
  background-color:#ccf;
}

.h3 {
  font-size:1.3em;
  font-weight:bold;
}

.yos2 {
  color:#600;
  font-size:.95em;
  background:url("/home/default/files/yosei_2.gif") no-repeat left center;
  padding:.5em 1em 1em 60px;
}

/* -- 移動ボタン -- */
.bsc {
  position:fixed;
  right:1rem; top:calc(50vh - 1.3em);
  display:inline-block;
  text-align:center;
  width:2.5em;
  line-height:2.5em;
  cursor:pointer;
  border:1px solid #808080;
  border-radius:50%;
  box-shadow:2px 2px 2px #ccc;
  color:#00f;
  font-weight:bold;
  background-color:#fff;
  transition:all .5s;
}
.bsc-out .bsc { right:-5em }
#bsc0 { top:calc(50vh - 4.4em); }
#bsc2 { top:calc(50vh + 1.7em); }
.bsc:hover {
  background-color:#ffc;
}
.bsc:active {
  box-shadow:2px 2px 2px #ccc inset;
}

/* -- 汎用 -- */
.box {
  border:1px solid #808080;
  border-radius:4px;
  box-shadow:3px 3px 3px #ccc;
}

a {
  text-decoration:underline;
}

#upsLogo a:hover, #upsDisp a:hover {
  color:magenta;
  background-color:#ffc;
}

/* -- 左側の領域 -- */
/* -- ロゴ -- */
#upsLogo {

  padding-top:.2rem;
  padding-bottom:.2rem;

 
  transition:all .6s;
}

/* -- ロゴの中のマスコット -- */
#upsMas {
  position:abslute; top:.5rem; left:.5rem;
  display:inline-block;
  width:3rem; height:3rem;
  border-radius:50%;
  background-image:url("/home/default/files/yosei_2.gif");
  background-repeat:no-repeat;
  background-color:#ffc;
  background-size:contain;
  cursor:pointer;
  transition:all .6s;
}

#upsMas:hover {
  background-color:#ffc;
  transform:rotate(360deg);
}

/* -- ロゴの中の領域上下 -- */
#upsLogo div {
  margin-left:4rem;
  padding:0 .5rem;
  line-height:1/8rem;
}
#upsLogo div a {

}

/* -- ログイン状態 -- */
#visInfo {
  margin-right:1em;

}

#visInfo:not(.login)::before {
  content:"ログアウトです";
}

#visInfo.login {
 
}

/* -- 起動前のロゴ -- */
.ups-out #upsLogo {
  transform:scale(0);
}

/* -- 左側のボタン類の親 -- */
#upsBox {
  transition:all .6s;
}

/* -- 起動前の状態 -- */
.ups-out #upsBox {
  transform:scale(0);
}

#upsSpBox {
  transition:all .6s;
}

.box-opa #upsSpBox {
  opacity:0;
}
/* -- 汎用class -- */
.box1 {
  position:relative;
  color:#000;
  margin:.125em .5rem;
  padding:0 .75em 0 3.25em;
  line-height:2.5em;
  background-color:#ffefff;
  border:1px solid #808080;
  border-radius:4px;
  box-shadow:3px 3px 3px #ccc;
  cursor:pointer;
  transition:all .5s;
}
/* -- upsSpBoxの第一の子供 -- */
.exec {
 
}
.exec:hover {
  background-color:#6a6;
}
/* -- 更新ファイルグループの親 -- */
.sp-par {
  position:relative;
  transition:all .6s;
}
.sp-par.go {

 }

/* -- spの上のコマンド -- */
.exec {
  background-color:darkgreen;
  color:#fff;
}

.go .box1 {
  background-color:#eee;
}

.box1::before {
  display:inline-block;
  position:absolute; left:.5em; top:.25em;
  width:2em; height:2em;
  background-repeat:no-repeat;
  background-size:70%;
  background-position:center center;
  content:"";
  transition:all .5s;
  border:1px solid #808080;
  border-radius:50%;
}
.sp-top::before {
  background-image:url("/home/log2/files/folder_o.gif");
  background-color:#ffefff;
}
.exec:before {
  background-color:#ffefff;
  background-image:url("/home/log2/files/property.gif");
  transition:all .5s;
}
.exec:hover::before {
  transform:rotate(360deg);
}

.go-2 .sp-top::before {
  background-image:url("/home/log2/files/folder_c.gif");
  background-color:#ffefff;
}

.box1 span {
  float:right;
  color:#666;
}
.exec span { color:#ccc; }
.box1 b {
  font-weight:normal;
  color:#339;
  margin-right:3px;
}

.box1 i {
  font-style:normal;
  color:#000;
  margin-left:3px;
}
.exec b {
  color:#fff;
}
.exec i {
  color:#ffefff;
}

.exec i.ze {
  color:#ff0;
}

.go-2 .sp-top i {
  color:#600;
}
.sp-top i.ze {
  color:#00f;
}
.go-2 .sp-top i.ze {
  color:#f00;
  text-decoration:underline;
}

.sp-top:hover {
  background-color:#ffdfff;
}
.go-2 .sp-top:hover {
  background-color:#ccf;
}

.sp-top:hover::before {
  background-color:#ff9;
}
.go-2 .sp-top:hover::before {
  background-color:#fff;
}
.box1:active {
  box-shadow:3px 3px 3px #ccc inset;
}

/* -- 左側のボタン -- */
.sp {
  position:relative;
  color:#000;
  margin:0 .25em 0 .25em;
  padding:0 0 0 2em;
  transition:opacity .6s, font-size .3s, color .5s, backgrouund-color .5s, transform .6s;
  border-bottom:1px solid #ccc;
}
.sp:not(.loaded)::before {
  position:absolute;
  display:inline-block;
  top:.8em; left:1em;
  content:"";
  width:.0;
  height:.0;
  border-width:.25em;
  border-style:solid;
  border-color:#f00 #f00 transparent transparent;
  transition:all .5s;
  transform:rotate(45deg);
}
.sp.sp-arc:not(.loaded) .exe::before {
  content:"A";
  color:#00f;
  margin-right:.25em;
}
.sp.sp-css.loaded .exe::before {
  content:"📋 ";
  margin-right:.25em;
}

.sp.sp-html.loaded .exe::before {
  content:"📔 ";
  margin-right:.25em;
}

.sp.opa {
  opacity:0;
}

/* -- ロード済み -- */
.sp.loaded {
  color:own;
  padding:0 0 0 .75em;
}

.sp:hover {
  background-color:#ffefff;
}

.sp.loaded:hover {
  color:#900;
  border-bottom:1px solid #666;

}
.sp:not(.loaded):hover {
  color:#00f;
  border-bottom:1px solid #666;

}
.sp:not(.loaded):hover::before {
  border-color:#00f #00f transparent transparent;
}
.sp:not(.loaded):hover:before {
  transform:rotate(1125deg);
}

/* -- 選択中 -- */
.sp.loaded.vis {
  color:#00f;
}
.sp.loaded:hover {
  color:magenta;
}
.sp:active {

}

.sp .exe {
  display:inline-block;
  vertical-align:middle;
}
.sp .exe {
  width:calc(100% - 1.75em);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:pointer;
  transition:all .4s;
}

.sp .del {
  padding-left:.25em;
  padding-right:.25em;
  margin-left:.5em;
  border:1px solid #ccc;
  border-radius:50%;
  cursor:pointer;
  background-color:#eef;
  transition:all .4s;
}

.sp:not(.loaded) .del {
  display:none;
}
.sp .del:hover {
  background-color:orange;
  color:#fff;
  border:1px solid tomato;
  box-shadow:2px 2px 2px #ccc;
}
.sp .del:active {
  background-color:#f00;
  box-shadow:none;
}

/* -- メニュー折りたたみ -- */
.go-1 .sp {
  transform:scale(0);
}
.go-2 .sp {
  font-size:0;
  padding:0;
  margin:0;
  border:none;
}

.me.act {
  background-color:#ffefff;
}

/* -- spの表示選択 -- */
.full-1 .sp-top, .full-1 .sp:not(.loaded) {
  transform:scale(0);
}
.full-2 .exec::before {
  transform:scale(-1, 1);
}

.full-2 .sp-top, .full-2 .sp:not(.loaded) {
  font-size:0;
  border:none;
  padding:0;
  margin:0;
}


#upsDoc {
  padding-bottom:1em;
  background-color:#ffefff;
}

#upsAfter {
  margin-bottom:10em;
  
}

#upsAfter iframe {
  display:none;
}





/* -- 右側の領域の親元-- */
#upsDisp {
  margin-left:calc(20vw + 2rem);
  padding:1rem 0;
  transition:all .6s;
}

/* -- 起動前 -- */
.ups-out #upsDisp {
  transform:scale(0);
}
/* -- 領域の一番目のエリア -- */
#ups1st {
  transition:opacity 1s, transform .6s;
  margin:0 4rem 4rem 1.5rem;
  background-color:rgba(255, 255, 255, .7);
  padding:1em;
  height:100vh;
  overflow:auto;
}

/* -- ups1st内の変容領域 -- */
.fly {
  padding:1em;
  background:#fff url("/home/nancyan/files/fly_m.jpg") no-repeat right bottom;
}

#ups1st ul {
  margin-left:1em;
}


/* -- 親の直属子分 A(0-)のidが入る -- */
.area {
  transition:opacity 1s, transform .6s;
  margin:0 4rem 4rem 1.5rem;
}
/* -- cssの直属子分 id = file + user -- */
.css, .image {
  transition:opacity 1s, transform .6s;
  margin:0 4rem 4rem 1rem;
}

/* --　追加 -- */
.area.ne, .css.ne, .image.ne {
  opacity:0;
}

/* -- タイトルなどの一段目の領域 -- */
.navi {
  color:blueviolet;
}
/* -- 一番左の番号 -- */
.eno {
  display:inline-block;
  padding:.25em 1em;
  background-color:#cfc;
}

/* -- inputの親 -- */
.inp-par {
  margin-left:.5em;
  vertical-align:middle;
}

/* -- 名前とタイトル -- */
.inp {
  font-size:100%;
  line-height:1.7em;
  border-radius:4px;
  padding:0 4px;
  margin-left:.25em;
}

/* -- 上のを領域の幅可変対応にする -- */
.inp.iw1 { width:calc(30% - 12rem); }
.inp.iw2 { width:calc(70% - 26rem); }

/ * -- 数値は見やすく -- */
.inp.sp2 {
  letter-spacing:1px;
}

/* -- チェックボックスの親 -- */
label {
  margin-left:.5em;
  padding:.25em;
  color:#000;
  transition:all .5s;
}
label.w {
  color:#f00;
}

/* -- checkbox font-sizeでは無理、scaleで -- */
.cbox {
  transform:scale(1.4);
  margin-right:.5em;
}

/* -- ログイン情報 -- */
.uid {
  margin-left:.25em;
  padding:.25em .5em;
  color:#000;
  border:1px solid #ccc;
  border-radius:4px:
  background-color:#ff9;
}

/* -- エリア開放ボタン -- */
.dels {
  cursor:pointer;
  background-color:orange;
  color:#000;
  font-weight:bold;
  padding:.25em .5em;
  line-height:1.8em;
  float:right;
  transition:all .5s;
}
.dels:hover {
  background-color:#f00;
  color:#fff;
}
.dels:active {
  box-shadow:3px 3px 3px #ccc inset;
}


/* -- テキストの置換などを施すコマンド群 -- */
.cms {
  margin:.25em 0;
  padding:.25em;
  background-color:#ffe;
}

.cms .inp {
  width:calc(40vw - 20rem);
}
.inp-btn {
  padding:0 .5em;
  margin-left:.25em;
  background-color:#ffc;
  cursor:pointer;
  transition:all .5s;
}
.inp-btn:hover {
  background-color:#ccf;
}
.inp-btn:active {
  box-shadow:2px 2px 2px #ccc inset;
}

/* -- 画像アップローダーの領域　-- */
.upload-area {
  padding:3px;
  height:calc(100vh - 10rem);
  overflow:auto;
  line-height:1.4;
  background-color:#fff;
  transition:all .5s;
}
.upload-area.black {
  background-color:#000;
}

mg.big {
  width:20%;
}
img.mini {
  float:left;
/*
  margin:2em;
  padding:1em;
  background-color:#fff;
  border:2px solid #808080;*/
}

/* -- テキストエリア -- */
.txt {
  display:block;
  width:100%;
  padding:3px;
  height:calc(100vh - 10rem);
  overflow:auto;
  line-height:1.4;
  transition:all .5s;
}

.txt:focus {
  background-color:#ffefff;
}

/* -- テキストエリアの下の領域 -- */
.ups-info {
  margin:.5em 0;
  padding:0 .5em;
  background-color:#eef;
}

/* -- 送信ボタン -- */
.cir {
  display:inline-block;
  width:3rem;
  font-size:90%;
  line-height:3rem;
  text-align:center;
  border-radius:50%;
  background-color:#ffe;
  cursor:pointer;
  transition:all .5s;
}

.cir:hover {
  background-color:#ff9;
  border:1px solid #00f;
  color:#00f;
}
.cir:action {
  box-shadow:3px 3px 3px #ccc inset;
  color:tomato;
}

/* -- 送信状態 -- */
.info {
  margin-left:.3em;
}

/* -- 右寄せで情報など -- */
.len {
  display:inline-block;
  float:right;
  color:#808080;
  text-align:right;
  line-height:3rem;
  padding-right:.5em;
 }

/* -- 投稿日付 -- */
.len b {
  font-weight:nomal;
  color:own;
}
/* -- 本文の文字情報 -- */
.len i {
  font-style:normal;
  color:#000;
}

.ups-info * {
  vertical-align:middle;
}


#eDisp {
  width:80%;
  height:calc(100vh - 6em);
  line-height:1.65;
  padding:0 3px;
}

#inp1 {
  width:30%;
  font-size:1em;
  line-height:1.7em;
}

#inp2 {
  width:30%;
  font-size:1em;
  line-height:1.7em;
}
form {
  display:none;
}

input[type="button"] {
  font-size:1em;
  line-height:1.7em;
}

#cooDisp {
  padding-left:2em;
}
#cooDisp li {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}


/*  */