@charset "UTF-8";

/*!
Theme Name:  World Financial Strategy
Template:    simplicity2
Description: World Financial Strategyオリジナルテーマ。
Theme URI:   http://wfs.jp/
Author:      Asuka
Author URI:  http://wfs.jp/
Version:     1.0
Tags:        near future,
             two-columns,
             right-sidebar,
             flexible-width
*/

/************************************
** Web fonts
************************************/

@font-face {
	font-family: 'Sony_Sketch_EF'; 
	src: url('webfonts/Sony_Sketch_EF/Sony_Sketch_EF.woff') format('woff'), url('webfonts/Sony_Sketch_EF/Sony_Sketch_EF.eot') format('eot'), url('webfonts/Sony_Sketch_EF/Sony_Sketch_EF.ttf') format('truetype'); 
}

@font-face {
    font-family: 'Noto Sans Japanese';
    src: url('webfonts/NotoSansJP/NotoSansJP-DemiLight.woff') format('woff');
}

@font-face {
    font-family: 'GenShinGothic';
    src: url('webfonts/GenShinGothic/GenShinGothic-Normal.woff') format('woff');
}

/************************************
** HTML5 reset css
************************************/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-family:  'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3','GenShinGothic','Noto Sans Japanese','Lucida Grande', Meiryo, メイリオ, sans-serif;
	vertical-align: baseline;
	background: transparent;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, section {
	display: block;
}

ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

a {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	background: transparent;
	cursor: pointer;
}

ins {
	background-color: #ff9;
	color: #000;
	text-decoration: none;
}

img {
 	vertical-align: bottom;
}

mark {
	background-color: #ff9;
	color: #000;
	font-style: italic;
	font-weight: bold;
}

del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	border-bottom: 1px dotted #000;
	cursor: help;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

code {
	font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}

input, select {
	vertical-align: middle;
}

kbd {
    border-radius: 6px;
    color: #555;
    background: #f0f2f5;
    display: inline-block;
    min-width: 12px;
    padding: 0 6px;
    margin: 0 2px 0;
    box-shadow: 0 0 3px #c3c3c3 inset, 0 2px 0px rgba(228,228,228,.5);
    font: normal 0.8em arial;
    text-align: center;
    line-height: 1.6;
    vertical-align: text-bottom;
}

/****************************************************************************
*****************************************************************************
** ページ全体の骨格のスタイル
*****************************************************************************
****************************************************************************/

/*===============================================
             screen width => 1,000px
===============================================*/

@media screen and (min-width: 1000px){

body {
	/*background:	linear-gradient(#ffffff, #eeffff);*/
	/*background: url(./images/background-image.jpg) center center / cover no-repeat fixed;*/
	/*background-color: #001028;*/
}

#body {
	margin: 0 auto;
	width: 1000px;
	height: 100%;
	box-shadow: 0px 0px 10px 0px #333333;
}

}

/*===============================================
             screen width < 1,000px
===============================================*/

@media screen and (max-width: 999px){

body {
	background:	linear-gradient(#ffffff, #eeffff);
	overflow-x: hidden;/*iPhone謎の余白対策*/
}

#body {
	width: 100%;
	height: 100%;
	box-shadow: 0px 0px 10px 0px #333333;
	overflow-x: hidden;/*iPhone謎の余白対策*/
}

}

#text_wrapper {
	margin: 0 0.5%;
	width: 99%;
	height: 100%;
}

#text_wrapper:after {
	content: "";
	position: absolute;
	right: 0;
	background-repeat: y-repeat;
}

#text_area {
	position:relative;
	height: 100%;
	background-color: rgba(255,255,255,0.97);
}

#main {
	float: none;
	width: 100%;
	padding-left: 10px;
	padding-right: 330px;
	margin-bottom: 0;
	box-sizing: border-box;
}

#side {
	position:absolute;
	top:0;
	right:0;
	width:300px;
	padding: 20px 10px;
}

@media screen and (max-width:768px){
	#main {
	padding-right: 10px;
	}
	#side {
	width: 100%;
	box-sizing: border-box;
	position: relative;
	}
	#toc_container_side {
	display: none;
	}
}
}

@media screen and (max-width:740px){
	#main {
	padding: 10px;
	}
}

/*
article {
	width: auto;
	padding: 10px 0px;
}
*/

/************************************
** header style
************************************/

header {
	width: 100%;
}

#locus_of_the_ellipse {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
}

#top_logo {
	position: absolute;
	left: 0.5%;
	width: 10%;
}

nav li {
	width: 10%;
}

.contents_img {
	position: absolute;
	left: 9.4%;
	width: 90.6%;
	height: auto;
	display: none;
}

#top_logo img, nav img, #page_top img {
	width: 100%;
	height: auto;
}


.header_icon {
	position: absolute;
	top: 25px;
	left: 785px;
	height: 32px;
}

.header_icon li {
	float: left;
	margin-left: 9px;
}

#top_title a {
	position: absolute;
	left: 12%;
	width: 88%;
	font-family: 'Sony_Sketch_EF';
	font-weight: bold;
	color: #ffffff;
	text-decoration: none;
}

nav li {
	position: relative;
	display: inline-block;
	cursor: pointer;
	z-index: 1;
	transition: transform ease-out 0.1s, background 0.2s;
}


nav li:before {
	speak: none;
	display: block;
}

nav li:after {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0;
	z-index: -1;
	pointer-events: none;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	content: '';
	box-sizing: content-box;
	box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
	opacity: 0;
	transform: scale(0.9);
}

html:not(.touch_device) nav li:hover {
	transform: scale(0.93);
}

html:not(.touch_device) nav li:hover:after {
	animation: sonarEffect 0.6s ease-out 0 infinite;
}

@keyframes sonarEffect {
	0% {
		opacity: 0.3;
	}
	40% {
		opacity: 0.5;
		box-shadow: 0 0 0 5px rgba(255,255,255,0.5), 0 0 10px 10px rgba(255,255,255,0.1), 0 0 0 10px rgba(255,255,255,0.5);
	}
	100% {
		box-shadow: 0 0 0 5px rgba(255,255,255,0.5), 0 0 10px 10px rgba(255,255,255,0.1), 0 0 0 10px rgba(255,255,255,0.5);
		transform: scale(1.5);
		opacity: 0;
	}
}

#topnav1 {
    position: absolute;
	left: 19.9%;   
}

#topnav2 {
    position: absolute;
	left: 10.9%;   
}

#topnav3 {
    position: absolute;
	left: 5.5%;   
}

#topnav4 {
    position: absolute;
	left: 4.9%;   
}

#topnav5 {
    position: absolute;
	left: 9.9%;   
}


/************************************
** footer style
************************************/

#mainfooter {
	margin: 0 0.5%;
	width: 100%;
	color: #ffffff;
	line-height: 0;
}

/************************************
** #page_top style
************************************/

#page_top {
	position:fixed;
	display:none;
	right: 10px;
	bottom: 10px;
  	cursor: pointer;
}

#page_top img:hover {
	opacity: 0.8;
}


/************************************
** General purpose style
************************************/

.center {
	text-align: center;
}

.left {
	text-align: left;
}

.right {
	text-align: right;
}

.clear {
	clear: both;
}

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

.relative {
	position: relative;
}

.inline-block {
	display: inline-block;
}

html:not(.touch_device) a:hover img:not(.nontp) {
	opacity: 0.8;
}

.article table {
	border-collapse: separate;
	border: none;
	position: relative; /*.noiseのポインターちらつき防止の記述(staticでは×)*/
	margin: 1px;
	overflow: hidden;
	/*margin: 15px 0;
    border: 1px solid #999999;
    background-color: #ffffff;*/
}

.article th, .article td {
	border-top: none;
	border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
	border-left: none;
    padding: 3px 5px;
}

.article tbody tr:last-child th, .article tbody tr:last-child td {
	border-bottom: none;
}

.article tr th:last-child, .article  td:last-child {
	border-right: none;
}

