@charset "utf-8";

/*----- RESET -----*/
* {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

address,
em,
i,
b {
  font-style: normal;
  font-weight: normal;
}

q::before,
q::after {
  content: "";
}

u,
del {
  text-decoration: none;
}

/*----- DEFAULT -----*/
/* フロップデザインWEBフォント PRO */
@font-face {
  font-display: swap;
  font-family: "flopdesign-kana";
  src: url("../fonts/flopdesign-kana.eot");
  src: url("../fonts/flopdesign-kana.otf?#iefix") format("embedded-opentype"),
  url("../fonts/flopdesign-kana.woff") format("woff"),
  url("../fonts/flopdesign-kana.ttf") format("truetype");
}

/* MYicon */
@font-face {
  font-display: block;
  font-family: "MYicon";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/MYicon.eot?43yc9x");
  src: url("../fonts/MYicon.eot?43yc9x#iefix") format("embedded-opentype"),
  url("../fonts/MYicon.ttf?43yc9x") format("truetype"),
  url("../fonts/MYicon.woff?43yc9x") format("woff"),
  url("../fonts/MYicon.svg?43yc9x#MYicon") format("svg");
}

[class^="my-"],
[class*=" my-"] {
  font-family: "MYicon";
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-transform: none;
  vertical-align: text-bottom;
}

.my-aster::before {
  content: "\e900";
}

.my-onepoint::before {
  content: "\e901";
}

.my-listmaker::before {
  content: "\e902";
}

.my-listmaker_nest::before {
  content: "\e903";
}

.my-top::before {
  content: "\e904";
}

.my-bottom::before {
  content: "\e905";
}

.my-secret::before {
  content: "\e906";
}

.my-message::before {
  content: "\e907";
}

.my-rss::before {
  content: "\e908";
}

.my-edit::before {
  content: "\e909";
}

.my-admin::before {
  content: "\e90a";
}

/* SECTIONS */
body {
  background-color: #131313;
  color: #f3f3f3;
  font-family: "flopdesign-kana", "BIZ UDGothic", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 100%;
  letter-spacing: .1em;
  line-height: 1.6;
  text-align: center;
}

header p {
  background-color: #535353;
  color: #f3f3f3;
  margin: .5em 0;
  text-align: center;
}

:is(h1, h2, h3, h4) a:link,
:is(h1, h2, h3, h4) a:visited {
  text-decoration: none;
}

:is(h3, h4) a:active,
:is(h3, h4) a:hover {
  background-color: transparent;
  text-decoration: underline;
}

h1 {
  height: 60px;
  margin-top: 4em;
  position: relative;
}

h1 a img {
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  left: 50%;
  margin: auto;
  position: absolute;
  top: 10px;
  transform: translate(-50%, -50%);
}

h1 a img:active,
h1 a img:hover {
  opacity: 1;
}

h2 {
  border-top: 3px dashed #131313;
  color: #f3f3f3;
  font-size: 1.3rem;
  font-weight: bold;
  letter-spacing: .3em;
  padding: .5em;
}

h2 a:link,
h2 a:visited {
  color: #f3f3f3;
}

h2 a:active,
h2 a:hover {
  background-color: transparent;
  color: #f3f3f3;
  text-decoration: underline;
}

h2 a:link,
h2 a:visited {
  color: #d3d3d3;
}

h3 {
  border-top: 3px dotted #131313;
  color: #d3d3d3;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: .2em;
  padding: .5em 1em;
}

h4 {
  background-color: #535353;
  color: #f3f3f3;
  font-size: .9rem;
  padding: .3em .5em;
}

h5 {
  border-bottom: 1px solid #535353;
  border-top: 1px solid #535353;
  color: #d3d3d3;
  font-size: .9rem;
  font-weight: bold;
  letter-spacing: .2em;
  margin: 1em 0 1em;
  padding: .5em 1em;
}

footer {
  border-top: 3px dashed #131313;
  font-size: .9rem;
  margin-top: 1em;
  padding: 1em 0;
  text-align: right;
}

/* GROUPING CONTENT */
p {
  margin: .5em 1em;
}

blockquote {
  border: 1px solid #737373;
  border-radius: 10px;
  font-size: .9rem;
  margin-bottom: 1em;
  margin-top: 1em;
  padding: 1em;
  word-break: break-all;
}

ol {
  list-style-position: inside;
  margin: 1em;
}

ol li {
  margin: .5em 0 .5em .1em;
  padding: 0 .5em 0 1em;
  padding-left: 1em;
  text-indent: -1em;
}

ul {
  list-style-position: inside;
  list-style-type: none;
  margin: 1em;
}

ul li {
  margin: .5em 0 .5em 1em;
  padding: 0 .5em 0 1em;
  position: relative;
}

ul li::before {
  color: #939393;
  content: "\e902";
  font-family: "MYicon";
  font-weight: 400;
  left: -1em;
  position: absolute;
}

ul li ul {
  margin: .5em;
}

ul li ul li::before {
  color: #939393;
  content: "\e903";
  font-family: "MYicon";
  font-weight: 400;
  left: -1em;
  position: absolute;
}

dl {
  padding: 1em;
}

dl dt {
  font-size: .9rem;
  font-weight: bold;
  letter-spacing: .3em;
  padding: .5em 1em;
}

dl dd {
  border: 1px solid #535353;
  padding: 1em;
}

dl dd dl dt {
  border-bottom: 1px solid #939393;
  margin: 1em;
}

dl dd dl dd {
  padding: 0;
}

dl dd dl dd dl {
  padding-right: 0;
}

dl dd dl dd dl dt {
  background-color: #535353;
  border-bottom: 0;
}

dl dd figure {
  margin-bottom: .5em;
  margin-top: .5em;
}

dl dd img {
  vertical-align: middle;
}

/* TEXT-LEVEL SEMANTICS */
a {
  color: #d3d3d3;
}

a:link,
a:visited {
  text-decoration: underline;
}

a:active,
a:hover {
  background-color: #535353;
  text-decoration: none;
}

a img:active,
a img:hover {
  opacity: .7;
  transition: .3s;
}

em {
  background: linear-gradient(transparent 50%, #535353 50%);
  color: #f3f3f3;
  font-style: normal;
}

strong,
b {
  font-weight: bold;
}

small {
  color: #d3d3d3;
  font-size: small;
}

code {
  background-color: #232323;
  border-radius: .3em;
  color: #d3d3d3;
  display: inline-block;
  font-family: "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
  margin: .1em .3em;
  padding: .2em .5em;
  text-indent: initial;
  word-break: break-all;
}

i {
  font-style: italic;
}

u {
  text-decoration: underline;
}

mark {
  color: #f3f3f3;
}

/* EDITS */
ins {
  text-decoration: #939393 underline wavy;
}

del {
  color: #939393;
  text-decoration: #f3f3f3 line-through;
}

/* EMBEDDED CONTENT */
img {
  margin: 0;
  max-width: 100%;
  vertical-align: top;
}

/* TABULAR DATA */
table,
th,
td {
  font-family: "flopdesign-kana", "BIZ UDGothic", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  letter-spacing: .1em;
  line-height: 1.6;
}

table {
  border-bottom: 1px solid #535353;
  border-collapse: collapse;
  border-top: 1px solid #535353;
  margin: 1em auto;
  width: 100%;
}
table tr {
  border-bottom: 1px dashed #535353;
}

table tr th {
  padding: 1em;
  width: 30%;
  word-break: keep-all;
}

table tr td {
  padding: 1em;
}

/* FORMS */
input,
button,
select,
textarea {
  background-color: #535353;
  border: 0;
  border-radius: 5px;
  color: #f3f3f3;
  font-family: "flopdesign-kana", "BIZ UDGothic", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  letter-spacing: .1em;
  line-height: 1.3;
  padding: .5em;
}

fieldset {
  border: 1px solid #535353;
  margin: 1em;
}

legend {
  letter-spacing: .3em;
  margin: 0 1em;
}

label {
  font-size: .8rem;
  margin: 0 .3em;
}

input {
  font-size: .8rem;
}

:is(input, select, textarea):hover {
  background-color: #737373;
}

textarea {
  box-sizing: border-box;
  font-size: .9rem;
  width: 100%;
}

:is(input, textarea, select):focus {
  border-radius: 5px;
  outline: 3px solid #939393;
}

::placeholder {
  color: #939393;
  letter-spacing: .1em;
}

/* INTERACTIVE CONTENT */
details {
  border: 1px solid #535353;
  border-radius: 10px;
  font-size: .9rem;
  margin: 1.5em 0;
}

details summary {
  background-color: #535353;
  border-radius: 8px;
  letter-spacing: .3em;
  padding: .5em;
}

details[open] summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0.5em;
}

details dl {
  padding: .5em 0;
}

details dl dt {
  border-bottom: 1px dashed #535353;
}

details dl dd {
  border: 0;
  padding: .5em 1em 1em
}

/*----- COMMON -----*/
#container {
  background-color: #333;
  border-radius: 1em;
  color: #f3f3f3;
  font-size: 1rem;
  margin: 20px auto;
  max-height: 100%;
  text-align: left;
  width: 950px;
}

