@charset "utf-8";
@import url(https://parts.blog.livedoor.jp/css/template_6thgen.css);

/**
@prefix : <http://purl.org/net/ns/doas#> .
<> a :CSSStylesheet;
 :title "ver06_km_vertical10th";
 :shortdesc "Design Template for livedoor Blog";
 :created "2013-08-20";
 :release [:revision "1.00"; :created "2013-08-20"];
 :page <http://blogdesign.ldblog.jp/archives/30944324.html>;
 :rights "LINE Corporation".
*/


/* 全体のレイアウト
----------------------------------------------- */
body {
  background-color: #fbfaf6;
}
#wrapper {
  position: relative;
}
#container {
  margin: 0 auto;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
}
#content {
/*  font-family:"@ＭＳ Ｐゴシック", "@MS Mincho", "@ヒラギノ明朝 W3", "@Hiragino Mincho", serif;*/
}
#main {
  padding: 80px 40px 40px;
  border-left: 1px solid #e6e5e1;
}
body.page-index #main,
body.page-category #main,
body.page-monthly #main {
  -webkit-writing-mode: horizontal-tb;
      -ms-writing-mode: lr-tb;
          writing-mode: horizontal-tb;
}

.article {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  -webkit-text-align-last:justify;
          text-align-last:justify;
}
body.page-index .article,
body.page-category .article,
body.page-monthly .article {
  height:320px;
  margin-bottom: 60px;
  width: 580px;
  overflow: hidden;
}

.article-body {
  overflow: visible;
}
body.page-article .article-body {
  -webkit-column-width:320px;
     -moz-column-width:320px;
          column-width:320px;
  -webkit-column-gap: 60px;
          column-gap: 60px;
  width: 580px;
}

.column-meta,
.column-horizontal {
  font-size: 14px;
  border-top: 1px dashed #b0afab;
  width: 580px;
  -webkit-column-break-before: always;
                 break-before: always;
}
.column-meta{
  padding-top: 40px;
}
.column-horizontal{
  -webkit-writing-mode: horizontal-tb;
      -ms-writing-mode: lr-tb;
          writing-mode: horizontal-tb;
  height: 120px;
}

.article-social-btn {
  padding-top: 20px;
  text-align: right;
}
.ads{
  text-align: center;
}


body.page-article .article{
  position: relative;
}
body.page-article .ads {
position: absolute;
bottom: 0;
left: 16px;
width: 580px;
text-align:center;
  -webkit-writing-mode: horizontal-tb;
      -ms-writing-mode: lr-tb;
          writing-mode: horizontal-tb;
}


/* サイドバー・コメントスライド */
#sidebar {
  position: absolute;
  top: 0;
  left: -305px;
  width: 300px;
  background-color: rgba(255,255,255,0.95);
  box-shadow: 0 0 5px #666;
  overflow: auto;
  z-index: 100;
}
#sidebar-inner {
  padding: 10px;
}
#sidebar-open,
#comment-open {
  cursor: pointer;
  height: 36px;
  left: 0;
  position: absolute;
  width: 36px;
  z-index: 99;
}
#sidebar-open {
  background:url(https://parts.blog.livedoor.jp/img/usr/ver06_km_vertical10th/btn_sidebar.png) 0 0 no-repeat;
  top: 20px;
}
#comment-open {
  background:url(https://parts.blog.livedoor.jp/img/usr/ver06_km_vertical10th/btn_comment.png) 0 0 no-repeat;
  top: 60px;
}
#sidebar-open:hover,
#comment-open:hover {
  opacity: 0.8;
}
#sidebar-close,
#comment-close {
  cursor: pointer;
  position: absolute;
  right: 5px;
  top: 5px;
  z-index: 101;
}
#sidebar-close:hover,
#comment-close:hover {
  box-shadow: 0 0 3px #aaa;
}
#article-options {
  position: absolute;
  top: 0;
  left: -850px;
  width: 845px;
  background-color: rgba(255,255,255,0.95);
  box-shadow: 0 0 5px #666;
  z-index: 100;
}
#article-options-inner {
  padding: 10px;
  overflow: hidden;
}
#article-options-list {
  float:left;
  width: 300px;
}
.no-comments {
  float:left;
  margin-top:32px;
}
#article-options-form {
  float:right;
  width: 520px;
}
#comment-form {
  margin: 20px 0 30px;
}
#comment-form dd {
  margin: 0 8px 0 64px;
}
#article-options a {
  color:#000;
}
#article-options a:hover {
  text-decoration: underline;
}
.comment-set {
  border-bottom: 1px dashed #ccc;
}
.comment-body, .ping-excerpt {
  padding: 8px 0 0 0;
}
#trackback-form {
  margin: 0 6px 0 60px;
}


