.sponly { display: block !important; }

@media screen and (min-width: 768px) { .sponly { display: none !important; } }

.pconly { display: none !important; }

@media screen and (min-width: 768px) { .pconly { display: block !important; } }

@media screen and (min-width: 1px) { html, body { min-height: 100%; }
  body { margin: 0; padding: 0; }
  h1, h2, h3, h4, h5, h6, p, ul { margin: 0; padding: 0; }
  #blog { min-height: 100%; }
  #blog .wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 100%; }
  #blog .left { width: 400px; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; text-align: center; background-color: #99ccff; background-image: url(../images/blog/bg_left.gif); border-right: 1px outset #999; }
  #blog .right { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; background-image: url(../images/blog/blog_bg.jpg); }
  #blog .right .content { width: 800px; margin: 200px auto; }
  #blog .right .date { text-align: right; font-size: 18px; }
  #blog .right hr { border: 1px inset #999; background-color: #ccffcc; height: 18px; margin: 10px 0; }
  #blog .right h2 { font-size: 60px; text-align: center; color: blue; margin: 50px 0; }
  #blog .right .body { font-size: 22px; line-height: 1.5; color: black; text-align: left; }
  #blog .right button { margin-left: 10px; margin-top: 80px; background-color: #c2c2c2; border: 1px outset #c2c2c2; }
  #blog h1 { margin-top: 50px; font-size: 30px; line-height: 1; color: #0033ff; text-align: center; }
  #blog h2 { font-size: 30px; line-height: 1; color: #ffcc00; text-align: center; }
  #blog h3 { font-size: 60px; line-height: 1.0; font-weight: bold; font-style: italic; color: #ff00ff; text-align: center; text-shadow: 0px 6px 0px rgba(0, 0, 0, 0.6); }
  #blog .since { background-color: #ffff00; color: black; display: inline-block; margin: 50px auto 20px; }
  #blog .pink { color: #ff00ff; }
  #blog p { font-size: 18px; color: #000; }
  #blog .arrow { margin: 40px auto; }
  #blog h4 { font-size: 40px; font-style: italic; color: #ffff00; text-shadow: 0px 6px 0px rgba(0, 255, 255, 0.6); margin-bottom: 30px; }
  #blog .list { margin-bottom: 10px; text-align: left; margin-left: 32px; color: #0000ff; }
  #blog .list img { vertical-align: middle; }
  #blog .list2 { margin-bottom: 20px; text-align: left; margin-left: 32px; color: #0000ff; }
  #blog .list2 img { vertical-align: middle; }
  #blog .naisho { margin-left: 32px; text-align: left; }
  #blog .naisho a { color: #99ccff; }
  .marquee { width: 400px; padding: 0.5em 0; overflow: hidden; background-color: #fff; margin-bottom: 10px; position: relative; }
  .marquee p:after { content: ""; white-space: nowrap; padding-right: 50px; }
  .marquee p { margin: 0; padding-left: 600px; display: inline-block; white-space: nowrap; -webkit-animation-name: marquee; animation-name: marquee; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; color: blue !important; text-decoration: underline; }
  @-webkit-keyframes marquee { from { -webkit-transform: translate(0%); transform: translate(0%); }
    99%, to { -webkit-transform: translate(-100%); transform: translate(-100%); } }
  @keyframes marquee { from { -webkit-transform: translate(0%); transform: translate(0%); }
    99%, to { -webkit-transform: translate(-100%); transform: translate(-100%); } } }