/****************************************
         main-content [メインコンテンツ]
*****************************************/

 メインコンテンツの設定 

#main-content{
float: left; [ページの回り込み設定]
width: 64%; [ページ横幅の割合]
margin-right: 2.8%; [サイドバーとの間隔]
}

 記事ページの設定 

#main-content.mysingle{
border: solid 1px $(linecolor); [記事ページの枠線]
background-color: $(backgroundcolor); [記事ページの背景色]
}

 記事ページのレスポンシブ設定 

@media ( max-width : 768px ) {
#main-content{
float: none;
width: 100%; [ページの横幅を最大に]
margin-right: 0; [ページ右側の外側の余白を0に]
}
}

/****************************************
         single-header [ヘッダー（記事ページ）]
*****************************************/

 記事タイトル全体の設定 

#single-header{
position: relative; [記事タイトルの配置設定（相対位置）]
padding: 30px 15px 15px 15px; [記事タイトルの内側の余白]
background-color: $(maincolor); [記事タイトルの背景色]
border-bottom: 1px solid $(linecolor); [記事タイトル下部の罫線]
border-top: 1px solid $(linecolor); [記事タイトル上部の罫線]
color: $(mainfontcolor); [記事タイトルの文字色]
}

 記事タイトル部分の装飾設定 

#single-header:before,
#single-header:after{
position: absolute;
left: 0;
content: '';
width: 100%;
height: 6px;
box-sizing: border-box;
}
#single-header:before{
top: 0;
border-top: 2px solid $(mainfontcolor); [記事タイトル上部の罫線]
border-bottom: 1px solid $(mainfontcolor); [記事タイトル下部の罫線]
}
#single-header:after{
bottom: 0;
border-top: 1px solid $(mainfontcolor); [記事タイトル上部の罫線]
border-bottom: 2px solid $(mainfontcolor); [記事タイトル下部の罫線]
}

#single-header .mydate{
text-align: right;
}
#single-header .mycategory{
text-align: right;
}
#single-header .mycategory a{
color: inherit;
}
#single-header .mycategory span{
margin-right: 0.5em;
}
#single-header .mycategory span:last-child{
margin-right: 0;
}

#single-header .mytitle{
font-size: 200%;
}

/****************************************
         single-footer [フッター（記事ページ）]
*****************************************/

 記事ページのフッター全体の設定 

#single-footer{
padding: 0 30px; [フッターの内側の余白（上下・左右）]
padding-bottom:5em; [フッター下部の内側の余白]
}
.single-footer-item{
margin-bottom: 5em; [フッター下部の外側の余白（共有ボタンの下）]
}

 共有ボタンの設定 

#share-icon{
display: table; [共有ボタンの表示設定（テーブル）]
table-layout: fixed; [共有ボタンテーブルの固定化]
  text-align: center; [共有ボタンの中央揃え]
  width: 100%; [共有ボタンの横幅]
color: white; [共有ボタンアイコンの文字色]
font-size: 150%; [共有ボタンアイコンの文字サイズ]
}
#share-icon li{
display: table-cell;
vertical-align: middle; [共有ボタンの縦位置を中央揃えに]
}
#share-icon a{
line-height:2em; [共有ボタンの高さ]
display: block;
transition: color .3s ease, background-color .3s ease; [共有ボタンの変化設定]
}
#share-icon .mytwitter a{
background-color: #2290bf; [ツイッターアイコンの背景色]
border: solid 1px #2290bf; [ツイッターアイコンの枠線]
}
#share-icon .myfacebook a{
background-color: #3b5998; [フェイスブックアイコンの背景色]
border: solid 1px #3b5998; [フェイスブックアイコンの枠線]
}
#share-icon .myhatena a{
font-family: Verdana;
background-color: #008fde; [はてブアイコンの背景色]
border: solid 1px #008fde; [はてブアイコンの枠線]
}
#share-icon .mytwitter a:hover{
color: #2290bf; [ホバー時のツイッターアイコンの文字色]
background-color: $(backgroundcolor); [ホバー時のツイッターアイコンの背景色]
}
#share-icon .myfacebook a:hover{
color: #3b5998; [ホバー時のフェイスブックアイコンの文字色]
background-color: $(backgroundcolor); [ホバー時のフェイスブックアイコンの背景色]
}
#share-icon .myhatena a:hover{
color: #008fde; [ホバー時のはてブアイコンの文字色]
background-color: $(backgroundcolor); [ホバー時のはてブアイコンの背景色]
}

 フッターのレスポンシブ設定 

@media ( max-width : 768px ) {
#single-footer{
padding: 0 10px;
}
}

/****************************************
         nextprev [ページャー（記事ページ）]
*****************************************/

 ページャー（前の投稿・次の投稿）の設定 

#blog-pager{
margin-bottom: 0; [ページャーの外側の余白]
}
#blog-pager a{
display: block;
padding: 0.5em; [ページャーの内側の余白]
border: solid 1px $(linecolor); [ページャーの枠線]
background-color: $(backgroundcolor); [ページャーの背景色]
}

/****************************************
         breadcrumb [パンくずリスト]
*****************************************/

 パンくずリストの設定 

