body{
  background:#eee url(/top/soda.webp) fixed repeat bottom left;
  color:#3f344c;
  text-size-adjust:100%;
}
a{
  color:#76608e;
}
a:visited{
  color:#9f4f85;
}
/* position ----------------------------------------------------*/
.clear{
  clear:left;
}
@media screen and (min-width:940px) {
  .box_all{
    margin:auto;
  }
  .box{
    padding:0;
    margin:30px auto;
  }
  .box .header{
    margin:0;
  }
  .box .comment{
    width:500px;
    padding:10px;
    margin:15px auto;
    border-radius: 10px;
  }
  .box .image{
    margin:15px auto;
    text-align: center;
  }
  /***********/
  .content{
    padding:10px;
    margin:5px auto;
    width:fit-content;
    border-radius: 10px;
  }
  .content img,
  .image img, .comment img{
    margin:10px auto;
    border-width: 1px;
    display: block;
    max-width: 100vw;
    max-height: 100vh;
  }
  /***********/
  .page_pager,
  .fotter_pager{
    margin:10px auto;
    width:600px;
    clear:both;
  }
  .page_pager_box, .pager1, .pager2{
    width:600px;
  }
  .page_pager_prev,.page_pager_now, 
  .pager_prev,.pager_now{
    padding:5px;
    width:200px;
  }
  .page_pager_next, .pager_next{
    width:190px;
  }
  /***********/
  .menu{
    width:160px;
    top:110px;
    right:30px;
    position:  absolute;
    border-radius: 30px;
  }
  .link, .copyright{
    border-radius: 10px;
    margin:10px;
    padding:10px;
  }

}
/* small screen -----------------------------------------------*/
@media screen and (max-width:939px) {
  body{
    margin:0;
    padding:0;
  }
  /***********/
  .box_all{
    margin:0;
    padding:0;
  }
  .box{
    margin:0;
    padding:0;
  }
  .box .header{
    max-width: fit-content;
    background-color: #b0e6d2;
    border-top-right-radius: 10px;
    margin-top: 0;
    margin-bottom:0;
  }
  .box .fotter{
    width:100px;
    max-width: fit-content;
    background-color: #b0e6d2;
    border-bottom-left-radius: 10px;
    margin-top: 0;
    margin-left: auto;
    margin-right: 0;
    margin-bottom:10px;
  }
  .box .comment{
    margin:0;
    padding:10px;
  }
  /***********/
  .content{
    margin:0;
    padding:10px 0;
  }
  /***********/
  .comment img,
  .image img{
    max-width: 100vw;
    display: block;
  }
  .comment img,
  .image img,
  .content img{
    margin:10px auto;
  }
  /***********/
  .menu{
    margin:0;
    width:100vw;
    padding:5px;
    float:left;
  }
  .menu_series, .menu_year{
    float:left;
    margin: 0;
  }
  .menu h3{
    font-size: small;
    float:left;
    clear:left;
    padding:10px;
  }
  .menu a{
    float:left;
  }
  /***********/
  .page_pager,
  .fotter_pager{
    margin:10px auto;
    clear:both;
  }
  .page_pager_prev,.page_pager_now, 
  .pager_prev,.pager_now{
    padding:5px;
    font-size: large;
    width:90vw;
  }
  .page_pager_next, .pager_next{
    padding:5px;
    font-size: large;
    width:90vw;
  }
  /***********/
  .copyright{
    padding:10px;
    margin:0;
    margin-top:10px;
    clear:both;
  }
}

/* Box --------------------------------------------------------------------------------*/
/* Box */
.box{
  margin-top:10px;
  margin-bottom:10px;
}
.box .header{
  padding:15px;
  font-size:small;
}
.box .fotter{
  text-align:right;
  font-size:small;
  padding:15px;
}
.box .comment{
  background-color:#fff;
  line-height:180%;
  text-align:left;
}
.content img, .image img, .comment img{
  border-width: 1px;
  border-style:  solid;
  border-color: #1c8a7f;
}
/* content ----------------------------*/
.content{
	text-align:center;
  background-color: #f4fafa;
}
.content_title{
	margin:0px;
	padding:0px;
	text-align:left;
}
.content_notice, .content_comment{
	text-align:left;
}
.content_createdate{
  font-size:x-small;
  text-align: right;
}
.content_seedate{
	display:block;
	text-align:right;
}
/* page pager ---------------------------------------------------------------------------*/
.page_pager_box{
  margin:10px auto;
  padding:10px;
  border-radius: 10px;
	text-align:left;
  background:white url(/top/soda_greenwhite.webp) repeat fixed center bottom;
  
  float:left;
}
.page_pager img{
  max-width: 50px;
  max-height: 50px;
}
.page_pager_prev,.page_pager_now{
  float:left;
}
.page_pager_next{
  text-align: right;
  float:right;
}
/* pager */
.pager1{
  margin:10px auto;
  padding:10px;
  border-radius: 10px;
	text-align:left;
  background:white url(/top/soda_greenwhite.webp) repeat fixed center bottom;
  float:left;
}
.pager_prev,.pager_now{
  float:left;
}
.pager_next{
  text-align: right;
  float:right;
}
.pager2{
  margin:10px auto;
  clear:both;
  padding:10px;
  border-radius: 10px;
	text-align:left;
  background:white url(/top/soda_greenwhite.webp) repeat fixed center bottom;
}

.page_pager,
.fotter_pager{
  margin:10px auto;
  clear:both;
}

/* Menu ---------------------------------------------------------------------------------*/
.menu{
  clear:left;
  background:white url(/top/soda_greenwhite.webp) repeat-x scroll center bottom;
  padding:5;
}
.menu strong{
  background-color:#a4ede6;
  color:#2b1f43;
}
.menu h3{
  color:#1c8a7f;
  border-bottom:1px dotted #1c8a7f;
}
.menu_year a,
.menu_series a{
  display:block;
  padding:3px;
  margin:3px;
  width:130px; 
}

/* Link and copyright -------------------------------------------------------------------*/
.link,.copyright{
  background-color: #d9edee;
}
.copyright{
  clear:both;
}

/* 360width , img = screen width */
@media screen and (width:360px) {
  .box .comment img{
    margin-left: -10px;
    border-width: 0;
    border-top-width:1px;
    border-bottom-width:1px;
  }
}