cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div id="body-in">
	<article class="article">
<div id="main">
<h1>このファイルについて</h1>
	<p>この親テーマはオリジナルのSimplicity 2.5.3の親テーマstyle.cssをscssに変換して、かつHidekichiにより手を加えられたものです。</p>
<p>本来は、各パーツにファイル分けされており、scssファイルを結合し、ベンダープレフィックスをつけたり様々な処理が必要ですが、それらを済ませたものになっています。</p>
	
	<p>見出しや、各文章のline-heightなどはbootstrapの処理を模倣しており、かつSimplicityに合わせていますが、例えば、</p>
	
	<h2>このような見出しがあるとして</h2>
	<p>上記は<code>h2</code>ですが、このように本来の見出しのマージンやパディングよりも若干狭く設定されています。</p>
	<p>しかしこれらは、統一性を持たせてあり、ある要素の一部はSimplicityのままの行間であったりマージンなどが設定されているものの、多くの場合において基本的な部分は同じ数値が適用されるようにしてあります。</p>
	<p>オリジナルの親テーマはpaddingやmarginが設定されてあるのでそのまま利用できますが、このcssでは、まず「基本的な部分を統一性をもたせる」と言う所から始まっており、見かけのスタイルは後回しになっています。</p>
	<p>最適な値が見つかった場合はcssに反映していくので、現在はこういうものだとご理解いただけると助かります。</p>
	
	<a href="https://codepen.io/Hidekichi/pen/zwKvVZ" target="_blank">このcssの適用サンプル</a>
	
	<p>カスタマイズする際には統一された仕様があって、それを変更することで手間や問題点を避けることができます。</p>
	<p>完全に作り直しているわけではなく、あくまでオリジナルの親テーマstyle.cssがあり、それをscssに変換し、問題点を修正しています。</p>
	<p>本来であればflexやgridで正しく表示できることも、親テーマのstyle.css以外のcssとの兼ね合いもあり、完全にあわせているわけではありません。<br>このcssの位置づけとしては、<b>オリジナルの親テーマstyle.cssを更に効率よく効果的に作成するためのもの</b>であり、オリジナルと完成されたstyle.cssの中間的なものと考えて下さい。</p>
	
	</div>
		</article>
	</div>
            
          
!
            
              @charset "UTF-8";

/*!
Theme Name: Simplicity2
Description: Simplicityの意味は、単純、簡単、簡素、質素です。飾り気のないカスタマイズの土台となれるようなテーマを目指して作りました。
Theme URI: https://wp-simplicity.com/
Author: yhira
Author URI: http://nelog.jp/
Version: 2.5.3 20170429
Tags: white, two-columns, left-sidebar, right-sidebar, fluid-layout, fixed-layout
License: GNU General Public License
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/


/**
 * 基本設定(General Setting)
 */

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

html {
 margin: 0;
 padding: 0;
}

body {
 margin: 0;
 padding: 0;
 font-family: "Hiragino Kaku Gothic ProN", Meiryo, Helvetica, Arial, sans-serif;
 font-size: 16px;
 -webkit-text-size-adjust: 100%;
}

img {
 border-width: 0px;
}

figure,
main figure {
 margin: 0;
}

.category-description img,
.wp-caption,
.hover-image {
 max-width: 100%;
 height: auto;
}

.aligncenter {
 clear: both;
}

.cf:after {
 content: "";
 clear: both;
 display: block;
}

ul li,
ol li {
 list-style: none;
}


/**
 * 見出し(H1-6)
 */

h1,
h2,
h3,
h4,
h5,
h6 {
 line-height: 1.1;
 color: #333;
}

h1,
.h1,
h2,
.h2,
h3,
.h3 {
 margin-top: 26px;
 margin-bottom: 13px;
}

h1 small,
h1 .small,
.h1 small,
.h1 .small,
h2 small,
h2 .small,
.h2 small,
.h2 .small,
h3 small,
h3 .small,
.h3 small,
.h3 .small {
 font-size: 65%;
}

h4,
.h4,
h5,
.h5,
h6,
.h6 {
 margin-top: 13px;
 margin-bottom: 13px;
}

h4 small,
h4 .small,
.h4 small,
.h4 .small,
h5 small,
h5 .small,
.h5 small,
.h5 .small,
h6 small,
h6 .small,
.h6 small,
.h6 .small {
 font-size: 75%;
}

h1,
.h1 {
 font-size: 30px;
}

h2,
.h2 {
 font-size: 26px;
}

h3,
.h3 {
 font-size: 23px;
}

h4,
.h4 {
 font-size: 20px;
}

h5,
.h5 {
 font-size: 16px;
}

h6,
.h6 {
 font-size: 14px;
}

#archive-title {
 margin-bottom: 26px;
 font-size: 26px;
}


/**
 * アンカー
 */

a {
 color: #2098A8;
 word-wrap: break-word;
 text-decoration: none;
}

a:hover {
 color: #c03;
}

.widget_new_entries a,
.widget_new_popular a,
.widget_popular_ranking a,
.wpp-list a,
.entry-read a,
.related-entry-read a,
.entry-title a {
 color: #111;
}

.widget_new_entries a:hover,
.widget_new_popular a:hover,
.widget_popular_ranking a:hover,
.wpp-list a:hover,
.entry-read a:hover,
.related-entry-read a:hover,
.entry-title a:hover {
 color: #c03;
}

.widget_new_entries a,
.widget_new_popular a,
.widget_popular_ranking a,
.wpp-list a,
.entry-title a {
 text-decoration: none;
}

.article-list {
 color: #111;
}

.article-list:hover {
 color: #c03;
}

.widget_new_entries a:hover,
.widget_new_popular a:hover,
.widget_popular_ranking a:hover,
.wpp-list a:hover {
 text-decoration: underline;
}

.entry a:hover,
.related-entry-title a:hover,
.navigation a:hover,
#footer a:hover {
 color: #c03;
}

#footer .credit a:hover {
 color: inherit;
}


/**
 * 引用(blockquote)
 */

blockquote {
 position: relative;
 margin: 1em 0;
 padding: 20px 55px;
 background: none repeat scroll 0 0 rgba(245, 245, 245, 0.8);
 border: 1px solid #FFF;
}

blockquote p:last-child,
blockquote ul:last-child,
blockquote ol:last-child {
 margin-bottom: 0;
}

blockquote::before,
blockquote::after {
 position: absolute;
 font-family: serif;
 font-size: 600%;
 color: #C8C8C8;
}

blockquote:before {
 content: "“";
 line-height: 1em;
 top: 0;
 left: 0;
}

blockquote:after {
 content: "”";
 line-height: 0;
 bottom: -16px;
 right: 0;
}


/**
 * リスト(List)
 */

ul,
ol {
 margin-top: 0;
 margin-bottom: 13px;
}

ul ul,
ul ol,
ol ul,
ol ol {
 margin-bottom: 0;
}

ol ul,
ul ul {
 margin-left: 1em;
}

dl {
 margin-top: 0;
 margin-bottom: 26px;
}

dt {
 font-weight: bold;
}

dd {
 margin-left: 0;
}


/**
 * その他(Other)
 */

pre {
 padding: 7px;
 background-color: #eee;
 border: 1px solid #ccc;
 overflow: auto;
}

hr {
 color: #ddd;
 margin: 30px 0;
 width: 98%;
 border: 1px solid #ddd;
}

.category-description {
 margin-top: 15px;
 margin-bottom: 30px;
 padding: 5px 20px;
 background-color: #f7f7f7;
 border: 1px solid #ddd;
 border-radius: 3px;
}

.wpp-range {
 text-align: right;
 font-size: 14px;
}

span.search-excerpt {
 background-color: #FF9;
}

.invisible {
 display: none;
}

hr.sep {
 position: relative;
 margin-bottom: 130px;
 height: 1px;
 background-image: -webkit-linear-gradient(left center, transparent, rgba(0, 0, 0, 0.75), transparent);
 background-image: linear-gradient(left center, transparent, rgba(0, 0, 0, 0.75), transparent);
 border: 0 none;
}

@media screen and (min-width: 0\0) {
 *::-ms-backdrop,
 blockquote:before {
  left: -55px;
 }
 *::-ms-backdrop,
 blockquote:after {
  right: -55px;
 }
}


/**
 * レイアウト
 */

#container {
 margin: 0;
 padding: 0;
 margin: 0 auto;
}

#container:before,
#container:after {
 content: "";
 display: table;
}

#container:after {
 clear: both;
}

#body-in,
#footer-in,
#header-in,
#navi-in {
 width: 1070px;
 margin: 0 auto;
}

#navi:before,
#navi:after {
 content: "";
 display: table;
}

#navi:after {
 clear: both;
}

.clearfix:before,
.clearfix:after {
 content: "";
 display: table;
}

.clearfix:after {
 clear: both;
}


/**
 * clearfix for ie7
 */

#container:before,
#container:after,
#navi ul:before,
#navi ul:after,
.clearfix:before,
.clearfix:after {
 content: "";
 display: table;
}

#container:after,
#navi ul:after,
.clearfix:after {
 clear: both;
}

#container,
#navi ul,
.clearfix {
 display: block;
}

#body {
 margin-top: 26px;
}

#main {
 float: left;
 margin-bottom: 30px;
 padding: 20px 29px;
 width: 740px;
 background-color: #fff;
 border: 1px solid #ddd;
 border-radius: 4px;
}

#sidebar {
 float: right;
 margin-bottom: 30px;
 width: 300px;
}

#sidebar-widget {
 overflow: hidden;
}

.clear {
 clear: both;
}


/**
 * ヘッダー
 */

*:first-child + html #header > div {
 clear: both;
 zoom: 1;
}

#header {
 margin-bottom: 0;
}

#header .alignleft,
#header .alignright {
 margin-bottom: 0;
 width: auto;
}

#header .alignleft {
 margin-left: 30px;
 margin-right: 30px;
}

#header .alignright {
 position: absolute;
 top: 13px;
 right: 0;
 height: 52px;
 margin-right: 30px;
 text-align: right;
}

#h-top {
 position: relative;
 min-height: 100px;
 background-repeat: no-repeat;
 background-position: top left;
 overflow: hidden;
}

