/*
    jobSystem 1.0 new-diary@eclat diary.css Lv.1547
    file http://www.eclat.cc/home/new-diary/diary.css create Sat, 12 Oct 2019 05:58:31 GMT (ver1.0)
    (C) nancyan update Mon, 12 Sep 2022 14:49:10 GMT
*/
@charset "UTF-8";
@import url("common.css");
@import url("/home/css-2/friends.css");

/* -- _/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
❇ 🧡コピペで使う 絵文字 記号集
❇
❇ 🟥🟧🟨 🟩🟦🟪 🟫⬛⬜ 🔴🟠🟡 🟢🔵🟣 🟤⚫⚪
❇ 💗💙💛 🧡💚🤍 💜🤎🖤 💘💖💝 💓💕💔
❇ ⭕❌ 🔷🔹 🔶🔸 🔺🔻 🔳🔲✅
❇
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/ -- */

/* -- ✅ ページリンクナビ -- */
.link_older {
  padding:1rem 3.5rem 40em;
  margin:1rem .5rem  20em;;
  border-radius:1rem;
  background:#fff url("/home/poem/files/mouse_s.jpg") no-repeat;
}

/* -- 💛 日記のトップの案内 -- */
.link_older::before {
  position:absolute; left:0; top:0;
  font-size:1.1em; font-family:serif;
  display:block;
  content:url("/home/js/files/light1s.jpg") " ➰サマリー＆サムネイル形式（最新12件）";
  color:#ff9;
  padding:0 1em;
} 

.page_link:last-child {
  position:fixed;
  top:calc(15vw + 4rem); right:1rem;
  width:16vw;
  color:#fff;
  background-color:#000;
}
.page_link:first-child span {
  display:block;
  width:100%;
}

.page_link:first-child, .entry.C909 ~ .page_link {
  display:none;
}

/* ---------- ✅ entry body ----------- */

/*
.entry_title a::before { content:"💙 "; font-weight:normal; }
.C253 .entry_title a::before { content:"🧡 "; font-weight:normal; }
.C851 .entry_title a::before { content:"💛 "; font-weight:normal; }
*/