/* 全体の文字色、リンク色
----------------------------------------------- */
body {
  color: #444;
  font: 14px/1.2 Helvetica,Verdana,sans-serif;
}
a:link {}
a:visited {}
a {
  text-decoration:none;
}
a  {
  color:#c00;
}
a:hover  {
  text-decoration: none;
}
.article a:hover  {
  text-decoration: overline;
}
#sidebar a {
  color: #666;
}
#sidebar a:hover {
  text-decoration: underline;
}
#sidebar .calendarhead a {
  color: #000;
}


/* スプライトアイコン
----------------------------------------------- */
.article-category dt,
.article-comment-count dt,
.article-continue a,
dl.common-theme dt,
dl.article-tags dt {
  background: none;
}


/* ブログのヘッダー、タイトル、説明
----------------------------------------------- */
#blog-header {
  background-color: #000;
}
#blog-header-inner {
}
#blog-title {
  color: #b3b3b3;
  font-size: 40px;
  line-height: 1.2;
  padding: 80px 40px;
}
#blog-title a {
  color: #fff;
}
#blog-title a:hover {
  color: #b3b3b3;
}
#blog-description {
  color: #fff;
  font-size: 18px;
  line-height: 1.4;
  padding: 80px 0 80px 40px;
}
#blog-description a {
  color: #b3b3b3;
}


/* メインカラム
----------------------------------------------- */
/* 記事ヘッダー、記事タイトル */
.article-title {
  /*margin: 0 20px 0 50px;*/
  -webkit-margin-before: 20px;
   -webkit-margin-after: 50px;
     -moz-margin-before: 20px;
      -moz-margin-after: 50px;
          margin-before: 20px;
           margin-after: 50px;
}
.article-title a {
  color:#1f1f1f!important;
  font-size: 24px;
  text-decoration: none;
}
.article-title a:hover {
  color:#b3b3b3!important;
  text-decoration: none;
}

/* 日付 */
.article-date {
  color: #777;
  font-size: 12px;
}

/* 関連記事 */
.article-body .related-articles {
  margin-left: 4em;
  line-height:1.3
}
.article-body .related-articles h3 {
  color: #555;
  font-size: 14px;
  font-weight: bold;
}
.article-body .related-articles ul {
  list-style: none;
  margin:0;
  padding-left:0;
}
.article-body .related-articles ul li {
  margin: 0 12px;
}

/* 続きを読む */
.article-continue {
  text-align: right;
  margin: 0 1em 0 0;
}
.article-continue a {
  color:#333;
}

/* メッセージボード */
.message-board-outer {
  background-color: #fad10f;
  color: #555;
  line-height: 1.6;
  overflow: hidden;
}
.message-board {
  padding: 80px 20px;
}

/* プライベートモード、コメントにログインが必要な場合のメッセージ */
div.private-mode-announcement,
div.comment-auth-announcement {
  background-color: #fafafa;
  border: 1px solid #ddd;
  margin: 0 8px 0 62px;
}


/* 記事本文
----------------------------------------------- */
.article-body {
  font-size: 16px;
  line-height:2.0;
}
.article-body-inner a{
  text-decoration: none;
}
.article-body-inner h1,
.article-body-inner h2,
.article-body-inner h3,
.article-body-inner h4,
.article-body-inner h5,
.article-body-inner h6 {
  clear: both;
  margin: 0 0.7em;
  padding: 0;
}
.article-body-inner p,
.article-body-inner pre,
.article-body-inner dl,
.article-body-inner ol,
.article-body-inner ul,
.article-body-inner blockquote {
  margin: 0 1em;
}
.article-body-inner img.pict{
  display: block;
  max-width: 100%;
  -webkit-column-break-before: always;
                 break-before: always;
}
.article-body-inner img.pict:first-child{
  -webkit-column-break-before: auto;
                 break-before: auto;
  -webkit-column-break-after: always;
                 break-after: always;
}