#site-title {
 margin-top: 13px;
 margin-bottom: 8.66667px;
 font-weight: normal;
 font-size: 30px;
 line-height: 1.1;
}

#site-title a {
 color: #222;
}

#site-description {
 margin: 0;
 margin-bottom: 26px;
 margin-right: 20px;
 /*padding: 10 0; // ようやく見つけた!!単位なし*/
 padding: 10px 0;
 font-weight: normal;
 font-size: 14px;
 line-height: 1.1;
 color: #777;
}

#header-image {
 margin-bottom: 40px;
}


/**
 * メインカラム(#main、記事、固定ページなど)
 */

#main .page,
#main .post {
 margin-bottom: 60px;
}

.post-meta {
 margin: 0;
 margin-bottom: 13px;
 color: #555;
 background-color: #F7F7F7;
 text-align: right;
}

.post-meta .category,
.post-meta .comments,
.post-meta .edit,
.post-meta .post-date,
.post-meta .post-update {
 padding-right: 0.7em;
}

.post-meta a {
 text-decoration: underline;
}

.comment-num {
 white-space: nowrap;
}

.footer-post-meta {
 color: #555;
 text-align: right;
 clear: both;
}

.footer-post-meta .edit,
.footer-post-meta .post-author,
.footer-post-meta .post-tag {
 padding-right: 0.7em;
}

.article-list .footer-post-meta {
 margin-top: 30px;
}

.more-link {
 display: block;
 margin-top: 13px;
 margin-bottom: 26px;
 text-align: right;
 clear: both;
}

#list .post .footer-post-meta:empty,
#list .post .footer-post-meta .post-tag:empty {
 display: none;
}

.content-box {
 float: right;
 margin-top: -0.25em;
 width: 420px;
}

.content-box .more-link {
 margin: 0;
}

.thumbnail-box {
 float: left;
 width: 160px;
}

.thumbnail-box img {
 width: 160px;
 height: 160px;
}

#main .snsp {
 padding-left: 0;
}

#main .widgets {
 margin-top: 20px;
 margin-bottom: 20px;
}


/**
 * リストアイテム(index.phpのリスト)
 */

#main .entry {
 clear: both;
 margin-bottom: 40px;
 word-wrap: break-word;
}

#main .entry:last-of-type {
 margin: 0;
}

.entry-thumb {
 float: left;
 margin-right: 10px;
 margin-top: 3px;
 margin-left: 0;
}

.entry-thumb a {
 display: block;
}

.entry-thumb img {
 display: block;
 width: 150px;
 height: 150px;
}

.entry-large-thumbnail img {
 width: 320px;
 height: 180px;
}

.entry-card-content {
 margin-left: 160px;
}

.entry .post-meta {
 margin: 0 auto 13px;
 text-align: left;
}

.entry .post-meta a {
 color: #000;
}

.entry h2,
.entry .entry-title {
 margin-top: 0;
 margin-bottom: 13px;
 color: #333;
}

.entry h2 a,
.entry .entry-title a {
 color: inherit;
}

.entry-snippet {
 margin: 0 0 13px;
 color: #555;
 line-height: 1.3;
}

.entry-read {
 margin: 0;
}

.entry-read a {
 text-decoration: underline;
}

.entry-snippet,
.related-entry-snippet {
 word-wrap: break-word;
}


/**
 * パンくずリスト(Breadcrumb)
 */

#breadcrumb {
 margin-bottom: 20px;
 font-size: 13px;
 color: #777;
}

#breadcrumb div {
 display: inline;
}

#breadcrumb span.sp {
 margin: 0 10px;
}

#breadcrumb a {
 color: #777;
}

#breadcrumb ul {
 margin: 0;
 padding: 0;
}

#breadcrumb ul li {
 display: inline;
}

#breadcrumb ul li span.sp {
 margin: 0 10px;
}

#breadcrumb ul li a {
 color: #777;
}


/**
 * article
 */

.article {
 line-height: 1.625;
}

.article img {
 max-width: 100%;
 height: auto;
}

.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
 position: relative;
 margin-top: 26px;
 margin-bottom: 13px;
}

.article h1 {
 font-size: 30px;
}

.article h2 {
 margin-left: -29px;
 margin-right: -29px;
 padding: 0 30px;
 font-size: 26px;
 border-left: 1px solid #000;
}

.article h3 {
 font-size: 23px;
 border-bottom: 5px solid #e7e7e7;
}

.article h4 {
 border-bottom: 5px dashed #eee;
 font-size: 20px;
}

.article h3,
.article h4 {
 padding-bottom: 6.5px;
}

.article h5 {
 font-size: 16px;
}

.article h6 {
 font-size: 14px;
}

.article table {
 border-collapse: collapse;
 margin: 15px 0;
 max-width: 100%;
}

.article th {
 background-color: #eee;
}

.article td,
.article th {
 padding: 3px 5px;
 border: solid 1px #ccc;
}

.article .scrollable-table {
 margin-bottom: 1em;
 overflow-x: auto;
}

.article .scrollable-table th,
.article .scrollable-table td {
 white-space: nowrap;
}

.article dl,
.article ol,
.article ul {
 line-height: 1.5;
}

.article > dl,
.article > ol,
.article > ul {
 margin: 30px 0;
}

.article > dl dl,
.article > ol ol,
.article > ul ul {
 margin: 0;
}

.article a {
 text-decoration: underline;
}

.article .widget_new_entries a,
.article .widget_new_popular a,
.article .widget_popular_ranking a {
 text-decoration: none;
}

.article .widget_new_entries a:hover,
.article .widget_new_popular a:hover,
.article .widget_popular_ranking a:hover {
 text-decoration: underline;
}

.entry-content {
 margin-bottom: 40px;
}

.entry-content ul li,
.entry-content ol li {
 display: list-item;
 list-style: unset;
}

.entry-content p {
 margin: 0 0 17.33333px;
}


/**
 * とりあえず何でもレスポンシブ化するスタイル
 */

canvas,
iframe,
img,
svg,
video {
 max-width: 100%;
}

.overflow-container {
 overflow-y: scroll;
}

.aspect-ratio {
 position: relative;
 padding-top: 56.25%;
 height: 0;
}

.aspect-ratio--object {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 width: 100%;
 height: 100%;
 z-index: 100;
}


/**
 * グローバルナビメニュー(menu)
 */

#navi ul {
 position: relative;
 margin: 0;
 padding: 0;
 width: 100%;
 background-color: #F7F7F7;
 border: 1px solid #ddd;
 border-radius: 3px;
 clear: both;
}

#navi ul ul {
 box-sizing: content-box;
}

#navi ul > li {
 position: relative;
 float: left;
}

#navi ul li a {
 display: block;
 padding: 0.3em 0.7em;
 font-size: 14px;
 color: #111;
 z-index: 99;
}

#navi ul li a:hover {
 background-color: #ddd;
}

#navi ul li:hover > ul {
 display: block;
}

#navi ul.children,
#navi ul.sub-menu {
 display: none;
 position: absolute;
 min-width: 200px;
 margin-left: 0;
 padding-left: 0;
 border: 1px solid #ddd;
 z-index: 99;
}

#navi ul.children li,
#navi ul.sub-menu li {
 position: relative;
 height: 100%;
 border: none;
 float: none;
}

#footer-navi ul {
 padding-left: 0;
 text-align: center;
}

#footer-navi ul li {
 display: inline;
 list-style: outside none none;
}

#footer-navi ul li::before {
 content: "|";
 padding: 0 0.6em;
}

#footer-navi ul li:first-child::before {
 content: "";
 padding: 0;
}

#footer-navi ul .sub-menu {
 display: none;
}

#mobile-menu {
 display: none;
}

#mobile-menu a {
 display: block;
 position: absolute;
 right: 7px;
 margin-top: 3px;
 padding: 4px 8px;
 color: #333;
 font-size: 15px;
 line-height: 1;
 text-align: center;
 border-radius: 3px;
 cursor: pointer;
}

#mobile-menu a:hover {
 opacity: 0.7;
}

#page-top a:hover {
 opacity: 0.7;
}

#prev-next {
 display: table;
 margin: 36px 0 24px;
 padding: 0;
 width: 100%;
}

#prev-next #next,
#prev-next #prev {
 display: table-cell;
 position: relative;
 width: 50%;
 text-decoration: none;
}

#prev-next #next:hover,
#prev-next #prev:hover {
 background-color: rgba(238, 238, 238, 0.7);
}

#prev-next #next img,
#prev-next #prev img {
 margin: 0 auto;
 width: 100px;
 height: 100px;
}

#prev-next #prev {
 border-right: #ddd 1px solid;
}

#prev-next #prev img {
 float: left;
 margin-top: 10px;
 margin-right: 10px;
}

#prev-next #prev-title {
 position: absolute;
 top: -0.8em;
 padding: 5px;
 font-size: 28px;
 background-color: #fff;
 color: #666;
 text-align: center;
 border: 1px #ccc solid;
 border-radius: 6px;
}

#prev-next #next img {
 float: right;
 margin-top: 10px;
 margin-left: 10px;
}

#prev-next #next-title {
 position: absolute;
 top: -0.8em;
 right: 10px;
 padding: 5px;
 font-size: 28px;
 background-color: #fff;
 color: #666;
 text-align: center;
 border: 1px #ccc solid;
 border-radius: 6px;
}

#prev-next span {
 margin: 0;
 padding: 0;
}

#prev-next #next-no,
#prev-next #prev-no {
 display: table-cell;
 position: relative;
 padding: 0 10px;
 width: 50%;
}

#prev-next #next-no a:hover,
#prev-next #prev-no a:hover {
 background-color: #fff;
}

#prev-next #prev-no {
 border-right: #ddd 1px solid;
}

#prev-next-home span {
 position: absolute;
 top: 50%;
 left: 50%;
 margin: 0 auto;
 font-size: 100px;
 color: #ccc;
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
}

@media all and (-ms-high-contrast: none) {
 #prev-next-home span {
  margin-top: 50px;
 }
}


/**
 *	前の記事へ、次の記事へ
 */

.navigation {
 margin: 20px -30px 40px;
 clear: both;
 overflow: hidden;
}

.navigation > div {
 border-top: 1px solid #ddd;
 border-bottom: 1px solid #ddd;
}