.breadcrumbs{
color: $(lightcolor); [パンくずリストの文字色]
line-height: 1.3; [パンくずリストの行の高さ]
padding-top: 1em; [パンくずリスト上部の内側の余白]
padding-bottom: 1em; [パンくずリスト下部の内側の余白]
}
#main-content.mysingle .breadcrumbs{
padding-left: 15px; [パンくずリスト左部の内側の余白]
padding-right: 15px; [パンくずリスト右部の内側の余白]
}

/****************************************
         mrp-post [関連記事]
*****************************************/

 関連記事見出しの設定 

#mrp-title{
margin-bottom: 1em; [関連記事見出し下部の外側の余白]
padding: .75em 1em; [関連記事見出しの内側の余白]
width: 100%; [関連記事見出しの横幅]
margin-left: -45px; [関連記事見出し左部の外側の余白]
position: relative; [関連記事見出しの位置設定]
background-color: $(maincolor); [関連記事見出しの背景色]
color: $(mainfontcolor); [関連記事見出しの文字色]
border: 1px solid $(linecolor); [関連記事見出しの枠線]
}

 関連記事見出しの装飾設定 

#mrp-title:before{
content: '';
position: absolute;
top: 100%;
border-style: solid;
border-color: transparent;
left: 0;
border-width: 0 15px 15px 0;
border-right-color: $(lightcolor);
}
#mrp-title:after{
content:'';
width: 100%;
display: block;
height: 1px;
position: absolute;
bottom: 0;
left: 0;
border-bottom: 1px solid $(mainfontcolor);
}

 関連記事の設定 

#mrp-content .mrp-post{
border-bottom: 1px solid $(linecolor); [関連記事下部の区切り線]
}

 関連記事サムネイルの設定 

#mrp-content .mrp-post img{
float: left; [サムネイルの回り込み設定]
margin-right: 1em; [サムネイル右部の外側の余白]
display: block;
}

 関連記事のレスポンシブ設定 

@media ( max-width : 768px ) {
#mrp-title{
margin-left: -25px;
}
}

/****************************************
         single [記事ページ]
*****************************************/

 記事ページ全体の設定 

#single{
padding: 3em 30px 5em 30px; [記事ページの内側の余白]
letter-spacing: 0.05em; [記事の文字間隔]
}

 h2・h3・h4見出しの設定 

#single h2,
#single h3,
#single h4{
font-size: 150%; [文字サイズ]
margin-top: 0.5em; [上部外側の余白]
margin-bottom: 0.5em; [下部外側の余白]
line-height: 1.5; [行の高さ]
letter-spacing: 0; [文字間隔]
}

 h3見出しの設定 

#single h3{
border-left: 1em solid $(maincolor); [左部の線]
margin-left: -30px; [左部外側の余白]
}

 h2見出しの設定 

#single h2{
padding: .75em 1em; [内側の余白]
width: 100%; [横幅]
margin-left: -45px; [左部外側の余白]
position: relative; [位置設定]
background-color: $(maincolor); [帯の背景色]
color: $(mainfontcolor); [文字色]
border: 1px solid $(linecolor); [罫線]
}

 h2見出しの装飾設定 

#single h2:before{
content: '';
position: absolute;
top: 100%;
border-style: solid;
border-color: transparent;
left: 0;
border-width: 0 15px 15px 0;
border-right-color: $(lightcolor);
}
#single h2:after{
content:'';
width: 100%;
display: block;
height: 1px;
position: absolute;
bottom: 0;
left: 0;
border-bottom: 1px solid $(mainfontcolor);
}

 画像の設定 

#single .separator a[imageanchor]{
margin-left: 0 ! important;
margin-right: 0 ! important;
}

 引用文の設定 

#single blockquote{
position: relative;
z-index: 2;
display:block;
border-left: solid 1px $(linecolor);
padding: 1em;
background-color: transparent;
color: inherit;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0.5em;
border-radius: 2px;
padding-left: 3em;
padding-right: 3em;
}
#single blockquote:before{
content:'\201D';
position: absolute;
color: $(lightcolor);
font-size: 500%;
display: block;
line-height: 1;
top: 0;
left: 16px;
}

 箇条書きの設定 

#single ul,
#single ol{
margin-top: 1em;
margin-bottom: 1em;
padding: 1em;
padding-left: 1.5em;
}
#single ul ul,
#single ol ol{
padding: 0;
padding-left:3em;
margin-top: 0;
margin-bottom: 0;
}
#single dl{
margin-top: 1em;
margin-bottom: 1em;
border-left: solid 1px $(linecolor);
padding: 1em;
margin-left: 0.5em;
}
#single dt{
font-weight: bold;
}
#single dd{
padding-left: 2em;
margin-bottom: 1em;
}
#single dd:last-child{
margin-bottom: 0;
}

 テーブルの設定 

#single table{
margin-top: 1em;
margin-bottom: 3em;
border-collapse: collapse;
width: 100%;
table-layout:fixed;
}
#single thead th{
background-color: $(subbackgroundcolor);
}
#single tr{
background-color: $(backgroundcolor);
}
#single tr:nth-child(2n){
background-color: $(subbackgroundcolor);
}
#single th,
#single td{
padding-left: 0.5em;
padding-right: 0.5em;
border: 1px solid $(linecolor);
}

 レスポンシブ設定 

@media ( max-width : 768px ) {
#single{
width: auto;
padding: 3em 10px 5em 10px;
}
#single h1{
line-height: 1.5;
}
#single h2{
margin-left: -25px;
}
#single h3{
margin-left: -10px;
}
}