.article table thead tr:first-child th:first-child {
	border-radius: 3px 0 0 0; /*IE対策(IE11でもこれがないと角丸テーブルにならない)*/
}

.article table thead tr:first-child th:last-child {
	border-radius: 0 3px 0 0; /*IE対策(IE11でもこれがないと角丸テーブルにならない)*/
}

.article table tbody tr:last-child th:first-child {
	border-radius: 0 0 0 3px; /*IE対策(IE11でもこれがないと角丸テーブルにならない)*/
}

.article table tbody tr:last-child th:last-child {
	border-radius: 0 0 3px 0; /*IE対策(IE11でもこれがないと角丸テーブルにならない)*/
}

.article th {
    color: #ffffff;
    /*background-color: #336699;*/
    background-color: rgba(25,31,101,0.85);
    text-align: center;
    font-weight: bold;
}

tr:nth-child(even) {
    background-color: rgba(255,255,255,0.7)
}

#the-content ol{
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding: 0.5em 1em;
	/*background-image: linear-gradient(45deg, #f8f8ff 25%, transparent 25%, transparent 75%, #f8f8ff 75%, #f8f8ff), linear-gradient(-45deg, #f8f8ff 25%, transparent 25%, transparent 75%, #f8f8ff 75%, #f8f8ff);*/
	/*background-image: linear-gradient(to bottom right, #aadcff, #d0e4fa);*/
	/*background-size: 20px 20px;*/
	/*background-color: #f8f8ff;
  margin: 30px 0;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7);
	border: 1px rgb(66,132,199) solid;
  border-radius: 5px;*/
}

#the-content ol li{
  position: relative;
  line-height: 30px;
  padding: 0.5em 0.5em 0.5em 35px;
}

#the-content ol li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*以下数字のデザイン変える*/
  display:inline-block;
  background: url("images/list_background.png") center center / 30px 30px no-repeat;
  color: white;
  text-shadow:1px 0 0 #666, 1px 1px 0 #666, 0 1px 0 #666, -1px 1px 0 #666, -1px 0 0 #666, -1px -1px 0 #666, 0 -1px 0 #666, 1px -1px 0 #666;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  /*font-weight:bold;*/
  font-size: 18px;
  border-radius: 50%;
  left: 0;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align:center;
  /*以下 上下中央寄せのため
  top: 50%;
  -moz-transform: translateY(-50%);
  	-webkit-transform: translateY(-50%);
  	-o-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);*/

}

#the-content > div > ul {
  /*padding: 0.5em 1em 0.5em 2.3em;*/
  padding: 0.5em 1em;
  /*background: #fafafa;
  border: solid 1px whitesmoke;
  box-shadow: 0px 0px 3px silver;*/
}

#the-content > div > ul li {
  position: relative;
  line-height: 30px;
  /*padding: 0.5em 0;*/
  padding: 0.5em 0.5em 0.5em 35px;
}

#the-content > div > ul li:before {
  font-family: FontAwesome;
  content: "\f0da";
  position: absolute;
  display:inline-block;
  background: url("images/list_background.png") center center / 30px 30px no-repeat;
  color: white;
  text-shadow:1px 0 0 #666, 1px 1px 0 #666, 0 1px 0 #666, -1px 1px 0 #666, -1px 0 0 #666, -1px -1px 0 #666, 0 -1px 0 #666, 1px -1px 0 #666;
  font-weight:bold;
  font-size: 24px;
  border-radius: 50%;
  left: 0;
  width: 30px;
  height: 30px;
  line-height: 30px;
  /*text-align:center;　←これでは綺麗に中心に来ない*/
  text-indent: 11px;
}

/* #the-content ul とした場合、目次内の ul にも適用されてしまう問題解決用の上書き start 

#toc_container ul {
  box-shadow: none;
  border: none;
  padding: 0;
  position: static;
  background: trnsparent;
}

#toc_container ul li {
  line-height: normal;
  padding: 0;
}

#toc_container ul li:before {
  content: "";
  position: static;
  left : 0;
}

/* #the-content ul の上書き end */

#the-content dl{
   /*border: 5px #eeeeff solid;*/
   padding: 20px;
}

#the-content dt{
  font-size : 15px;
  font-weight : bold;
  margin-bottom : 10px;
  border-bottom-width : 1px;
  border-bottom-style : solid;
  border-bottom-color : rgba(25,31,101,0.85);
  border-left-width : 7px;
  border-left-style : solid;
  border-left-color : rgba(25,31,101,0.85);
  padding-top : 2px;
  padding-left : 8px;
  padding-bottom : 2px;
}

#the-content dd{
  font-size : 80%;
  line-height : 1.8;
  margin-bottom : 45px;
  border-bottom-width : 1px;
  border-bottom-style : solid;
  border-bottom-color : rgb(37,119,255);
  /*border-bottom-color : rgb(88,170,255);*/
  padding-left : 30px;
  padding-right : 15px;
}

#the-content dd:last-child {
  margin-bottom : 25px;
}

.article figure {
    text-align: center;/* 記事先頭のアイキャッチ画像が横幅いっぱいでない時、中央寄せにする */
}