.navigation > div + div {
 border-top: 0;
 border-bottom: 1px solid #ddd;
}

.navigation .alignright {
 text-align: right;
}

.navigation .alignright a:hover {
 border-left: 1px solid #ddd;
}

.navigation a {
 display: block;
 padding: 1em;
 border: none;
}

.navigation a span {
 margin-top: -4px;
 padding-right: 10px;
 color: #ddd;
 clear: left;
}

.navigation a:hover {
 background: #eee;
}

a.page-numbers {
 margin: 0 2px;
 padding: 6px 12px;
 background-color: #ddd;
 border: 1px solid #ddd;
 border-radius: 3px;
}

.pager {
 margin: 3em 0;
 text-align: center;
}

.pager .current {
 margin: 0 2px;
 padding: 6px 12px;
 background-color: #ddd;
 color: #000;
 border: 1px solid #ddd;
 border-radius: 3px;
}

.pager a {
 background-color: #fff;
 color: #000;
}

.pager a:hover {
 background-color: #eee;
 border: solid 1px #ddd;
}

.page-link {
 margin: 3em 0;
 text-align: center;
}

.page-link span {
 margin-right: 3px;
 padding: 7px 15px;
 background-color: #ddd;
 border: 1px solid #ddd;
 border-radius: 4px;
}

.page-link a {
 color: #000;
 border-bottom: none;
}

.page-link a span {
 color: #000;
 background-color: #eee;
}

.page-link a span:hover {
 color: inherit;
 background: inherit;
}

.comment-page-link {
 margin: 1em 1em 3em;
 text-align: center;
}

.comment-page-link a,
.comment-page-link span {
 margin-right: 3px;
 padding: 7px 15px;
 background-color: #ddd;
 background-color: #eee;
 color: #000;
 border: 1px solid #ddd;
 border-radius: 4px;
}

.comment-page-link a:hover,
.comment-page-link span:hover {
 background-color: inherit;
 color: #000;
}


/**
 * サイドバー(Sidebar)・ウィジェットなど
 */

#sidebar h3 {
 margin-bottom: 10px;
 font-size: 20px;
}

#sidebar .widget {
 margin-bottom: 40px;
}

#sidebar .widget:last-child {
 margin-bottom: 0;
}

#sidebar ol,
#sidebar ul {
 padding-left: 1em;
}

#sidebar li {
 margin-bottom: 8px;
}

#sidebar li:last-child {
 margin-bottom: 0;
}

#sidebar .snsp {
 padding-left: 0;
}

#sidebar .widget_category_sns_follow_buttons ul,
#sidebar .widget_category_sns_follow_buttons ul {
 padding-left: 0;
}

#sidebar-scroll .widget:last-child {
 margin-bottom: 0;
}

.widget_search {
 margin-bottom: 0;
}

.widget-over-article {
 margin-top: 10px;
 margin-bottom: 10px;
}

.widget-over-article ol,
.widget-over-article ul,
.widget-under-article ol,
.widget-under-article ul,
.widget-over-sns-buttons ol,
.widget-over-sns-buttons ul,
.widget-under-sns-buttons ol,
.widget-under-sns-buttons ul {
 padding-left: 1em;
}

#sidebar-popular-posts li,
#sidebar-recent-posts li {
 margin: 20px 0;
}

#sidebar-popular-posts h3,
#sidebar-popular-posts p,
#sidebar-recent-posts h3,
#sidebar-recent-posts p {
 margin: 0;
}

.sidebar-thumbnail-box {
 float: left;
 width: 75px;
}

.sidebar-recent-posts-title {
 float: right;
 width: 165px;
}


/**
 * 関連記事(Relation)
 */

.related-entry {
 margin-bottom: 26px;
 margin-right: 10px;
}

.related-entry h4 {
 margin-top: 0;
}

.related-entry-thumb {
 float: left;
}

.related-entry-thumb a {
 display: block;
}

.related-entry-thumb img {
 display: block;
 width: 100px;
 height: 100px;
 border: 0;
}

.related-entry-content {
 margin-left: 110px;
}

.related-entry-title {
 margin-top: 0;
 margin-bottom: 8.66667px;
}

.related-entry-title a {
 color: #333;
}

.related-entry-snippet {
 margin: 0;
 margin-bottom: 13px;
 color: #555;
 line-height: 1.3;
}

.related-entry-read {
 margin: 0;
 font-size: 14px;
}

.related-entry-thumbnail {
 float: left;
 margin-bottom: 15px;
 margin-right: 26px;
 width: 200px;
 height: 292px;
 text-align: center;
 overflow: hidden;
}

.related-entry-thumbnail .related-entry-thumb {
 margin: 0;
 padding: 0;
 float: none;
}

.related-entry-thumbnail .related-entry-content {
 margin: -10px 0 0;
}

.related-entry-thumbnail .related-entry-content a {
 font-weight: normal;
}

.related-entry-thumbnail img {
 margin-bottom: 0;
 width: 200px;
 height: 200px;
}


/**
 * コメントエリア(Comments Area)
 */

#comment-area ol,
#comment-area ul {
 padding-left: 0;
}

#comment-area ol ul,
#comment-area ul ul {
 margin-left: 1.5em;
}

#comment-area a {
 text-decoration: underline;
}

.required {
 color: #fe56aa;
}

.comment-list .avatar {
 margin-right: 10px;
 margin-bottom: 10px;
 float: left;
}

.commets-list,
.trackback-list {
 margin-top: -20px;
 margin-bottom: 40px;
}

.commets-list li,
.trackback-list li {
 margin-top: -1px;
 padding: 20px 0 0;
 width: 100%;
 border-bottom: 1px solid transparent;
}

.comment-meta,
.comment-notes,
.form-allowed-tags,
.reply,
span.small {
 font-size: 80%;
}

.comment-body p {
 clear: both;
}

.reply {
 text-align: right;
}

.children {
 padding-left: 2em;
}

#respond {
 margin-bottom: 40px;
}

#comments,
#reply-title {
 font-size: 21px;
}

#comments {
 margin-bottom: 25px;
}


/**
 * 入力フォーム(Form)
 */

input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"] {
 width: 100%;
 font-size: 16px;
 line-height: 1.42857;
 padding: 6px 12px;
 background-color: #fff;
 color: #333;
 background-image: none;
 border: 1px solid #ccc;
 border-radius: 4px;
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
 -webkit-transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
 transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}

input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="url"]:focus {
 background: #fff;
 color: #444;
 border: 1px solid #ff69b4;
 box-shadow: 0 0 3px hotpink;
}

input[type="button"],
input[type="reset"],
input[type="submit"] {
 display: inline-block;
 margin-bottom: 20px;
 padding: 8px 14px;
 font-weight: bold;
 line-height: normal;
 background-color: #fff;
 color: #333;
 border: 1px solid #777;
 border-radius: 3px;
 text-decoration: none;
 cursor: pointer;
}

input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
 background-color: #eee;
}

input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
 position: relative;
 top: 1px;
}

input#author,
input#email,
input#url {
 max-width: 360px;
}

textarea {
 padding: 6px 12px;
 width: 100%;
 background-color: #fff;
 color: #333;
 font-size: 16px;
 line-height: 1.42857;
 background-image: none;
 border: 1px solid #ccc;
 border-radius: 4px;
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
 -webkit-transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
 transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
 overflow: auto;
}

textarea:focus {
 background-color: #fff;
 color: #444;
 border: 1px solid #ff69b4;
 box-shadow: 0 0 3px hotpink;
}

.gsc-search-box input[type="text"] {
 background-color: #FFF;
 border-radius: 0;
}

#comment-area input[type="text"],
#comment-area textarea {
 display: block;
}

button,
.button {
 display: inline-block;
 margin-bottom: 20px;
 padding: 8px 14px;
 background-color: #fff;
 color: #333;
 font-weight: bold;
 line-height: normal;
 border: 1px solid #777;
 border-radius: 3px;
 text-decoration: none;
 cursor: pointer;
}

button:hover,
.button:hover {
 background-color: #eee;
}

button:active,
.button:active {
 position: relative;
 top: 1px;
}

select,
option {
 padding: 5px;
}


/**
 * フッター(footer)
 */

#footer {
 padding: 5px;
 background-color: #555;
 color: #fff;
 clear: both;
}

#footer a {
 color: #DCDCDC;
}

#footer h3 {
 font-size: 16px;
 color: #fff;
}

#footer .snsp {
 padding-left: 0;
}

#footer-widget {
 margin: 10px auto;
 padding: 0 5%;
 color: #fcfcfc;
 text-align: left;
}

#footer-widget ul {
 padding-left: 1em;
}

#footer-widget li {
 font-size: 14px;
}

.footer-center,
.footer-left,
.footer-right {
 padding: 10px;
}

.footer-left {
 float: left;
 width: 34%;
}

.footer-center,
.footer-right {
 float: left;
 width: 33%;
}

#copyright {
 padding: 20px 0;
 font-size: 80%;
 text-align: center;
}

#copyright a {
 color: #fff;
}


/**
 * サーチフォーム(Search Form)
 */

#searchform {
 position: relative;
 margin-top: 25px;
}

#s {
 margin-bottom: 20px;
 padding-top: 4px;
 padding-bottom: 4px;
 padding-right: 2em;
 width: 100%;
 height: 32px;
 color: #333;
}

