/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 100%;
  line-height: 1.5;
  color: #5c6b80;
  background-color: #eaedf2;
  -webkit-font-smoothing: antialiased;
}

div#container {
  overflow: hidden;
}

.webcomic-header {
  background-color: #323944;
  color:white;
  padding:1em;
}

#title-comic {
  font-size:1.2em;
}

article.hentry {
  margin: 0 auto;
}

article.webcomic {
    margin:0 auto;
}

.article-footer {
  border-top:1px solid #ccc !important;
}

.footer-nav {
  text-align:center;
  margin:0 auto 2em auto;
}

.author-info {
  max-width: 800px;
  margin:0 auto 2em auto;
  padding:0 1.5em;
}

.author-product {
  max-width: 800px;
  margin:0 auto 2em auto;
}
.author-product .midashi{
    text-align: center;
    margin-bottom:1em;
}
.author-product .thumbnail {
    width:100%;
}
.relative-product img{
    width:100%;
    height:auto;
}

.footer-share {
  text-align:center;
  max-width: 800px;
  margin:0 auto 2em auto;
}

/* ==========================================================================
   Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background: transparent;
  word-break: break-all;
}

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */
a:focus {
  outline: thin dotted; }

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0; }


img {
  border: 0; }


/*********************
LINK STYLES
*********************/
a, a:visited {
  color: #10a170;;
  /* on hover */
  /* on click */
  /* mobile tap color */ }
  a:hover, a:focus, a:visited:hover, a:visited:focus {
    color: #d10e3c; }
  a:link, a:visited:link {
    /*
    this highlights links on iPhones/iPads.
    so it basically works like the :hover selector
    for mobile devices.
    */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3); }

/******************************************************************
H1, H2, H3, H4, H5 STYLES
******************************************************************/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
  text-rendering: optimizelegibility;
  font-weight: 500;
  /*
  if you're going to use webfonts, be sure to check your weights
  http://css-tricks.com/watch-your-font-weight/
  */
  /* removing text decoration from all headline links */ }
  h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a {
    text-decoration: none; }

h1, .h1 {
  font-size: 2.5em;
  line-height: 1.333em; }

h2, .h2 {
  font-size: 1.75em;
  line-height: 1.4em;
  margin-bottom: 0.375em; }

h3, .h3 {
  font-size: 1.125em; }

h4, .h4 {
  font-size: 1.1em;
  font-weight: 700; }

h5, .h5 {
  font-size: 0.846em;
  line-height: 2.09em;
  text-transform: uppercase;
  letter-spacing: 2px; }

.hentry {
  background-color: white;
  border-radius: 3px;
  border: 1px solid #cccccc; }
.hentry header {
  border-bottom: 1px solid #f8f9fa;
  padding: 1.5em; }
.hentry footer {
  padding: 1.5em;
  border-top: 1px solid #f8f9fa; }
.hentry footer p {
  margin: 0; }


/* entry content */
.entry-content {
  text-align:center;
  padding: 0; }
  .entry-content p {
    margin:0 2em; }

.footer {
  clear: both;
  padding:1em;
  height:auto;
  background-color: #323944;
  color: #f8f9fa; }


@media (min-width:1200px) {
  article {
    max-width:1200px;
  }
}

.gallery img {
    touch-callout: none;
    user-select: none;
    user-drag: none;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -ms-user-select: none;
    -moz-touch-callout: none;
    -moz-user-select: none;
    margin:0 !important;
    margin-bottom:4em !important;
    padding:0;
    border:0 !important;
    max-width: 100%;
    height: auto;
}

@media print {
	body { display:none; }
}


.webcomic-related-posts {
    max-width: 800px;
    margin-bottom:2em;
}
.webcomic-related-post-item {
    margin-bottom:1em;
}

/* Sサイズ、タブレット : Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    .gallery {
        /*margin-left:4em;
        margin-right:4em;*/
        max-width:650px;
        margin:0 auto;
    }
}
@media only screen and (min-width : 480px) {
    .g-4koma {
        max-width:380px;
        margin:0 auto;
    }
}

#page-top{
    display:none;
    opacity: .5;
    position: fixed ;
    right: 2%; ;
    bottom: 8% ;
}
@media screen and (min-width:641px){
  .spv{
    display:none;
  }
}