strong.stred {
	background-image: linear-gradient(transparent 60%, #fec9b5 50%);
}

strong.stgreen {
	background-image: linear-gradient(transparent 60%, #c9feb5 50%);
}

strong.stblue {
	background-image: linear-gradient(transparent 60%, #b5c9fe 50%);
}

.circle {
	background-color: #ffffff;
	border-radius: 50%;
}

.r32 {
	width: 32px;
	height: 32px;
	background-color: #ffffff;
	border-radius: 16px;
}

.r100 {
	width: 100px;
	height: 100px;
	background-color: #ffffff;
	border-radius: 50%;
}

.r150 {
	width: 150px;
	height: 150px;
	background-color: #ffffff;
	border-radius: 50%;
}

.thumbnail {
	position: relative;
	overflow: hidden;
}

.thumbnail img {
	position: absolute;
}

.thumbnail.r100 img, .thumbnail.r150 img {
	border-radius: 50%;
}

.metalframe {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}


/****************************************************************************
*****************************************************************************
** #main style
*****************************************************************************
****************************************************************************/

/************************************
** メインカラムのスタイル
************************************/

#breadcrumb {
	margin-bottom: 0px;
}

.article h1 {
	margin-top: 0px;
	margin-bottom: 10px;
}

/*
.article h2 {
	margin-left: 0;
	margin-right: 0;
	color: #ffffff;
	border: 1px rgb(51,104,164) solid;
	border-radius: 5px;
    background: linear-gradient(to bottom, rgb(138,181,231) 0%, rgb(59,120,189) 50%, rgb(124,173,230) 100%);
}
*/

.article h2 {
	margin-left: 0;
	margin-right: 0;
	padding: 10px;
	color: #ffffff;
	border: 1px rgb(66,132,199) solid;
	border-radius: 5px;
    background: linear-gradient(to bottom, rgb(174,215,247) 0%, rgb(75,152,221) 50%, rgb(155,206,245) 100%);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7);
}

.article h3 {
    box-sizing: border-box;
    font-size: 16pt;
    padding: 3px 0 3px 10px;
    color: #ffffff;
    border: 1px #466E81 solid;
    background: linear-gradient(to bottom, #40687b 0%, #8bb3c7 100%);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
	border-radius: 5px;
    margin: 25px 0 25px 0;
}

.article h2 a,
.article h3 a {
	color: #ffffff;
}

.article h4 {
    box-sizing: border-box;
    font-size: 14pt;
    padding: 0 0 0 10px;
    color: #111111;
    background: linear-gradient(to bottom, #dddddd 0%, #ffffff 40%, #dddddd 80%, #eeeeee 100%);
    margin: 25px 0 25px 0;
    border-radius: 15px;
}

.nohx {
  position: relative;
  margin: 1.2em 0;
  padding: .5em .75em;
  background-color: rgb(174,215,247);
  border-radius: 6px;
  box-shadow: 2px 2px 4px rgba(255, 255, 255, .5) inset;
}

.nohx::after {
  position: absolute;
  top: 98%;
  left: 30px;
  content: '';
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top: 15px solid rgb(174,215,247);
}

.post-meta{
	background: linear-gradient(to right, #163970, #2379c0, #163970);
	color:#fff;
	border-radius: 5px;
}

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

.entry .post-meta a:hover,.post-meta a:hover {
	color:#ff0;
}

.adsbygoogle {
	background-color: transparent;
}


/****************************************************************************
*****************************************************************************
** display_like style
*****************************************************************************
****************************************************************************/

/************************************
** common setting
************************************/

div[class^='display_like'] {
	margin-bottom: 30px;
	box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}

/*
div[class^='display_like'] *:not(div[class^="noise"]) {
	z-index: 99;
}
*/

div[class^="noise"] {
    width: 100%;
    height: 3px;
    position: absolute;
    left: 0px;
    bottom: -5px;
}

div[class^="noiseL"] {
    height: 7px;
}

/*
.noise1{
	animation: noise 2.5s linear 0s infinite normal;
}
.noise2{
	animation: noise 2.5s linear 0.5s infinite normal;
}
.noise3{
	animation: noise 2.5s linear 1s infinite normal;
}
.noise4{
	animation: noise 2.5s linear 1.5s infinite normal;
}
.noise5{
	animation: noise 2.5s linear 2s infinite normal;
}
div.noise6{
    height: 7px;
	animation: noise 2s linear 1.5s infinite normal;
}
*/

@keyframes noise {
	0%   {bottom: 0}
	100% {bottom: 100%}
}


/************************************
** display_like_gray style
************************************/

.display_like_gray {
    color: #ffffff;
    border: 1px rgba(68,68,68,0.8) solid;
    background-color: rgba(113,113,113,0.9);
	animation: inner_glow_gray 1.25s ease-in-out infinite alternate;
}

@keyframes inner_glow_gray {
	0%   {box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255,255,255,0.7), inset 0 0 20px 0 rgba(255,255,255,1)}
	100% {box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255,255,255,0.7), inset 0 0 40px 0 rgba(255,255,255,1)}
}

.display_like_gray div[class^="noise"] {
    background: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 100%);
}

/*
.display_like_gray {
    color: rgba(51,51,51,0.9);
	padding: 5px 10px 5px 10px;
    border-radius: 5px;
    border: 1px rgba(68,68,68,0.9) solid;
	background-image: linear-gradient(rgba(173,173,173,0.1) 0%, rgba(173,173,173,0.1) 50%, rgba(173,173,173,0.3) 50%, rgba(173,173,173,0.3) 100%);
	background-size: 1px 2px;
    position: relative;
    overflow: hidden;
	animation: inner_glow_gray 1.25s ease-in-out infinite alternate;
}

@keyframes inner_glow_gray {
	0%   {box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7), inset 0 0 20px 0 rgba(255,255,255,1)}
	100% {box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7), inset 0 0 60px 0 rgba(255,255,255,1)}
}

.display_like_gray div[class^="noise"] {
    background: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0) 100%);
}
*/


/************************************
** display_like_blue style
************************************/

.display_like_blue {
    color: rgba(51,51,51,0.9);
    border: 1px rgba(37,119,255,0.9) solid;
    background-color: rgba(30,230,255,0.1);
    /*box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7), inset 0 0 50px 0 rgba(37,119,255,0.5);*/
	animation: inner_glow_blue 1.25s ease-in-out infinite alternate;
}

@keyframes inner_glow_blue {
	0%   {box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7), inset 0 0 20px 0 rgba(37,119,255,1)}
	100% {box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7), inset 0 0 40px 0 rgba(37,119,255,1)}
}

.display_like_blue div[class^="noise"] {
    background: linear-gradient(to top, rgba(37,119,255,0) 0%, rgba(37,119,255,0.02) 50%, rgba(37,119,255,0) 100%);
}


/************************************
** display_like_orange style
************************************/

.display_like_orange {
    color: rgba(51,51,51,0.9);
    border: 1px rgba(255,119,37,0.9) solid;
    background-color: rgba(255,139,37,0.9);
	animation: inner_glow_orange 1.25s ease-in-out infinite alternate;
}

@keyframes inner_glow_orange {
	0%   {box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7), inset 0 0 20px 0 rgba(255,255,255,1)}
	100% {box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7), inset 0 0 40px 0 rgba(255,255,255,1)}
}

.display_like_orange div[class^="noise"] {
    background: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0) 100%);
}


/************************************
** display_like_green style
************************************/

.display_like_green {
    color: rgba(51,51,51,0.9);
    border: 1px rgba(37,255,119,0.9) solid;
    background-color: rgba(30,255,230,0.1);
	animation: inner_glow_green 1.25s ease-in-out infinite alternate;
}

@keyframes inner_glow_green {
	0%   {box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7), inset 0 0 20px 0 rgba(37,255,119,1)}
	100% {box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7), inset 0 0 40px 0 rgba(37,255,119,1)}
}

.display_like_green div[class^="noise"] {
    background: linear-gradient(to top, rgba(37,255,119,0) 0%, rgba(37,255,119,0.02) 50%, rgba(37,255,119,0) 100%);
}


/************************************
** display_like_purple style
************************************/

.display_like_purple {
    color: rgba(51,51,51,0.9);
    border: 1px rgba(230,119,230,0.9) solid;
    background-color: rgba(255,30,255,0.1);
	animation: inner_glow_purple 1.25s ease-in-out infinite alternate;
}

@keyframes inner_glow_purple {
	0%   {box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7), inset 0 0 20px 0 rgba(230,119,230,1)}
	100% {box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7), inset 0 0 40px 0 rgba(230,119,230,1)}
}

.display_like_purple div[class^="noise"] {
    background: linear-gradient(to top, rgba(230,119,230,0) 0%, rgba(230,119,230,0.02) 50%, rgba(230,119,230,0) 100%);
}


/************************************
** .article blockquoteのスタイル(休止中)


.article blockquote {
	padding: 8% 8% 8%;
	position: relative;
}

.article blockquote:before,
.article blockquote:after {
	font-family:'FontAwesome';
	position:absolute;
	width:1em;
	height:1em;
	display:block;
	padding: .2em;
	text-align:center;
	font-size: 32pt;
	line-height:1;
	color: #ffffff;
	animation: bq_glow 1.25s ease-in-out infinite alternate;
}

@keyframes bq_glow {
	0%   {text-shadow: 0 0 5px rgba(255,255,255,0.6)}
	100% {text-shadow: 0 0 15px rgba(255,255,255,1)}
}

.article blockquote:before {
	content:'\f10d';
	left: 0;
	top: -.1em;
}

.article blockquote:after {
	content:'\f10e';
	right: 0;
	bottom: -.2em;
}

.article blockquote cite{
	font-size: 0.9em;
	margin: 0 15px;
	display: inline-block;
}

.article blockquote a{
	color: #ffff99;
}

************************************/

/************************************
** 外部リンクボックス.linkのスタイル
************************************/
.article .link {
	position:relative;
	margin-bottom:20px;
	padding:30px;
	border: 1px #cccccc solid;
	border-radius: 5px;
	color:#666;
	background:#F6F6F6;
	word-break:break-all
}

.article .link:before {
	position:absolute;
	font-family:FontAwesome;
	content:"\f08e";
	top:4px;
	left:13px;
	color:#999999;
	font-size:20px;
}

.article .link a {
	color:#888
}

.article .link a:hover {
	text-decoration: none;
}

@media only screen and (max-width:768px){
.article .link {
	padding:20px
}
.article .link :before {
	top:0;
	left:5px
}
}

/************************************
** 参考、出典
************************************/

blockquote {
    position: relative;
    padding: 10px 50px;
    background-color: #f8f8f8;
    box-sizing: border-box;
    border: solid 2px #464646;
    border-radius: 15px;
    color: #464646;
}

blockquote::before, blockquote::after {
    display: inline-block;
    position: absolute;
    font-family: FontAwesome;
    color: #77c0c9;
    font-size: 25px;
    line-height: 1;
    font-weight: 900;
}