header p {
  word-break: keep-all;
}

header nav ul {
  display: flex;
  font-size: .8rem;
  justify-content: flex-end;
  margin: 0;
  text-align: right;
}

header nav ul li {
  margin: 0;
  padding: .5em 1em;
}

header nav ul li::after {
  color: #939393;
  content: "\e901";
  font-family: "MYicon";
  font-weight: 400;
  position: absolute;
  right: -6px;
}

header nav ul li::before,
header nav ul li:last-child::after {
  content: "";
}


header nav ul li#top {
  margin: .5em .5em 0 0;
  padding: 0;
}

header nav ul li#top a:link,
header nav ul li#top a:visited {
  background-color: #535353;
  border-radius: 5px;
  color: #f3f3f3;
  padding: .5em;
  text-decoration: none;
}

header nav ul li#top a:active,
header nav ul li#top a:hover {
  background-color: #737373;
  color: #f3f3f3;
  text-decoration: none;
}

footer address ul {
  display: flex;
  flex-wrap: wrap;
  font-size: .9rem;
  font-weight: bold;
  justify-content: flex-end;
  margin: 0 .5em;
}

footer address ul li {
  line-height: 2;
  margin: .3em;
  padding: 0;
}

footer address ul li::before {
  content: "";
}

footer address ul li.copyright {
  width: 100%;
}

