@import url("common.css");
@import url(https://fonts.googleapis.com/css?family=Codystar&text=Trash);

/* Polka Dots(Serenity) Template
 * (C) Kakei.R
 * update 2016/06/25
 */

/* body */

body {
  margin: 0;
  padding: 0;
  background-image: radial-gradient(#0066cc 16%, rgba(146,168,209,.1) 20%, transparent 0), radial-gradient(#0066cc 16%, rgba(146,168,209,.1) 20%, transparent 0);
}

/* #header */

#header {
  margin-bottom: 2em;
  padding: 0;
  border-radius: 0 0 1em 1em;
}

/* 「日記 / コラム」タイトル */

#site_title {
  margin: 0;
  padding: 0.2em;
  color: #0066CC;
  font: bold 3rem/1.1 'Codystar', cursive;
  text-align: center;
}

/* 日記の概説 */

#site_info {
  padding: 0 0 0 1em;
}

/* 「メインページへ戻る」「日記のトップへ戻る」 */

#back_link {
  margin: 0;
  padding: 0;
  list-style: none;
}

#back_link li { float: left;}

#back_link li a {
  display: inline-block;
  padding: 0.4em 0;
  font-weight: bold;
}

#back_link:after{display:block;color:#fff;font-size:1px;height:1px;clear:both;content:".";}

/* 罫線,その他 */

hr { display: none;}
.C1, .C1 * { display: none !important;}

/* メニュー */

#menu {}

.link {
  margin: 0.2em 0 1em;
  padding: 0.4em 0.2em;
  color: #0066cc;
  background: -webkit-linear-gradient(top, rgba(255,255,255,.4) 0%, rgba(146,168,209,.1) 50%, rgba(247,202,201,.2) 100%), rgba(255,255,255,.9);
  background: linear-gradient(to bottom, rgba(255,255,255,.4) 0%, rgba(146,168,209,.1) 50%, rgba(247,202,201,.2) 100%), rgba(255,255,255,.9);
}

.link_title {
  display: block;
  margin: 0.2em;
  padding-left: 16px;
  background: url("files/drop.png") no-repeat center left;
  font-weight: bold;
}

.link_text {
  margin: 0 0 0.2em 1em;
  padding: 0;
  list-style-type: circle;
  list-style-position: outside;
}

/* メニュー
   最新の記事 */

#latest_articles {}

/* メニュー
   最新のコメント */

#latest_comments {}

#latest_comments .poster {
  font-weight: bold;
}

/* メニュー
   前後の記事 */

#neighbors {}

#link_here a { text-decoration: none;}

/* メニュー
   Archives */

#archives {}

#archives ul {
  margin: 0;
  list-style-type: none;
}

#archives .link_text li {
  list-style-position: inside;
  clear: both;}

a.link_year {
  display: block;
  padding-left: 1em;
  background: linear-gradient(to left, rgba(255,255,255,.2), rgba(255,255,255,.8));
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  clear: both;
  white-space: nowrap;
}

a.link_year:after {
  content: "\005e74\a";
}

a.link_month {
  display: inline-block;
  float: right;
  margin: 0;
  padding: 0.3em;
  clear: left;
}

a.link_month:after {
  content: "\006708";
}

.link_month[title*="年0"]:first-letter { visibility: hidden;}

#archives li:after{display:block;color:#fff;font-size:1px;height:1px;clear:both;content:".";}

/* メニュー
   Category */

#categories {}

/* #main (日記記事表示部分) */

#main {
  margin: 0 0.1em 2em;
}

/* 日記記事 */

.entry {
  margin: 0 0 2em;
  padding: 0.6em 1em;
  background-color: rgba(255,255,255,.93);
}

#main .C33, 
body.C33 .entry {
  background-color: rgba(255,255,255,.96);
}

/* 記事タイトル */