#searchsubmit {
 position: absolute;
 top: 3px;
 right: 3px;
 margin-bottom: 0;
 width: 30px;
 height: 26px;
 border: none;
 background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAYAAABG1c6oAAAEIklEQVR42pWVe0xTVxzHf22hFWiBUKjLEiTOjODGq4ArJJiYBV+gWy3YBoegWZysOgsVKYNC8IGhsMIYCLLqRKRkRdwEp4wR/yCZgwbHa8bwCH9sQkt5lceGIax0v3PDJd7MZaHJL72555zP+f6eF5xOJ3R1d4Pp7l342mAAbUEBp/DixagDBw/mh0dGdmzbvv25f0DA88CgoA5FcnLx9draWOXZs7xinQ5WVlZoIxzKGMDb9fXCdKUy21ckWgZcep0JfX2dCL5WVl4udDgcsLq6SuzfwJYHDzyzc3Lagc3eOMwXCJzePj6zAm9vmwefvwYs1sbap0rlT9PT0z52ux3QmMBfe3vhUlHRdXozOfhOcHBfTGzspYTDh5Mk0dHxkRJJQXBoqPlVtedUqrrBwUFWT08PE/j9/fu7PVANrSD52DFjXn7+W1ESCezdvx8ioqIgLCICLmg0b2So1d+gckotb8sWp8lkSjCbzUzgUYWihYBY6K44MnKipbVVoMrMhJDw8A3g20FBgPEF6+Skqywp6TvW+uXxCQmdCHRhAN8NCZmi3VBnZdUUl5QAxhPSTp6EuH37IBTBpxFWUFgIDY2NcFWnO04UEtsRGDhfWVXlzQDiy0V6A8IufJ6XB5eLioCAP5BK4YhMBt+aTHCrrg4MN25A/Z07UkqAi4tTKBLNvx8XJ2QAQ8LCbHQysjWarwYGBqCishJKSksB3YO0EycgV6sFU1MT6PAStFRaQODOnXbDzZs+DGCSXP6IBmIifrdYLPyq6moKeCQxEY6npsJnKhU0Ya1mqtXwSXp6K51AqUzW2W02cxjA5nv39vI9PddIDbI4HOdHKSmG8ooKry/0ejZRmJqWBpnnz7OMjY1eyjNnqnlubg7AfTx39zV9WdmBX7q6mFl+1NYGObm5Dex1IAGHicW9eVptVvyhQ7uOyuW7Pj516nR0TEwvdSnGjsvjOc5lZBhJu6JCJnBkZATGxsbc5ApFm6urq+PVAvfw9CRGINQ7DpdLlRf2+fSkzeY7YbHAHy9eMIFDQ0OU/fbsGV+amKjbFhAwxVkHoGuU0Ze48HhONq75+vn99cPDh/KXy8uwuLj4eiDpaZKMLI3mQ3T1y/diYjowTo8R8nj3nj0d2C3DFBQ7hPxjdVhHR0d3WK3W/waW6vWA4wkw2KQWBeiuFwK9rtXU8Pv6+iRv+vv/iaGglFJtmpLSOT4+zv1f4OUrV0iiwF0gADxMipzaW1Nbq0UgiSXlOnluMBqzNw0knfM3zr2ep0/dsL+pqeO67nqoWDyxKSD5NTU3w89PnsCP7e2kY2QERBvOy5ebAvb398Pc3BzYpqZgZmYG7PPzXBxjDTi9Z4VC4SxOIcOmgDabDZaWlmBhYYGUCHlm47dHL9q6ddhPJBrGCXWVBv4DYbnuWKzr2fcAAAAASUVORK5CYII=") no-repeat 50% 50%;
 z-index: 0;
}


/**
 * WordPress Misc
 */

.aligncenter {
 display: block;
 margin-left: auto;
 margin-right: auto;
}

img.alignleft,
img.alignright {
 display: inline-block;
 margin-bottom: 10px;
}

img.alignleft {
 float: left;
 margin: 0 1.5em 1em 0;
}

img.alignright {
 float: right;
 margin: 0 0 1em 1.5em;
}

.wp-caption {
 padding-top: 4px;
 background-color: #f3f3f3;
 border: 1px solid #ddd;
 border-radius: 3px;
 text-align: center;
}

.wp-caption.alignleft,
.wp-caption.alignright {
 margin-bottom: 10px;
}

.wp-caption.alignleft {
 float: left;
 margin-right: 10px;
}

.wp-caption.alignright {
 float: right;
 margin-left: 10px;
}

.wp-caption img {
 margin: 0;
 padding: 0;
 border: 0 none;
}

.wp-caption-text,
.gallery-caption {
 font-size: 80%;
}

.wp-caption-dd {
 margin: 0;
 padding: 0 4px 5px;
 font-size: 11px;
 line-height: 17px;
}


/**
 * widget
 */

#main .widget a,
#sidebar .widget a,
#footer .widget a {
 text-decoration: underline;
}

#main .widget.widget_new_entries a,
#main .widget.widget_new_popular a,
#main .widget.widget_popular_ranking a,
#sidebar .widget.widget_new_entries a,
#sidebar .widget.widget_new_popular a,
#sidebar .widget.widget_popular_ranking a,
#footer .widget.widget_new_entries a,
#footer .widget.widget_new_popular a,
#footer .widget.widget_popular_ranking a {
 text-decoration: none;
}

#main .widget.widget_new_entries a:hover,
#main .widget.widget_new_popular a:hover,
#main .widget.widget_popular_ranking a:hover,
#sidebar .widget.widget_new_entries a:hover,
#sidebar .widget.widget_new_popular a:hover,
#sidebar .widget.widget_popular_ranking a:hover,
#footer .widget.widget_new_entries a:hover,
#footer .widget.widget_new_popular a:hover,
#footer .widget.widget_popular_ranking a:hover {
 text-decoration: underline;
}


/**
 * widget 新着記事・人気記事(new, pupular)
 */

#footer .widget_new_entries ul,
#footer .widget_new_popular ul,
#footer .widget_popular_ranking ul,
#main .widget_new_entries ul,
#main .widget_new_popular ul,
#main .widget_popular_ranking ul,
#sidebar .widget_new_entries ul,
#sidebar .widget_new_popular ul,
#sidebar .widget_popular_ranking ul {
 padding-left: 0;
}

.widget_new_entries,
.widget_new_popular,
.widget_popular_ranking {
 line-height: 1.5;
}

.widget_new_entries h4,
.widget_new_popular h4,
.widget_popular_ranking h4 {
 margin-bottom: 15px;
}

.widget_new_entries ul li,
.widget_new_popular ul li,
.widget_popular_ranking ul li {
 margin-bottom: 10px;
 float: none;
 clear: left;
}

.widget_new_entries ul li img,
.widget_new_popular ul li img,
.widget_popular_ranking ul li img {
 display: inline;
 margin-top: 3px;
 margin-bottom: 10px;
 margin-right: 5px;
 width: 75px;
 height: 75px;
 border: medium none;
 float: left;
}

span.wpp-views {
 font-size: x-small;
 font-style: italic;
}

.widget_new_entries .new-entrys-large .new-entry {
 display: block;
 position: relative;
 max-width: 440px;
 margin-bottom: 15px;
 line-height: 120%;
 overflow: visible;
}

.widget_new_entries .new-entrys-large .new-entry img {
 display: block;
 margin: 0 0 5px;
 width: 100%;
 height: auto;
 max-width: 440px;
 min-height: 180px;
 max-height: 240px;
 float: none;
}

.widget_new_entries .new-entrys-large-on .new-entry .new-entry-content {
 display: block;
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 padding: 10px;
 max-height: 28%;
 overflow: hidden;
 background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyAQMAAAAk8RryAAAAA1BMVEUAAACnej3aAAAAAXRSTlOZyTXzhgAAAA1JREFUGNNjGAWDCgAAAZAAAXtlmk8AAAAASUVORK5CYII=") repeat scroll 0 0 transparent;
}

.widget_new_entries .new-entrys-large-on .new-entry .new-entry-content a {
 display: block;
 color: #fff;
}

.widget_new_popular .popular-entrys-large .popular-entry {
 display: block;
 position: relative;
 margin-bottom: 15px;
 max-width: 440px;
 line-height: 120%;
 overflow: visible;
}

.widget_new_popular .popular-entrys-large .popular-entry img {
 display: block;
 margin: 0 0 5px;
 width: 100%;
 height: auto;
 min-height: 180px;
 max-width: 440px;
 max-height: 240px;
 float: none;
}

.widget_new_popular .popular-entrys-large .wpp-list li {
 position: relative;
 display: block;
 margin-bottom: 15px;
 max-width: 440px;
 line-height: 120%;
 overflow: visible;
}

.widget_new_popular .popular-entrys-large .wpp-list li img {
 display: block;
 margin: 0 0 5px;
 width: 100%;
 height: auto;
 min-height: 180px;
 max-width: 440px;
 max-height: 240px;
 float: none;
}

.widget_new_popular .popular-entrys-large .wpp-list li img.wpp_cached_thumb {
 height: auto;
}

.widget_new_popular .popular-entrys-large-on .popular-entry .popular-entry-content {
 display: block;
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 padding: 10px;
 max-height: 28%;
 overflow: hidden;
 background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyAQMAAAAk8RryAAAAA1BMVEUAAACnej3aAAAAAXRSTlOZyTXzhgAAAA1JREFUGNNjGAWDCgAAAZAAAXtlmk8AAAAASUVORK5CYII=") repeat scroll 0 0 transparent;
}

.widget_new_popular .popular-entrys-large-on .popular-entry .popular-entry-content a {
 display: block;
 color: #fff;
}

.widget_new_popular .popular-entrys-large-on .wpp-list li a {
 display: block;
 color: #fff;
}

.widget_new_popular .popular-entrys-large-on .wpp-list li a.wpp-post-title {
 display: block;
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 padding: 10px;
 max-height: 28%;
 overflow: hidden;
 background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyAQMAAAAk8RryAAAAA1BMVEUAAACnej3aAAAAAXRSTlOZyTXzhgAAAA1JREFUGNNjGAWDCgAAAZAAAXtlmk8AAAAASUVORK5CYII=") repeat scroll 0 0 transparent;
}

.widget_new_popular .popular-entrys-large-on .wpp-list li span.wpp-views {
 display: block;
 position: absolute;
 top: 0;
 right: 0;
 padding: 2px 10px;
 color: #fff;
 font-size: medium;
 border-bottom-left-radius: 15px;
 opacity: 1;
 background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyAQMAAAAk8RryAAAAA1BMVEUAAACnej3aAAAAAXRSTlOZyTXzhgAAAA1JREFUGNNjGAWDCgAAAZAAAXtlmk8AAAAASUVORK5CYII=") repeat scroll 0 0 transparent;
}

.widget_new_popular .new-entrys-large .new-entry {
 display: block;
 position: relative;
 margin-bottom: 15px;
 max-width: 440px;
 line-height: 120%;
 overflow: visible;
}