blockquote::before {
    top: 20px;
    left: 15px;
    content: "\f10d";
}

blockquote::after {
    bottom: 20px;
    right: 15px;
    content: "\f10e";
}

.reference, .quote {
	/*background-image: linear-gradient(transparent 60%, #fec9b5 50%);*/
    margin: 1em 0 1em 50px;
    position:relative;
    font-size: 75%;
    text-indent: 0; /*"article p"に対する"text-indent: 1em;"の上書き*/
}

.reference::before, .quote::before {
	height:18px;
    line-height: 18px;
	position:absolute;
	left: -50px;
	top:50%;
	margin-top:-12px;
	border-radius: 6px;
    padding: 3px 6px;
    color: white;
	box-shadow: 0 0 3px #ddd;
}

.reference::before {
	background-color:#04B404;
	content:"参考";
}

.quote::before {
	background-color:#0404B4;
	content:"引用";
}

cite {
    font-size: inherit;
}

cite a {
    font-size: inherit;
}

/************************************
** 以下CJ氏サイトから転用テスト中
************************************/

.sample, .check, .in_link, .ex_link {
	position: relative; /*.noiseのポインターちらつき防止の記述(staticでは×)*/
	padding: 2em;
}

.article .check, .article .check a {
	color: #ffffff;
}

.article .check p:last-child,
.article .in_link p:last-child,
.article .ex_link p:last-child {
  margin-bottom: 0;
}

.article .check:before,
.article .in_link:before,
.article .ex_link:before {
	position:absolute;
	font-family:FontAwesome;
	top:0.3em;
	left:0.4em;
	font-size:1.5em;
}

.article .check:before {
	content:"\f046";
	color:#ffffff;
}

.article .in_link:before {
	content:"\f0c1";
	color:#33cc55;
}

.article .ex_link:before {
	content:"\f08e";
	/*color:#e677e6;*/
	color:#cc55cc;
}

.article .ex_link {
	transition: transform 0.5s linear;
}

.box_title {
	width: 100%;
	height: 30px;
    /*box-shadow: 0 -2px rgba(0,0,0,0.4), 0 2px rgba(0,0,0,0.4);*/
	text-align: center;
	text-shadow: 1px 1px 2px #ffffff, 1px -1px 2px #ffffff, -1px 1px 2px #ffffff, -1px -1px 2px #ffffff;
	/*background: linear-gradient(to right, rgba(51,51,51,0.05) 0%,rgba(200,200,200,0.05) 20%,rgba(200,200,200,0.05) 80%,rgba(51,51,51,0.05) 100%);*/
    background: linear-gradient(to right, rgba(0,0,0,0.05) 0%,rgba(128,128,128,0.05) 20%,rgba(128,128,128,0.05) 80%,rgba(0,0,0,0.05) 100%);
	transition: transform 1s linear;
}

body:not(.touch_device) .box_title:hover {
	transform: rotateX(45deg);
}

.box_title:before,
.box_title:after {
	content: "";
	display: block;
	height: 1px;
	width: 100%;
	background: linear-gradient(to right, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0.8) 20%,rgba(255,255,255,0.8) 80%,rgba(255,255,255,0.3) 100%);
}

/************************************
** app紹介ボックス
************************************/

.app_intro {
	margin: 30px 0;
	border: 2px solid #333333;
	border-radius: 10px;
}

.app_image, .app_info {
	float: left;
	padding: 5px;
}

.app_image {
	box-sizing: border-box;
	width: 30%;
}

.app_info {
	box-sizing: border-box;
	width: 70%;
}

.app_image img {
	width: 100%;
	height: auto;
}

/************************************
** goods紹介ボックス
************************************/

.goods_intro {
	border: 1px solid #333333;
	border-radius: 5px;
}

.goods_image, .goods_info {
	float: left;
	padding: 5px;
}

.goods_image {
	box-sizing: border-box;
	width: 30%;
}

.goods_info {
	box-sizing: border-box;
	width: 70%;
}

.goods_image img {
	width: 100%;
	height: auto;
}

/************************************
** アイキャッチ
************************************/
.eye-catch{
  line-height: 100%;
  margin-left: 0;
  margin-bottom: 30px;
}

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


/************************************
** 評価用★のスタイル
************************************/

img[src$='star_full.png'],
img[src$='star_half.png'],
img[src$='star_empty.png'] {
	width: 24px;
	height: 24px
}


/************************************
** 「この記事を書いた人」のスタイル
************************************/

.author-box {
    position: relative;
    margin: 10px 0;
    padding: 10px;
	background: #FFF;
    border: solid 2px #000;
}
.author-box p {

    padding: 0;
}

.author-box a {
	font-weight: bold;
	color: #e8554e;
}

.author-box .author-box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 15px;
    background: #000;
    color: #ffffff;
    font-weight: normal;
}

.author-box-img {
    position: relative;
	overflow: visible;
	border-radius: 50%;
  float:left;
  width: 150px;
  height: 150px;
  margin-right: 10px;
}

.author-box-img img {
	border-radius: 50%;
  width: 100%;
  height: 100%;
}

html:not(.touch_device) .author-box a img:not(.metalframe) {
	transition:transform 0.2s;
}

html:not(.touch_device) .author-box a:hover img:not(.metalframe) {
	transform: scale(0.9);
}


/************************************
** sns follow button style(side)
************************************/

.snsfollowwrap {
    line-height: 0;
}

/*twitter*/

.snsfollow {
  position: relative;
  border-radius: 50%;
  display: inline-block;
  width: 25%;
  max-width: 100px;
  height: auto;
  overflow: hidden;
}

.snsfollow:before {
  content:"";
  display: block;
  padding-top: 100%; /* .snsfollowの高さを幅の100%(イコール)に固定 */
}

.snsfollow > div {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

html:not(.touch_device) .snsfollow div {
	transition:transform 0.2s;
}

html:not(.touch_device) .snsfollow:hover div {
	transform: scale(0.9);
}

.snsfollow .twicon{
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 146%;
  vertical-align: middle;
  text-align: center;
  color: #FFF;
  background: #1da1f3;
}

/*Facebook*/

.snsfollow .fbicon{
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 100%;
  line-height: 170%;
  vertical-align: middle;
  color: #FFF;
  background: #4966a0;
}

.fbicon .fa-facebook {
    position: absolute;
    bottom: -6%;
    right: 12%;
}

/*Instagram*/

.snsfollow .insta{
  border-radius: 50%;
  position: absolute;
  transform: translateZ(0);/*Chrome,Safari等のバグ対応の記述。これがないと:beforeのグラデーションがはみ出る。https://stackoverflow.com/questions/16687023/bug-with-transform-scale-and-overflow-hidden-in-chrome参照。*/
  top: 0;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 100%;
  line-height: 146%;
  vertical-align: middle;
  text-align: center;
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  overflow: hidden;
}

.snsfollow .insta:before{
  content: '';
  position: absolute;
  top: 46%;
  left: -36%;
  width: 120%;
  height: 120%;
  background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
  background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
}

.snsfollow .fa-instagram {
  color: #ffffff;
  line-height: 50%;
  position: relative;
  z-index: 2
}

/*YouTube*/

.snsfollow .youtube{
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 100%;
  line-height: 170%;
  text-align: center;
  vertical-align: middle;
  color: #FFF;
  background: #ff0000;
}

/************************************
** SyntaxHighlighter style
************************************/

.syntaxhighlighter a,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody,
.syntaxhighlighter table thead,
.syntaxhighlighter table caption,
.syntaxhighlighter textarea {
  -moz-border-radius: 0 0 0 0 !important;
  -webkit-border-radius: 0 0 0 0 !important;
  background: none !important;
  border: 0 !important;
  bottom: auto !important;
  float: none !important;
  height: auto !important;
  left: auto !important;
  /*line-height: 1.1em !important;*/
  line-height: 1.2em !important;/*20200425 標準は以下のnormalだが、テキストに日本語を含むとと行番号とコードの高さが崩れるためこちらに*/
  /*line-height: normal !important;*/
  margin: 0 !important;
  outline: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  position: static !important;
  right: auto !important;
  text-align: left !important;
  top: auto !important;
  /*vertical-align: baseline !important;*/
  width: auto !important;
  box-sizing: content-box !important;
  font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 1em !important;
  min-height: inherit !important;
  min-height: auto !important;
}

.syntaxhighlighter {
  /*margin: 1em 0 1em 0 !important;*/
  margin: 0;
  position: relative !important;
  overflow: auto !important;
  font-size: 1em !important;
  line-height: 1.1em !important;
  vertical-align: baseline !important; 
  /*background-color: white !important;*/
  /*border: solid 2px #aaa !important;*/
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -o-border-radius: 5px;
 -ms-border-radius: 5px;
  border-radius: 5px;
}
.syntaxhighlighter.source {
  overflow: hidden !important;
}
.syntaxhighlighter .bold {
  font-weight: bold !important;
}
.syntaxhighlighter .italic {
  font-style: italic !important;
}
.syntaxhighlighter .line {
  white-space: pre !important;
}
.syntaxhighlighter table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}
.syntaxhighlighter table caption {
  text-align: left !important;
  padding: .5em 0 0.5em 1em !important;
}
.syntaxhighlighter table td.code {
  width: 100% !important;
}
.syntaxhighlighter table td.code .container {
  position: relative !important;
}
.syntaxhighlighter table td.code .container::before,
.syntaxhighlighter table td.code .container::after {
  display: none !important;
}
.syntaxhighlighter table td.code .container textarea {
  box-sizing: border-box !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  background: white !important;
  padding-left: 1em !important;
  overflow: hidden !important;
  white-space: pre !important;
}
.syntaxhighlighter table td.gutter .line {
  text-align: right !important;
  padding: 0 0.5em 0 1em !important;
}
.syntaxhighlighter table td.code .line {
  padding: 0 1em !important;
}
.syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line {
  padding-left: 0em !important;
}
.syntaxhighlighter.show {
  display: block !important;
}
.syntaxhighlighter.collapsed table {
  display: none !important;
}