.C253 div.code {
  font-family:"MS Gothic", mono-space;
  font-size:1.1em;
  font-weight:bold;
  white-space:pre-wrap;
  background-image:
    linear-gradient( 90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff 0%, #fff 100%),
    linear-gradient(180deg, rgba(100, 100, 100, 0) 0%, rgba(100, 100, 100, 0) 97.5%, #808080 100%);
  background-size:8px 100%, 100% 2em;
  line-height:2em;
}
.C253 div.code br {
  display:none;
}

body:not([id]) .html { display:none; }
div.hide { display:none; }

/* --✅ hoverイベント -- */
.page_link ~ .entry:not(.C851):not(.C909):not(.C253):hover,
body:not([id]) #main > div:first-child.entry:hover,
body:not([id]) #main > div:first-child.entry ~ .entry:hover {
  transform: scale(.98);
  opacity:1;
}
.page_link ~ .entry.C253:hover {
  transform: scale(.98);
  opacity:1;
}
.page_link ~ .entry.C253:hover .entry_title {
  transform:rotate(360deg);
  color:magenta;
}


/* --✅ カテゴリ一覧用 -- */

.cate-navi {
   position:fixed;
  top:calc(15vw + 4rem); right:1rem;
  width:16vw;
  background-color:rgba(255, 255, 255, .7);
  
}
.cate-list p {
  line-height:1.7;
  border-bottom:1px dashed #ccc;
}
p.a i {
  font-style:normal;
  float:right;
}

span.no-ex.ins {
  position:fixed; left:.5rem; top:30rem;
  font-size:0px;
  font-weight:bold;
  display:inline-block;
  width:19vw;
  padding-left:.5rem;
  border-bottom:1px dotted #808080;
  z-index:30;
  text-shadow:
    2px  2px 1px #ccc, -2px  2px 1px #ccc,  2px -2px 1px #fef, -2px -2px 1px #fef,
    2px  0px 1px #fff,  0px  2px 1px #ccf, -2px  0px 1px #ccc,  0px -2px 1px #fcc;
  transition:text-shadow .5s, color .5s, background-color .5s;
}
span.no-ex.ins::before {
  display:inline-block;
  font-size:1rem;
  font-weight:normal;
  content:"✅";
  margin-right:.5rem;
  transition:transform 3s;
}

span.no-ex.ins a::after {
  display:inline-block;
  width:calc(18vw - 2rem);
  font-size:1rem;
  color:#000;
  content:"足　跡";
}
span.no-ex.ins:hover {
  color:lightblue;
  text-shadow:
    2px  2px 1px #333, -2px  2px 1px #333,  2px -2px 1px #323, -2px -2px 1px #323,
    2px  0px 1px #666,  0px  2px 1px #223, -2px  0px 1px #333,  0px -2px 1px #322;
  background-color:rgba(255, 255, 255, .3);
}
span.no-ex.ins:hover::before {
  transform:rotate(1125deg);
}
span.no-ex.ins:hover a::after {
  color:lightblue;
}

.C1 .entry_body a {
  color:#00f;
  text-decoration:underline 3px dotted orange;
}

.C1 .entry_body a:hover {
  color:magenta;
}
.C635 .entry_body strong {
  color:#f00;
  text-decoration:underline 1px dotted darkgreen;
  font-family:"Comic Sans MS";
}

/* -- diary exec -- */
a.loader, span.loader {
  display:inline-block;
  margin:.5em;
  padding:1em 2em;
  border:1px solid #808080;
  box-shadow:3px 3px 3px #ccc;
  border-radius:6px;
  transition:all .5s;
}
span.loader {
  background-color:#fff;
  color:#000;
  cursor:pointer;
  box-shadow:8px 8px 8px #000;
}
a.loader:hover, span.loader:hover {
  background-color:#ffe;
}
span.loader:active, a.loader:active {
  box-shadow:2px 2px 2px #000 inset;
}
.loaded a.loader {
  font-size:90%;
  padding:.5em 1em;
}
a.loader.use {
  background-color:#eef;
}
div.no-ex {
  transition:transform 1.5s;
}
div.no-ex.biz {
  transform:scale(0) rotate(720deg);
}

/* -- 💙コメント関係 -- */

.comment_element {
  margin:1em;
}

/* -- 記事単独表示のみ出現 a[name="ccoments"]と併記 -- */
#responses {
  min-height:16rem;
}

/* -- cp-systemの操作領域 -- */
.comment_title {
  position:fixed;
  display:inline-block;
  width:calc(18vw - 3rem);
  height:calc(100vh - 17rem);
  overflow:auto;
  top:16rem;
  right:1rem;
  padding:.5rem;
  background-color:#fcfcfc;
  z-index:5;
  transition:all .5s;
}

body.com-out .comment_title {
  right:-18vw;
}
.comment_title:hover {
  background-color:#fff;
}

.C851 .comment_title, .C909 .comment_title, .C551 .comment_title , .C1240 .comment_title {
  background-color:#282828;
}
.C851 .comment_title:hover, .C909 .comment_title:hover, .C851 .comment_title:hover {
  background-color:#000;
}

body.C1240 .comment_title {
  right:-18vw;
}

/* --------- cp system --------- */

.C635 .entry_body a:hover {
  color:magenta;
}

/* -- システム対応の最初に読める範囲 -- */
.cp1st {

}

.cp1st::after {
  display:block;
  white-space:pre-wrap;
  content:"💗続きとコメント欄は構築されていません。\A　右側の機能拡張で実装して下さい。";
  border-top:3px dotted #808080;
  padding-top:1em;
  padding-left:1em;
  margin-top:1em;
}

.cp-on .cp1st::after {
  content:"💚実装:フォームの生成、コメント欄の拡張\A\A";
}