.widget_new_popular .new-entrys-large .new-entry img {
 display: block;
 margin: 0 0 5px;
 width: 100%;
 height: auto;
 min-height: 180px;
 max-width: 440px;
 max-height: 240px;
 float: none;
}

.widget_new_popular .new-entrys-large-on .new-entry .new-entry-content {
 display: block;
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 padding: 10px;
 max-height: 28%;
 overflow: hidden;
 background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyAQMAAAAk8RryAAAAA1BMVEUAAACnej3aAAAAAXRSTlOZyTXzhgAAAA1JREFUGNNjGAWDCgAAAZAAAXtlmk8AAAAASUVORK5CYII=") repeat scroll 0 0 transparent;
}

.widget_new_popular .new-entrys-large-on .new-entry .new-entry-content a {
 display: block;
 color: #fff;
}

.widget_popular_ranking .popular-entrys-large .popular-entry {
 position: relative;
 display: block;
 margin-bottom: 15px;
 max-width: 440px;
 line-height: 120%;
 overflow: visible;
}

.widget_popular_ranking .popular-entrys-large .popular-entry img {
 display: block;
 margin: 0 0 5px;
 width: 100%;
 height: auto;
 max-width: 440px;
 min-height: 180px;
 max-height: 240px;
 float: none;
}

.widget_popular_ranking .popular-entrys-large .wpp-list li {
 position: relative;
 display: block;
 margin-bottom: 15px;
 max-width: 440px;
 line-height: 120%;
 overflow: visible;
}

.widget_popular_ranking .popular-entrys-large .wpp-list li img {
 display: block;
 margin: 0 0 5px;
 width: 100%;
 height: auto;
 max-width: 440px;
 min-height: 180px;
 max-height: 240px;
 float: none;
}

.widget_popular_ranking .popular-entrys-large .wpp-list li img.wpp_cached_thumb {
 height: auto;
}

.widget_popular_ranking .popular-entrys-large-on .popular-entry .popular-entry-content {
 display: block;
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 padding: 10px;
 max-height: 28%;
 overflow: hidden;
 background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyAQMAAAAk8RryAAAAA1BMVEUAAACnej3aAAAAAXRSTlOZyTXzhgAAAA1JREFUGNNjGAWDCgAAAZAAAXtlmk8AAAAASUVORK5CYII=") repeat scroll 0 0 transparent;
}

.widget_popular_ranking .popular-entrys-large-on .popular-entry .popular-entry-content a {
 display: block;
 color: #fff;
}

.widget_popular_ranking .popular-entrys-large-on .wpp-list li a.wpp-post-title {
 display: block;
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 padding: 10px;
 max-height: 28%;
 overflow: hidden;
 background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyAQMAAAAk8RryAAAAA1BMVEUAAACnej3aAAAAAXRSTlOZyTXzhgAAAA1JREFUGNNjGAWDCgAAAZAAAXtlmk8AAAAASUVORK5CYII=") repeat scroll 0 0 transparent;
}

.widget_popular_ranking .popular-entrys-large-on .wpp-list li a.wpp-post-title a {
 display: block;
 color: #fff;
}

.widget_popular_ranking .popular-entrys-large-on .wpp-list li span.wpp-views {
 display: block;
 position: absolute;
 top: 0;
 right: 0;
 padding: 2px 10px;
 color: #fff;
 font-size: medium;
 border-bottom-left-radius: 15px;
 opacity: 1;
 background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyAQMAAAAk8RryAAAAA1BMVEUAAACnej3aAAAAAXRSTlOZyTXzhgAAAA1JREFUGNNjGAWDCgAAAZAAAXtlmk8AAAAASUVORK5CYII=") repeat scroll 0 0 transparent;
}

#wp-calendar {
 width: 100%;
 max-width: 400px;
}

#wp-calendar td,
#wp-calendar th {
 text-align: center;
}

#wp-calendar #prev {
 text-align: left;
}

#wp-calendar #next {
 text-align: right;
}

.recent-comment-title {
 display: inline-block;
 margin-bottom: 6.5px;
}

.recent-comments {
 width: 100%;
 margin: 20px auto;
}

.recent-comments dt {
 width: 46px;
 text-align: left;
 float: left;
 clear: left;
 white-space: nowrap;
}

.recent-comments dt img {
 width: auto;
 height: 2.5em;
}

.recent-comments dd {
 margin-left: 0;
 margin-bottom: 13px;
}

.recent-comments dd .recent-comment-author {
 font-weight: bold;
}

.recent-comments dd .recent-comment-content {
 font-size: 14px;
}


/**
 * TOPへ戻るボタン(Go to top)
 */

#page-top {
 display: none;
 position: fixed;
 bottom: 10px;
 right: 10px;
}

#page-top a {
 display: block;
 padding: 7px;
 background-color: #aaa;
 color: #fff;
 font-size: 11px;
 line-height: 100%;
 text-align: center;
 border-radius: 4px;
 cursor: pointer;
}

#page-top a.move-page-top-image {
 background-color: transparent;
}


/**
 * 非表示にするものまとめ
 */

.widget-ad .ad-space .ad-label,
.widget-over-article-title .ad-space .ad-label,
.widget-under-article-title .ad-space .ad-label,
.widget-over-sns-buttons-title .ad-space .ad-label,
.widget-under-sns-buttons-title .ad-space .ad-label,
#sidebar .ad-space .ad-label {
 display: none;
}

.widget-index-top {
 margin-bottom: 30px;
}

.widget-index-middle {
 margin-bottom: 40px;
}


/**
 * モバイルモーダルメニュー(animatedModal.js)
 */

.close-animatedModal {
 font-size: 45px;
 text-align: center;
}

.modal-content {
 margin: auto;
 width: auto;
 max-width: 440px;
}

#animatedModal ul {
 margin-top: 0;
 margin-left: 0;
 padding-left: 0;
}

#animatedModal ul li {
 margin: 0 10px 10px;
 border: 1px solid #fff;
 border-radius: 5px;
}

#animatedModal ul li a {
 display: block;
 padding: 5px 10px;
 width: auto;
 color: #fff;
 border-radius: 5px;
}

#animatedModal ul li a:hover {
 background-color: #555;
}

#___gcse_0 .cse .gsc-control-cse,
#___gcse_0 .gsc-control-cse {
 background-color: transparent;
 border: none;
}

.slicknav_menu {
 display: none;
}

div.vdh-mask {
 display: none;
}


/**
 * 広告(ads)
 */

.ad-space {
 margin: 30px 0;
 clear: both;
}

.ad-left,
.ad-right {
 width: 336px;
}

.ad-left {
 margin-right: 2px;
 float: left;
}

.ad-right {
 margin-left: 2px;
 float: right;
}

.ad-top-pc {
 margin: 0 -24px 15px;
 width: 728px;
}

.ad-space-top {
 margin-top: 0;
 margin-bottom: 5px;
}

.ad-space-top .ad-label {
 display: none;
}

.ad-space-singular {
 margin-top: 15px;
 margin-bottom: 10px;
}

#sidebar .ad-space {
 margin-top: 0;
}


/**
 * facebook
 */

.fb-like-mobile {
 display: none;
}

.article-like {
 margin-top: 30px;
 margin-bottom: 30px;
 height: 100px;
 clear: both;
}

.article-like-thumb {
 float: left;
 width: 100px;
}

.article-like-thumb img {
 display: block;
}

.article-like-body {
 margin-right: 140px;
 padding: 10px;
 height: 100px;
 background-color: #fff;
 color: #000;
 font-size: 18px;
 line-height: 1.3em;
 float: none;
 overflow: hidden;
}

.article-like-body::after {
 content: '\f054';
 position: absolute;
 top: 27px;
 right: 110px;
 font-size: 50px;
 font-family: FontAwesome;
 line-height: 100%;
 color: #ccc;
}

.article-like-button {
 padding-top: 27px;
 width: 100px;
 height: 100px;
 background-color: #f3f3f3;
 text-align: center;
 float: right;
}

.fb-like iframe {
 background-color: #fff;
}

.article-like-arrow-box {
 position: relative;
 margin-left: 12px;
 width: calc(100% - 114px);
 border: 1px solid #bbb;
 border-radius: 5px;
 float: left;
}

.article-like-arrow-box:after,
.article-like-arrow-box:before {
 content: " ";
 position: absolute;
 top: 50%;
 right: 100%;
 width: 0;
 height: 0;
 border: solid transparent;
 pointer-events: none;
}

.article-like-arrow-box:after {
 margin-top: -10px;
 border-width: 10px;
 border-color: rgba(255, 255, 255, 0);
 border-right-color: #fff;
}

.article-like-arrow-box:before {
 margin-top: -11px;
 border-width: 11px;
 border-color: rgba(221, 221, 221, 0);
 border-right-color: #bbb;
}

.article-like-arrow-box-in {
 border-radius: 5px;
 overflow: hidden;
}

#sidebar .article-like-body {
 margin-right: 0;
 padding: 5px;
 height: 70px;
 font-size: 0.8em;
 line-height: 1.1em;
}

#sidebar .article-like-body::after {
 display: none;
}

#sidebar .article-like-arrow-box {
 height: 100px;
}

#sidebar .article-like-button {
 display: block;
 padding-top: 0;
 width: 100%;
 height: 30px;
 line-height: 24px;
 float: none;
}

#sidebar div.fb-like-mobile {
 display: block;
}

#sidebar div.fb-like-pc {
 display: none;
}


/**
 * feedly
 */

#feedly-followers {
 display: block;
}

#feedly-followers a {
 display: block;
}

#feedly-followers img {
 width: 72px;
 height: 22px;
 border: none;
}

#feedly-count {
 display: block;
 position: relative;
 margin: 0 auto 6px;
 padding: 0 4px;
 width: 62px;
 height: 31px;
 font-family: Arial;
 font-size: 16px;
 line-height: 31px;
 text-align: center;
 background-color: #FFF;
 border: 1px solid #BDBDBD;
 border-radius: 4px;
}

#feedly-count a {
 color: #333;
}

.fdly-count::after,
.fdly-count::before {
 content: '';
 position: absolute;
 right: 43%;
 border: solid transparent;
 border-width: 5px;
}

.fdly-count:before {
 top: 32px;
 border-top-color: #B0C1D8;
}

.fdly-count:after {
 top: 30px;
 border-top-color: #FFF;
}

