/*






*/

.highlight {
  font-family: Consolas,"Liberation Mono",Courier,monospace;
  font-size:  11px;
  line-height: 1.8;
  border: 1px solid #efefef;
  border-left: 3.5em solid #efefef;
  border-radius: 2px;
  position: relative;
  /*overflow: scroll;*/
  overflow-x: auto;

  padding: 5px 12px;
  margin-bottom: 16px;
  background-color: #333;
  color: #fff;

  counter-reset: linenumbers;
}

.highlight .hll { background-color: #333333 }
.highlight .c { color: #008800; font-style: italic; background-color: #0f140f } /* Comment */
.highlight .err { color: #ffffff } /* Error */
.highlight .g { color: #ffffff } /* Generic */
.highlight .k { color: #fb660a; font-weight: bold } /* Keyword */
.highlight .l { color: #ffffff } /* Literal */
.highlight .n { color: #ffffff } /* Name */
.highlight .o { color: #ffffff } /* Operator */
.highlight .x { color: #ffffff } /* Other */
.highlight .p { color: #ffffff } /* Punctuation */
.highlight .cm { color: #008800; font-style: italic; background-color: #0f140f } /* Comment.Multiline */
.highlight .cp { color: #ff0007; font-weight: bold; font-style: italic; background-color: #0f140f } /* Comment.Preproc */
.highlight .c1 { color: #008800; font-style: italic; background-color: #0f140f } /* Comment.Single */
.highlight .cs { color: #008800; font-style: italic; background-color: #0f140f } /* Comment.Special */
.highlight .gd { color: #ffffff } /* Generic.Deleted */
.highlight .ge { color: #ffffff } /* Generic.Emph */
.highlight .gr { color: #ffffff } /* Generic.Error */
.highlight .gh { color: #ffffff; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #ffffff } /* Generic.Inserted */
.highlight .go { color: #444444; background-color: #222222 } /* Generic.Output */
.highlight .gp { color: #ffffff } /* Generic.Prompt */
.highlight .gs { color: #ffffff } /* Generic.Strong */
.highlight .gu { color: #ffffff; font-weight: bold } /* Generic.Subheading */
.highlight .gt { color: #ffffff } /* Generic.Traceback */
.highlight .kc { color: #fb660a; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #fb660a; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #fb660a; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #fb660a } /* Keyword.Pseudo */
.highlight .kr { color: #fb660a; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #cdcaa9; font-weight: bold } /* Keyword.Type */
.highlight .ld { color: #ffffff } /* Literal.Date */
.highlight .m { color: #0086f7; font-weight: bold } /* Literal.Number */
.highlight .s { color: #0086d2 } /* Literal.String */
.highlight .na { color: #ff0086; font-weight: bold } /* Name.Attribute */
.highlight .nb { color: #ffffff } /* Name.Builtin */
.highlight .nc { color: #ffffff } /* Name.Class */
.highlight .no { color: #0086d2 } /* Name.Constant */
.highlight .nd { color: #ffffff } /* Name.Decorator */
.highlight .ni { color: #ffffff } /* Name.Entity */
.highlight .ne { color: #ffffff } /* Name.Exception */
.highlight .nf { color: #ff0086; font-weight: bold } /* Name.Function */
.highlight .nl { color: #ffffff } /* Name.Label */
.highlight .nn { color: #ffffff } /* Name.Namespace */
.highlight .nx { color: #ffffff } /* Name.Other */
.highlight .py { color: #ffffff } /* Name.Property */
.highlight .nt { color: #fb660a; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #fb660a } /* Name.Variable */
.highlight .ow { color: #ffffff } /* Operator.Word */
.highlight .w { color: #888888 } /* Text.Whitespace */
.highlight .mf { color: #0086f7; font-weight: bold } /* Literal.Number.Float */
.highlight .mh { color: #0086f7; font-weight: bold } /* Literal.Number.Hex */
.highlight .mi { color: #0086f7; font-weight: bold } /* Literal.Number.Integer */
.highlight .mo { color: #0086f7; font-weight: bold } /* Literal.Number.Oct */
.highlight .sb { color: #0086d2 } /* Literal.String.Backtick */
.highlight .sc { color: #0086d2 } /* Literal.String.Char */
.highlight .sd { color: #0086d2 } /* Literal.String.Doc */
.highlight .s2 { color: #0086d2 } /* Literal.String.Double */
.highlight .se { color: #0086d2 } /* Literal.String.Escape */
.highlight .sh { color: #0086d2 } /* Literal.String.Heredoc */
.highlight .si { color: #0086d2 } /* Literal.String.Interpol */
.highlight .sx { color: #0086d2 } /* Literal.String.Other */
.highlight .sr { color: #0086d2 } /* Literal.String.Regex */
.highlight .s1 { color: #0086d2 } /* Literal.String.Single */
.highlight .ss { color: #0086d2 } /* Literal.String.Symbol */
.highlight .bp { color: #ffffff } /* Name.Builtin.Pseudo */
.highlight .vc { color: #fb660a } /* Name.Variable.Class */
.highlight .vg { color: #fb660a } /* Name.Variable.Global */
.highlight .vi { color: #fb660a } /* Name.Variable.Instance */
.highlight .il { color: #0086f7; font-weight: bold } /* Literal.Number.Integer.Long */

table#left_sns_button{
  margin: 50px 0 50px 0;
  padding: 0;
  width: 100%;
  vertical-align: middle;
  font-size: 25px;
  color: #fff;
}

table#left_sns_button td{
  vertical-align: middle;
  text-align: center;
  padding: auto auto;
  -ms-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -webkit-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

table#left_sns_button td:hover {
  opacity: .7;
}

table#left_sns_button td#twitter-btn {
  width: 50%;
  background: #33CCFF;
}

table#left_sns_button td#fb-btn {
  width: 50%;
  background: #3B5998;
}

table#left_sns_button td#gplus-btn {
  width: 25%;
  background: #C63D2D;
}

table#left_sns_button td#hatena-btn {
  vertical-align: middle;
  width: 25%;
  background: #2C6EBD;
}

table#left_sns_button td#pocket-btn {
  width: 25%;
  background: #F03E51;
}

table#left_sns_button td#feedly-btn {
  width: 25%;
  background: #2C6EBD;
}

table#left_sns_button a{
  display:block;
  width: 100%;
  height: 100%;
  color: #fff;
}

table#left_sns_button i{
  position: relative;
  font-size: 40px;
  margin-top: 8px;
}

table#left_sns_button span{
  height: 40px;
  vertical-align: middle;
}

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

#container {
    width: 980px;
    height: 100%;
    margin: 85px auto 0;
    font-size: 14px;
    position: relative;
    clear: left;
    line-height: 3em;
}


#container:after {
  display: block;
  clear: both;
  content: "";
}

#left{
    padding: 1.25em;
    background-color: #fff;
}
#right{
    padding: 0.5em;
    background-color: #fff;
}

#left_article{
    padding: 0 20px;
    font-size: 16px;
    color: #111;
    margin-bottom: 2em;
    line-height: 1.8;
}

td#left_article_sumbnail{
    padding: 0 10px 0 0;
}
td#left_article_sumbnail img{
    width: 150px;
}

td#left_article_title{
    font-size: 30px;
    margin-top: 5px;
    margin-bottom: 8px;
    margin-left: 20px
}

.global-nav--font__clear{
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

#left_article_tag_list{
    width: 100%;
    margin-top: 15px;
    margin-bottom: 40px;
}

#left_article_tag_list span.left_article_tag{
    text-align: center;
    padding: .4em .5em;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    border: 1px solid #CAD8F3;
    background: none;
    background-color: #DEE7F8;
    font-weight: normal;
}

#left_article_tag_list span.left_article_tag:hover{
    opacity: .7;
}

#left_article_tag_list a{
    color: #000;
}

/* 記事一覧画面 ( /articles/ ) */

.left_article_list{
    line-height: 1;
    font-size: 11px;
    border-color: rgba(56,56,56,0.5);
}

.left_article_list a {
    display: block;
    width: 100%;
    height: 100%;
    transition: all 1000ms ease;
}
.left_article_list a:hover {
    background-color: rgba(230,180,80, .2);
}

.left_article_list img.left_article_list_img {
    width: 200px;
    float: left;
    margin-right: 10px;
}

.left_article_list table{
    width: 100%;
}

.left_article_list td.left_article_list_thumbnail{
    width: 200px;
    height: 100px;
}

.left_article_list td{
    padding: 6px 4px;
}

.left_article_list tr.left_article_list_title{
    font-size: 25px;
    font-weight: bold;
    color: #181818;
    line-height: 150%;
    height: 125px;
}
.left_article_list td.left_article_list_title{
    border-bottom: 1px dotted;
}

.left_article_list tr.left_article_list_date{
    font-size: 15px;
    color: #181818;
}
.left_article_list td.left_article_list_date{
    border-bottom: 1px dotted;
    text-align: right;
}

div[id^="post-ad-"] {
    height: 100%;
    width: 100%;
    padding-left: 7px;
}

div[id^="right_latest_article-ad-"] {
    height: 100%;
    width: 100%;
    padding-left: 2px;
}

h1.right_sub{
    margin-right: 0.5em;
    border-bottom: 1px solid;
    border-color: rgba(56, 56,56, 0.2);
    font-size: 15px;
}
span.right_sub{
    margin: 0 0 -1px -0.5em;
    padding: 0 0 5px 10px;
    display: inline-block;
    border-bottom: 1px solid;
    border-color: #ed9326;
    font-weight: bold;
}

#right .right_tag_cloud a{
    opacity: 0.80;
    color: #fff;
    display: inline-block;
    margin: 0 5px 5px 0;
    padding: 0 6px;
    line-height: 30px;
    border-radius: 5px;
    transition: all 500ms ease;
}
#right .right_tag_cloud a.css1{background-color: #4A4A4A;}
#right .right_tag_cloud a.css2{background-color: #428BCA;}
#right .right_tag_cloud a.css3{background-color: #5CB85C;}
#right .right_tag_cloud a.css4{background-color: #D9534F;}
#right .right_tag_cloud a.css5{background-color: #567E95;}
#right .right_tag_cloud a.css6{background-color: #B433FF;}
#right .right_tag_cloud a.css7{background-color: #00ABA9;}
#right .right_tag_cloud a.css8{background-color: #B37333;}
#right .right_tag_cloud a.css9{background-color: #FF6600;}
#right .right_tag_cloud a:hover{
    background: white;
    color: #3a7999;
}

#right .st_articles td{
    padding: 2px 3px;
    vertical-align: middle;
}

#right .right_latest_articles img.article_image{
    width: 100px;
    padding: 1px 3px 1px 0;
    display: inline-block;
    vertical-align: middle;
}
#right .right_latest_articles span.article_title{
    font-size: 12px;
    display: inline-block;
    line-height: 150%;
}

#right .right_latest_articles a {
    color: #181818;
    display: block;
    width: 100%;
    height: 100%;
    transition: all 1000ms ease;

}
#right .right_latest_articles a:hover {
    background-color: rgba(230,180,80, .2);
}

/* pagination (kaminari) 関連のstyle */
#left nav.pagination {
    padding-top: 20px;
    padding-bottom: 0;
    text-align: center;
    font-size: 30px
}
#left nav.pagination span.current {
    border: 2px solid #ed9326;
    opacity: 0.80;
    color: #4A4A4A;
    display: inline-block;
    margin: 0 5px 5px 0;
    padding: 0 6px;
    line-height: 30px;
    border-radius: 3px;
    transition: all 500ms ease;
}

#left nav.pagination a {
    background-color: #4A4A4A;
    border: 2px solid #4A4A4A;
    opacity: 0.80;
    color: #fff;
    display: inline-block;
    margin: 0 5px 5px 0;
    padding: 0 6px;
    line-height: 30px;
    border-radius: 3px;
    transition: all 500ms ease;
}
#left nav.pagination a:hover{
    background: white;
    color: #4A4A4A;
}

#left nav.pagination span.page a {
    background-color: #ed9326;
    border: 2px solid #ed9326;
    opacity: 0.80;
    color: #fff;
    display: inline-block;
    margin: 0 5px 5px 0;
    padding: 0 6px;
    line-height: 30px;
    border-radius: 3px;
    transition: all 500ms ease;
}
#left nav.pagination span.page a:hover{
    background: white;
    color: #4A4A4A;
}


/* MEDIA QUERIES */
@media screen and (min-width: 760px ) {
/*   #left { margin-right: 19.5em; } */
/*    #right { position: absolute; top: 0; right: 0; width: 18.75em;} */
    #left { float: left; width: 690px;}
    #right { float: right; width: 280px; }
}

/* --------------------------------------------------------------------- */
/*   /articles/<post_id>の記事閲覧画面  */
/* --------------------------------------------------------------------- */



#container {
    width: 980px;
    height: 100%;
    margin: 85px auto 0;
}

#left_article img {
   /* 横幅に合わせて自動縮小するが、拡大はしない */
   max-width: 100%;
}

#left_article h1{
    font-size: 36px;
    line-height: 40px;
    margin: 4em 0 1.6em 0;
    font-weight: normal;
    color: white;
    font-family: 'Hammersmith One', sans-serif;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
    position: relative;
    color: rgb(230,180,80);
}

#left_article h2 {
    margin: 4em 0 1.5em 0;
    font-weight: normal;
    position: relative;
    font-size: 28px;
    line-height: 40px;
    background: #355681;
    background: rgba(230,180,80, 0.8);
    border: 1px solid #fff;
    padding: 5px 8px;
    color: white;
    border-radius: 0 10px 0 10px;
    box-shadow: inset 0 0 5px rgba(230,180,70, 0.5);
    text-align: left;
}

#left_article h3 {
    margin: 4em 0 1.5em 0;
    padding: 0 0.25em;
    font-weight: 600;
    font-family: 'Titillium Web', sans-serif;
    position: relative;
    xtext-shadow: 0 -1px 1px rgba(0,0,0,0.4);
    font-size: 28px;
    line-height: 40px;
    color: rgb(230,180,80);
    xtext-transform: uppercase;
    border-bottom: 1px solid rgba(230,180,70, 0.3);
    text-align: left;
}

#left_article h4 {
    font-size: 24px;
}

#left_article h5 {
    font-size: 20px;
}

#left_article h6 {
    font-size: 15px;
}

#left_article p{
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1.6;
}

#left_article em{
    font-style: normal;
}

#left_article hr {
    border: 0;
    margin-top: 0;
    height:2px;
    background: #ccc;
    background: -webkit-gradient(linear, left top, right top, from(#333), color-stop(0.7,#ccc), color-stop(0.7,#ccc), to(#333));
    background: -moz-linear-gradient(left,#333 0%, #ccc 30%, #ccc 70%, #333 100%);
    background: -o-linear-gradient(left,#333 0%, #ccc 30%, #ccc 70%, #333 100%);
    background: -ms-linear-gradient(left,#333 0%, #ccc 30%, #ccc 70%, #333 100%);
    background: linear-gradient(left,#333 0%, #ccc 30%, #ccc 70%, #333 100%);
    -pie-background: linear-gradient(left,#333 0%, #ccc 30%, #ccc 70%, #333 100%);
}

#left_article blockquote {
  background: #f9f9f9;
  border-left: 6px solid #ccc;
  margin: 1.5em 5px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
  overflow:hidden;
}
#left_article blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

#left_article blockquote p {
  display:inline;
}

#left_article em{
  background-color: rgba(230,180,80, .2);
  padding: 1px 3px;
}

#left_article code{
  font-size: 13px;
  line-height: 1.5em;
}

.highlight pre > span:before {
  font-size: 10px;
  color: #000;
  line-height: 2.2;

  position: absolute;
  left: -4.9ex;
  user-select: none;

  counter-increment: linenumbers;
  content: counter(linenumbers);

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}