.syntaxhighlighter.collapsed .toolbar {
  padding: 0.1em 0.8em 0em 0.8em !important;
  font-size: 1em !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
}
.syntaxhighlighter.collapsed .toolbar span {
  display: inline !important;
  margin-right: 1em !important;
}
.syntaxhighlighter.collapsed .toolbar span a {
  padding: 0 !important;
  display: none !important;
}
.syntaxhighlighter.collapsed .toolbar span a.expandSource {
  display: inline !important;
}
.syntaxhighlighter .toolbar {
	display: none;
  position: absolute !important;
  right: 1px !important;
  top: 1px !important;
  width: 11px !important;
  height: 11px !important;
  font-size: 10px !important;
  z-index: 10 !important;
  color: white !important;
  background: #6ce26c !important;
  border: none !important;
}

.syntaxhighlighter .toolbar span.title {
  display: inline !important;
}
.syntaxhighlighter .toolbar a {
  color: white !important;
  display: block !important;
  text-align: center !important;
  text-decoration: none !important;
  padding-top: 1px !important;
}

.syntaxhighlighter .toolbar a:hover {
  color: black !important;
}

.syntaxhighlighter .toolbar a.expandSource {
  display: none !important;
}
.syntaxhighlighter.ie {
  font-size: .9em !important;
  padding: 1px 0 1px 0 !important;
}
.syntaxhighlighter.ie .toolbar {
  line-height: 8px !important;
}
.syntaxhighlighter.ie .toolbar a {
  padding-top: 0px !important;
}
.syntaxhighlighter.printing .line.alt1 .content,
.syntaxhighlighter.printing .line.alt2 .content,
.syntaxhighlighter.printing .line.highlighted .number,
.syntaxhighlighter.printing .line.highlighted.alt1 .content,
.syntaxhighlighter.printing .line.highlighted.alt2 .content {
  background: none !important;
}
.syntaxhighlighter.printing .line .number {
  color: #bbbbbb !important;
}
.syntaxhighlighter.printing .line .content {
  color: black !important;
  border: none !important;
}

.syntaxhighlighter.printing .toolbar {
  display: none !important;
}
.syntaxhighlighter.printing a {
  text-decoration: none !important;
}
.syntaxhighlighter.printing .plain, .syntaxhighlighter.printing .plain a {
  color: black !important;
}
.syntaxhighlighter.printing .comments, .syntaxhighlighter.printing .comments a {
  color: #008200 !important;
}
.syntaxhighlighter.printing .string, .syntaxhighlighter.printing .string a {
  color: blue !important;
}
.syntaxhighlighter.printing .keyword {
  color: #006699 !important;
  font-weight: bold !important;
}
.syntaxhighlighter.printing .preprocessor {
  color: gray !important;
}
.syntaxhighlighter.printing .variable {
  color: #aa7700 !important;
}
.syntaxhighlighter.printing .value {
  color: #009900 !important;
}
.syntaxhighlighter.printing .functions {
  color: #ff1493 !important;
}
.syntaxhighlighter.printing .constants {
  color: #0066cc !important;
}
.syntaxhighlighter.printing .script {
  font-weight: bold !important;
}
.syntaxhighlighter.printing .color1, .syntaxhighlighter.printing .color1 a {
  color: gray !important;
}
.syntaxhighlighter.printing .color2, .syntaxhighlighter.printing .color2 a {
  color: #ff1493 !important;
}
.syntaxhighlighter.printing .color3, .syntaxhighlighter.printing .color3 a {
  color: red !important;
}
.syntaxhighlighter.printing .break, .syntaxhighlighter.printing .break a {
  color: black !important;
}

.syntaxhighlighter .line.alt1 {
  /*background-color: #fafafa !important;*/
  border-bottom: solid 1px #ddd !important;
}
.syntaxhighlighter .line.alt2 {
  /*background-color: white !important;*/
  background-color: rgba(255,255,255,0.7) !important;
  border-bottom: solid 1px #ddd !important;
}

.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
  background-color: rgba(255,224,224,0.9) !important;
}

.syntaxhighlighter .line.highlighted.number {
  color: black !important;
}
.syntaxhighlighter table caption {
  color: black !important;
}

.syntaxhighlighter .gutter {
  color: #afafaf !important;
  letter-spacing: 0 !important;
}
.syntaxhighlighter .gutter .line {
  border-right: 3px solid #6af !important;
}

.syntaxhighlighter .gutter .line.highlighted {
  /*background-color: #ffd0d0 !important;*/
  background-color: rgba(255,224,224,0.9) !important;
  color: #993333 !important;
}

.syntaxhighlighter.collapsed {
  overflow: visible !important;
}

.syntaxhighlighter.collapsed .toolbar {
  color: blue !important;
  background: white !important;
  border: 1px solid #6ce26c !important;
}

.syntaxhighlighter.collapsed .toolbar a {
  color: blue !important;
}

.syntaxhighlighter.collapsed .toolbar a:hover {
  color: red !important;
}

.syntaxhighlighter .plain, .syntaxhighlighter .plain a {
  color: black !important;
}
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
  color: #008200 !important;
}
.syntaxhighlighter .string, .syntaxhighlighter .string a {
  color: blue !important;
}
.syntaxhighlighter .keyword {
  color: #006699 !important;
  font-weight: bold !important;
}

.syntaxhighlighter .preprocessor {
  color: gray !important;
}
.syntaxhighlighter .variable {
  color: #aa7700 !important;
}
.syntaxhighlighter .value {
  color: #009900 !important;
}
.syntaxhighlighter .functions {
  color: #ff1493 !important;
}
.syntaxhighlighter .constants {
  color: #0066cc !important;
}
.syntaxhighlighter .script {
  font-weight: bold !important;
  color: #006699 !important;
  background-color: none !important;
}