.feedly-btn-horizontal img#feedly-follow {
 width: 60px;
 height: 20px;
 margin-right: 3px;
 border: 0;
}

.feedly-btn-horizontal .arrow_box {
 display: inline-block;
 position: relative;
 top: -7px;
 height: 22px;
 padding: 0 6px;
 line-height: 18px;
 background: #fff;
 border: 1px solid #BDBDBD;
 border-radius: 3px;
}

.feedly-btn-horizontal a {
 color: #333;
 font-size: 11px;
 line-height: 18px;
}

.feedly-btn-horizontal a:hover {
 color: #333;
}

.feedly-btn-horizontal .arrow_box:after,
.feedly-btn-horizontal .arrow_box:before {
 content: " ";
 position: absolute;
 top: 50%;
 right: 100%;
 width: 0;
 height: 0;
 border: solid transparent;
 pointer-events: none;
}

.feedly-btn-horizontal .arrow_box:before {
 margin-top: -4px;
 border-width: 4px;
 border-color: rgba(189, 189, 189, 0);
 border-right-color: #BDBDBD;
}

.feedly-btn-horizontal .arrow_box:after {
 margin-top: -3px;
 border-width: 3px;
 border-color: rgba(255, 255, 255, 0);
 border-right-color: #fff;
}


/**
 * ブログカードのスタイル
 */

.blog-card {
 position: relative;
 margin: 20px 0;
 width: 500px;
 min-width: 300px;
 max-width: 100%;
 min-height: 155px;
}

.blog-card:before,
.blog-card:after {
 content: "";
 display: table;
}

.blog-card:after {
 clear: both;
}

.blog-card img {
 border: 0;
}

.blog-card a {
 text-decoration: none;
}

.internal-blog-card {
 padding: 12px 12px 6px;
 border: 1px solid #ddd;
 border-radius: 5px;
}

.external-blog-card {
 background-color: transparent;
 border: 0;
 overflow: hidden;
}

.blog-card-thumbnail {
 float: left;
}

.blog-card-thumbnail .blog-card-thumb-image {
 margin-bottom: 10px;
 width: 100px;
 height: 100px;
 -o-object-fit: cover;
 object-fit: cover;
}

.blog-card-content {
 margin-left: 110px;
 margin-bottom: 0.5em;
}

.blog-card-title {
 margin-bottom: 13px;
 font-weight: bold;
}

.blog-card-title a {
 color: #111;
}

.blog-card-excerpt {
 max-height: 80px;
 color: #333;
 font-size: 14.4px;
 line-height: 1.3;
 overflow: hidden;
}

.blog-card-footer {
 margin-top: 5px;
 margin-left: -4px;
 margin-bottom: 3px;
 color: #777;
 font-size: 11.2px;
 clear: both;
}

.blog-card-footer:before,
.blog-card-footer:after {
 content: "";
 display: table;
}

.blog-card-footer:after {
 clear: both;
}

.blog-card-hatebu {
 position: relative;
 bottom: -5px;
 margin-right: 7px;
 float: left;
}

.blog-card-date {
 float: right;
 margin-bottom: -5px;
}

.blog-card-site {
 position: relative;
 margin-top: 1px;
 margin-right: 7px;
 float: left;
}

.blog-card-site a {
 color: #777;
}

.blog-card-favicon {
 position: relative;
 bottom: -4px;
 margin-right: 3px;
}

.blog-card-favicon-img {
 width: 16px;
 height: 16px;
}

.clear {
 clear: both;
}

#footer .blog-card,
#sidebar .blog-card {
 margin-left: 0;
 margin-right: 0;
 width: 100%;
 min-width: initial;
}

#footer .blog-card:before,
#footer .blog-card:after,
#sidebar .blog-card:before,
#sidebar .blog-card:after {
 content: "";
 display: table;
}

#footer .blog-card:after,
#sidebar .blog-card:after {
 clear: both;
}

#footer .blog-car-title,
#sidebar .blog-car-title {
 font-size: 14px;
 line-height: 1.2;
}

#footer .blog-card-excerpt,
#footer .blog-card-footer,
#sidebar .blog-card-excerpt,
#sidebar .blog-card-footer {
 font-size: 11px;
 line-height: 1.2;
}

#footer .blog-card-thumb-image,
#sidebar .blog-card-thumb-image {
 margin-bottom: 20px;
 width: 80px;
 height: 80px;
}

#footer .blog-card-content,
#sidebar .blog-card-content {
 margin-left: 90px;
}


/**
 * ブログカード(幅が狭い場合)
 */

@media screen and (max-width: 560px) {
 .article .blog-card,
 .article .entry-content .hover-card {
  width: 100%;
 }
 .blog-card-content {
  margin-left: 0;
 }
 .blog-card-title a {
  font-size: 14px;
  line-height: 1.2;
 }
 .blog-card-excerpt,
 .blog-card-footer {
  font-size: 11px;
  line-height: 1.2;
 }
 #main .blog-card,
 #main .hover-card {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
 }
 .blog-card-thumb-image {
  width: 80px;
  height: 80px;
 }
 .blog-card-content {
  margin-left: 90px;
 }
}


/**
 * 外部パーツ微調整
 */

.bbp-breadcrumb-home {
 display: none;
}

.bbp-breadcrumb-home + .bbp-breadcrumb-sep {
 display: none;
}

.topic .footer-post-meta,
.topic .post-date,
.topic .post-update {
 display: none;
}

.post-0 .footer-post-meta,
.post-0 .post-date,
.post-0 .post-update {
 display: none;
}

.post-0 .post-meta {
 height: 27px;
}

.forum .footer-post-meta,
.forum .post-date,
.forum .post-update {
 display: none;
}

#bbp_search {
 font-size: 17px;
}

#bbp_search_submit {
 padding-top: 9px;
 padding-bottom: 9px;
}

.bbp-reply-content {
 font-size: 16px;
 line-height: 1.7;
}

.bbp-forum-title {
 font-size: 16px;
}

.bbp-topic-permalink {
 font-size: 14px;
}

#main #bbpress-forums .status-closed {
 background-color: #fcfcfc;
 color: #000;
}

#main #bbpress-forums .status-closed a {
 color: #2098a8;
}

#main #bbpress-forums .status-closed .bbp-topic-title a {
 color: #333;
}

#main #bbpress-forums .bbp-reply-author .avatar {
 position: relative;
}

#bbp-container .entry-content {
 margin-left: 0;
}

.bbp-form > div,
.bbp-form > p {
 text-align: left;
}

#bbp_reply_content,
#bbp_topic_content {
 border: 1px solid #ccc;
}

.bbr-form-wrapper {
 clear: left;
}

.bbr-field-wrapper {
 position: relative;
 top: 5px;
 margin-right: 10px;
 float: left;
}

@media screen and (max-width: 440px) {
 #main #bbpress-forums div.bbp-forum-content,
 #main #bbpress-forums div.bbp-reply-content,
 #main #bbpress-forums div.bbp-topic-content {
  margin-left: 10px;
 }
}

@media screen and (max-width: 480px) {
 .article #bbpress-forums .bbp-body .bbp-reply-author {
  margin-top: 10px;
  padding-left: 0;
  line-height: 1.3;
 }
 .article #bbpress-forums .bbp-body .bbp-reply-author .avatar {
  top: 0;
 }
}

#cse-search-box input {
 display: inline-block;
 height: 34px;
 color: #333;
}

#cse-search-box input[type="text"] {
 width: calc(100% - 70px);
 background-color: #fff;
}

#cse-search-box input[type="submit"] {
 height: 32px;
}

#main #bbpress-forums div.bbp-reply-author img.avatar {
 position: relative;
}

.widget_archive label.screen-reader-text,
.widget_categories label.screen-reader-text {
 display: none;
}


/**
 * ページネーション
 */

.pagination {
 margin: 40px 0;
 padding-left: 0;
 text-align: center;
}

.pagination li {
 display: inline-block;
}

.pagination a {
 display: block;
 width: 38px;
 height: 38px;
 font-weight: 500;
 line-height: 38px;
 color: #333;
 border: 0;
}

.pagination li:not([class*="current"]) a:hover {
 background-color: #eee;
}

.pagination li:first-of-type a {
 border-left-width: 1px;
}

.pagination li.first span,
.pagination li.last span,
.pagination li.next span,
.pagination li.previous span {
 position: absolute;
 top: -9999px;
 left: -9999px;
}

.pagination li.first a::before,
.pagination li.first a::after,
.pagination li.last a::before,
.pagination li.last a::after,
.pagination li.next a::before,
.pagination li.next a::after,
.pagination li.previous a::before,
.pagination li.previous a::after {
 display: inline-block;
 font-family: Fontawesome;
 font-size: inherit;
 text-rendering: auto;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 -webkit-transform: translate(0, 0);
 -ms-transform: translate(0, 0);
 transform: translate(0, 0);
}

.pagination li.first a::before {
 content: "\f100";
}

.pagination li.last a::after {
 content: "\f101";
}

.pagination li.previous a::before {
 content: "\f104";
}

.pagination li.next a::after {
 content: "\f105";
}

.pagination li.current a {
 background-color: #ddd;
 cursor: default;
 pointer-events: none;
}

.pagination > li:first-child > a {
 border-bottom-left-radius: 4px;
 border-top-left-radius: 4px;
}

.pagination > li:last-child > a {
 border-bottom-right-radius: 4px;
 border-top-right-radius: 4px;
}

@media only screen and (max-width: 500px) {
 .pagination li.first,
 .pagination li.last {
  position: absolute;
  top: -9999px;
  left: -9999px;
 }
 .pagination li.previous a {
  border-left-width: 1px;
 }
}

@media only screen and (max-width: 310px) {
 .pagination li {
  position: absolute;
  top: -9999px;
  left: -9999px;
 }
 .pagination li.current,
 .pagination li.first,
 .pagination li.last,
 .pagination li.previous,
 .pagination li.next {
  position: initial;
  top: initial;
  left: initial;
 }
 .pagination li.previous a {
  border-left-width: 0;
 }
}

.entry-large-thumnail {
 width: 100%;
 height: auto;
}


/**
 * アイキャッチ
 */

.eye-catch {
 margin-left: 0;
 line-height: 100%;
}