/* -- ソースを読み易くする為に要らない改行は無効にする -- */
.cp1st ~ br, .cp1st br:first-child {
  display:none;
}

.cp-load {
  position:fixed;
  width:calc(18vw - 5rem);
  top:32rem;
  right:2rem;
  display:inline-block;
  padding:.5rem;
  color:#000;
  font-weight:bold;
  background-color:#ffefff;
  border:1px solid #ccc;
  border-radius:1rem;
  z-index:10;
  box-shadow:2px 2px 2px #ccc;
  transform:scale(.95);
  transition:all .5s;
  text-decoration:none !important;
}

/* -- ページの最後にコマンドを置く。その下の改行を無効にする。 -- */


/* -- CGIのページでは処理を保留 -- */
body:not([id]) .cp-load {
  display:none;
}

body.C851 .cp-load, body.C909 .cp-load  {
  background-color:#600;
  color:lightblue;
}

.cp-load::before {
  content:"💗 機能拡張(A)";
  font-weight:normal;
}
.cp-on .cp-load {
  transform:scale(0);
}

body:not(.cp-on) .cp-load:hover {
  top:31.5rem;
  box-shadow:4px 4px 4px #ccc;
  transform:scale(1);
}

#comments {
  font-weight:bold;
  text-decoration:none;
}

#comments::before {
  content:"💙";
  font-weight:normal;
}

/*
#comments::after {
  display:block;
  font-weight:normal;
  white-space:pre-wrap;
  content:"💛拡張される機能\A🟩入力がTEXTAREA\A🟩改行が可能。\A🟩インライン編集\A🟩誰でも編集可能\A🟩短縮マークアップ\A🟩コメントコマンド";

}

body.cp-on #comments::after {
  content:"💛拡張される機能\A✅入力がTEXTAREA\A✅改行が可能。\A✅インライン編集\A✅誰でも編集可能\A🟩短縮マークアップ\A🟩コメントコマンド\A\A　機能欲張りすぎて\A　時間が掛かりそう";
}
*/


.entry_responses a { 
  font-size:.9rem;
  text-decoration:none;
  padding:.5rem 1rem;
  border-radius:1rem; border:1px solid #808080;
  box-shadow:3px 3px 3px #808080;
}

#responses {
  padding:2rem 4rem 8rem 2rem;
}

.comment_form {
  border-radius:6px; border:1px solid #808080;
  padding:1rem;
  margin:1rem 1rem 2rem 1rem;
  box-shadow:3px 3px 3px #808080;
  background-color:#f3f3f3;
}

body.C635:not(.cp-on) .comment_element, body.C851:not(.cp-on) .comment_element{
  display:none;
}

body.C635:not(.cp-on) .comment_form, body.C851:not(.cp-on) .comment_form {
  display:none;
}

/* -- コメントの新規投稿フォーム -- */
.ax-new {
  margin:1rem;
  padding-bottom:1rem;
  border-bottom:2px dotted #ccc;
}
.ax-new textarea {
  width:100%;
  margin:.25rem 0;
}
.come-edit {
  display:block;

  height:8em;
  background-color:#ffefff;
  font-family:monospace;
}

.comment_form label {
  display:block;
  font-size:0px;
  margin-bottom:.25rem;
}

.comment_form label + label {
  border-bottom:3px dotted #808080;
  padding-top:.5rem; padding-bottom:1rem;
  margin-bottom:.5rem;
}

.comment_form label::before {
  display:inline-block;
  content:"おなまえ";
  color:blueviolet; font-size:1rem; font-weight:bold;
  margin-right:.5rem;
}

.comment_form label + label::before {
  content:"コメント";
}

.comment_form label + label::after {
  display:block;
  content:"abc";
  font-size:.9rem;
}

.comment_form input[type="text"] {
  font-size:1.1rem; line-height:2rem;
  border:1px solid #808080; border-radius:4px;
  padding:0 2px;
  background-color:#ffc;
  box-shadow:2px 2px 2px #808080;
  transition:width .5s, background-color .5s;
}