footer address ul li a {
  font-weight: normal;
  padding: .3em;
}

footer address ul li a:link,
footer address ul li a:visited {
  background-color: #535353;
  border-radius: 5px;
  color: #f3f3f3;
  text-decoration: none;
}

footer address ul li a:active,
footer address ul li a:hover {
  background-color: #737373;
  color: #f3f3f3;
  text-decoration: none;
}

/* スクロールナビゲーション */
.topButton,
.bottomButton {
  background-color: #535353;
  border: 0;
  border-radius: 10px 0 0 10px;
  color: #f3f3f3;
  cursor: pointer;
  display: none;
  font-size: .8rem;
  height: 40px;
  opacity: 0;
  position: fixed;
  right: 0;
  text-align: justify;
  transition: opacity .5s ease-in-out;
  width: 100px;
}

.topButton {
  bottom: 60px;
  letter-spacing: .6em;
}

.bottomButton {
  bottom: 10px;
}

/* てがろぐ */
section article .post {
  margin: 1.5em;
}

:is(.embeddedpictbox, .decorationL, .decorationO, .decoration1, .decoration3) + br {
  display: none;
}

.deco-bokashi {
  filter: blur(.3em);
  transition: .2s;
}

.deco-bokashi:is(:hover, :active) {
  filter: revert;
}

.cemoji img:hover {
  transform: scale(1.5);
  transition: .2s;
}

a.readmorebutton.readmoreopen,
a.readmorebutton.readmoreclose {
  background-color: #535353;
  border-radius: 20px;
  color: #f3f3f3;
  font-size: .9rem;
  letter-spacing: .3em;
  margin: .5em;
  padding: .5em 1em;
}

a.readmorebutton.readmoreopen:hover,
a.readmorebutton.readmoreclose:hover {
  background-color: #737373;
  color: #f3f3f3;
}

a.readmorebutton.readmoreopen:link,
a.readmorebutton.readmoreclose:link,
a.readmorebutton.readmoreopen:visited,
a.readmorebutton.readmoreclose:visited {
  text-decoration: none;
}

span.foldlabel {
  margin-left: .5em;
}

div.readmorearea,
div.foldedarea {
  padding: 1em;
}

.embeddedpictbox {
  margin-bottom: .5em;
  margin-top: .5em;
}

.embeddedimage {
  border: 1px solid #232323;
  border-radius: 5px;
  box-sizing: border-box;
  max-height: 150px;
  min-height: 100px;
  min-width: 100%;
  object-fit: cover;
  object-position: center;
}

.embeddedpictbox .embeddedimage {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}

.embeddedpictbox figcaption,
.videotitle {
  background-color: #232323;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  font-size: .9rem;
  font-weight: bold;
  padding: 0 1em;
}

a.imagelink,
a.url.labeledlink {
  padding: 0;
}

a.imagelink {
  display: block;
  overflow: hidden;
}

a.imagelink:hover,
a.url.labeledlink:hover {
  background-color: transparent;
}

a.imagelink[data-fancybox="gallery"] {
  text-decoration: none;
}

figure.embeddedvideo {
  border: 1px solid #232323;
  border-radius: 5px;
  display: flex;
  flex-direction: column-reverse;
  margin: 0;
  padding: 0;
}

video.embeddedvideo {
  display: block;
  height: auto;
  max-width: 100%;
  width: auto;
}

.imagelink.nsfw {
  border: 1px solid #232323;
  border-radius: 5px;
}

figure .imagelink.nsfw {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

img.nsfw {
  filter: blur(15px);
}

/*----- RESPONSIVE -----*/
@media screen and (max-width: 959px) {
  #container {
    border-radius: 0;
    margin: 0;
    width: 100%;
  }

  footer {
    padding-bottom: 3.5em;
  }

  .topButton,
  .bottomButton {
    background-color: #131313;
    border-radius: 0;
    bottom: 0;
  }

  .topButton {
    text-align: center;
    width: 100%;
  }

  .bottomButton {
    bottom: 0;
  }
}