.eye-catch-caption {
 font-size: 75%;
}


/**
 * 折り畳みアーカイブウィジェット
 */

.widget_archive .year {
 cursor: pointer;
 text-decoration: underline;
}

.widget_archive .years ul {
 margin: 0;
 margin-bottom: 1em;
 -webkit-transition: .3s ease;
 transition: .3s ease;
}

#sidebar .widget_archive .years li {
 margin-bottom: 0;
}


/*PageSpeed Insightsのユーザーエクスペリエンス対策*/

@media screen and (max-width: 639px) {
 #sidebar .widget_archive .years li a {
  display: inline-block;
  margin-bottom: 8px;
 }
}

.widget_archive .years .hide {
 display: none;
 margin: 0;
 height: 0;
 opacity: 0;
 visibility: hidden;
 overflow: hidden;
}

.admin-pv {
 text-align: right;
}

.admin-pv > span {
 margin: 0 5px;
 padding: 0 3px;
}


/**
 * highlight.js要のスタイル
 */

.hljs {
 display: block;
 margin: 1em auto;
 padding: 0.5em;
 line-height: 1.4;
 border-radius: 5px;
 word-wrap: normal;
 overflow: auto;
 -webkit-text-size-adjust: none;
}

.hljs-attribute,
.hljs-doctag,
.hljs-keyword,
.hljs-meta-keyword,
.hljs-name,
.hljs-selector-tag {
 font-weight: bold;
}


/**
 * Alt属性値を画像ホバー時にキャプション表示する
 */

.hover-image {
 display: inline-block;
 position: relative;
 text-align: left;
 border-radius: 3px;
 opacity: 0.99;
 overflow: hidden;
}

.hover-image:before {
 content: '';
 position: absolute;
 top: 100%;
 left: 0;
 width: 100%;
 height: 50%;
 background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
 background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
 -webkit-transition-property: top, opacity;
 transition-property: top, opacity;
 -webkit-transition-duration: 0.1s;
 transition-duration: 0.1s;
 opacity: 0;
 z-index: 2;
}

.hover-image img {
 display: block;
 max-width: 100%;
}

.hover-image .details {
 position: absolute;
 bottom: 0;
 left: 0;
 padding: 20px;
 font-size: 16px;
 color: #fff;
 z-index: 3;
}

.hover-image .details a {
 color: #fff;
}

.hover-image .details span {
 display: block;
 position: relative;
 top: 100px;
 -webkit-transition-property: top, opacity;
 transition-property: top, opacity;
 -webkit-transition-duration: 0.1s;
 transition-duration: 0.1s;
 -webkit-transition-delay: 0s;
 transition-delay: 0s;
 opacity: 0;
}

.hover-image .details .info {
 margin-top: 5px;
 font-size: 12px;
 line-height: 1.2;
}

.hover-image:hover:before {
 top: 50%;
 opacity: 1;
}

.hover-image:hover span {
 top: 0;
 opacity: 1;
}

.hover-image:hover .info {
 -webkit-transition-delay: 0.15s;
 transition-delay: 0.15s;
}

.hover-image-admin::before {
 -webkit-transition-duration: 0s;
 transition-duration: 0s;
}

.wp-caption .hover-image {
 margin: 0;
}


/**
 * hover card
 */

.hover-internal-blog-card,
.hover-external-blog-card {
 width: 500px;
}

.hover-internal-blog-card.hover-blog-card-wide,
.hover-external-blog-card.hover-blog-card-wide {
 margin: 20px;
 width: calc(100% - 40px);
}

.hover-internal-blog-card.hover-blog-card-wide .blog-card-wide,
.hover-external-blog-card.hover-blog-card-wide .blog-card-wide {
 margin: 0;
 width: auto;
}

.hover-card {
 text-decoration: none;
 display: block;
}

.hover-card .entry-read,
.hover-card .category,
.hover-card .related-entry-read,
.hover-card .blog-card-title {
 color: #111;
 text-decoration: underline;
}

.hover-card .admin-pv {
 color: #111;
 text-decoration: none;
}

.hover-card .entry:hover,
.hover-card .related-entry:hover,
.hover-card .related-entry-thumbnail:hover,
.hover-card .blog-card:hover {
 background-color: #f7f7f7;
}

.hover-card .entry-tile h2,
.hover-card .blog-card-title {
 font-weight: bold;
 font-size: 16px;
 line-height: 1.1;
 text-decoration: none;
}

.hover-card .related-entry-thumbnail h3 {
 font-weight: normal;
 font-size: 16px;
 line-height: 1.1;
}


/**
 * 人気ウィジェットをランキング
 */

.ranking_list {
 counter-reset: wpp-ranking;
}

.ranking_list ul li {
 position: relative;
}

.ranking_list ul li::before {
 content: counter(wpp-ranking, decimal);
 counter-increment: wpp-ranking;
 position: absolute;
 top: 3px;
 left: 0;
 padding: 4px 7px;
 background: none repeat scroll 0 0 #666;
 color: #fff;
 font-family: Arial;
 font-size: 75%;
 line-height: 1;
 border-radius: 2px;
 opacity: 0.9;
 z-index: 1;
}

.icon-amp-logo2::before {
 font-size: 14px;
}


/**
 * SNSに関するスタイルシートの設定
 */


/**
 * SNSシェアボタン
 */

#sns-group:before,
#sns-group:after {
 content: "";
 display: table;
}

#sns-group:after {
 clear: both;
}

.article .snsb {
 list-style-type: none;
}

.snsb {
 margin-bottom: 0;
 padding: 10px 0;
 font-family: sans-serif;
}

.snsb li {
 margin-top: 2px;
 margin-bottom: 5px;
 margin-right: 7px;
 float: left;
}

.snsb a {
 text-decoration: none;
}

.snsbs li {
 margin-right: 5px;
 margin-bottom: 5px;
}

.snsbs li a {
 display: block;
 position: relative;
 padding: 7px 6px 3px;
 width: 25px;
 height: 30px;
 background-color: #000;
 color: #fff;
 font-size: 25px;
 text-align: center;
 border-radius: 5px;
}

.snsbs li a .social-count {
 display: inline-block;
 position: absolute;
 right: 0;
 bottom: 0;
 padding: 1px 3px;
 width: auto;
 height: 12px;
 background-color: #555;
 font-family: Arial;
 font-size: 10px;
 line-height: 12px;
 border-radius: 5px;
}

.snsbs li a:hover {
 opacity: 0.7;
}

.snsbs li img {
 border-radius: 10px;
}

.snsbs a.twitter-btn-icon-link {
 background-color: #55acee;
}

.snsbs a.facebook-btn-icon-link {
 background-color: #3b5998;
}

.snsbs a.google-plus-btn-icon-link {
 background-color: #dd4b39;
}

.snsbs a.hatena-btn-icon-link {
 background-color: #3C7DD1;
}

.snsbs a.pocket-btn-icon-link {
 background-color: #EE4257;
}

.snsbs a.line-btn-icon-link {
 background-color: #00c300;
}

.snsbs a.evernote-btn-icon-link {
 background-color: #51b125;
}

.snsbs a.feedly-btn-icon-link {
 background-color: #87bd33;
}

.snsbs a.push7-btn-icon-link {
 background-color: #eeac00;
}

.snsbs a.comments-btn-icon-link {
 background-color: #555;
 padding-top: 4px;
 padding-bottom: 6px;
}

img.line-btn-img,
img.evernote-btn-img {
 min-height: 62px;
}

img.line-btn-img-mini,
img.evernote-btn-img-mini {
 display: none;
}


/**
  * タイトル下SNSボタン
  * オリジナルの読み込み位置にあわせるため
  * 分離したものの最初のブロック
  */

#sns-group-top {
 margin-bottom: 13px;
}

#sns-group-top ul {
 padding: 0;
 line-height: 20px;
}

#sns-group-top ul li {
 margin-top: 2px;
 margin-bottom: 2px;
}

#sns-group-top .sns-share-msg {
 display: none;
}

#sns-group-top .twitter-btn {
 width: 100px;
}

#sns-group-top .facebook-btn {
 width: 127px;
}

#sns-group-top .google-plus-btn {
 margin-top: -2px;
 width: 65px;
}

#sns-group-top .pocket-btn {
 width: 90px;
}

#sns-group-top img.line-btn-img {
 display: none;
}

#sns-group-top img.line-btn-img-mini {
 display: block;
 height: 20px;
}

#sns-group-top .evernote-btn-img {
 display: none;
}

#sns-group-top .evernote-btn-img-mini {
 display: block;
 height: 20px;
 width: auto;
}


/**
 * SNSページフォロー
 */

.sns-follow-msg {
 margin: 8px 0 0;
 font-size: medium;
}

.sns-share-msg {
 margin-bottom: 0;
 font-size: medium;
}

#header .sns-follow-msg {
 display: none;
}

#header .snsp {
 margin: 0 0 15px;
}

.snsp {
 margin: 10px 0 15px;
 padding-left: 0;
}

.snsp li {
 display: inline;
 margin-right: 5px;
}

.snsp li a {
 color: #666;
 font-size: 19px;
 line-height: 1.7;
}


/**
 * ロゴのアイコンフォントに関する設定(フォローボタン等で使用)
 */

#container ul.snsp li a:hover {
 color: #fff;
}

.snsp li {
 display: inline-block;
 margin-right: 5px;
}

.snsp li a {
 color: #fff;
}

.snsp li a span {
 display: block;
 padding: 0;
 width: 33px;
 height: 33px;
 font-size: 33px;
 background-color: #666;
 background-position: 3px 5px;
 background-repeat: no-repeat;
 border-radius: 4px;
 z-index: 1;
 overflow: hidden;
}

.snsp li a span.icon-feedly-square,
.snsp li a span.icon-hatebu-square,
.snsp li a span.icon-line-square,
.snsp li a span.icon-push7-square {
 position: relative;
 font-size: 34px;
}

.snsp li.twitter-page a span:hover {
 background-color: #55acee;
}

.snsp li.facebook-page a span:hover {
 background-color: #3b5998;
}

.snsp li.google-plus-page a span:hover {
 background-color: #dd4b39;
}

.snsp li.instagram-page a span:hover {
 background-color: #3f729b;
}