.comment_form input[name="poster_name"] {
  width:10rem;
}

.comment_form input[name="poster_name"]:focus {
  width:16rem;
  background-color:#ffefff;
}

.comment_form input[name="comment"] {
  width:20rem;
}
.comment_form input[name="comment"]:focus {
  width:34rem;
  background-color:#ffefff;
}

.comment_form input[type="submit"]{
  font-size:1.2rem; font-weight:bold;
  padding:1rem 2rem;
  border-radius:6px;
  text-shadow:0 2px 2px #fff;
  box-shadow:3px 3px 3px #808080;
  transition:background-color .3s;
}

.comment_form input[type="submit"]:hover {
  background-color:#ccf;
}

/* -------- コメントの部分 -------- */

.comment_auther {
  color:#00f;
  font-weight:bold;
  margin-left:.25rem;
}

/* -- コメント内のボタン -- */
.comment .ax, .come-sub {
  display:inline-block;
  font-size:.9em;
  border:1px solid #808080;
  border-radius:6px;
  background-color:#eef;
  text-shadow:1px 1px 2px #808080;
  color:#000;
  padding:2px .5em;
  box-shadow:3px 3px 3px #ccc;
}
.comment .ax {
  font-size:0px;
}
.comment .ax::before {
  font-size:1rem;
  content:"　📝　 ";
}

body:not(.login) .comment a.ax {
  display:none;
}
.comment_element.up-biz a:first-child {
  background-color:#ffc;
  font-size:0px;
}

.comment_element.up-biz a:first-child::before {
  content:"中止";
  font-size:.9rem;
  padding:2px .5em;
  display:inline-block;
}

/* -- 編集の送信ボタン -- */
.come-sub {
  cursor:pointer;
  color:darkgreen;
}

.come-sub:hover, .comment .ax:hover {
  background-color:#fee;
  box-shadow:3px 3px 5px #ccc;
}

.come-sub:active, .comment .ax:active {
  box-shadow:none;
}


/* -- コメント本体 -- */
.comment_element {
  margin-bottom:2rem;
  padding-bottom:.25em;
  border-bottom:2px dotted #ccc;
}
.comment_element .for-owner {
  display:inline-block;
}

.comment_element * {
  vertical-align:middle;
}

.comment_body {
  display:block;
  margin-top:.5rem;
  padding:.5rem;
  font-family:"Comic Sans MS";
  font-size:1em;
  line-height:1.7;

  transition:font-size .5s;
}

.comment_element.up-biz .comment_body {
  font-size:0px;
}

.comment_body img.img-1 {
  float:left;
}

.comment_body img.img-2 {
  float:right;
}

.comment_element.up-biz .comment_body img {
  display:none;
}

.entry:nth-last-child(1) .comment {
  padding-bottom:2rem;
}

/* -- 編集領域 -- */
.ax-up {
  margin:.5rem 1rem 1.5rem 1rem;

}

.ax-up input[type="text"] {
  margin-bottom:.5rem;
  font-size:.9rem;;
  line-height:1.5rem;
  width:8rem;
  padding:2px;
  border-radius:4px;
  border:1px solid #808080;
  box-shadow:1px 1px 1px #eee;
  transition:background-color .5s, width .5s, box-shadow;
}

.ax-up input[type="text"]:focus {
  background-color:#ffefff;
  border:1px solid #00f;
  box-shadow:3px 3px 3px #ccc;
  width:16rem;
}

/* -- 編集エリア -- */
.ax-up textarea {
  display:block;
  width:100%;
  font-size:1rem;
  font-family:"Comic Sans MS";
  line-height:1.6;
  margin:.5rem 1rem;
  border:1px solid #808080;
  border-radius:6px;
  padding:.5rem;
  height:10rem;
  color:#000;
  box-shadow:1px 1px 1px #eee;
  transition:background-color .5s, box-shadow .5s, border .5s;
}