.article-body-inner dt {
  margin: 0 0.5em 0 0;
}
.article-body-inner dl + dt {
  margin: 0;
}
.article-body-inner dd {
  margin: 1em 0 0 0;
}
.article-body-inner ol,
.article-body-inner ul {
  padding: 1.75em 0 0 0;
}

.article-body-inner blockquote {
  padding: 1.5em 1em 0;
}
.article-body-inner blockquote:before {
  content: none;
}
.article-body-inner blockquote,
.article-body-inner blockquote p {
  line-height: 1.8;
}
.article-category {
  padding-left: 40px;
}
.article-category dt,
.article-comment-count dt {
  display:none;
}
.article-category dd,
.article-comment-count dd {
  padding: 0 0 8px 0;
  margin: 0;
}
.article-category dd.article-category2 {
  border-left: none;
  border-top: 1px solid #999;
  padding-top: 6px;
}
.article-comment-count dt {
  background-position: 0 -70px;
}

/* タグ */
dl.article-tags {
  margin: 0 0 0 4em;
}
dl.article-tags dt {
  color: #999;
  text-indent: 0;
  width: auto;
  margin-bottom: 8px;
}
dl.article-tags dd {
  margin: 0 0 1em 0;
}


/* コメント・トラックバック一覧
----------------------------------------------- */
.comment-date,
.ping-blog-name,
.ping-date {
  border-left: 1px solid #aaa;
  color: #aaa;
}
.comment-body {
  margin-left: 16px;
  color: #666;
}
.ping-excerpt {
  color: #666;
  margin-left: 16px;
}


/* ページ送り
----------------------------------------------- */
/* トップページ */
ul.index-navigator li a,
ul.index-navigator li.current span {
  background-color: #d7d7d7;
  color: #777;
  line-height: 36px;
  margin: 0 1px;
  padding: 0 14px;
  -webkit-transition: none;
     -moz-transition: none;
      -ms-transition: none;
       -o-transition: none;
          transition: none;
}
ul.index-navigator li.current span {
  background-color: #c1c1c1;
  color: #1f1f1f;
  font-weight: bold;
}
ul.index-navigator li a:visited {
  color: #777;
}


/* 記事ページ、月別アーカイブページ */
ul.article-pager,
ul.archives-pager {
  text-align: left;
  padding: 0;
}
ul.article-pager li,
ul.archives-pager li {
  display: inline;
  margin: 0;
}

ul.article-pager li a,
ul.archives-pager li a {
  display: inline;
  padding: 0;
  -webkit-transition: none;
     -moz-transition: none;
      -ms-transition: none;
       -o-transition: none;
          transition: none;
}
ul.article-pager li a:hover,
ul.archives-pager li a:hover {
  background-color: transparent;
}
ul.archives-pager li.both {
  border: 0;
}

/* 記事ページ */
ul.article-pager li{
  color: #999;
  display: block;
  margin: 0 0 1em 0;
}
ul.article-pager li a:hover {
  text-decoration: overline;
}

/* アーカイブページ */
ul.archives-pager {
  font-size: 12px;
  margin-top: 40px;
  overflow: hidden;
}
ul.archives-pager li.next {
  float: right;
}
ul.archives-pager li.prev {
  float: left;
}
ul.archives-pager li a {
  color: #777;
  display: inline-block;
  background-color: #d7d7d7;
  padding: 10px 20px;
}
ul.archives-pager li.both {
  border: none;
}


/* ブログのフッター
----------------------------------------------- */
#blog-footer {
  color:#555;
  position: relative;
  margin-top: -40px;
}
#blog-footer a {
  color:#555;
}


/* ブログパーツ
----------------------------------------------- */
/* 共通 */
.sidewrapper:first-child {
  padding-top: 0;
}
.sidewrapper {
  border-bottom: 1px solid #fcfcfc;
  font-size: 12px;
  overflow: hidden;
  padding: 20px 0;
  position: relative;
}
.sidewrapper:after{
  border-bottom: 1px solid #d8d8d8;
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  width: 100%;
}
.sidewrapper .sidetitle {
  color: #000;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 0.7em;
}
.sidewrapper .sidetitle a {
  color: #000;
}
.sidewrapper .side .sidebody {
  line-height: 1.5;
  margin: 0 0 7px 0;
}
.sidewrapper .side .sidebody.category-child {
  margin-left: 1em;
}