.entry_title {
  display: block;
  border: 1px inset #0066cc;
  -webkit-border-radius: 0.8em;
  border-radius: 0.8em;
  -webkit-box-shadow: .1em .1em .3em rgba(0,77,153,.8) inset, -0.1em -0.1em .3em rgba(0,77,153,.8) inset;
  box-shadow: .1em .1em .3em rgba(0,77,153,.8) inset, -0.1em -0.1em .3em rgba(0,77,153,.8) inset;
  background-color: #0066cc;
  background-image: radial-gradient(#0055cc 16%, rgba(146,168,209,.1) 20%, transparent 0), radial-gradient(#0055cc 16%, rgba(146,168,209,.1) 20%, transparent 0);
  background-position: 0 0, 24px 24px;
  background-size: 48px 48px;
  text-align: left;
  font-weight: bold;
  font-size: 120%;
  line-height: 1.8;
}

.entry_title a {
  display: block;
  padding: 0.2em 0.8em 0.2em 1em;
}

.entry_title a:link, 
.entry_title a:visited {
  color: #FFFFFF !important;
}

/* 記事本文 */

.entry_body {
  margin: 0;
  padding: 0.4em 0.4em 0.4em 1.2em;
  line-height: 1.8;
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* 記事本文中 htmlタグ */

.entry_body img {
  max-width: 100%;
  height: auto;
}

.entry_body blockquote {
  position: relative;
  border: 4px solid rgba(204,204,204,.5);
  border-radius: 1em;
  margin: 0.5rem;
  padding: 0.7rem 0.7rem 0.7rem 1.2rem;
  width: calc(100% - 1rem);
}

.entry_body blockquote:before,
.entry_body blockquote:after {
  position: absolute;
  color: rgba(204,204,204,.8);
  font-size: 4rem;
  line-height: 1;
}

.entry_body blockquote:before {
  top: -0.5rem;
  left: 0;
  content: "\00201c";
}

.entry_body blockquote:after {
  right: 0;
  bottom: -3rem;
  content: "\00201d";
}

/* 記事日時 */

.entry_date, 
#archive_yearlist .time {
  font-family: Courier, monospace;
  text-align: right;
}

/* 記事カテゴリ */

.entry_info {
  text-align: right;
}

/* コメント() */

.entry_responses {
  text-align: right;
}

/* 記事個別ページコメント部分 */

#responses {
  margin: 2em auto 1em;
  padding: 0.1em;
}

#responses input {
  border-color: #89ABE3;
}

#responses input:focus, 
#responses input:hover {
  outline: none;
  border-color: #0066cc;
}

#responses .comment {
  text-align: right;
}

#responses .comment_title {
  display: block;
  padding: .2em 1em;
  border-bottom: 2px solid #89ABE3;
  text-align: left;
}

#comments:before {
  content: "\003053\00306e\008a18\004e8b\003078\00306e";
}

#responses form {
  margin: 0;
  padding: 1em 0 0;
}

#responses .comment_form {
  border-bottom: 2px solid #89ABE3;
  vertical-align: baseline;
}

.comment_form label {
  display: block;
}

.comment_form input[type="text"] {
  border: 2px inset #ccc;
  min-height: 2em;
  -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,.2) inset, 0 0 3px #ccc;
  box-shadow: 3px 3px 3px rgba(0,0,0,.2) inset, 0 0 2px #ccc;
}

#poster_name, #comment_field {
  display: block;
  padding-left: .3em;
  width: 100%;
  text-align: left;
}

#poster_name {
  padding-left: 1.3em;
}

#poster_name input {
  width: 200px;
}

#comment_field input {
  width: 86%;
}

.comment_form input[type="submit"] {
  margin-top: 1em;
  padding: 0.4em;
  background: -webkit-linear-gradient(top left, rgba(255,255,255,.3), rgba(146,168,209,.2) 100%);
  background: linear-gradient(to bottom right, rgba(255,255,255,.3), rgba(146,168,209,.2) 100%);
  font-size: 1.4rem;
}

input[type="submit"]:hover, input[type="submit"]:active {
  color: #CC0033;
  background: -webkit-linear-gradient(top left, rgba(255,255,255,.3), rgba(255,204,255,.3) 100%);
  background: linear-gradient(to bottom right, rgba(255,255,255,.3), rgba(255,204,255,.3) 100%);
}

.comment_element {
  padding: 0.4em;
  text-align: left;
}

.comment_element:not(:last-child) {
  border-bottom: 1px dotted #89ABE3;
}

#responses .comment .comment_element .comment_auther {
  font-weight: bold;
  line-height: 1.8;
}

/* 「XXXX年の記事一覧」「XXXX年XX月の記事」ページ */

#main h2 {
  padding: 0.4em;
  background: rgba(229,239,255,.7);
}

#archive_yearlist {
  padding-bottom: 1em;
}

