@import url("common.css");

#menu {
    width: 30%;
    float: right;
}

#main {
    margin-right: 30%;
}

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

/* Polka Dots(Blue) Template
 * (C) Kakei.R
 * update 2016/07/09
 */

/* body */

body {
  margin: 0;
  padding: 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;}

/* メニュー */

#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(153,204,255,.1) 100%), rgba(255,255,255,.9);
  background: linear-gradient(to bottom, rgba(255,255,255,.4), rgba(153,204,255,.1)), rgba(255,255,255,.9);
}

.link_title {
  display: block;
  margin: 0.2em;
  padding-left: 16px;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAMMSURBVHjarFVNTxpRFH1vgBEGYUAoIIhAggUaaUJT0jRadGO3pBp33fXX+BO64Q90Y1rTaLqwKWkb2hA0DUkTksqHJY1UocrXCErPs2NjhUEWneQkw5s7Z+4999wL7fV65H9faqUHh4eHZH19/eJeq9WS8fFx2mg0eu12+29Mt9slZrOZrKysEI7jbiY9Pj4mW1tbRKVSEY1Go9Xr9dZWq/Xr9PT05Pz8/CIG92RqaoosLy//8y6nRMq+LAgCI+QsFsv0/Pw8DwI7z/Mqdq7T6S6esypGLp9pLUkSQYYuv9/PLS4u7uHYdHR0ZEYVP1npV0seidRkMpFoNCocHBzYlpaWvrpcrt7CwoJYLpfdzWbzSzAYrCWTSXJ2dtZf5TDSiYmJ0OzsbBuZNnAUQvnP4vH4IzTt9urqKmV6soxHJk2lUvZSqcSy3JPL1AF6n89nhJYzGxsbHkrp4H4MOoSWdHt7+2E4HObtdvt9WaYs8BZueB0IBNrZbHYun89r0cjRSJHlNBrliEQiAn7aACacBLxE1u+8Xu8nm82m73Q6dwZl20cKc1OQRtGIOjRz4ohnZrga43a79yHDd6fTGWKyXJ/KPtJ0Ou2B+DNojhqlijgqXY9ByT08z8MRk2iaf2imbFJ2d3ejCLagvEk5S2mQRPDvD4fDIWAIghhfqkgKY6uq1aoPE8SrcbHvAHcVJk5tNBoNSCRQLBZFRfPDyBTBKoweC6oALcALxIHPbNzld2LI0AdriZBIgFu0iqRWq7VrMBjY0riFwG84KgMe4AEQkV3AqtNA90k0yIAkcpCrqlg+20ihUOgjTM/BLkGAmbDITAFQOb4JMsjYsFQqFSM+/h7JSEO7H4vFMijtxc7OjgOL4zE0c+F4H6jJxNZ6vX6vUCi4MplMCvdvrnuVDtr8bBFvbm4+qdVqTzFVNmRygpXXgeY6LG99Lpdrg/AVGvQcLmmtra2RP30dQnq5+ROJhBkdnhNFMTg2NmaAHBI8ugfNP+C+ALB/hL7NT2/6j2LeZTGXcVczUrp+CzAAYa1NP61R4VYAAAAASUVORK5CYII=") 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:".";}

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

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

/* 日記記事 */

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

#main .C1, 
body.C1 .entry {
  background-color: rgba(26,167,177,.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(153,204,255,.1) 20%, transparent 0), radial-gradient(#0055cc 16%, rgba(153,204,255,.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: #99ccff;
}

#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 #99ccff;
  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 #99ccff;
  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(153,204,255,.2) 100%);
  background: linear-gradient(to bottom right, rgba(255,255,255,.3), rgba(153,204,255,.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 #99ccff;
}

#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("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAMMSURBVHjarFVNTxpRFH1vgBEGYUAoIIhAggUaaUJT0jRadGO3pBp33fXX+BO64Q90Y1rTaLqwKWkb2hA0DUkTksqHJY1UocrXCErPs2NjhUEWneQkw5s7Z+4999wL7fV65H9faqUHh4eHZH19/eJeq9WS8fFx2mg0eu12+29Mt9slZrOZrKysEI7jbiY9Pj4mW1tbRKVSEY1Go9Xr9dZWq/Xr9PT05Pz8/CIG92RqaoosLy//8y6nRMq+LAgCI+QsFsv0/Pw8DwI7z/Mqdq7T6S6esypGLp9pLUkSQYYuv9/PLS4u7uHYdHR0ZEYVP1npV0seidRkMpFoNCocHBzYlpaWvrpcrt7CwoJYLpfdzWbzSzAYrCWTSXJ2dtZf5TDSiYmJ0OzsbBuZNnAUQvnP4vH4IzTt9urqKmV6soxHJk2lUvZSqcSy3JPL1AF6n89nhJYzGxsbHkrp4H4MOoSWdHt7+2E4HObtdvt9WaYs8BZueB0IBNrZbHYun89r0cjRSJHlNBrliEQiAn7aACacBLxE1u+8Xu8nm82m73Q6dwZl20cKc1OQRtGIOjRz4ohnZrga43a79yHDd6fTGWKyXJ/KPtJ0Ou2B+DNojhqlijgqXY9ByT08z8MRk2iaf2imbFJ2d3ejCLagvEk5S2mQRPDvD4fDIWAIghhfqkgKY6uq1aoPE8SrcbHvAHcVJk5tNBoNSCRQLBZFRfPDyBTBKoweC6oALcALxIHPbNzld2LI0AdriZBIgFu0iqRWq7VrMBjY0riFwG84KgMe4AEQkV3AqtNA90k0yIAkcpCrqlg+20ihUOgjTM/BLkGAmbDITAFQOb4JMsjYsFQqFSM+/h7JSEO7H4vFMijtxc7OjgOL4zE0c+F4H6jJxNZ6vX6vUCi4MplMCvdvrnuVDtr8bBFvbm4+qdVqTzFVNmRygpXXgeY6LG99Lpdrg/AVGvQcLmmtra2RP30dQnq5+ROJhBkdnhNFMTg2NmaAHBI8ugfNP+C+ALB/hL7NT2/6j2LeZTGXcVczUrp+CzAAYa1NP61R4VYAAAAASUVORK5CYII=");
}

#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(153,204,255,.3);
  border-left: 1px solid rgba(153,204,255,.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(210,100%,90%), .1em .3em 1px hsl(210,100%,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(210,100%,90%), .1em .3em 1px hsl(210,100%,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(153,204,255,.3);
  border-bottom: 1px solid rgba(153,204,255,.3);
  -webkit-box-shadow: .1em .1em .3em rgba(153,204,255,.15) inset, -0.1em -0.1em .3em rgba(153,204,255,.15) inset, .1em .1em 3px hsl(210,100%,90%) inset;
  box-shadow: .1em .1em .3em rgba(153,204,255,.15) inset, -0.1em -0.1em .3em rgba(153,204,255,.15) inset, .1em .1em 3px hsl(210,100%,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(153,204,255,.1), rgba(255,204,255,.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(Blue) Template End */