.syntaxhighlighter .color1, .syntaxhighlighter .color1 a {
  color: gray !important;
}
.syntaxhighlighter .color2, .syntaxhighlighter .color2 a {
  color: #ff1493 !important;
}
.syntaxhighlighter .color3, .syntaxhighlighter .color3 a {
  color: red !important;
}

.syntaxhighlighter .line:last-child {
	border-bottom: none !important;
}

.syntaxhighlighter .code {
  letter-spacing: 0 !important;
}


/************************************
** table of contents style
************************************/

#toc_container {
	background: #f9f9f9;
	border: 1px solid #aaaaaa;
	padding: 10px;
	margin: 1em 0;
	width: auto;
	display: table;
}

#toc_title {
	text-align: center;
	font-weight: bold;
	cursor: default;
}

#toc_vis {
	font-weight: normal;
	font-size: 0.9em;
}

#toc_toggle {
	color: #0645ad;
	font-size: 0.9em;
	cursor: pointer;
}

#toc_container ul {
	padding-left: 0; /*親テーマnarrow.cssの上書き*/
}

#toc_container ul ul {
	margin-left: 1.5em;
}

#toc > ul {
	margin-top: 0.5em;
}

#toc_container a {
	color: #0645ad;
	text-decoration: none;
	text-shadow: none;
}

html:not(.touch_device) #toc_toggle:hover,html:not(.touch_device) #toc_container a:hover {
	text-decoration: underline;
}


/************************************
** copy to clipboard button style
************************************/

button[id^='copy_'], button[id^='shcopy_'] {
	border: 0;
	margin-left:10px;
	background-color:#3bb3e0;
	font-size:14px;
	font-weight: normal;
	text-decoration:none;
	color:#fff;
	position:relative;
	padding: 0 8px 0 40px;
	background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
	border-radius: 5px;
	box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
	height: 30px;
	top: -5px;
}

button[id^='shcopy_'] {
    margin: 10px 0 20px 0;
}

button[id^='copy_']:active, button[id^='shcopy_']:active {
	top: -2px;
	background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
	box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
}

button[id^='copy_']::before, button[id^='shcopy_']::before {
	background-color: #2591b4;
    font-family: FontAwesome;
    content: "\f0c5";
    color: #ffffff;
	width: 24px;
	height: 24px;
	position: absolute;
	left: 8px;
	top: 3px;
	border-radius: 50%;
	box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 400;
}

button[id^='copy_']:active::before, button[id^='shcopy_']:active::before {
	top: 0px;
	box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
}

/****************************************************************************
*****************************************************************************
** mCustomScrollbar style
** CONTENTS: 
**	1. BASIC STYLE - Plugin's basic/essential CSS properties (normally, should not be edited). 
**	2. VERTICAL SCROLLBAR - Positioning and dimensions of vertical scrollbar. 
**	3. HORIZONTAL SCROLLBAR - Positioning and dimensions of horizontal scrollbar.
**	4. VERTICAL AND HORIZONTAL SCROLLBARS - Positioning and dimensions of 2-axis scrollbars. 
**	5. TRANSITIONS - CSS3 transitions for hover events, auto-expanded and auto-hidden scrollbars. 
**	6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS 
**		6.1 THEMES - Scrollbar colors, opacity, dimensions, backgrounds etc. via ready-to-use themes.
*****************************************************************************
****************************************************************************/

/************************************
** 1. BASIC STYLE
************************************/

	.mCustomScrollbar{ -ms-touch-action: pinch-zoom; touch-action: pinch-zoom; /* direct pointer events to js */ }
	.mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action{ -ms-touch-action: auto; touch-action: auto; }
	
	.mCustomScrollBox{ /* contains plugin's markup */
		position: relative;
		overflow: hidden;
		height: 100%;
		max-width: 100%;
		outline: none;
		direction: ltr;
	}

	.mCSB_container{ /* contains the original content */
		overflow: hidden;
		width: auto;
		height: auto;
	}

/************************************
** 2. VERTICAL SCROLLBAR y-axis
************************************/

	.mCSB_inside > .mCSB_container{ margin-right: 30px; }

	.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; } /* non-visible scrollbar */
	
	.mCS-dir-rtl > .mCSB_inside > .mCSB_container{ /* RTL direction/left-side scrollbar */
		margin-right: 0;
		margin-left: 30px;
	}
	
	.mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-left: 0; } /* RTL direction/left-side scrollbar */

	.mCSB_scrollTools{ /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */
		position: absolute;
		width: 16px;
		height: auto;
		left: auto;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.mCSB_outside + .mCSB_scrollTools{ right: -26px; } /* scrollbar position: outside */
	
	.mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, 
	.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ /* RTL direction/left-side scrollbar */
		right: auto;
		left: 0;
	}
	
	.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ left: -26px; } /* RTL direction/left-side scrollbar (scrollbar position: outside) */

	.mCSB_scrollTools .mCSB_draggerContainer{ /* contains the draggable element and dragger rail markup */
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0; 
		height: auto;
	}

	.mCSB_scrollTools a + .mCSB_draggerContainer{ margin: 20px 0; }

	.mCSB_scrollTools .mCSB_draggerRail{
		width: 2px;
		height: 100%;
		margin: 0 auto;
		-webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px;
	}

	.mCSB_scrollTools .mCSB_dragger{ /* the draggable element */
		cursor: pointer;
		width: 100%;
		height: 30px; /* minimum dragger height */
		z-index: 1;
	}

	.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* the dragger element */
		position: relative;
		width: 4px;
		height: 100%;
		margin: 0 auto;
		-webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px;
		text-align: center;
	}
	
	.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 
	.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 12px; /* auto-expanded scrollbar */ }
	
	.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
	.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 8px; /* auto-expanded scrollbar */ }

	.mCSB_scrollTools .mCSB_buttonUp,
	.mCSB_scrollTools .mCSB_buttonDown{
		display: block;
		position: absolute;
		height: 20px;
		width: 100%;
		overflow: hidden;
		margin: 0 auto;
		cursor: pointer;
	}

	.mCSB_scrollTools .mCSB_buttonDown{ bottom: 0; }


/************************************
** 3. HORIZONTAL SCROLLBAR x-axis
************************************/

	.mCSB_horizontal.mCSB_inside > .mCSB_container{
		margin-right: 0;
		margin-bottom: 30px;
	}
	
	.mCSB_horizontal.mCSB_outside > .mCSB_container{ min-height: 100%; }

	.mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; } /* non-visible scrollbar */

	.mCSB_scrollTools.mCSB_scrollTools_horizontal{
		width: auto;
		height: 16px;
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
	}

	.mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal,
	.mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ bottom: -26px; } /* scrollbar position: outside */

	.mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer{ margin: 0 20px; }

	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail{
		width: 100%;
		height: 2px;
		margin: 7px 0;
	}

	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger{
		width: 30px; /* minimum dragger width */
		height: 100%;
		left: 0;
	}

	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
		width: 100%;
		height: 4px;
		margin: 6px auto;
	}
	
	.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 
	.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{
		height: 12px; /* auto-expanded scrollbar */
		margin: 2px auto;
	}
	
	.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
	.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{
		height: 8px; /* auto-expanded scrollbar */
		margin: 4px 0;
	}

	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft,
	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{
		display: block;
		position: absolute;
		width: 20px;
		height: 100%;
		overflow: hidden;
		margin: 0 auto;
		cursor: pointer;
	}
	
	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft{ left: 0; }

	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{ right: 0; }


/************************************
** 4. VERTICAL AND HORIZONTAL SCROLLBARS yx-axis
************************************/

	.mCSB_container_wrapper{
		position: absolute;
		height: auto;
		width: auto;
		overflow: hidden;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin-right: 30px;
		margin-bottom: 30px;
	}
	
	.mCSB_container_wrapper > .mCSB_container{
		padding-right: 30px;
		padding-bottom: 30px;
		-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	}
	
	.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 20px; }
	
	.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 20px; }
	
	/* non-visible horizontal scrollbar */
	.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 0; }
	
	/* non-visible vertical scrollbar/RTL direction/left-side scrollbar */
	.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal, 
	.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 0; }
	
	/* RTL direction/left-side scrollbar */
	.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 20px; }
	
	/* non-visible scrollbar/RTL direction/left-side scrollbar */
	.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 0; }
	
	.mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper{ /* RTL direction/left-side scrollbar */
		margin-right: 0;
		margin-left: 30px;
	}
	
	.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container{ padding-right: 0; }
	
	.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container{ padding-bottom: 0; }
	
	.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden{
		margin-right: 0; /* non-visible scrollbar */
		margin-left: 0;
	}
	
	/* non-visible horizontal scrollbar */
	.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; }


