/*
    jobSystem 1.0 new-diary@eclat profile.css Lv.189
    file http://www.eclat.cc/home/new-diary/profile.css create Sat, 12 Oct 2019 05:58:13 GMT (ver1.0)
    (C) nancyan update Mon, 25 Jul 2022 03:53:42 GMT
*/

@charset "UTF-8";

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

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

html {
  scroll-behavior:smooth;
  font-size:100%;
  -webkit-text-size-adjust:100%; 
  font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
  scrollbar-color:orange #fff;
  scroll-behavior:smooth;
}

body {
  text-align:center;
  margin:1em 1em 6em;
}

body::before {
  content:"Profile of 9th maiden's Version";
  display:block;
  font-weight:bold;
  font-size:24px;
  line-height:50px;
  text-shadow:1px 2px 3px #fff;
  margin-bottom:1.5rem;
  background:linear-gradient(180deg, #8080ff 0, #fff 50%, #8080ff 100%);
}

table {
  width:94%;
  border-collapse:separate;
  border-spacing:16px;
  counter-reset:cnt;
}
tr { counter-increment:cnt; }

@media screen and (min-width: 1000px) {
  table {
    width:60%;
    margin:1em;
    float:left;
  }
  form, #back_link {
    margin-left:calc(60% + 2rem);
  }
  form::before { content:"横幅が1000px以上のご案内です"; }
}

th {
  font-size:0px;
  min-height:147px; width:20%;
  border-radius:6px;
  border-style:solid;
  border-width:3px;
  box-shadow:3px 3px 3px #ccc;
  transition:transform 1s;
}

tr:nth-child(1) { display:none; }
tr:nth-child(2) th {
  background:url("/home/new-diary/files/38.png")no-repeat center center;
}

tr:nth-child(n+3) th::before {
  display:inline-block;
  content:"";
  height:147px; width:147px;
  background-image:url("http://piyopiyo.secret.jp/eclat13/mgalbum/img/68.png");
  background-repeat:no-repeat;
  background-position-x:-6px;
  transition:transform .5s, background-position-y 1s;
}

tr:nth-child(3)  th::before { background-position-y:   -5px; }
tr:nth-child(4)  th::before { background-position-y: -165px; }
tr:nth-child(5)  th::before { background-position-y: -325px; }
tr:nth-child(6)  th::before { background-position-y: -485px; }
tr:nth-child(7)  th::before { background-position-y: -645px; }
tr:nth-child(8)  th::before { background-position-y: -805px; }
tr:nth-child(9)  th::before { background-position-y: -965px; }
tr:nth-child(10) th::before { background-position-y:-1125px; }

tr:nth-child(2)  > *, tr:nth-child(2)  td::before { border-color:orange;    }
tr:nth-child(3)  > *, tr:nth-child(3)  td::before { border-color:hotpink;   }
tr:nth-child(4)  > *, tr:nth-child(4)  td::before { border-color:blue;      }
tr:nth-child(5)  > *, tr:nth-child(5)  td::before { border-color:brown;     }
tr:nth-child(6)  > *, tr:nth-child(6)  td::before { border-color:#808080;   }
tr:nth-child(7)  > *, tr:nth-child(7)  td::before { border-color:lime;      }
tr:nth-child(8)  > *, tr:nth-child(8)  td::before { border-color:orange;    }
tr:nth-child(9)  > *, tr:nth-child(9)  td::before { border-color:lightblue; }
tr:nth-child(10) > *, tr:nth-child(10) td::before { border-color:tomato;    }

td {
  padding:42px 8px 8px 8px;;
  vertical-align:top;
  text-align:left;
  position:relative;
  font-size:17px;
  font-weight:bold;
  border-radius:6px 0 6px 6px;
  border-style:solid;
  border-width:3px;
  font-family:serif;
  background:url("/home/default/files/kabe12.gif");
  transition:background .5s;
}

td::before {
  display:inline-block;
  height:30px;
  width:calc(100% - 150px);
  content:"file no." counter(cnt);
  font-size:18px;
  text-align:right;
  padding-right:5px;
  background-color:#fff;
  position:absolute;
  top:-3px; right:-3px;
  border-bottom-left-radius:90px;
  border-style:solid;
  border-width:0 0 3px 3px;
  border-color:orange;
}

td::first-line {
  color:blueviolet;
  font-size:24px;
}

td::after {
  display:block;
  width:calc(100% - 24px);
  font:18px/28px "Comic Sans MS";
  color:#00f;
  border-bottom:4px dotted #808080;
  position:absolute;
  top:6px; left:6px;
  padding-left:16px;
}

tr:nth-child(2)  td::after { content:"■データ"; }
tr:nth-child(3)  td::after { content:"■好物"; }
tr:nth-child(4)  td::after { content:"■きらい"; }
tr:nth-child(5)  td::after { content:"■だいすき"; }
tr:nth-child(6)  td::after { content:"■すき"; }
tr:nth-child(7)  td::after { content:"■にがて"; }
tr:nth-child(8)  td::after { content:"■尊敬する人"; }
tr:nth-child(9)  td::after { content:"■信仰"; }
tr:nth-child(10) td::after { content:"■特技"; }


tr:hover td {
  background:#ffe;
}
tr:hover td::after {
  color:#f00;
}


tr:nth-child(2):hover th { transform:scale(-1, 1); }
tr:nth-child(3):hover th { transform:rotate(360deg); }
tr:nth-child(4):hover th::before { background-position-y:-485px; }
tr:nth-child(4):hover + tr th::before { background-position-y:-645px; }
tr:nth-child(5):hover th::before { transform:scale(-1, 1); }
tr:nth-child(6):hover th { transform:rotate(360deg); }
tr:nth-child(7):hover th:before { transform:scale(-1, 1); }
tr:nth-child(8):hover th::before {
  transition:transform 2s;
  transform:rotate(1080deg);
}
tr:nth-child(9):hover th::before { background-position-y:-1285px; }
tr:nth-child(10):hover th::before {
  transition: background-position-y 2s;
  background-position-y: -5px;
}

form {
  padding:1rem;
  border:1px solid #ccc;
}

form div {
  background:url("/home/default/files/yukikko2b.gif") no-repeat;
  text-align:left;
  margin-top:4rem;
  padding:240px 1rem 1rem;

}
input[type="submit"] {
  display:inline-block;
  width:3rem;
  line-height:3rem;
  border-radius:50%;
}

#back_link {
  font-family:"Comic Sans MS";
  text-align:left;
  margin-top:2rem;
  padding:1rem;
  border:2px dashed #808080;
  background:url("/home/default/files/kabe12.gif");
}

#back_link::before {
  content:"このページを単独表示で表示されていた時は、下のリンクで開くと「メインシステム上」でのプロフィールの表示になります。リンクにコマンドが付いていなくともリファラーで振り分けられます。";
  display:block;
  padding:1rem;

}

#back_link a {
  display:inline-block;
  padding:1rem 3rem;
  border-radius:1rem;
  border:3px solid #808080;
  text-align:centerr;
  box-shadow:3px 3px #ccc;
  text-decoration:none;
  margin:2rem;
  background-color:#eef;
}

/* */