#main h2, #archive_yearlist dt {
  font-weight: bold;
}

dt, dd {
  margin: 0.2em 0.2em 0.2em 1em;
}

/* 「これ以前の記事へ」リンク */

.link_older a {
  display: block;
  padding: 1em;
  font-weight: bold;
}

/* 「より新しい記事へ」 「より古い記事へ」 */

.page_link {
  margin-bottom: 1em;
  padding: 1em;
  text-align: center;
}

.page_link a { font-weight: bold;}
.page_link a:first-child span:after { content: attr(title) "";}
.page_link a:last-child span:before { content: attr(title) "";}

/* 装飾共通部分 */

#header,
#responses,
#archive_yearlist,
.link_older a,
.page_link {
  background-color: #fafcff;
  background-color: rgba(250,252,255,.9);
}

#back_link li a:before,
#main h2:before,
#archive_yearlist dt:before,
.link_older a:before {
  content: url("files/drop.png");
}

#menu .link,
.link_text li a,
.link_year,
#main h2,
#archive_yearlist,
#archive_yearlist dt,
#main .entry,
#responses,
.link_older a,
.page_link {
  -webkit-border-radius: 1em;
  border-radius: 1em;
}

#header,
#menu .link,
#main .entry,
#responses,
.comment_form input[type="submit"],
#archive_yearlist,
.link_older a {
  border-top: 1px solid rgba(146,168,209,.3);
  border-left: 1px solid rgba(146,168,209,.3);
  -webkit-box-shadow: .3em .3em .3em rgba(250,252,255,.5) inset, -0.3em -0.3em .3em rgba(204,204,204,.5) inset, .1em .1em 3px hsl(219,30%,90%), .1em .3em 1px hsl(219,30%,80%), 0 .5em 5px rgba(204,204,204,.8);
  box-shadow: .3em .3em .3em rgba(250,252,255,.5) inset, -0.3em -0.3em .3em rgba(204,204,204,.5) inset, .1em .1em 3px hsl(219,30%,90%), .1em .3em 1px hsl(219,30%,80%), 0 .5em 5px rgba(204,204,204,.8);
}

#site_title, 
#back_link li a, 
#main h2, 
.comment_form input[type="submit"] {
  text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px 1px .3em #fff, 0 .18em .15em rgba(0,0,0,.2);
}

#link_here a, 
.link_year, 
#main h2, 
.page_link {
  border-right: 1px solid rgba(146,168,209,.3);
  border-bottom: 1px solid rgba(146,168,209,.3);
  -webkit-box-shadow: .1em .1em .3em rgba(146,168,209,.15) inset, -0.1em -0.1em .3em rgba(146,168,209,.15) inset, .1em .1em 3px hsl(219,30%,90%) inset;
  box-shadow: .1em .1em .3em rgba(146,168,209,.15) inset, -0.1em -0.1em .3em rgba(146,168,209,.15) inset, .1em .1em 3px hsl(219,30%,90%) inset;
}

/* 1024*80% < screens */

@media only screen and (min-width:820px) {

#menu { float: right; width: 20%;}
#main { margin-right: 21%;}

}

/* screens < width 1024*80%=819.2 */

@media only screen and (max-width:819px) {

body > div:first-child {
  display: -ms-flexbox; display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-justify-content: center; justify-content: center;
}
#header { -webkit-order: 1; order: 1;}
#menu { -webkit-order: 3; order: 3;}
#main { -webkit-order: 2; order: 2;}
.link_text li a {
  display: block;
  max-width: 99%;
  padding: 0.8em 0.5em;
  background: linear-gradient(to bottom, rgba(255,255,255,.9), rgba(146,168,209,.1), rgba(247,202,201,.2));}
#archives .link_text li { font-size: 1.2rem;}

}

/* screens <= width 640*80%=512 */

@media only screen and (max-width:512px) {

#site_info { padding-left: 0.3em;}
.link {padding: 0.2em 0;}
.link_text {
  margin-left: 0.2em; 
  list-style-type: none; 
  list-style-position: inside;}

#link_here a { background-image: none;}
.entry{ padding: 0.2em 0.3em;}
.entry_body { padding: 0;}

#poster_name input, 
#comment_field input { max-width: 100%;}
.page_link a:first-child span:after, 
.page_link a:last-child span:before { content: "";}

}

/* Polka Dots(Serenity) Template End */