/************************************
** 5. TRANSITIONS
************************************/

	.mCSB_scrollTools, 
	.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCSB_scrollTools .mCSB_buttonUp,
	.mCSB_scrollTools .mCSB_buttonDown,
	.mCSB_scrollTools .mCSB_buttonLeft,
	.mCSB_scrollTools .mCSB_buttonRight{
		-webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
		-moz-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
		-o-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
		transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
	}
	
	.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, /* auto-expanded scrollbar */
	.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, 
	.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, 
	.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail{
		-webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s, 
					margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 
					margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
					opacity .2s ease-in-out, background-color .2s ease-in-out; 
		-moz-transition: width .2s ease-out .2s, height .2s ease-out .2s, 
					margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 
					margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
					opacity .2s ease-in-out, background-color .2s ease-in-out; 
		-o-transition: width .2s ease-out .2s, height .2s ease-out .2s, 
					margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 
					margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
					opacity .2s ease-in-out, background-color .2s ease-in-out; 
		transition: width .2s ease-out .2s, height .2s ease-out .2s, 
					margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 
					margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
					opacity .2s ease-in-out, background-color .2s ease-in-out; 
	}


/************************************
** 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS
************************************/

	/* 
	----------------------------------------
	6.1 THEMES 
	----------------------------------------
	*/

	/* default theme ("light") */

	.mCSB_scrollTools{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; }
	
	.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
	.mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 0; filter: "alpha(opacity=0)"; -ms-filter: "alpha(opacity=0)"; }
	
	.mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag,
	.mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag,
	.mCustomScrollBox:hover > .mCSB_scrollTools,
	.mCustomScrollBox:hover ~ .mCSB_scrollTools,
	.mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools,
	.mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; }

	.mCSB_scrollTools .mCSB_draggerRail{
		background-color: #000; background-color: rgba(0,0,0,0.4);
		filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; 
	}

	.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		background-color: #fff; background-color: rgba(255,255,255,0.75);
		filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; 
	}

	.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
		background-color: #fff; background-color: rgba(255,255,255,0.85);
		filter: "alpha(opacity=85)"; -ms-filter: "alpha(opacity=85)"; 
	}
	.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
		background-color: #fff; background-color: rgba(255,255,255,0.9);
		filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; 
	}

	.mCSB_scrollTools .mCSB_buttonUp,
	.mCSB_scrollTools .mCSB_buttonDown,
	.mCSB_scrollTools .mCSB_buttonLeft,
	.mCSB_scrollTools .mCSB_buttonRight{
		background-image: url(mCSB_buttons.png); /* css sprites */
		background-repeat: no-repeat;
		opacity: 0.4; filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; 
	}

	.mCSB_scrollTools .mCSB_buttonUp{
		background-position: 0 0;
		/* 
		sprites locations 
		light: 0 0, -16px 0, -32px 0, -48px 0, 0 -72px, -16px -72px, -32px -72px
		dark: -80px 0, -96px 0, -112px 0, -128px 0, -80px -72px, -96px -72px, -112px -72px
		*/
	}

	.mCSB_scrollTools .mCSB_buttonDown{
		background-position: 0 -20px;
		/* 
		sprites locations
		light: 0 -20px, -16px -20px, -32px -20px, -48px -20px, 0 -92px, -16px -92px, -32px -92px
		dark: -80px -20px, -96px -20px, -112px -20px, -128px -20px, -80px -92px, -96px -92px, -112 -92px
		*/
	}

	.mCSB_scrollTools .mCSB_buttonLeft{
		background-position: 0 -40px;
		/* 
		sprites locations 
		light: 0 -40px, -20px -40px, -40px -40px, -60px -40px, 0 -112px, -20px -112px, -40px -112px
		dark: -80px -40px, -100px -40px, -120px -40px, -140px -40px, -80px -112px, -100px -112px, -120px -112px
		*/
	}

	.mCSB_scrollTools .mCSB_buttonRight{
		background-position: 0 -56px;
		/* 
		sprites locations 
		light: 0 -56px, -20px -56px, -40px -56px, -60px -56px, 0 -128px, -20px -128px, -40px -128px
		dark: -80px -56px, -100px -56px, -120px -56px, -140px -56px, -80px -128px, -100px -128px, -120px -128px
		*/
	}

	.mCSB_scrollTools .mCSB_buttonUp:hover,
	.mCSB_scrollTools .mCSB_buttonDown:hover,
	.mCSB_scrollTools .mCSB_buttonLeft:hover,
	.mCSB_scrollTools .mCSB_buttonRight:hover{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; }

	.mCSB_scrollTools .mCSB_buttonUp:active,
	.mCSB_scrollTools .mCSB_buttonDown:active,
	.mCSB_scrollTools .mCSB_buttonLeft:active,
	.mCSB_scrollTools .mCSB_buttonRight:active{ opacity: 0.9; filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; }
	
	/* theme: "minimal-dark" */
	
	.mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{
		right: 0; 
		margin: 12px 0; 
	}
	
	.mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal, 
	.mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{
		bottom: 0; 
		margin: 0 12px; 
	}
	
	/* RTL direction/left-side scrollbar */
	.mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, 
	.mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{
		left: 0; 
		right: auto;
	}
	
	.mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; }
	
	.mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 50px; }

	.mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 50px; }
	
	.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		background-color: #000; background-color: rgba(0,0,0,0.2);
		filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; 
	}
	
	.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
		background-color: #000; background-color: rgba(0,0,0,0.5);
		filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; 
	}


/****************************************************************************
*****************************************************************************
** #side style
*****************************************************************************
****************************************************************************/

/************************************
** profile image style(side)
************************************/

#profileimg {
	position: relative;
	border-radius: 150px;
	overflow: hidden;
}

#sidebar #text-4, #sidebar #text-5, #sidebar #text-6 {
	margin-bottom: 15px;
	width: 300px;
}

/************************************
** wfspedia style(side)
************************************/

#wfspedia_side {
	position: relative;
}

#wfspedia_contents_side {
	position: absolute;
	top: 0;
	right: 0;
	border-radius: 5px;
	overflow: hidden;
}

#wfspedia_contents_side div {
	margin-bottom: 4px;
	background-size: 178px 48px;
	background-repeat: no-repeat;
	width: 168px;
	height: 38px;
	color: #ffffff;
	font-size: 28pt;
	padding: 10px 0 0 10px;
	overflow: hidden;
}

#wfspedia_contents_side div:last-child {
	margin-bottom: 0px;
}

#wfspedia_contents_side_1 {
	background-image: url(http://localhost/wordpress/wp-content/uploads/2017/02/wiki_contents1.png);
}

#wfspedia_contents_side_2 {
	background-image: url(http://localhost/wordpress/wp-content/uploads/2017/02/wiki_contents2.png);
}

#wfspedia_contents_side_3 {
	background-image: url(http://localhost/wordpress/wp-content/uploads/2017/02/wiki_contents3.png);
}


/************************************
** table of contents style(side)
************************************/

#toc_container_side {
/*
	background: #fcfcfc;
	border: 1px solid #aaaaaa;
	padding: 5px 10px 5px 10px;
	width: 100%;
	display: table;
	line-height: 1.6em;
	box-sizing: border-box;
	box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
*/
	width: 100%;
}

#toc_container_side.fixed-side {
	position:fixed;
	top: 10px;
	left: auto;
	box-sizing: border-box;
	width: 300px;
}