.snsp li.hatebu-page a span:hover {
 background-color: #3C7DD1;
}

.snsp li.pinterest-page a span:hover {
 background-color: #cc2127;
}

.snsp li.youtube-page a span:hover {
 background-color: #e52d27;
}

.snsp li.flickr-page a span:hover {
 background-color: #1d1d1d;
}

.snsp li.feedly-page a span:hover {
 background-color: #87bd33;
}

.snsp li.push7-page a span:hover {
 background-color: #eeac00;
}

.snsp li.line-page a span:hover {
 background-color: #00c300;
}

.snsp li.rss-page a span:hover {
 background-color: #fe9900;
}

.snsp li.feedly-page a img {
 margin-bottom: -3px;
 width: 32.5px;
 height: 32.5px;
 border-width: 0;
 border-radius: 7px;
}

#footer .snsp li a span {
 background-color: transparent;
}


/**
 * シェアバー
 */

#sharebar {
 margin: -50px 0 0 -110px;
 position: fixed;
 padding: 0;
 width: 90px;
 background: none repeat scroll 0 0 #FFF;
 text-align: center;
 border: 1px solid #CCC;
 z-index: 99;
}

#sharebar ul.snsb-balloon li {
 margin-left: 15px;
 margin-bottom: 10px;
}

#sharebar ul li {
 display: block;
 margin: 5px;
 padding: 0;
 text-align: center;
 float: none;
 overflow: hidden;
}

#sharebar ul li div {
 margin: auto;
}

#sharebar .comments-balloon-btn {
 margin-left: 15px;
 margin-bottom: 10px;
}

#sharebar .sns-share-msg {
 display: none;
}

#sharebar a {
 text-decoration: none;
}


/**
 * 自作のバルーンシェアボタン
 */

.balloon-btn-set {
 display: block;
 width: 60px;
 height: 63px;
}

.balloon-btn-set a {
 display: block;
 color: #777;
 font-size: 14px;
}

.balloon-btn-set a.twitter-arrow-box-link .fa-comments {
 color: #aaa;
 font-size: 13px;
}

a.arrow-box-link {
 display: block;
 font-family: Arial;
 font-weight: bold;
 font-size: 14px;
 text-align: center;
}

a.evernote-arrow-box-link {
 font-weight: normal;
}

a.arrow-box-link:hover {
 color: #555;
}

a.balloon-btn-link {
 display: block;
 position: relative;
 top: 4px;
 width: 58px;
 height: 20px;
 color: white;
 line-height: 22px;
 text-align: center;
 border: 1px solid #ddd;
 border-radius: 3px;
}

a.balloon-btn-link span {
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate3d(-50%, -50%, 0);
 transform: translate3d(-50%, -50%, 0);
}

a.balloon-btn-link:hover {
 opacity: 0.7;
}

a.twitter-balloon-btn-link {
 background-color: #55acee;
}

a.facebook-balloon-btn-link {
 background-color: #3b5998;
}

a.googleplus-balloon-btn-link {
 background-color: #dd4b39;
}

a.hatena-balloon-btn-link {
 background-color: #3C7DD1;
}

a.pocket-balloon-btn-link {
 background-color: #EE4257;
}

a.line-balloon-btn-link {
 background-color: #00c300;
}

a.evernote-balloon-btn-link {
 background-color: #51b125;
}

a.feedly-balloon-btn-link {
 background-color: #87bd33;
}

a.push7-balloon-btn-link {
 background-color: #eeac00;
}

a.comments-balloon-btn-link {
 background-color: #555;
}

.arrow-box {
 display: inline-block;
 position: relative;
 width: 58px;
 height: 33px;
 background: #fff;
 line-height: 33px;
 text-align: center;
 border: 1px solid #bbb;
 border-radius: 3px;
}

.arrow-box:after,
.arrow-box:before {
 content: " ";
 position: absolute;
 top: 100%;
 left: 50%;
 width: 0;
 height: 0;
 border: solid transparent;
 pointer-events: none;
}

.arrow-box:after {
 margin-left: -3px;
 border-width: 3px;
 border-color: rgba(255, 255, 255, 0);
 border-top-color: #fff;
}

.arrow-box:before {
 margin-left: -5px;
 border-width: 5px;
 border-color: rgba(187, 187, 187, 0);
 border-top-color: #ddd;
}


/**
 * 旧Twitterボタンのような見た目を再現
 */

.twitter-balloon-btn-defalt .balloon-btn-set {
 display: block;
 width: 65px;
 height: 63px;
}

.twitter-balloon-btn-defalt .balloon-btn-link {
 position: relative;
 width: 65px;
}

.twitter-balloon-btn-defalt .arrow-box {
 width: 65px;
}

.twitter-balloon-btn-defalt .twitter-balloon-btn-link .tweet-label {
 font: 11px "Helvetica Neue", Arial, sans-serif;
 vertical-align: 25%;
}

#sns-group-top .twitter-balloon-btn-defalt .balloon-btn-set {
 margin-bottom: 0;
 width: 100px;
}

#sns-group-top .twitter-balloon-btn-defalt .balloon-btn-link {
 width: 65px;
}

#sns-group-top .twitter-balloon-btn-defalt .arrow-box {
 width: 25px;
}


/**
  * タイトル下SNSボタン
  * オリジナルの読み込み位置にあわせるため
  * 分離したものの後のブロック
  */

.page #sns-group-top {
 display: none;
}

#sns-group-top ul {
 padding: 0;
 line-height: 20px;
}

#sns-group-top ul li {
 margin-top: 2px;
 margin-bottom: 2px;
}

#sns-group-top .balloon-btn-set {
 display: block;
 width: 87px;
 height: 22px;
}

#sns-group-top .balloon-btn-set span {
 line-height: 18px;
}

#sns-group-top .arrow-box-link {
 line-height: 1;
 text-align: center;
}

#sns-group-top .balloon-btn-link {
 top: 0;
 width: 28px;
 line-height: 1;
 float: left;
}

#sns-group-top .arrow-box {
 position: relative;
 width: 50px;
 height: 20px;
 background: #fff;
 line-height: 20px;
 border: 1px solid #bbb;
 float: right;
}

#sns-group-top .arrow-box:after,
#sns-group-top .arrow-box:before {
 content: " ";
 position: absolute;
 top: 50%;
 left: auto;
 right: 100%;
 width: 0;
 height: 0;
 border: solid transparent;
 pointer-events: none;
}

#sns-group-top .arrow-box:after {
 margin-top: -3px;
 border-color: rgba(255, 255, 255, 0);
 border-width: 3px;
 border-right-color: #fff;
}

#sns-group-top .arrow-box:before {
 margin-top: -4px;
 border-color: rgba(119, 119, 119, 0);
 border-width: 4px;
 border-right-color: #bbb;
}

#sns-group-top .sns-share-msg {
 display: none;
}

#sns-group-top .twitter-btn {
 width: 100px;
}

#sns-group-top .facebook-btn {
 width: 110px;
}

#sns-group-top .google-plus-btn {
 margin-top: -2px;
 width: 70px;
}

#sns-group-top .pocket-btn {
 width: 95px;
}

#sns-group-top .evernote-btn-img {
 display: none;
}

#sns-group-top .evernote-btn-img-mini {
 display: block;
 width: auto;
 height: 20px;
}


/**
 * バイラルボタン
 */

.sns-group-viral {
 margin-bottom: 5px;
}

.sns-group-viral .snsb li {
 margin-right: 1%;
 width: 24%;
}

.sns-group-viral .snsb li a {
 position: relative;
 margin-bottom: 5px;
 width: 100%;
 height: 45px;
 font-size: 16px;
 line-height: 35px;
 text-align: center;
 border-radius: 3px;
}

.sns-group-viral .snsbs li a .social-count {
 bottom: 2px;
 background-color: transparent;
 font-size: 12px;
 font-weight: bold;
}

.sns-group-viral .social-icon::after {
 position: relative;
 top: -2px;
 margin-left: 7px;
 font-family: arial;
}

.sns-group-viral .fa-comment:after {
 top: -2px;
 top: 0;
}

.sns-group-viral .icon-twitter:after {
 content: 'Twitter';
}

.sns-group-viral .icon-facebook:after {
 content: 'Facebook';
}

.sns-group-viral .icon-googleplus:after {
 content: 'Google+';
}

.sns-group-viral .icon-hatena:after {
 content: 'Hatena';
}

.sns-group-viral .icon-pocket:after {
 content: 'Pocket';
}

.sns-group-viral .icon-line:after {
 content: 'Line';
}

.sns-group-viral .icon-evernote:after {
 content: 'Evernote';
}

.sns-group-viral .icon-feedly:after {
 content: 'Feedly';
}

.sns-group-viral .icon-push7:after {
 content: 'Push';
}

.sns-group-viral .fa-comment:after {
 content: 'Comment';
}

#sharebar .sns-group-viral .snsb li {
 width: 100%;
}

#sharebar .sns-group-viral .snsb li a {
 width: 68px;
}

#sharebar .sns-group-viral .social-icon:after {
 display: none;
}


/**
 * Push7通知ボタンのスタイル
 */

.snsb .p7-b > .p7-left,
.snsb .p7-b > .p7-top {
 border-color: #bbb;
 color: #777;
 font-family: Arial;
 font-weight: bold;
 font-size: 14px;
 text-align: center;
}

.snsb .p7-b > .p7-left {
 margin-left: 6px;
}

.snsb .p7-b > .p7-top {
 margin-bottom: 4px;
 padding: 0;
 height: 33px;
 line-height: 33px;
}

#sharebar .snsb .p7-b > .p7-top {
 margin-bottom: 4px;
}

.push7-balloon-btn .p7-b > a {
 padding: 2px 4px;
 border: 1px solid #ddd;
}

.push7-balloon-btn .p7-b > a > span {
 font-size: 12px;
}

.push7-balloon-btn .p7-b > a:hover {
 opacity: 0.7;
}

.facebook-save-button {
 margin: 1em 0;
}

.widget-under-sns-buttons.widget_facebook_save_button .main-widget-label {
 margin: 1em 0;
 display: block;
}

.fb-like iframe {
 max-width: none;
}
            
          
!
999px
Loading ..................

Console