/* カレンダー */
#sidebar .calendarhead {
  font-weight: bold;
  text-align: center;
}
#sidebar table.caltblwk .weekday {
  color: #666;
}
#sidebar table.caltblwk .sun {
  color: #ff5d5d;
}
#sidebar table.caltblwk .sat {
  color: #578efa;
}
#sidebar table.caltblday {
  color: #8d8d8d;
  border-collapse: separate;
  border-spacing: 1px;
}
#sidebar table.caltblday .caloff {
  background-color: #fff;
  border: 1px solid #e4e7e8;
}
#sidebar table.caltblday .calon {
  background-color: #000;
  border: none;
}
#sidebar table.caltblday td a {
  color:#fff;
  height: 30px;
  line-height: 30px;
}
#sidebar table.caltblday td a:hover {
  background-color: #222;
  text-decoration: none;
}
#sidebar table.caltbl {
  line-height: 30px;
}


/* その他のパーツ
----------------------------------------------- */
/* アーカイブヘッダ */
.archives-header {
  background-color: #d7d7d7;
  color: #333;
  font-size: 15px;
  font-weight:bold;
  padding: 80px 20px;
}

/* 記事下広告 */
#ad2 {}
#ad2 a.addescription {
  color:#666;
}


/* 圏点
==================================== */
.em-sesame {
  -webkit-text-emphasis-style: filled sesame;
          text-emphasis-style: filled sesame;
}
.em-sesame-open {
  -webkit-text-emphasis-style: open sesame;
          text-emphasis-style: open sesame;
}
.em-dot {
  -webkit-text-emphasis-style: filled dot;
          text-emphasis-style: filled dot;
}
.em-dot-open {
  -webkit-text-emphasis-style: open dot;
          text-emphasis-style: open dot;
}
.em-circle {
  -webkit-text-emphasis-style: filled circle;
          text-emphasis-style: filled circle;
}
.em-circle-open {
  -webkit-text-emphasis-style: open circle;
          text-emphasis-style: open circle;
}
.em-double-circle {
  -webkit-text-emphasis-style: filled double-circle;
          text-emphasis-style: filled double-circle;
}
.em-double-circle-open {
  -webkit-text-emphasis-style: open double-circle;
          text-emphasis-style: open double-circle;
}
.em-triangle {
  -webkit-text-emphasis-style: filled triangle;
          text-emphasis-style: filled triangle;
}
.em-triangle-open {
  -webkit-text-emphasis-style: open triangle;
          text-emphasis-style: open triangle;
}


/* 傍線
==================================== */
.em-line {
  text-decoration: overline;
}

/* 縦中横 */
.tcy {
  -webkit-text-combine:horizontal;
          text-combine:horizontal;
}

/* 文字の向き */
.upright-1 {
  -webkit-text-combine:horizontal;
          text-combine:horizontal;
}
.upright {
  -webkit-text-orientation:upright;
          text-orientation:upright;
}
.sideways {
  -webkit-text-orientation:sideways;
          text-orientation:sideways;
}


/* for Firefox */
@-moz-document url-prefix() {

#blog-title {
    padding: 40px 80px;
}

#blog-description {
    padding: 0 80px 40px 80px;
}
.message-board {
    padding: 20px 80px;
}

#main {
    border-left:none;
    padding: 40px 80px;
}

.article-body-inner h1,
.article-body-inner h2,
.article-body-inner h3,
.article-body-inner h4,
.article-body-inner h5,
.article-body-inner h6 {
    margin: 0.7em 0;
}
.article-body-inner p,
.article-body-inner pre,
.article-body-inner dl,
.article-body-inner ol,
.article-body-inner ul,
.article-body-inner blockquote {
    margin: 1em 0;
}

.article-body-inner dt {
    margin: 0.5em 0 0 0;
}
.article-body-inner dd {
    margin: 0 0 0 1em;
}
.article-body-inner ol, .article-body-inner ul {
    padding: 0 0 0 1.75em;
}
.article-body-inner blockquote {
    padding: 1em 0 1em 1.5em;
}

body.page-article .ads {
	position: relative;
}

} /* end for Firefox */