#toc_container_side_inner {
	padding: 5px 10px 5px 10px;
}

#toc_title_side {
	text-align: center;
	font-weight: bold;
	cursor: default;
	font-size: 12pt;
}

#toc_container_side ul {
	padding-left: 0;
}

#toc_container_side ul ul {
	margin-left: 0.8em;
}

#toc_container_side a {
	color: #0645ad;
	text-decoration: none;
	text-shadow: none;
	font-size: 11pt;
	position: relative; /*.noiseのポインターちらつき防止の記述(staticでは×)*/
}

#toc_container_side a.active {
	background:#f00;
}

#toc_container_side a:hover {
    border-radius: 5px;
	background: rgba(37,119,255,0.4);
	text-decoration: underline;
}

#toc_container_side a.current {
    border-radius: 5px;
	background: rgba(37,255,119,0.85);
	color:#1B6C50;
	font-weight:bold;
}

#toc_container_side li {
	margin-bottom: 0;
}

#toc_side {
	max-height: 500px;
}

/************************************
** popular_ranking and new_entries style(side)
************************************/

#sidebar .widget_popular_ranking,
#sidebar .widget_new_entries {
	position: relative;
}

#sidebar .widget_popular_ranking h3,
#sidebar .widget_new_entries h3 {
	text-align: center;
	color: #ffffff;
	background:radial-gradient(rgba(18,105,187,1), rgba(166,238,255,0)),
	           linear-gradient(to bottom, #0d2e60 0%, #072b5a 50%, #02244d 50%, #081429 100%);
	margin: 1px 1px 0 1px;
	border-radius: 3px 3px 0 0;
}

#sidebar .widget_popular_ranking,
#sidebar .widget_new_entries,
#sidebar .widget_popular_ranking li,
#sidebar .widget_new_entries li {
    margin-bottom: 0;
}

.widget_new_entries ul li img,
.widget_new_popular ul li img,
.widget_popular_ranking li img {
	margin: 5px;
}

/*人気記事の仕様変更に伴い追加20191110*/
.widget_popular_ranking li img {
    width: 75px;
    height: 75px;
}

/*新着記事のみなぜかこうしないと表示がおかしくなる*/
.widget_new_entries li {
    display: inline-block;
    width: 100%;
}

/*人気記事も表示がおかしくなるようになったので追加20191110*/
.widget_popular_ranking li {
    list-style: none;
    display: inline-block;
    width: 100%;
}

.widget_popular_ranking li:nth-child(even),
.widget_new_entries li:nth-child(even) {
    background-color: rgba(255,255,255,0.7);
}

/****************************************************************************
*****************************************************************************
** ここまで完全自作, 以降、親テーマのCSS上書き・修正等
*****************************************************************************
****************************************************************************/

/************************************
** レイアウト（Layout）
************************************/

#body {
	margin-top: 0px;
}

#main {
	border: none;
	background-color: transparent;
}

div#sidebar {
	padding: 0;
}

/************************************
** index.phpのリスト
************************************/

.entry-thumb{
	position: relative;
	overflow: visible;
	border-radius: 50%;
  float:left;
  margin-right:10px;
  margin-top: 3px;
  margin-left: 0;
}

.entry-thumb a{
	border-radius: 50%;
  display: block;
}

.entry-thumb img{
	/*position: absolute;*/
	top: 0;
	left: 0;
	border-radius: 50%;
  border:0;
  width:150px;
  height:150px;
  display: block;
  /*margin-bottom: 40px;*/
}

html:not(.touch_device) .entry-thumb a img:not(.metalframe) {
	transition:transform 0.2s;
}

html:not(.touch_device) .entry-thumb a:hover img:not(.metalframe) {
	transform: scale(0.9);
}


/************************************
** WordPress Misc
************************************/

img.alignright {
    display: inline-block;
    margin: 0 0 1em 1.5em;
}

img.alignleft {
    display: inline-block;
    margin: 0 1.5em 1em 0;
}

/****************************************************************************
*****************************************************************************
** メタルフレーム付与
*****************************************************************************
****************************************************************************/

/************************************
** 関連記事（Relation）
************************************/
.related-entry{
  line-height:150%;
  margin-bottom:20px;
  margin-right:10px;
  clear: both;
/*  overflow: auto;
  zoom: 1;*/
}

.related-entry-thumb {
	position: relative;
	overflow: visible;
	border-radius: 50%;
  float: left;
  margin-top: 3px;
  margin-bottom: 5px;
  padding-bottom: 5px;
}

.related-entry-thumb a{
	border-radius: 50%;
  display: block;
}

.related-entry-thumb img{
	top: 0;
	left: 0;
	border-radius: 50%;
  border:0;
  width: 100px;
  height: 100px;
  /*margin-bottom: 20px;*/
  display: block;
}

html:not(.touch_device) .related-entry-thumb a img:not(.metalframe) {
	transition:transform 0.2s;
}

html:not(.touch_device) .related-entry-thumb a:hover img:not(.metalframe) {
	transform: scale(0.9);
}


/************************************
** サムネイルつきポストナビ
************************************/

.navigation {
	margin-left: 0;/*サムネイルつきポストナビのボックスがはみ出る問題に対応*/
	margin-right: 0;/*サムネイルつきポストナビのボックスがはみ出る問題に対応*/
}

/*IE10以降に適用されるCSSハック（一応）*/
@media all and (-ms-high-contrast:none){
  #prev-next-home span{
    margin-top: 50px;
  }
}

#prev-next #prev, #prev-next #prev::before, #prev-next #prev::after,
#prev-next #next, #prev-next #next::before, #prev-next #next::after {
  box-sizing: border-box;
/*  -webkit-transition: all .3s;
  transition: all .3s;*/
}

#prev-next #next-title{
  right:10px;
}

#prev-next #prev .metalframe-imgwrap, #prev-next #next .metalframe-imgwrap {
	position: relative;
	overflow: visible;
	border-radius: 50%;
  margin:0 auto;
  width: 100px;
  height: 100px;
}

#prev-next #prev .metalframe-imgwrap img, #prev-next #next .metalframe-imgwrap img {
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50%;
}

#prev-next #prev .metalframe-imgwrap {
  margin-top:10px;
  float:left;
  margin-right:10px
}

#prev-next #next .metalframe-imgwrap {
  margin-top:10px;
   float:right;
   margin-left: 10px;
}

html:not(.touch_device) #prev-next a img:not(.metalframe) {
	transition:transform 0.2s;
}

html:not(.touch_device) #prev-next a:hover img:not(.metalframe) {
	transform: scale(0.9);
}

/************************************
** ブログカードのwidth: 500px(親テーマ)　→　100%
************************************/

.blog-card {
	width: 100%;
}

/************************************
** 人気記事, 新着記事, 内部ブログカード
************************************/

.internal-blog-card {
	border: none;
	margin: 0;
	padding: 20px;
}

.widget_popular_ranking .metalframe-imgwrap,
.new-entry-thumb .metalframe-imgwrap,
.internal-blog-card .metalframe-imgwrap {
	position: relative;
	overflow: visible;
	border-radius: 50%;
}

.widget_popular_ranking a, .new-entry-thumb a, .internal-blog-card a {
	border-radius: 50%;
}

.widget_popular_ranking .metalframe-imgwrap img,
.new-entry-thumb .metalframe-imgwrap img,
.internal-blog-card .metalframe-imgwrap img {
	top: 0;
	left: 0;
	border-radius: 50%;
}

html:not(.touch_device) .widget_popular_ranking a img:not(.metalframe),
html:not(.touch_device) .new-entry-thumb a img:not(.metalframe),
html:not(.touch_device) .internal-blog-card a img:not(.metalframe) {
	transition:transform 0.2s;
}

html:not(.touch_device) .widget_popular_ranking a:hover img:not(.metalframe),
html:not(.touch_device) .new-entry-thumb a:hover img:not(.metalframe),
html:not(.touch_device) .internal-blog-card a:hover img:not(.metalframe) {
	transform: scale(0.9);
}