.ax-up textarea:focus {
  background-color:#efdfef;
  border:1px solid #00f;
  box-shadow:3px 3px 3px #ccc;
}

.come-cnt {
  display:inline-block;
  width:2rem;
  text-align:right;
  color:#00f;
 }

.come-info {
  color:#808080;
}

/* -- 💗💙💛コンテンツの独自設定 -- */
.emo-msg {
  opacity:1;
  transition:opacity 1s;
}
body:not(.emo-entry) .emo-msg {
  display:none;
  opacity:0;
}

.emo-box {
  display:inline-block;
  padding:.5rem;
  margin:.5rem;
  float:left;
}
.flags {
  font-family:monospace;
  font-size:3rem;
  line-height:3rem;
  letter-spacing:1rem;
  border:1px solid #ccc;
  border-radius:6px;
  box-shadow:3px 3px 3px #ccc;

}
#flagPar {
  padding:.75rem .5rem .75rem 1.5rem;
}
#flagPar span {
  display:inline-block;
  position:relative;
  cursor:pointer;
  padding:0 .5rem;
  transition:all .5s;
}


#flagInfo {
  font:1.2rem/1.6 monospace;
  color:darkgreen;
}
#flagInfo b {
  font-weight:normal;
  font-size:2em;
  line-height:1.4em;

}

.emo-1st {
  clear:left;
}
.emo-navi {
  clear:left;
}
a.ent-link {
  text-decoration:underline 3px dotted magenta;
  display:inline-block;
  transition:font-size 1s;
}
a.ent-link:hover {
  color:magenta;
  text-decoration:underline 3px dotted blue;
}
body:not(.emo-entry) .emo-navi ~ br {
  display:none;
}
.emo-navi a {
  text-decoration:underline;
}
.emo-navi a:hover {
  color:magenta;
}

/* -- 💗💙💛コンテンツ内汎用クラス -- */
.box-par {

}
.box-par > b {
  font-size:1.1em;
  border-bottom:2px dotted orange;
  padding-bottom:2px;
}
.box-par > b::before {
  content:"💙";
  font-weight:normal;
}

.box-par > a {
  font-size:1.08em;
  border-bottom:2px dashed blue;
  padding-bottom:2px;
}
.box-par > a::before {
  content:"📄";
  font-weight:normal;
}
.box-par > a:hover {
  color:magenta;
  border-bottom:2px dashed tomato;
}

.box-a {
  padding-bottom:1.5em;
  margin-top:.5em;
  border-bottom:2px dotted #808080;
}
.box-a + br {
  display:none;
}


/* -- 汎用クラス 領域の移動 -- */
.menu-out #menu, .menu-out #header {
 left:-20vw;
}

.link-out #back_link a:not([target]) {
  transform:scale(.3) rotate(720deg);
  top:-10rem;
}

code.s1 {
  display:block;
  padding:.5em;
  border-radius:6px;
  border:2px dashed #808080;
  background-color:#ffefff;
}

a.var-font {
  display:inline-block;
  transition:font-size 1s;
}

.font-min a.var-font {
  font-size:0;
}

a.bef-c1::before {
  content:"💗";
}

.font-min a.bef-c1::before {
  content:"💚";
}

/* -- 共通コマンドキャラクター -- */
#yos0 {
  display:inline-block;
  position:fixed;
  top:.5rem;
  right:1rem;
  width:3.5rem;
  height:3.5rem;
  border:1px solid #ccc;
  border-radius:50%;
  box-shadow:0 0 4px #808080 inset;
  background-color:#fff;
  background-image:url("/home/default/files/yosei_0.gif");
  background-size:auto;
  background-position:center center;
  background-repeat:no-repeat; cursor:pointer;
  z-index:50;
  transition:all .5s;
}

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

#upsLinks a {
  display:inline-block;
  transition:all .8s;
}

.ups-links #upsLinks  a {
  transform:scale(0);
}

/* -- c1💗 c2💙 c3💛 c4💚 c5🤍 c6💜 c6🤎 c7🖤 -- */




/* */