@charset "UTF-8";
@import"style.css";


/* ------------------------------共通------------------------------　*/
#blog_content_top { width:1060px; margin:30px auto; padding:0; }
#blog_content { width:1060px; margin:30px auto; padding:0; }
article#page1060 { width:1060px; }
article { width:700px; height:auto; float:left; background:#ffffff; border-radius:5px; margin:0; padding:0; word-wrap:break-all; }
article p { font-size:16px; word-wrap:break-word; }
article ul { margin-bottom:20px; }
article ul li { font-size:16px; }
article ul li:before { content:"● "; }
/*この記事を書いた人*/
article .left { width:100px; float:left; }
article .right { width:570px; float:right; }
article .right p.name { font-size:20px; margin-bottom:6px; }
article .right p.name span { color:#8898a1; font-size:16px; margin-left:20px; }
article .right br { display:none; }
article .right p { font-size:14px; }


@media screen and (max-width:768px){
  #blog_content_top { width:100%; float:none;  margin:80px 0 0 0; }
  #blog_content { width:100%; float:none; margin:80px 0 0 0; }
  article { width:90%; float:none; margin:0 auto 30px auto; }
  article p { font-size:14px; }
  article#page1060 { width:90%; }
  /*この記事を書いた人*/
  article .left { width:100%; float:none; }
  article .left img { margin:0 auto; }
  article .right { width:100%; float:none; }
  article .right p.name { text-align:center; line-height:1.4; margin-bottom:20px; }
  article .right p.name span { margin-left:0; }
  article .right br { display:inline; }
  article .right p { font-size:14px; }
}

aside { width:320px; float:right; margin:0; padding:10px; }
aside p.title { margin:30px 0 10px 0; padding:0; font-size:16px; }
aside p { margin:0; padding:0; font-size:12px;}
aside ul { margin:0; padding:0; }
aside ul li { font-size:14px; margin:0; padding:0; }
aside ul li:before { content:">"; color:#ff8baa; }
@media screen and (max-width:768px){
  aside { width:90%; float:none; margin:0 auto 30px auto; }
}

/* ------------------------------記事一覧ページ（home.php）------------------------------　*/
section.post { width:700px; margin:0; padding:20px 0; border-bottom:1px #cccccc dotted;}
section.post p { margin:0; padding:0; font-size:16px; }
section.post p.title { font-size:20px; line-height:1.2; }
section.post img { width:100px; height:100px; float:left; margin-right:10px;}
@media screen and (max-width:768px){
  section.post { width:100%; }
  aside ul li { border:none; }
}

#header { margin:0; height:300px; }
#header h1 { font-size:36px; margin:100px 0 20px 0; padding:0; color:#333333; text-align:center; }
.blog_header { background:#333333; }
h1 , h2 , h3 , h4 { font-weight:normal; }
h1 { line-height:1.4; }
h2 , h3 { font-size:26px; text-align:left; background:none; }
h2 { margin:50px 0 30px 0; padding:20px; color:#333333; background:#fff2f6; border-bottom:solid 2px #ff8baa; }
h3 { margin:50px 0 30px 0; font-size:16px; font-weight:bold; position:relative; border-bottom:2px solid #ccc; padding: 8px 10px; }
h3::before { position:absolute; top:100%; left:0; width:20%; height:2px; background-color:#ff8baa; z-index:2; content:''; }
a { color:#ff8baa; }
@media screen and (max-width:768px){
  #header { height:auto; margin:0; padding:0 20px;}
  #header h1 { font-size:22px; }
  h2 { font-size:20px; }
  h3 { font-size:16px; }
}
#blog_content .button { width:300px; margin:0 auto; }

/* ------------------------------パン屑リスト------------------------------　*/
nav#pan { text-align:center; padding:0 0 50px 0; }
nav#pan ol { width:1080px; margin:0 auto; padding:0; }
nav#pan ol li { display:inline; list-style-type:none; font-size:14px; color:#999999; margin:0; padding:0; }
nav#pan ol li a { color:#999999; }
nav#pan ol li:before { content: " > "; }
nav#pan ol li:first-child:before { content:""; }
@media screen and (max-width:768px){
nav#pan ol { width:100%; }
}


/* ------------------------------トップページ一覧の文字------------------------------　*/
.post p.title { line-height:1; margin:0 0 10px 0; padding:0; }
p.list01 { line-height:1; margin:0 0 10px 0!important; padding:0; }
p.list02 { line-height:1.6; margin:0 0 10px 0; padding:0; font-size:16px; }
@media screen and (max-width:768px){
  .post p.title { font-size:16px!important; }
  p.list01 {  margin:0 0 6px 0!important; }
  p.list02 { font-size:14px!important; }
}


/* ------------------------------トップページの記事タイトル、投稿日時、カテゴリ、タグ、続きを読む、投稿者------------------------------　*/
.hiniti { font-size:12px; margin:10px 0 30px 0;  border-bottom:1px dotted #333333; }
.meta { font-size:12px; margin: 0 0 10px 0;}
.home { background:url(images/home.png) no-repeat 0 50%; padding-left:16px; }
.date { background:url(images/date.png) no-repeat 0 50%; padding-left:16px; padding-right:8px; font-size:12px; }
.category{ background:url(images/category.png) no-repeat 0 50%; padding-left:16px; font-size:12px; }
.tag { background:url(images/tag.png) no-repeat 0 50%; padding-left:16px; }
.author { background:url(images/author.png) no-repeat 0 50%; padding-left:16px; }
.pan { font-size:10pt; text-align:left; }
.single-meta { font-size:10pt; color:#666666; margin:0 0 20px 0; text-align:right; }

/* -----引用文-----　*/
blockquote { background:#f7f7f7; margin:0 0 20px 0; padding:20px 20px 20px 60px; position:relative; border-radius:5px; color:#333333; }
blockquote:before { content:"“"; font-size:100px; top:0px; left:0; color:#333333; font-family:serif; line-height:1em; position:absolute;  }
blockquote:after { content:"”"; font-size:100px; right:0; bottom:-16px; color:#333333; font-family:serif; line-height:0; position:absolute; }
blockquote p{ margin:0; }
/* Internet Explorer11のみに適用したい設定 */
@media screen and (min-width:0\0) { *::-ms-backdrop, blockquote:before { left:-55px; } *::-ms-backdrop, blockquote:after { right:-55px; } }

/* -----投稿一覧のページナビ-----　*/
.page-nav { color:#333333; margin:20px auto 0 auto; line-height:2em; text-align:center; float:none; clear:both;}
a.page-numbers, .page-nav .current { color:#333333; padding:.7em; border:solid 1px #cccccc; border-radius:3px; text-decoration:none; font-size:smaller; float:none; clear:both; }
a.page-numbers:hover { color:#ffffff; background:#333333; }
.page-nav .current { color: #ffffff; background:#333333; border-color:#cccccc; font-weight:bold: }

/* ------------------------------コメント------------------------------　*/
#comment-area { margin:50px 0 0 0;}
#respond { background:#ffffff; border:1px #cccccc solid; border-radius:5px; margin:3px; padding:15px; }
.comment-list { font-size:.7em;}
.comment-list li{ background:none; }
.comment-list img { float:left; margin:0 10px 10px 0; }
.comment { margin:50px 0; }
.children { margin-left:30px; } /* ---返信エリア---　*/
.reply { margin:-20px 0 0 0; } /* ---返信---　*/
.bypostauthor {  } /* ---管理人---　*/
.bypostauthor img{ float:right; margin:0 0 10px 10px; } /* ---管理人---　*/

#reply-title{ font-size:20px; margin:0 0 10px 0; }

/* ------------------------------検索------------------------------　*/
.widget_search { margin-bottom:20px; }
input#s { width:65% }
input#searchsubmit { width:30%; }
input#s , input#searchsubmit { height:auto; padding:10px; background:#ffffff; color:#333333; border:1px solid #cccccc; border-radius:3px; }

/* ------------------------------関連記事------------------------------　*/
.related { margin:60px 0 20px 0; }
.related-entry { border-bottom:1px solid #cccccc; padding:20px; }
.related img { width:100px; height:100px; float:left; margin:0 10px 0 0; }
.related a { font-size:16px; }
.related p { margin:0; padding:0; font-size:12px; }
.related p.title { font-size:16px; }
@media screen and (max-width:400px){
  .related-entry { padding:20px 0; }
}

/* -----個別記事のページナビ-----　*/
#page-navi { border:1px #cccccc solid; border-radius:3px; margin:0 0 30px 0; padding:0; background:url(images/cccccc.jpg) repeat-y 50% 0; }
#page-navi img { width:100px; height:100px; float:left; margin:0 10px 0 0; }
#prev{ width:50%; float:left; padding:20px; }
#next{ width:50%; float:right; padding:20px; }
#page-navi p { margin:0; padding:0; }

@media screen and (max-width:768px){
#page-navi img { width:50%; height:50%; }
}
@media screen and (max-width:400px){
#page-navi img { width:100%; height:100%; }
}

/* ------------------------------動画のレスポンシブ------------------------------　*/
@media screen and (max-width:768px){
.video { position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; }
.video iframe { position:absolute; top:0; left:0; width:100%; height:100%; }
 }